From 32ce6d0a0e9d314ff46ac75528feb15db7102e62 Mon Sep 17 00:00:00 2001 From: cyril lopez Date: Tue, 20 Mar 2018 16:12:05 +0100 Subject: [PATCH] Clean code --- .../lib/src/components/Wysiwyg/constants.js | 24 +++--- .../lib/src/components/Wysiwyg/helpers.js | 8 ++ .../lib/src/components/Wysiwyg/index.js | 82 +++++-------------- 3 files changed, 37 insertions(+), 77 deletions(-) diff --git a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/constants.js b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/constants.js index 47ec9c4557..2807eed133 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/constants.js +++ b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/constants.js @@ -10,21 +10,17 @@ export const SELECT_OPTIONS = [ export const CONTROLS = [ [ - { label: 'B', style: 'BOLD', className: 'styleButtonBold', hideLabel: true, handler: 'addContent', text: '**innerText**' }, - { label: 'I', style: 'ITALIC', className: 'styleButtonItalic', hideLabel: true, handler: 'addContent', text: '*innerText*' }, - { label: 'U', style: 'UNDERLINE', className: 'styleButtonUnderline', hideLabel: true, handler: 'addContent', text: '__innerText__' }, - { label: 'S', style: 'STRIKED', className: 'styleButtonStrikedOut', hideLabel: true, handler: 'addContent', text: '~~innerText~~' }, - { label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'addUlBlock', text: '- innerText' }, - { label: 'OL', style: 'ordered-list-item', className: 'styleButtonOL', hideLabel: true, handler: 'addOlBlock', text: '1. innerText' }, + { label: 'B', style: 'BOLD', className: 'styleButtonBold', hideLabel: true, handler: 'addContent', text: '**textToReplace**' }, + { label: 'I', style: 'ITALIC', className: 'styleButtonItalic', hideLabel: true, handler: 'addContent', text: '*textToReplace*' }, + { label: 'U', style: 'UNDERLINE', className: 'styleButtonUnderline', hideLabel: true, handler: 'addContent', text: '__textToReplace__' }, + { label: 'S', style: 'STRIKED', className: 'styleButtonStrikedOut', hideLabel: true, handler: 'addContent', text: '~~textToReplace~~' }, + { label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'addUlBlock', text: '- textToReplace' }, + { label: 'OL', style: 'ordered-list-item', className: 'styleButtonOL', hideLabel: true, handler: 'addOlBlock', text: '1. textToReplace' }, ], [ - { label: '<>', style: 'code-block', className: 'styleButtonCodeBlock', hideLabel: true, handler: 'addSimpleBlockWithSelection', text: '```innerText```' }, - { label: 'img', style: 'IMG', className: 'styleButtonImg', hideLabel: true, handler: 'addSimpleBlockWithSelection', text: '![text](innerText)' }, - { label: 'Link', style: 'LINK', className: 'styleButtonLink', hideLabel: true, handler: 'addContent', text: '[text](innerText)' }, - { label: 'quotes', style: 'blockquote', className: 'styleButtonBlockQuote', hideLabel: true, handler: 'addSimpleBlockWithSelection', text: '> innerText' }, + { label: '<>', style: 'code-block', className: 'styleButtonCodeBlock', hideLabel: true, handler: 'addSimpleBlockWithSelection', text: '```textToReplace```' }, + { label: 'img', style: 'IMG', className: 'styleButtonImg', hideLabel: true, handler: 'addSimpleBlockWithSelection', text: '![text](textToReplace)' }, + { label: 'Link', style: 'LINK', className: 'styleButtonLink', hideLabel: true, handler: 'addContent', text: '[text](textToReplace)' }, + { label: 'quotes', style: 'blockquote', className: 'styleButtonBlockQuote', hideLabel: true, handler: 'addSimpleBlockWithSelection', text: '> textToReplace' }, ], ]; - - -export const END_REPLACER = '_*`](link)'; -export const START_REPLACER = '_*-`>#[ ![ 1. '; diff --git a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/helpers.js b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/helpers.js index 23e37a181b..10af5b5d56 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/helpers.js +++ b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/helpers.js @@ -1,3 +1,4 @@ +import { trimEnd, trimStart } from 'lodash'; import styles from './styles.scss'; /** * Override the editor css @@ -74,6 +75,13 @@ export function getBlockContent(style) { } } +export const getDefaultSelectionOffsets = (content, startReplacer, endReplacer, initPosition = 0) => ( + { + anchorOffset: initPosition + content.length - trimStart(content, startReplacer).length, + focusOffset: initPosition + trimEnd(content, endReplacer).length, + } +); + /** * Get the start and end offset * @param {Object} selection diff --git a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js index 125b3b9ffe..93b8aee640 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js @@ -17,10 +17,9 @@ import { RichUtils, SelectionState, } from 'draft-js'; -// import { stateFromMarkdown } from 'draft-js-import-markdown'; import { List } from 'immutable'; import PropTypes from 'prop-types'; -import { isEmpty, isNaN, replace, trimEnd, trimStart, words } from 'lodash'; +import { isEmpty, isNaN, replace, words } from 'lodash'; import cn from 'classnames'; import Controls from 'components/WysiwygInlineControls'; import Drop from 'components/WysiwygDropUpload'; @@ -30,7 +29,7 @@ import WysiwygEditor from 'components/WysiwygEditor'; import request from 'utils/request'; // import { ToggleMode } from './components'; import { CONTROLS, SELECT_OPTIONS } from './constants'; -import { getBlockContent, getBlockStyle, getOffSets } from './helpers'; +import { getBlockContent, getBlockStyle, getDefaultSelectionOffsets, getOffSets } from './helpers'; import styles from './styles.scss'; /* eslint-disable react/jsx-handler-names */ @@ -91,44 +90,30 @@ class Wysiwyg extends React.Component { */ setInitialValue = (props) => { const contentState = ContentState.createFromText(props.value); - let editorState = EditorState.createWithContent(contentState); - - // Get the cursor at the end - editorState = EditorState.moveFocusToEnd(editorState); - this.setState({ editorState, hasInitialValue: true, initialValue: props.value }); + const editorState = EditorState.createWithContent(contentState); + this.setState({ editorState: EditorState.moveFocusToEnd(editorState), hasInitialValue: true, initialValue: props.value }); } addContent = (content, style) => { - const editorState = this.getEditorState(); const selectedText = this.getSelectedText(); const { innerContent, endReplacer, startReplacer } = getBlockContent(style); - const defaultContent = selectedText === '' ? replace(content, 'innerText', innerContent) : replace(content, 'innerText', selectedText); + const defaultContent = selectedText === '' ? replace(content, 'textToReplace', innerContent) : replace(content, 'textToReplace', selectedText); + const cursorPosition = getOffSets(this.getSelection()).start; + const textWithEntity = Modifier.replaceText(this.getEditorState().getCurrentContent(), this.getSelection(), defaultContent); + const { anchorOffset, focusOffset } = getDefaultSelectionOffsets(defaultContent, startReplacer, endReplacer, cursorPosition); + const updatedSelection = this.getSelection().merge({ anchorOffset, focusOffset }); + const newEditorState = EditorState.push(this.getEditorState(), textWithEntity, 'insert-character'); // Don't handle selection if (selectedText !== '') { - const textWithEntity = Modifier.replaceText(editorState.getCurrentContent(), this.getSelection(), defaultContent); - const newEditorState = EditorState.push(editorState, textWithEntity, 'insert-characters'); - return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState), }, () => { this.focus(); }); } - const cursorPosition = getOffSets(this.getSelection()).start; - const textWithEntity = Modifier.replaceText(editorState.getCurrentContent(), this.getSelection(), defaultContent); - const anchorOffset = cursorPosition - trimStart(defaultContent, startReplacer).length + defaultContent.length; - const focusOffset = cursorPosition + trimEnd(defaultContent, endReplacer).length; - const updatedSelection = this.getSelection().merge({ - anchorOffset, - focusOffset, - }); - const newEditorState = EditorState.push(editorState, textWithEntity, 'insert-character'); - - return this.setState({ - editorState: EditorState.forceSelection(newEditorState, updatedSelection), - }); + return this.setState({ editorState: EditorState.forceSelection(newEditorState, updatedSelection) }); } addOlBlock = () => { @@ -156,32 +141,19 @@ class Wysiwyg extends React.Component { const newEditorState = this.createNewEditorState(newContentState, text); return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) }); - } addSimpleBlockWithSelection = (content, style) => { const selectedText = this.getSelectedText(); const { innerContent, endReplacer, startReplacer } = getBlockContent(style); - const defaultContent = selectedText === '' ? replace(content, 'innerText', innerContent) : replace(content, 'innerText', selectedText); + const defaultContent = selectedText === '' ? replace(content, 'textToReplace', innerContent) : replace(content, 'textToReplace', selectedText); const newBlock = this.createNewBlock(defaultContent); const newContentState = this.createNewContentStateFromBlock(newBlock); - const anchorOffset = defaultContent.length - trimStart(defaultContent, startReplacer).length; - const focusOffset = trimEnd(defaultContent, endReplacer).length; + const { anchorOffset, focusOffset } = getDefaultSelectionOffsets(defaultContent, startReplacer, endReplacer); let newEditorState = this.createNewEditorState(newContentState, defaultContent); - let updatedSelection = new SelectionState({ - anchorKey: newBlock.getKey(), - anchorOffset, - focusOffset, - focusKey: newBlock.getKey(), - isBackward: false, - }); - - if (getOffSets(this.getSelection()).start === 0) { - updatedSelection = this.getSelection().merge({ - anchorOffset, - focusOffset, - }); - } + const updatedSelection = getOffSets(this.getSelection()).start === 0 ? + this.getSelection().merge({ anchorOffset, focusOffset }) + : new SelectionState({ anchorKey: newBlock.getKey(), anchorOffset, focusOffset, focusKey: newBlock.getKey(), isBackward: false }); newEditorState = EditorState.acceptSelection(newEditorState, updatedSelection); @@ -203,14 +175,7 @@ class Wysiwyg extends React.Component { return newEditorState; } - createNewBlock = (text = '', type = 'unstyled', key = genKey()) => ( - new ContentBlock({ - key, - type, - text, - charaterList: List([]), - }) - ); + createNewBlock = (text = '', type = 'unstyled', key = genKey()) => new ContentBlock({ key, type, text, charaterList: List([]) }); createNewBlockMap = (newBlock, contentState) => contentState.getBlockMap().set(newBlock.key, newBlock); @@ -234,17 +199,11 @@ class Wysiwyg extends React.Component { getCurrentAnchorKey = () => this.getSelection().getAnchorKey(); - getCurrentBlockMap = () => this.getEditorState().getCurrentContent().getBlockMap().toJS(); - getCurrentContentBlock = () => this.getEditorState().getCurrentContent().getBlockForKey(this.getSelection().getAnchorKey()); getNextBlockKey = (currentBlockKey) => this.getEditorState().getCurrentContent().getKeyAfter(currentBlockKey); - getSelectedText = () => { - const { start, end } = getOffSets(this.getSelection()); - - return this.getCurrentContentBlock().getText().slice(start, end); - } + getSelectedText = ({ start, end } = getOffSets(this.getSelection())) => this.getCurrentContentBlock().getText().slice(start, end); handleChangeSelect = ({ target }) => { this.setState({ headerValue: target.value }); @@ -288,10 +247,7 @@ class Wysiwyg extends React.Component { const link = `![text](${response[0].url})`; const newBlock = this.createNewBlock(link); const newContentState = this.createNewContentStateFromBlock(newBlock); - const newEditorState = EditorState.push( - editorState, - newContentState, - ); + const newEditorState = EditorState.push(editorState, newContentState); this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) }); })