gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Slate to 0.29.0

Browse Source
This commit is contained in:
Shawn Erquhart
2017-11-16 12:36:48 -05:00
parent c9e97b5c7e
commit 63d2b09b09
8 changed files with 76 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js
View File

@ -10,19 +10,19 @@ export default class RawEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: Plain.deserialize(this.props.value || ''),
value: Plain.deserialize(this.props.value || ''),
};
}
shouldComponentUpdate(nextProps, nextState) {
return !this.state.editorState.equals(nextState.editorState);
return !this.state.value.equals(nextState.value);
}
handleChange = change => {
if (!this.state.editorState.document.equals(change.state.document)) {
if (!this.state.value.document.equals(change.value.document)) {
this.handleDocumentChange(change);
}
this.setState({ editorState: change.state });
this.setState({ value: change.value });
};
/**
@ -30,7 +30,7 @@ export default class RawEditor extends React.Component {
* text (which is Markdown) and pass that up as the new value.
*/
handleDocumentChange = debounce(change => {
const value = Plain.serialize(change.state);
const value = Plain.serialize(change.value);
this.props.onChange(value);
}, 150);
@ -62,7 +62,7 @@ export default class RawEditor extends React.Component {
</Sticky>
<Slate
className="nc-rawEditor-rawEditor"
state={this.state.editorState}
value={this.state.value}
onChange={this.handleChange}
onPaste={this.handlePaste}
/>

52
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { get, isEmpty, debounce } from 'lodash';
import { State, Document, Block, Text } from 'slate';
import { Value, Document, Block, Text } from 'slate';
import { Editor as Slate } from 'slate-react';
import { slateToMarkdown, markdownToSlate, htmlToSlate } from '../../serializers';
import registry from '../../../../../lib/registry';
@ -21,15 +21,15 @@ export default class Editor extends Component {
const rawDoc = this.props.value && markdownToSlate(this.props.value);
const rawDocHasNodes = !isEmpty(get(rawDoc, 'nodes'))
const document = Document.fromJSON(rawDocHasNodes ? rawDoc : emptyRawDoc);
const editorState = State.create({ document });
const value = Value.create({ document });
this.state = {
editorState,
value,
shortcodePlugins: registry.getEditorComponents(),
};
}
shouldComponentUpdate(nextProps, nextState) {
return !this.state.editorState.equals(nextState.editorState);
return !this.state.value.equals(nextState.value);
}
handlePaste = (e, data, change) => {
@ -41,22 +41,22 @@ export default class Editor extends Component {
return change.insertFragment(doc);
}
hasMark = type => this.state.editorState.activeMarks.some(mark => mark.type === type);
hasBlock = type => this.state.editorState.blocks.some(node => node.type === type);
hasMark = type => this.state.value.activeMarks.some(mark => mark.type === type);
hasBlock = type => this.state.value.blocks.some(node => node.type === type);
handleMarkClick = (event, type) => {
event.preventDefault();
const resolvedChange = this.state.editorState.change().focus().toggleMark(type);
const resolvedChange = this.state.value.change().focus().toggleMark(type);
this.ref.onChange(resolvedChange);
this.setState({ editorState: resolvedChange.state });
this.setState({ value: resolvedChange.value });
};
handleBlockClick = (event, type) => {
event.preventDefault();
let { editorState } = this.state;
const { document: doc, selection } = editorState;
let { value } = this.state;
const { document: doc, selection } = value;
const { unwrapList, wrapInList } = EditListConfigured.changes;
let change = editorState.change();
let change = value.change();
// Handle everything except list buttons.
if (!['bulleted-list', 'numbered-list'].includes(type)) {
@ -66,10 +66,10 @@ export default class Editor extends Component {
// Handle the extra wrapping required for list buttons.
else {
const isSameListType = editorState.blocks.some(block => {
const isSameListType = value.blocks.some(block => {
return !!doc.getClosest(block.key, parent => parent.type === type);
});
const isInList = EditListConfigured.utils.isSelectionInList(editorState);
const isInList = EditListConfigured.utils.isSelectionInList(value);
if (isInList && isSameListType) {
change = change.call(unwrapList, type);
@ -83,15 +83,15 @@ export default class Editor extends Component {
const resolvedChange = change.focus();
this.ref.onChange(resolvedChange);
this.setState({ editorState: resolvedChange.state });
this.setState({ value: resolvedChange.value });
};
hasLinks = () => {
return this.state.editorState.inlines.some(inline => inline.type === 'link');
return this.state.value.inlines.some(inline => inline.type === 'link');
};
handleLink = () => {
let change = this.state.editorState.change();
let change = this.state.value.change();
// If the current selection contains links, clicking the "link" button
// should simply unlink them.
@ -106,7 +106,7 @@ export default class Editor extends Component {
if (!url) return;
// If no text is selected, use the entered URL as text.
if (change.state.isCollapsed) {
if (change.value.isCollapsed) {
change = change
.insertText(url)
.extend(0 - url.length);
@ -118,19 +118,19 @@ export default class Editor extends Component {
}
this.ref.onChange(change);
this.setState({ editorState: change.state });
this.setState({ value: change.value });
};
handlePluginSubmit = (plugin, shortcodeData) => {
const { editorState } = this.state;
const { value } = this.state;
const data = {
shortcode: plugin.id,
shortcodeData,
};
const nodes = [Text.create('')];
const block = { kind: 'block', type: 'shortcode', data, isVoid: true, nodes };
let change = editorState.change();
const { focusBlock } = change.state;
let change = value.change();
const { focusBlock } = change.value;
if (focusBlock.text === '') {
change = change.setNodeByKey(focusBlock.key, block);
@ -141,7 +141,7 @@ export default class Editor extends Component {
change = change.focus();
this.ref.onChange(change);
this.setState({ editorState: change.state });
this.setState({ value: change.value });
};
handleToggle = () => {
@ -156,17 +156,17 @@ export default class Editor extends Component {
};
handleDocumentChange = debounce(change => {
const raw = change.state.document.toJSON();
const raw = change.value.document.toJSON();
const plugins = this.state.shortcodePlugins;
const markdown = slateToMarkdown(raw, plugins);
this.props.onChange(markdown);
}, 150);
handleChange = change => {
if (!this.state.editorState.document.equals(change.state.document)) {
if (!this.state.value.document.equals(change.value.document)) {
this.handleDocumentChange(change);
}
this.setState({ editorState: change.state });
this.setState({ value: change.value });
};
render() {
@ -202,7 +202,7 @@ export default class Editor extends Component {
</Sticky>
<Slate
className="nc-visualEditor-editor"
state={this.state.editorState}
value={this.state.value}
renderNode={renderNode}
renderMark={renderMark}
validateNode={validateNode}

4
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/keys.js
View File

@ -11,7 +11,7 @@ function changeHistory(change, type) {
/**
* Get the history for undo or redo (determined via `type` param).
*/
const { history } = change.state;
const { history } = change.value;
if (!history) return;
const historyOfType = history[`${type}s`];
@ -49,7 +49,7 @@ function onKeyDown(e, data, change) {
* If the selected block is the first block in the document, create the
* new block above it. If not, create the new block below it.
*/
const { document: doc, range, anchorBlock, focusBlock } = change.state;
const { document: doc, range, anchorBlock, focusBlock } = change.value;
const singleBlockSelected = anchorBlock === focusBlock;
if (!singleBlockSelected || !focusBlock.isVoid) return;

10
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/plugins.js
View File

@ -9,7 +9,7 @@ const SoftBreak = (options = {}) => ({
if (options.shift && e.shiftKey == false) return;
const { onlyIn, ignoreIn, defaultBlock = 'paragraph' } = options;
const { type, text } = change.state.startBlock;
const { type, text } = change.value.startBlock;
if (onlyIn && !onlyIn.includes(type)) return;
if (ignoreIn && ignoreIn.includes(type)) return;
@ -39,9 +39,9 @@ export const ParagraphSoftBreakConfigured = SoftBreak({ onlyIn: ['paragraph'], s
const BreakToDefaultBlock = ({ onlyIn = [], defaultBlock = 'paragraph' }) => ({
onKeyDown(e, data, change) {
const { state } = change;
if (data.key != 'enter' || e.shiftKey == true || state.isExpanded) return;
if (onlyIn.includes(state.startBlock.type)) {
const { value } = change;
if (data.key != 'enter' || e.shiftKey == true || value.isExpanded) return;
if (onlyIn.includes(value.startBlock.type)) {
return change.insertBlock(defaultBlock);
}
}
@ -58,7 +58,7 @@ const BackspaceCloseBlock = (options = {}) => ({
if (data.key != 'backspace') return;
const { defaultBlock = 'paragraph', ignoreIn, onlyIn } = options;
const { startBlock } = change.state;
const { startBlock } = change.value;
const { type } = startBlock;
if (onlyIn && !onlyIn.includes(type)) return;

4
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/renderers.js
View File

@ -63,8 +63,8 @@ export const renderNode = props => {
return result;
};
case 'shortcode': props => {
const { attributes, node, state: editorState } = props;
const isSelected = editorState.selection.hasFocusIn(node);
const { attributes, node, editor } = props;
const isSelected = editor.value.selection.hasFocusIn(node);
const className = cn('nc-visualEditor-shortcode', { ['nc-visualEditor-shortcodeSelected']: isSelected });
return <div {...attributes} className={className} draggable >{node.data.get('shortcode')}</div>;
};

2
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/validators.js
View File

@ -20,7 +20,7 @@ export function validateNode(node) {
type: 'paragraph',
nodes: [Text.create('')],
});
const { key } = change.state.document;
const { key } = change.value.document;
return change.insertNodeByKey(key, 0, block).focus();
};
}