yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-01 13:29:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add forceSelection, handle B, I , U, code block

Browse Source
This commit is contained in:
cyril lopez 2018-03-13 20:47:57 +01:00
parent 43fe22a88b
commit 0cd6f1cedf
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-helper-plugin/lib/src/components/Wysiwyg/constants.js
View File

@ -25,7 +25,7 @@ export const CONTROLS = [
export const NEW_CONTROLS = [
[
{label: 'B', style: 'BOLD', handler: 'addEntity', text: '__innerText__' },
{label: 'B', style: 'BOLD', handler: 'addEntity', text: '**innerText**' },
{label: 'I', style: 'ITALIC', className: 'styleButtonItalic', handler: 'addEntity', text: '*innerText*' },
{label: 'U', style: 'UNDERLINE', handler: 'addEntity', text: '<u>innerText</u>' },
{label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'addEntity', text: '- innerText' },

23
packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js
View File

@ -9,15 +9,17 @@ import {
// CompositeDecorator,
ContentState,
convertFromHTML,
convertFromRaw,
// convertToRaw,
Editor,
EditorState,
getDefaultKeyBinding,
Modifier,
RichUtils,
SelectionState,
} from 'draft-js';
import PropTypes from 'prop-types';
import { cloneDeep, isEmpty, replace } from 'lodash';
import { cloneDeep, isEmpty, replace, trimStart, trimEnd } from 'lodash';
import cn from 'classnames';
import { FormattedMessage } from 'react-intl';
@ -74,26 +76,38 @@ class Wysiwyg extends React.Component {
addEntity = (text, style) => {
const editorState = this.state.editorState;
const currentContent = editorState.getCurrentContent();
// Get the selected text
const selection = editorState.getSelection();
const anchorKey = selection.getAnchorKey();
const currentContentBlock = currentContent.getBlockForKey(anchorKey);
// Range of the text we want to replace
const start = selection.getStartOffset();
const end = selection.getEndOffset();
const selectedText = currentContentBlock.getText().slice(start, end);
const innerText = selectedText === '' ? getInnerText(style) : replace(text, 'innerText', selectedText);
// Replace it with the value
// TODO const value to trim
const innerTextLength = trimStart(innerText, '*<u></u>-`').length;
const focusOffset = start === end ? trimEnd(innerText, '*</u>`').length : start + trimEnd(innerText, '*</u>`').length;
const anchorOffset = start + innerText.length - trimStart(innerText, '*<u>-`').length;
const updateSelection = selection.merge({
anchorOffset,
focusOffset,
});
const textWithEntity = Modifier.replaceText(currentContent, selection, innerText);
const newEditorState = EditorState.push(editorState, textWithEntity, 'insert-characters');
this.setState({
editorState: EditorState.push(editorState, textWithEntity, 'insert-characters'),
editorState: EditorState.forceSelection(newEditorState, updateSelection),
headerValue: '',
}, () => {
this.focus();
});
}
getStartOffset = (text) => text.split('innerText')[0].length;
handleChangeSelect = ({ target }) => {
this.setState({ headerValue: target.value });
const splitData = target.value.split('.');
@ -121,6 +135,7 @@ class Wysiwyg extends React.Component {
}
return;
}
return getDefaultKeyBinding(e);
}