From e408dcc27ef367f26872ceb14be78d5d0adad027 Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Thu, 31 Aug 2017 11:03:08 -0400 Subject: [PATCH] add markdown editor soft break support --- package.json | 1 + .../MarkdownControl/VisualEditor/plugins.js | 4 +++ .../Widgets/Markdown/serializers/index.js | 15 ----------- .../Markdown/serializers/remarkSlate.js | 10 +++++++ .../Markdown/serializers/slateRemark.js | 26 ++++++++++++++++--- yarn.lock | 4 +++ 6 files changed, 41 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 9d025019..baa4efd7 100644 --- a/package.json +++ b/package.json @@ -156,6 +156,7 @@ "slate": "^0.21.0", "slate-edit-list": "^0.7.1", "slate-edit-table": "^0.10.1", + "slate-soft-break": "^0.3.0", "slug": "^0.9.1", "unified": "^6.1.4", "unist-builder": "^1.0.2", diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/plugins.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/plugins.js index 308a403f..569c06ca 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/plugins.js +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/plugins.js @@ -1,3 +1,4 @@ +import SlateSoftBreak from 'slate-soft-break'; import EditList from 'slate-edit-list'; import EditTable from 'slate-edit-table'; @@ -31,6 +32,8 @@ const SoftBreakOpts = { export const SoftBreakConfigured = SoftBreak(SoftBreakOpts); +export const ParagraphSoftBreakConfigured = SlateSoftBreak({ onlyIn: ['paragraph'], shift: true }); + const BackspaceCloseBlock = (options = {}) => ({ onKeyDown(e, data, state) { if (data.key != 'backspace') return; @@ -82,6 +85,7 @@ export const EditTableConfigured = EditTable(EditTableOpts); const plugins = [ SoftBreakConfigured, + ParagraphSoftBreakConfigured, BackspaceCloseBlockConfigured, EditListConfigured, EditTableConfigured, diff --git a/src/components/Widgets/Markdown/serializers/index.js b/src/components/Widgets/Markdown/serializers/index.js index 9fff5db6..f0d4dbdb 100644 --- a/src/components/Widgets/Markdown/serializers/index.js +++ b/src/components/Widgets/Markdown/serializers/index.js @@ -110,26 +110,11 @@ import registry from '../../../../lib/registry'; * Deserialize a Markdown string to an MDAST. */ export const markdownToRemark = markdown => { - - /** - * Disabling tokenizers allows us to turn off features within the Remark - * parser. - */ - function disableTokenizers() { - - /** - * Turn off soft breaks until we can properly support them across both - * editors. - */ - pull(this.Parser.prototype.inlineMethods, 'break'); - } - /** * Parse the Markdown string input to an MDAST. */ const parsed = unified() .use(markdownToRemarkPlugin, { fences: true, pedantic: true, commonmark: true }) - .use(disableTokenizers) .parse(markdown); /** diff --git a/src/components/Widgets/Markdown/serializers/remarkSlate.js b/src/components/Widgets/Markdown/serializers/remarkSlate.js index 321f0e89..c7673aa7 100644 --- a/src/components/Widgets/Markdown/serializers/remarkSlate.js +++ b/src/components/Widgets/Markdown/serializers/remarkSlate.js @@ -231,6 +231,16 @@ function convertNode(node, nodes) { return createBlock(slateType, nodes, { data }); } + /** + * Breaks + * + * MDAST soft break nodes represent a trailing double space or trailing + * slash from a Markdown document. In Slate, these are simply transformed to + * line breaks within a text node. + */ + case 'break': { + return createText('\n'); + } /** * Thematic Breaks diff --git a/src/components/Widgets/Markdown/serializers/slateRemark.js b/src/components/Widgets/Markdown/serializers/slateRemark.js index 21853abc..b586cc81 100644 --- a/src/components/Widgets/Markdown/serializers/slateRemark.js +++ b/src/components/Widgets/Markdown/serializers/slateRemark.js @@ -1,4 +1,4 @@ -import { get, isEmpty, concat, without, flatten } from 'lodash'; +import { get, isEmpty, concat, without, flatten, flatMap, initial } from 'lodash'; import u from 'unist-builder'; /** @@ -56,6 +56,24 @@ function processCodeMark(markTypes) { } +/** + * Returns an array of one or more MDAST text nodes of the given type, derived + * from the text received. Certain transformations, such as line breaks, cause + * multiple nodes to be returned. + */ +function createTextNodes(text, type = 'html') { + /** + * Split the text string at line breaks, then map each substring to an array + * pair consisting of an MDAST text node followed by a break node. This will + * result in nested arrays, so we use `flatMap` to produce a flattened array, + * and `initial` to leave off the superfluous trailing break. + */ + const brokenText = text.split('\n'); + const toPair = str => [u(type, str), u('break')]; + return initial(flatMap(brokenText, toPair)); +} + + /** * Wraps a text node in one or more mark nodes by placing the text node in an * array and using that as the `children` value of a mark node. The resulting @@ -130,7 +148,7 @@ function convertTextNode(node) { * MDAST node. */ if (!node.ranges) { - return u('html', node.text); + return createTextNodes(node.text); } /** @@ -154,13 +172,13 @@ function convertTextNode(node) { /** * Create the base text node. */ - const textNode = u(textNodeType, text); + const textNodes = createTextNodes(text, textNodeType); /** * Recursively wrap the base text node in the individual mark nodes, if * any exist. */ - return wrapTextWithMarks(textNode, filteredMarkTypes); + return textNodes.map(textNode => wrapTextWithMarks(textNode, filteredMarkTypes)); }); /** diff --git a/yarn.lock b/yarn.lock index 4aa24746..f2869818 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7844,6 +7844,10 @@ slate-edit-table@^0.10.1: dependencies: immutable "^3.8.1" +slate-soft-break@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/slate-soft-break/-/slate-soft-break-0.3.0.tgz#3d28dea9e0aa4783ddcea785ff5db7277214d65f" + slate@^0.21.0: version "0.21.4" resolved "https://registry.yarnpkg.com/slate/-/slate-0.21.4.tgz#ae6113379cd838b7ec68ecd94834ce9741bc36f3"