From 6e6e9cf710cc16a659babd6fa15c22e5248b2371 Mon Sep 17 00:00:00 2001 From: Jinxuan Zhu Date: Fri, 27 Apr 2018 17:06:24 -0400 Subject: [PATCH] Fix spell check bug (#1753) * Fix spell check bug by add data-text:true * Fix spell check bug by spell check add length to a leaf * Fix tests to use data-text:true for marks * Rename data-text to data-slate-leaf; Remove setRef; unlift attributes in leaf * Update examples with data-* * Add attributes to document * Fix renderMark in all documents * Prettier markdown --- docs/guides/rendering.md | 14 +++++----- .../saving-and-loading-html-content.md | 9 ++++--- docs/walkthroughs/using-plugins.md | 2 +- examples/code-highlighting/index.js | 26 +++++++++++++++---- examples/hovering-menu/index.js | 10 +++---- examples/huge-document/index.js | 10 +++---- examples/markdown-preview/index.js | 19 +++++++++----- examples/paste-html/index.js | 10 +++---- examples/rich-text/index.js | 10 +++---- examples/search-highlighting/index.js | 8 ++++-- examples/syncing-operations/index.js | 10 +++---- examples/tables/index.js | 4 +-- packages/slate-react/src/components/leaf.js | 14 +++++++++- packages/slate-react/src/plugins/after.js | 6 ++--- .../rendering/fixtures/custom-decorator.js | 4 +-- .../test/rendering/fixtures/custom-mark.js | 4 +-- 16 files changed, 101 insertions(+), 59 deletions(-) diff --git a/docs/guides/rendering.md b/docs/guides/rendering.md index 3a1da99e0..8d6210eae 100644 --- a/docs/guides/rendering.md +++ b/docs/guides/rendering.md @@ -69,22 +69,24 @@ Marks work the same way, except they invoke the `renderMark` function. Like so: ```js function renderMark(props) { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'bold': - return {children} + return {children} case 'italic': - return {children} + return {children} case 'code': - return {children} + return {children} case 'underline': - return {children} + return {children} case 'strikethrough': - return {children} + return {children} } } ``` +Be sure to mix `props.attributes` in your `renderMark`. `attributes` provides `data-*` dom attributes for spell-check in non-IE browsers. + That way, if you happen to have a global stylesheet that defines `strong`, `em`, etc. styles then your editor's content will already be formatted! > 🤖 Be aware though that marks aren't guaranteed to be "contiguous". Which means even though a **word** is bolded, it's not guaranteed to render as a single `` element. If some of its characters are also italic, it might be split up into multiple elements—one `wo` and one `rd`. diff --git a/docs/walkthroughs/saving-and-loading-html-content.md b/docs/walkthroughs/saving-and-loading-html-content.md index 34baadeed..2f1f8d91f 100644 --- a/docs/walkthroughs/saving-and-loading-html-content.md +++ b/docs/walkthroughs/saving-and-loading-html-content.md @@ -268,13 +268,14 @@ class App extends React.Component { // Add a `renderMark` method to render marks. renderMark = props => { - switch (props.mark.type) { + const { mark, attributes } = props + switch (mark.type) { case 'bold': - return {props.children} + return {props.children} case 'italic': - return {props.children} + return {props.children} case 'underline': - return {props.children} + return {props.children} } } } diff --git a/docs/walkthroughs/using-plugins.md b/docs/walkthroughs/using-plugins.md index a43c3b096..b54f3dada 100644 --- a/docs/walkthroughs/using-plugins.md +++ b/docs/walkthroughs/using-plugins.md @@ -43,7 +43,7 @@ class App extends React.Component { renderMark = props => { switch (props.mark.type) { case 'bold': - return {props.children} + return {props.children} } } } diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js index 64c8929bc..d24b50e00 100644 --- a/examples/code-highlighting/index.js +++ b/examples/code-highlighting/index.js @@ -136,16 +136,32 @@ class CodeHighlighting extends React.Component { */ renderMark = props => { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'comment': - return {children} + return ( + + {children} + + ) case 'keyword': - return {children} + return ( + + {children} + + ) case 'tag': - return {children} + return ( + + {children} + + ) case 'punctuation': - return {children} + return ( + + {children} + + ) } } diff --git a/examples/hovering-menu/index.js b/examples/hovering-menu/index.js index fb5a50533..e659e6c43 100644 --- a/examples/hovering-menu/index.js +++ b/examples/hovering-menu/index.js @@ -187,16 +187,16 @@ class HoveringMenu extends React.Component { */ renderMark = props => { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'bold': - return {children} + return {children} case 'code': - return {children} + return {children} case 'italic': - return {children} + return {children} case 'underlined': - return {children} + return {children} } } } diff --git a/examples/huge-document/index.js b/examples/huge-document/index.js index b4993f821..a0817da3b 100644 --- a/examples/huge-document/index.js +++ b/examples/huge-document/index.js @@ -110,16 +110,16 @@ class HugeDocument extends React.Component { */ renderMark = props => { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'bold': - return {children} + return {children} case 'code': - return {children} + return {children} case 'italic': - return {children} + return {children} case 'underlined': - return {children} + return {children} } } } diff --git a/examples/markdown-preview/index.js b/examples/markdown-preview/index.js index 9bd7812a0..a86f14a91 100644 --- a/examples/markdown-preview/index.js +++ b/examples/markdown-preview/index.js @@ -69,19 +69,20 @@ class MarkdownPreview extends React.Component { */ renderMark = props => { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'bold': - return {children} + return {children} case 'code': - return {children} + return {children} case 'italic': - return {children} + return {children} case 'underlined': - return {children} + return {children} case 'title': { return ( {children} + return ( + + {children} + + ) } case 'list': { return ( { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'bold': - return {children} + return {children} case 'code': - return {children} + return {children} case 'italic': - return {children} + return {children} case 'underlined': - return {children} + return {children} } } } diff --git a/examples/rich-text/index.js b/examples/rich-text/index.js index c0a0c5f69..b158cab4d 100644 --- a/examples/rich-text/index.js +++ b/examples/rich-text/index.js @@ -302,16 +302,16 @@ class RichTextExample extends React.Component { */ renderMark = props => { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'bold': - return {children} + return {children} case 'code': - return {children} + return {children} case 'italic': - return {children} + return {children} case 'underlined': - return {children} + return {children} } } } diff --git a/examples/search-highlighting/index.js b/examples/search-highlighting/index.js index 684da78b1..c7cf59a1a 100644 --- a/examples/search-highlighting/index.js +++ b/examples/search-highlighting/index.js @@ -140,10 +140,14 @@ class SearchHighlighting extends React.Component { */ renderMark = props => { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'highlight': - return {children} + return ( + + {children} + + ) } } } diff --git a/examples/syncing-operations/index.js b/examples/syncing-operations/index.js index b7c7fd8c3..611eac221 100644 --- a/examples/syncing-operations/index.js +++ b/examples/syncing-operations/index.js @@ -197,16 +197,16 @@ class SyncingEditor extends React.Component { */ renderMark = props => { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'bold': - return {children} + return {children} case 'code': - return {children} + return {children} case 'italic': - return {children} + return {children} case 'underlined': - return {children} + return {children} } } } diff --git a/examples/tables/index.js b/examples/tables/index.js index e8a61e7df..45145b3f4 100644 --- a/examples/tables/index.js +++ b/examples/tables/index.js @@ -160,10 +160,10 @@ class Tables extends React.Component { */ renderMark = props => { - const { children, mark } = props + const { children, mark, attributes } = props switch (mark.type) { case 'bold': - return {children} + return {children} } } } diff --git a/packages/slate-react/src/components/leaf.js b/packages/slate-react/src/components/leaf.js index 339c9bb5c..e2b8e3f40 100644 --- a/packages/slate-react/src/components/leaf.js +++ b/packages/slate-react/src/components/leaf.js @@ -99,9 +99,21 @@ class Leaf extends React.Component { const { marks, node, offset, text, editor } = this.props const { stack } = editor const leaf = this.renderText() + const attributes = { + 'data-slate-leaf': true, + } return marks.reduce((children, mark) => { - const props = { editor, mark, marks, node, offset, text, children } + const props = { + editor, + mark, + marks, + node, + offset, + text, + children, + attributes, + } const element = stack.find('renderMark', props) return element || children }, leaf) diff --git a/packages/slate-react/src/plugins/after.js b/packages/slate-react/src/plugins/after.js index 9524a4c03..2bb32c148 100644 --- a/packages/slate-react/src/plugins/after.js +++ b/packages/slate-react/src/plugins/after.js @@ -305,8 +305,8 @@ function AfterPlugin() { // Get the selection point. const native = window.getSelection() - const { anchorNode, anchorOffset } = native - const point = findPoint(anchorNode, anchorOffset, value) + const { anchorNode } = native + const point = findPoint(anchorNode, 0, value) if (!point) return // Get the text node and leaf in question. @@ -323,7 +323,7 @@ function AfterPlugin() { leaves.find(r => { start = end end += r.text.length - if (end >= point.offset) return true + if (end > point.offset) return true }) || lastLeaf // Get the text information. diff --git a/packages/slate-react/test/rendering/fixtures/custom-decorator.js b/packages/slate-react/test/rendering/fixtures/custom-decorator.js index 39c003267..467eabae1 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-decorator.js +++ b/packages/slate-react/test/rendering/fixtures/custom-decorator.js @@ -17,7 +17,7 @@ function decorateNode(block) { } function Bold(props) { - return React.createElement('strong', null, props.children) + return React.createElement('strong', { ...props.attributes }, props.children) } function renderMark(props) { @@ -45,7 +45,7 @@ export const output = `
o - n + n e
diff --git a/packages/slate-react/test/rendering/fixtures/custom-mark.js b/packages/slate-react/test/rendering/fixtures/custom-mark.js index c76464a9c..7dca0c526 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-mark.js +++ b/packages/slate-react/test/rendering/fixtures/custom-mark.js @@ -4,7 +4,7 @@ import React from 'react' import h from '../../helpers/h' function Bold(props) { - return React.createElement('strong', null, props.children) + return React.createElement('strong', { ...props.attributes }, props.children) } function renderMark(props) { @@ -33,7 +33,7 @@ export const output = `
one - two + two three