diff --git a/package.json b/package.json index 64b5b4c9..865f842a 100644 --- a/package.json +++ b/package.json @@ -176,12 +176,12 @@ "remark-stringify": "^3.0.1", "sanitize-filename": "^1.6.1", "semaphore": "^1.0.5", - "slate": "^0.28.0", - "slate-edit-list": "^0.9.0", + "slate": "^0.29.0", + "slate-edit-list": "^0.10.1", "slate-edit-table": "^0.12.0", - "slate-plain-serializer": "^0.2.0", - "slate-react": "^0.8.0", - "slate-soft-break": "^0.5.0", + "slate-plain-serializer": "^0.3.0", + "slate-react": "^0.9.0", + "slate-soft-break": "^0.6.0", "slug": "^0.9.1", "toml-j0.4": "^1.1.1", "tomlify-j0.4": "^3.0.0-alpha.0", diff --git a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js b/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js index b3d4cbe5..c0494f22 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js +++ b/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js @@ -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 { diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js index 9a8cfe6d..253c4a17 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js @@ -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 { ({ 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; diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/renderers.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/renderers.js index 3ce46a69..8abedb64 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/renderers.js +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/renderers.js @@ -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
{node.data.get('shortcode')}
; }; diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/validators.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/validators.js index 4c7be246..aa7a3248 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/validators.js +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/validators.js @@ -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(); }; } diff --git a/yarn.lock b/yarn.lock index ae58dca3..0b0ba15f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8525,39 +8525,39 @@ slash@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55" -slate-base64-serializer@^0.1.22: - version "0.1.22" - resolved "https://registry.yarnpkg.com/slate-base64-serializer/-/slate-base64-serializer-0.1.22.tgz#548e589178c75653004168004aad152f1976dd35" +slate-base64-serializer@^0.2.1: + version "0.2.9" + resolved "https://registry.yarnpkg.com/slate-base64-serializer/-/slate-base64-serializer-0.2.9.tgz#14698ca6b48fae2661cd59db8ccd909becb73c6b" dependencies: isomorphic-base64 "^1.0.2" -slate-dev-logger@^0.1.23: +slate-dev-logger@^0.1.25: version "0.1.33" resolved "https://registry.yarnpkg.com/slate-dev-logger/-/slate-dev-logger-0.1.33.tgz#b4a4272255c2d598e5f26db5d85c58435357755f" -slate-edit-list@^0.9.0: - version "0.9.0" - resolved "https://registry.yarnpkg.com/slate-edit-list/-/slate-edit-list-0.9.0.tgz#18fdeb8e6f4068da88a05aa0cb499a191d8343e6" +slate-edit-list@^0.10.1: + version "0.10.1" + resolved "https://registry.yarnpkg.com/slate-edit-list/-/slate-edit-list-0.10.1.tgz#9c6a142a314b0ff22a327f1b50c8f5c85468cb17" slate-edit-table@^0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/slate-edit-table/-/slate-edit-table-0.12.0.tgz#9163e67b8025c3c09d6037eb76cb5e652b65dd47" -slate-plain-serializer@^0.2.0, slate-plain-serializer@^0.2.8: - version "0.2.8" - resolved "https://registry.yarnpkg.com/slate-plain-serializer/-/slate-plain-serializer-0.2.8.tgz#9bff5fafa09ab2ad47d961820f09d7d2abcb20a9" +slate-plain-serializer@^0.3.0, slate-plain-serializer@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/slate-plain-serializer/-/slate-plain-serializer-0.3.1.tgz#fd3201c4d133b521b62696c35cc0ef5f92ff174e" dependencies: - slate-dev-logger "^0.1.23" + slate-dev-logger "^0.1.25" -slate-prop-types@^0.2.8: - version "0.2.8" - resolved "https://registry.yarnpkg.com/slate-prop-types/-/slate-prop-types-0.2.8.tgz#2d0e1df0a372c635068c6f74a52b567b996f51c2" +slate-prop-types@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/slate-prop-types/-/slate-prop-types-0.3.1.tgz#27c62318ead2b90261b5933092ae4694db69e22e" dependencies: - slate-dev-logger "^0.1.23" + slate-dev-logger "^0.1.25" -slate-react@^0.8.0: - version "0.8.2" - resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.8.2.tgz#035452c7aa90d7ec37f097e2430b2ce4198cfb78" +slate-react@^0.9.0: + version "0.9.1" + resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.9.1.tgz#1fa9da93b1856361b42e9da8633837264f40169a" dependencies: debug "^2.3.2" get-window "^1.1.1" @@ -8569,18 +8569,18 @@ slate-react@^0.8.0: react-immutable-proptypes "^2.1.0" react-portal "^3.1.0" selection-is-backward "^1.0.0" - slate-base64-serializer "^0.1.22" - slate-dev-logger "^0.1.23" - slate-plain-serializer "^0.2.8" - slate-prop-types "^0.2.8" + slate-base64-serializer "^0.2.1" + slate-dev-logger "^0.1.25" + slate-plain-serializer "^0.3.1" + slate-prop-types "^0.3.1" -slate-soft-break@^0.5.0: - version "0.5.1" - resolved "https://registry.yarnpkg.com/slate-soft-break/-/slate-soft-break-0.5.1.tgz#817348c6c38c5c4983f58de3bc497234b27378eb" +slate-soft-break@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/slate-soft-break/-/slate-soft-break-0.6.0.tgz#1e44815b7ff4ddada055bba14cd0d2d4ef0fd463" -slate@^0.28.0: - version "0.28.2" - resolved "https://registry.yarnpkg.com/slate/-/slate-0.28.2.tgz#e740976ae494c9a2952e925b00f2694416b5e84d" +slate@^0.29.0: + version "0.29.1" + resolved "https://registry.yarnpkg.com/slate/-/slate-0.29.1.tgz#a9df98158e67f92456b9b8f38fb6d279ba8f9f7e" dependencies: debug "^2.3.2" direction "^0.1.5" @@ -8588,7 +8588,7 @@ slate@^0.28.0: is-empty "^1.0.0" is-plain-object "^2.0.4" lodash "^4.17.4" - slate-dev-logger "^0.1.23" + slate-dev-logger "^0.1.25" type-of "^2.0.1" slice-ansi@0.0.4: