mirror of
https://github.com/strapi/strapi.git
synced 2025-12-26 14:44:31 +00:00
Clean code
This commit is contained in:
cyril lopez
parent
9b08f159ee
commit
32ce6d0a0e
@ -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: '' },
|
||||
{ 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: '' },
|
||||
{ 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 = '_*</u>`](link)';
|
||||
export const START_REPLACER = '_*<u>-`>#[ ![ 1. ';
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 = ``;
|
||||
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) });
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user