Update Slate to 0.28.0

package.json

@@ -176,12 +176,12 @@
     "remark-stringify": "^3.0.1",
     "sanitize-filename": "^1.6.1",
     "semaphore": "^1.0.5",
-    "slate": "^0.27.0",
+    "slate": "^0.28.0",
     "slate-edit-list": "^0.9.0",
     "slate-edit-table": "^0.12.0",
     "slate-plain-serializer": "^0.2.0",
-    "slate-react": "^0.4.0",
+    "slate-react": "^0.8.0",
-    "slate-soft-break": "^0.4.0",
+    "slate-soft-break": "^0.5.0",
     "slug": "^0.9.1",
     "toml-j0.4": "^1.1.1",
     "tomlify-j0.4": "^3.0.0-alpha.0",

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { List } from 'immutable';
-import cn from 'classnames';
-
-/**
- * Slate uses React components to render each type of node that it receives.
- * This is the closest thing Slate has to a schema definition. The types are set
- * by us when we manually deserialize from Remark's MDAST to Slate's AST.
- */
-
-export const MARK_COMPONENTS = {
-  bold: props => <strong>{props.children}</strong>,
-  italic: props => <em>{props.children}</em>,
-  strikethrough: props => <s>{props.children}</s>,
-  code: props => <code>{props.children}</code>,
-};
-
-export const NODE_COMPONENTS = {
-  'paragraph': props => <p {...props.attributes}>{props.children}</p>,
-  'list-item': props => <li {...props.attributes}>{props.children}</li>,
-  'quote': props => <blockquote {...props.attributes}>{props.children}</blockquote>,
-  'code': props => <pre><code {...props.attributes}>{props.children}</code></pre>,
-  'heading-one': props => <h1 {...props.attributes}>{props.children}</h1>,
-  'heading-two': props => <h2 {...props.attributes}>{props.children}</h2>,
-  'heading-three': props => <h3 {...props.attributes}>{props.children}</h3>,
-  'heading-four': props => <h4 {...props.attributes}>{props.children}</h4>,
-  'heading-five': props => <h5 {...props.attributes}>{props.children}</h5>,
-  'heading-six': props => <h6 {...props.attributes}>{props.children}</h6>,
-  'table': props => <table><tbody {...props.attributes}>{props.children}</tbody></table>,
-  'table-row': props => <tr {...props.attributes}>{props.children}</tr>,
-  'table-cell': props => <td {...props.attributes}>{props.children}</td>,
-  'thematic-break': props => <hr {...props.attributes}/>,
-  'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>,
-  'numbered-list': props =>
-    <ol {...props.attributes} start={props.node.data.get('start') || 1}>{props.children}</ol>,
-  'link': props => {
-    const data = props.node.get('data');
-    const marks = data.get('marks');
-    const url = data.get('url');
-    const title = data.get('title');
-    const link = <a href={url} title={title} {...props.attributes}>{props.children}</a>;
-    const result = !marks ? link : marks.reduce((acc, mark) => {
-      const MarkComponent = MARK_COMPONENTS[mark.type];
-      return <MarkComponent>{acc}</MarkComponent>;
-    }, link);
-    return result;
-  },
-  'image': props => {
-    const data = props.node.get('data');
-    const marks = data.get('marks');
-    const url = data.get('url');
-    const title = data.get('title');
-    const alt = data.get('alt');
-    const image = <img src={url} title={title} alt={alt} {...props.attributes}/>;
-    const result = !marks ? image : marks.reduce((acc, mark) => {
-      const MarkComponent = MARK_COMPONENTS[mark.type];
-      return <MarkComponent>{acc}</MarkComponent>;
-    }, image);
-    return result;
-  },
-  'shortcode': props => {
-    const { attributes, node, state: editorState } = props;
-    const isSelected = editorState.selection.hasFocusIn(node);
-    const className = cn('nc-visualEditor-shortcode', { ['nc-visualEditor-shortcodeSelected']: isSelected });
-    return <div {...attributes} className={className} draggable >{node.data.get('shortcode')}</div>;
-  },
-};

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js

@@ -7,8 +7,8 @@ import { slateToMarkdown, markdownToSlate, htmlToSlate } from '../../serializers
 import registry from '../../../../../lib/registry';
 import Toolbar from '../Toolbar/Toolbar';
 import { Sticky } from '../../../../UI/Sticky/Sticky';
