Editor fast follow

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/__snapshots__/parser.spec.js.snap

@@ -241,7 +241,6 @@ Object {
     Object {
       "isVoid": true,
       "kind": "block",
-      "nodes": undefined,
       "type": "thematic-break",
     },
     Object {
@@ -286,7 +285,6 @@ Object {
     Object {
       "isVoid": true,
       "kind": "block",
-      "nodes": undefined,
       "type": "thematic-break",
     },
     Object {
@@ -1200,7 +1198,6 @@ more important, there there are only so many sizes that you can use.",
     Object {
       "isVoid": true,
       "kind": "block",
-      "nodes": undefined,
       "type": "thematic-break",
     },
     Object {

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

@@ -2,11 +2,42 @@ import { Block, Text } from 'slate';
 
 export default onKeyDown;
 
+/**
+ * Minimal re-implementation of Slate's undo/redo functionality, but with focus
+ * forced back into editor afterward.
+ */
+function changeHistory(change, type) {
+
+  /**
+   * Get the history for undo or redo (determined via `type` param).
+   */
+  const { history } = change.state;
+  if (!history) return;
+  const historyOfType = history[`${type}s`];
+
+  /**
+   * If there is a next history item to apply, and it's valid, apply it.
+   */
+  const next = historyOfType.first();
+  const historyOfTypeIsValid = historyOfType.size > 1
+    || next.length > 1
+    || next[0].type !== 'set_selection';
+
+  if (next && historyOfTypeIsValid) {
+    change[type]();
+  }
+
+  /**
+   * Always ensure focus is set.
+   */
+  return change.focus();
+}
+
 function onKeyDown(e, data, change) {
   const createDefaultBlock = () => {
     return Block.create({
       type: 'paragraph',
-      nodes: [Text.create('')]
+      nodes: [Text.create('')],
     });
   };
   if (data.key === 'enter') {
@@ -37,6 +68,22 @@ function onKeyDown(e, data, change) {
   }
 
   if (data.isMod) {
+
+    /**
+     * Undo and redo work automatically with Slate, but focus is lost in certain
+     * actions. We override Slate's built in undo/redo here and force focus
+     * back to the editor each time.
+     */
+    if (data.key === 'y') {
+      e.preventDefault();
+      return changeHistory(change, 'redo');
+    }
+
+    if (data.key === 'z') {
+      e.preventDefault();
+      return changeHistory(change, data.isShift ? 'redo' : 'undo');
+    }
+
     const marks = {
       b: 'bold',
       i: 'italic',

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

@@ -9,14 +9,15 @@ const SoftBreak = (options = {}) => ({
     if (options.shift && e.shiftKey == false) return;
 
     const { onlyIn, ignoreIn, defaultBlock = 'paragraph' } = options;
-    const { type, nodes } = change.state.startBlock;
+    const { type, text } = change.state.startBlock;
     if (onlyIn && !onlyIn.includes(type)) return;
     if (ignoreIn && ignoreIn.includes(type)) return;
 
-    const shouldClose = nodes.last().characters.last() === '\n';
+    const shouldClose = text.endsWith('\n');
     if (shouldClose) {
-      const trimmed = change.deleteBackward(1);
-      return trimmed.insertBlock(defaultBlock);
+      return change
+        .deleteBackward(1)
+        .insertBlock(defaultBlock);
     }
 
     const textNode = Text.create('\n');

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

@@ -40,6 +40,39 @@ const shortcodesAtRoot = {
   },
 };
 
-const rules = [ enforceNeverEmpty, shortcodesAtRoot ];
+/**
+ * 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/serializers/__tests__/slate.spec.js

@@ -4,37 +4,33 @@ import { markdownToSlate, slateToMarkdown } from '../index';
 const process = flow([markdownToSlate, slateToMarkdown]);
 
 describe('slate', () => {
-  it('should distinguish between newlines and hard breaks', () => {
-    expect(process('a\n')).toEqual('a\n');
-  });
-
   it('should not decode encoded html entities in inline code', () => {
-    expect(process('<code>&lt;div&gt;</code>')).toEqual('<code>&lt;div&gt;</code>\n');
+    expect(process('<code>&lt;div&gt;</code>')).toEqual('<code>&lt;div&gt;</code>');
   });
 
   it('should parse non-text children of mark nodes', () => {
-    expect(process('**a[b](c)d**')).toEqual('**a[b](c)d**\n');
-    expect(process('**[a](b)**')).toEqual('**[a](b)**\n');
-    expect(process('**![a](b)**')).toEqual('**![a](b)**\n');
-    expect(process('_`a`_')).toEqual('_`a`_\n');
-    expect(process('_`a`b_')).toEqual('_`a`b_\n');
+    expect(process('**a[b](c)d**')).toEqual('**a[b](c)d**');
+    expect(process('**[a](b)**')).toEqual('**[a](b)**');
+    expect(process('**![a](b)**')).toEqual('**![a](b)**');
+    expect(process('_`a`_')).toEqual('_`a`_');
+    expect(process('_`a`b_')).toEqual('_`a`b_');
   });
 
   it('should condense adjacent, identically styled text and inline nodes', () => {
-    expect(process('**a ~~b~~~~c~~**')).toEqual('**a ~~bc~~**\n');
-    expect(process('**a ~~b~~~~[c](d)~~**')).toEqual('**a ~~b[c](d)~~**\n');
+    expect(process('**a ~~b~~~~c~~**')).toEqual('**a ~~bc~~**');
+    expect(process('**a ~~b~~~~[c](d)~~**')).toEqual('**a ~~b[c](d)~~**');
   });
 
   it('should handle nested markdown entities', () => {
-    expect(process('**a**b**c**')).toEqual('**a**b**c**\n');
-    expect(process('**a _b_ c**')).toEqual('**a _b_ c**\n');
+    expect(process('**a**b**c**')).toEqual('**a**b**c**');
+    expect(process('**a _b_ c**')).toEqual('**a _b_ c**');
   });
 
   it('should parse inline images as images', () => {
-    expect(process('a ![b](c)')).toEqual('a ![b](c)\n');
+    expect(process('a ![b](c)')).toEqual('a ![b](c)');
   });
 
   it('should not escape markdown entities in html', () => {
-    expect(process('<span>*</span>')).toEqual('<span>*</span>\n');
+    expect(process('<span>*</span>')).toEqual('<span>*</span>');
   });
 });

src/components/Widgets/Markdown/serializers/index.js

@@ -1,4 +1,4 @@
-import { get, isEmpty, reduce, pull } from 'lodash';
+import { get, isEmpty, reduce, pull, trimEnd } from 'lodash';
 import unified from 'unified';
 import u from 'unist-builder';
 import markdownToRemarkPlugin from 'remark-parse';
@@ -118,27 +118,32 @@ export const remarkToMarkdown = obj => {
     fences: true,
     listItemIndent: '1',
 
-    // Settings to emulate the defaults from the Prosemirror editor, not
-    // necessarily optimal. Should eventually be configurable.
+    /**
+     * Settings to emulate the defaults from the Prosemirror editor, not
+     * necessarily optimal. Should eventually be configurable.
+     */
     bullet: '*',
     strong: '*',
     rule: '-',
   };
 
   /**
-   * Escape markdown entities found in text and html nodes within the MDAST.
+   * Transform the MDAST with plugins.
    */
-  const escapedMdast = unified()
+  const processedMdast = unified()
     .use(remarkEscapeMarkdownEntities)
     .use(remarkStripTrailingBreaks)
     .runSync(mdast);
 
   const markdown = unified()
     .use(remarkToMarkdownPlugin, remarkToMarkdownPluginOpts)
     .use(remarkAllowAllText)
-    .stringify(escapedMdast);
+    .stringify(processedMdast);
 
-  return markdown;
+  /**
+   * Return markdown with trailing whitespace removed.
+   */
+  return trimEnd(markdown);
 };
 
 

src/components/Widgets/Markdown/serializers/remarkEscapeMarkdownEntities.js

@@ -1,4 +1,4 @@
-import { flow, partial, flatMap, flatten, map } from 'lodash';
+import { has, flow, partial, flatMap, flatten, map } from 'lodash';
 import { joinPatternSegments, combinePatterns, replaceWhen } from '../../../../lib/regexHelper';
 
 /**
@@ -248,6 +248,12 @@ function escape(delim) {
  */
 export default function remarkEscapeMarkdownEntities() {
   const transform = (node, index) => {
+    /**
+     * Shortcode nodes will intentionally inject markdown entities in text node
+     * children not be escaped.
+     */
+    if (has(node.data, 'shortcode')) return node;
+
     const children = node.children && node.children.map(transform);
 
     /**

src/components/Widgets/Markdown/serializers/remarkSlate.js

@@ -58,6 +58,14 @@ const markMap = {
 };
 
 
+/**
+ * Add nodes to a parent node only if `nodes` is truthy.
+ */
+function addNodes(parent, nodes) {
+  return nodes ? { ...parent, nodes } : parent;
+}
+
+
 /**
  * Create a Slate Inline node.
  */
@@ -67,15 +75,17 @@ function createBlock(type, nodes, props = {}) {
     nodes = undefined;
   }
 
-  return { kind: 'block', type, nodes, ...props };
+  const node = { kind: 'block', type, ...props };
+  return addNodes(node, nodes);
 }
 
 
 /**
  * Create a Slate Block node.
  */
 function createInline(type, props = {}, nodes) {
-  return { kind: 'inline', type, nodes, ...props };
+  const node = { kind: 'inline', type, ...props };
+  return addNodes(node, nodes);
 }
 
 
@@ -143,7 +153,7 @@ function processMarkNode(node, parentMarks = []) {
 function convertMarkNode(node) {
   const slateNodes = processMarkNode(node);
 
-  const convertedSlateNodes = slateNodes.reduce((acc, node, idx, nodes) => {
+  const convertedSlateNodes = slateNodes.reduce((acc, node) => {
     const lastConvertedNode = last(acc);
     if (node.text && lastConvertedNode && lastConvertedNode.ranges) {
       lastConvertedNode.ranges.push(node);

src/components/Widgets/Markdown/serializers/remarkSquashReferences.js

@@ -1,4 +1,4 @@
-import { without } from 'lodash';
+import { without, flatten } from 'lodash';
 import u from 'unist-builder';
 import mdastDefinitions from 'mdast-util-definitions';
 
@@ -46,8 +46,17 @@ export default function remarkSquashReferences() {
      */
     if (['imageReference', 'linkReference'].includes(node.type)) {
       const type = node.type === 'imageReference' ? 'image' : 'link';
-      const { title, url } = getDefinition(node.identifier) || {};
-      return u(type, { title, url, alt: node.alt }, children);
+      const definition = getDefinition(node.identifier);
+
+      if (definition) {
+        const { title, url } = definition;
+        return u(type, { title, url, alt: node.alt }, children);
+      }
+
+      const pre = u('text', node.type === 'imageReference' ? '![' : '[');
+      const post = u('text', ']');
+      const nodes = children || [ u('text', node.alt) ];
+      return [ pre, ...nodes, post];
     }
 
     /**
@@ -60,6 +69,6 @@ export default function remarkSquashReferences() {
 
     const filteredChildren = without(children, null);
 
-    return { ...node, children: filteredChildren };
+    return { ...node, children: flatten(filteredChildren) };
   }
 }