yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-02 13:58:18 +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 = [ 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: 'I', style: 'ITALIC', className: 'styleButtonItalic', handler: 'addEntity', text: '*innerText*' },
{label: 'U', style: 'UNDERLINE', handler: 'addEntity', text: '<u>innerText</u>' }, {label: 'U', style: 'UNDERLINE', handler: 'addEntity', text: '<u>innerText</u>' },
{label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'addEntity', text: '- innerText' }, {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, // CompositeDecorator,
ContentState, ContentState,
convertFromHTML, convertFromHTML,
convertFromRaw,
// convertToRaw, // convertToRaw,
Editor, Editor,
EditorState, EditorState,
getDefaultKeyBinding, getDefaultKeyBinding,
Modifier, Modifier,
RichUtils, RichUtils,
SelectionState,
} from 'draft-js'; } from 'draft-js';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { cloneDeep, isEmpty, replace } from 'lodash'; import { cloneDeep, isEmpty, replace, trimStart, trimEnd } from 'lodash';
import cn from 'classnames'; import cn from 'classnames';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -74,26 +76,38 @@ class Wysiwyg extends React.Component {
addEntity = (text, style) => { addEntity = (text, style) => {
const editorState = this.state.editorState; const editorState = this.state.editorState;
const currentContent = editorState.getCurrentContent(); const currentContent = editorState.getCurrentContent();
// Get the selected text // Get the selected text
const selection = editorState.getSelection(); const selection = editorState.getSelection();
const anchorKey = selection.getAnchorKey(); const anchorKey = selection.getAnchorKey();
const currentContentBlock = currentContent.getBlockForKey(anchorKey); const currentContentBlock = currentContent.getBlockForKey(anchorKey);
// Range of the text we want to replace
const start = selection.getStartOffset(); const start = selection.getStartOffset();
const end = selection.getEndOffset(); const end = selection.getEndOffset();
const selectedText = currentContentBlock.getText().slice(start, end); const selectedText = currentContentBlock.getText().slice(start, end);
const innerText = selectedText === '' ? getInnerText(style) : replace(text, 'innerText', selectedText); 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 textWithEntity = Modifier.replaceText(currentContent, selection, innerText);
const newEditorState = EditorState.push(editorState, textWithEntity, 'insert-characters');
this.setState({ this.setState({
editorState: EditorState.push(editorState, textWithEntity, 'insert-characters'), editorState: EditorState.forceSelection(newEditorState, updateSelection),
headerValue: '', headerValue: '',
}, () => { }, () => {
this.focus(); this.focus();
}); });
} }
getStartOffset = (text) => text.split('innerText')[0].length;
handleChangeSelect = ({ target }) => { handleChangeSelect = ({ target }) => {
this.setState({ headerValue: target.value }); this.setState({ headerValue: target.value });
const splitData = target.value.split('.'); const splitData = target.value.split('.');
@ -121,6 +135,7 @@ class Wysiwyg extends React.Component {
} }
return; return;
} }
return getDefaultKeyBinding(e); return getDefaultKeyBinding(e);
} }