-import { MARK_COMPONENTS, NODE_COMPONENTS } from './components';
+import { renderNode, renderMark } from './renderers';
-import RULES from './rules';
+import { validateNode } from './validators';
 import plugins, { EditListConfigured } from './plugins';
 import onKeyDown from './keys';
 
@@ -24,11 +24,6 @@ export default class Editor extends Component {
     const editorState = State.create({ document });
     this.state = {
       editorState,
-      schema: {
-        nodes: NODE_COMPONENTS,
-        marks: MARK_COMPONENTS,
-        rules: RULES,
-      },
       shortcodePlugins: registry.getEditorComponents(),
     };
   }
@@ -208,7 +203,9 @@ export default class Editor extends Component {
         <Slate
           className="nc-visualEditor-editor"
           state={this.state.editorState}
-          schema={this.state.schema}
+          renderNode={renderNode}
+          renderMark={renderMark}
+          validateNode={validateNode}
           plugins={plugins}
           onChange={this.handleChange}
           onKeyDown={onKeyDown}

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/renderers.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { List } from 'immutable';
+import cn from 'classnames';
+
+/**
+ * Slate uses React components to render each type of node that it receives.
+ * This is the closest thing Slate has to a schema definition. The types are set
+ * by us when we manually deserialize from Remark's MDAST to Slate's AST.
+ */
+
+export const renderMark = props => {
+  switch (props.mark.type) {
+    case bold: return props => <strong>{props.children}</strong>;
+    case italic: return props => <em>{props.children}</em>;
+    case strikethrough: return props => <s>{props.children}</s>;
+    case code: return props => <code>{props.children}</code>;
+  }
+};
+
+export const renderNode = props => {
+  switch (props.node.type) {
+    case 'paragraph': return props => <p {...props.attributes}>{props.children}</p>;
+    case 'list-item': return props => <li {...props.attributes}>{props.children}</li>;
+    case 'quote': return props => <blockquote {...props.attributes}>{props.children}</blockquote>;
+    case 'code': return props => <pre><code {...props.attributes}>{props.children}</code></pre>;
+    case 'heading-one': return props => <h1 {...props.attributes}>{props.children}</h1>;
+    case 'heading-two': return props => <h2 {...props.attributes}>{props.children}</h2>;
+    case 'heading-three': return props => <h3 {...props.attributes}>{props.children}</h3>;
+    case 'heading-four': return props => <h4 {...props.attributes}>{props.children}</h4>;
+    case 'heading-five': return props => <h5 {...props.attributes}>{props.children}</h5>;
+    case 'heading-six': return props => <h6 {...props.attributes}>{props.children}</h6>;
+    case 'table': return props => <table><tbody {...props.attributes}>{props.children}</tbody></table>;
+    case 'table-row': return props => <tr {...props.attributes}>{props.children}</tr>;
+    case 'table-cell': return props => <td {...props.attributes}>{props.children}</td>;
+    case 'thematic-break': return props => <hr {...props.attributes}/>;
+    case 'bulleted-list': return props => <ul {...props.attributes}>{props.children}</ul>;
+    case 'numbered-list': return props => (
+      <ol {...props.attributes} start={props.node.data.get('start') || 1}>{props.children}</ol>
+    );
+    case 'link': return props => {
+      const data = props.node.get('data');
+      const marks = data.get('marks');
+      const url = data.get('url');
+      const title = data.get('title');
+      const link = <a href={url} title={title} {...props.attributes}>{props.children}</a>;
+      const result = !marks ? link : marks.reduce((acc, mark) => {
+        const MarkComponent = MARK_COMPONENTS[mark.type];
+        return <MarkComponent>{acc}</MarkComponent>;
+      }, link);
+      return result;
+    };
+    case 'image': props => {
+      const data = props.node.get('data');
+      const marks = data.get('marks');
+      const url = data.get('url');
+      const title = data.get('title');
+      const alt = data.get('alt');
+      const image = <img src={url} title={title} alt={alt} {...props.attributes}/>;
+      const result = !marks ? image : marks.reduce((acc, mark) => {
+        const MarkComponent = MARK_COMPONENTS[mark.type];
+        return <MarkComponent>{acc}</MarkComponent>;
+      }, image);
+      return result;
+    };
+    case 'shortcode': props => {
+      const { attributes, node, state: editorState } = props;
+      const isSelected = editorState.selection.hasFocusIn(node);
+      const className = cn('nc-visualEditor-shortcode', { ['nc-visualEditor-shortcodeSelected']: isSelected });
+      return <div {...attributes} className={className} draggable >{node.data.get('shortcode')}</div>;
+    };
+  }
+};

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/rules.js

@@ -1,78 +0,0 @@
-import { Block, Text } from 'slate';
-
-/**
- * Rules are used to validate the editor state each time it changes, to ensure
- * it is never rendered in an undesirable state.
- */
-
-/**
- * If the editor is ever in an empty state, insert an empty
- * paragraph block.
- */
-const enforceNeverEmpty = {
-  match: object => object.kind === 'document',
-  validate: doc => {
-    const hasBlocks = !doc.getBlocks().isEmpty();
-    return hasBlocks ? null : {};
-  },
-  normalize: change => {
-    const block = Block.create({
-      type: 'paragraph',
-      nodes: [Text.create('')],
-    });
-    const { key } = change.state.document;
-    return change.insertNodeByKey(key, 0, block).focus();
-  },
-};
-
-/**
- * Ensure that shortcodes are children of the root node.
- */
-const shortcodesAtRoot = {
-  match: object => object.kind === 'document',
-  validate: doc => {
-    return doc.findDescendant(node => {
-      return node.type === 'shortcode' && doc.getParent(node.key).key !== doc.key;
-    });
-  },
-  normalize: (change, doc, node) => {
-    return change.unwrapNodeByKey(node.key);
-  },
-};
-
-/**
- * Ensure that trailing shortcodes are followed by an empty paragraph.
- */
-const noTrailingShortcodes = {
-  match: object => object.kind === 'document',
-  validate: doc => {
-    return doc.findDescendant(node => {
-      return node.type === 'shortcode' && doc.getBlocks().last().key === node.key;
-    });
-  },
-  normalize: (change, doc, node) => {
-    const text = Text.create('');
-    const block = Block.create({ type: 'paragraph', nodes: [ text ] });
-    return change.insertNodeByKey(doc.key, doc.get('nodes').size, block);
-  },
-};
-
-/**
- * Ensure that code blocks contain no marks.
- */
-const codeBlocksContainPlainText = {
-  match: node => node.type === 'code',
-  validate: node => {
-    const invalidChild = node.getTexts().find(text => !text.getMarks().isEmpty());
-    return invalidChild || null;
-  },
-  normalize: (change, node, invalidChild) => {
-    invalidChild.getMarks().forEach(mark => {
-      change.removeMarkByKey(invalidChild.key, 0, invalidChild.get('characters').size, mark);
-    });
-  },
-};
-
-const rules = [ enforceNeverEmpty, shortcodesAtRoot, noTrailingShortcodes, codeBlocksContainPlainText ];
-
-export default rules;

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/validators.js

@@ -0,0 +1,69 @@
+import { Block, Text } from 'slate';
+
+/**
+ * Validation functions are used to validate the editor state each time it
+ * changes, to ensure it is never rendered in an undesirable state.
+ */
+export function validateNode(node) {
+  /**
+   * Validation of the document itself.
+   */
+  if (node.kind === 'document') {
+    /**
+     * If the editor is ever in an empty state, insert an empty
+     * paragraph block.
+     */
+    const hasBlocks = !doc.getBlocks().isEmpty();
+    if (!hasBlocks) {
+      return change => {
+        const block = Block.create({
+          type: 'paragraph',
+          nodes: [Text.create('')],
+        });
+        const { key } = change.state.document;
+        return change.insertNodeByKey(key, 0, block).focus();
+      };
+    }
+
+    /**
+     * Ensure that shortcodes are children of the root node.
+     */
+    const nestedShortcode = node.findDescendant(descendant => {
+      const { type, key } = descendant;
+      return type === 'shortcode' && node.getParent(key).key !== node.key;
+    });
+    if (nestedShortcode) {
+      return change => change.unwrapNodeByKey(node.key);
+    }
+
+    /**
+     * Ensure that trailing shortcodes are followed by an empty paragraph.
+     */
+    const trailingShortcode = node.findDescendant(descendant => {
+      const { type, key } = descendant;
+      return type === 'shortcode' && node.getBlocks().last().key === key;
+    });
+    if (trailingShortcode) {
+      return change => {
+        const text = Text.create('');
+        const block = Block.create({ type: 'paragraph', nodes: [ text ] });
+        return change.insertNodeByKey(node.key, node.get('nodes').size, block);
+      };
+    }
+  }
+
+
+  /**
+   * Ensure that code blocks contain no marks.
+   */
+  if (node.type === 'code') {
+    const invalidChild = node.getTexts().find(text => !text.getMarks().isEmpty());
+    if (invalidChild) {
+      return change => (
+        invalidChild.getMarks().forEach(mark => (
+          change.removeMarkByKey(invalidChild.key, 0, invalidChild.get('characters').size, mark)
+        ))
+      );
+    }
+  }
+};

yarn.lock

@@ -2827,7 +2827,7 @@ es6-iterator@2, es6-iterator@^2.0.1, es6-iterator@~2.0.1:
     es5-ext "^0.10.14"
     es6-symbol "^3.1"
 
-es6-map@^0.1.3, es6-map@^0.1.4:
+es6-map@^0.1.3:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
   dependencies:
@@ -4472,6 +4472,10 @@ is-hexadecimal@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.1.tgz#6e084bbc92061fbb0971ec58b6ce6d404e24da69"
 
+is-hotkey@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-hotkey/-/is-hotkey-0.1.1.tgz#b279a2fd108391be9aa93c6cb317f50357da549a"
+
 is-in-browser@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
@@ -8521,13 +8525,13 @@ 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.14:
+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"
   dependencies:
     isomorphic-base64 "^1.0.2"
 
-slate-dev-logger@^0.1.15, slate-dev-logger@^0.1.20, slate-dev-logger@^0.1.23:
+slate-dev-logger@^0.1.23:
   version "0.1.33"
   resolved "https://registry.yarnpkg.com/slate-dev-logger/-/slate-dev-logger-0.1.33.tgz#b4a4272255c2d598e5f26db5d85c58435357755f"
 
@@ -8539,24 +8543,25 @@ 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.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"
   dependencies:
     slate-dev-logger "^0.1.23"
 
-slate-prop-types@^0.2.0:
+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"
   dependencies:
     slate-dev-logger "^0.1.23"
 
-slate-react@^0.4.0:
+slate-react@^0.8.0:
-  version "0.4.0"
+  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.4.0.tgz#e15c9034df5ea58fcb8a0c49c1cd159702296e0c"
+  resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.8.2.tgz#035452c7aa90d7ec37f097e2430b2ce4198cfb78"
   dependencies:
     debug "^2.3.2"
     get-window "^1.1.1"
+    is-hotkey "^0.1.1"
     is-in-browser "^1.1.3"
     is-window "^1.0.2"
     keycode "^2.1.2"
@@ -8564,27 +8569,26 @@ slate-react@^0.4.0:
     react-immutable-proptypes "^2.1.0"
     react-portal "^3.1.0"
     selection-is-backward "^1.0.0"
-    slate-base64-serializer "^0.1.14"
+    slate-base64-serializer "^0.1.22"
-    slate-dev-logger "^0.1.15"
+    slate-dev-logger "^0.1.23"
-    slate-plain-serializer "^0.2.0"
+    slate-plain-serializer "^0.2.8"
-    slate-prop-types "^0.2.0"
+    slate-prop-types "^0.2.8"
 
-slate-soft-break@^0.4.0:
+slate-soft-break@^0.5.0:
-  version "0.4.3"
+  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/slate-soft-break/-/slate-soft-break-0.4.3.tgz#e3a9279a9b92ca173915467f5fbd359f739a7e96"
+  resolved "https://registry.yarnpkg.com/slate-soft-break/-/slate-soft-break-0.5.1.tgz#817348c6c38c5c4983f58de3bc497234b27378eb"
 
-slate@^0.27.0:
+slate@^0.28.0:
-  version "0.27.5"
+  version "0.28.2"
-  resolved "https://registry.yarnpkg.com/slate/-/slate-0.27.5.tgz#ab9d9f35e03f1910c59016ad66ee685255b5a645"
+  resolved "https://registry.yarnpkg.com/slate/-/slate-0.28.2.tgz#e740976ae494c9a2952e925b00f2694416b5e84d"
   dependencies:
     debug "^2.3.2"
     direction "^0.1.5"
-    es6-map "^0.1.4"
     esrever "^0.2.0"
     is-empty "^1.0.0"
     is-plain-object "^2.0.4"
     lodash "^4.17.4"
-    slate-dev-logger "^0.1.20"
+    slate-dev-logger "^0.1.23"
     type-of "^2.0.1"
 
 slice-ansi@0.0.4: