From 7205e7c4c7a5aabd497dfed5f10cb73d16c13bca Mon Sep 17 00:00:00 2001 From: Dan Burzo Date: Wed, 16 Aug 2017 15:34:36 +0300 Subject: [PATCH 1/3] Don't break macOS emoji insert nor composition when fixing #938 --- src/components/content.js | 1 + src/plugins/core.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/content.js b/src/components/content.js index ef3f98c7df..ed2620f5d6 100644 --- a/src/components/content.js +++ b/src/components/content.js @@ -660,6 +660,7 @@ class Content extends React.Component { data.isModAlt = IS_MAC ? metaKey && altKey : ctrlKey && altKey data.isShift = shiftKey data.isWord = IS_MAC ? altKey : ctrlKey + data.isComposing = this.tmp.isComposing // These key commands have native behavior in contenteditable elements which // will cause our state to be out of sync, so prevent them. diff --git a/src/plugins/core.js b/src/plugins/core.js index 4c5d660717..556311a181 100644 --- a/src/plugins/core.js +++ b/src/plugins/core.js @@ -526,6 +526,7 @@ function Plugin(options = {}) { /** * On `Space` key down, prevent the default browser behavior * in Chrome, since in some situation it will result in loss of text. + * (unless we're composing or we're on a Mac and we want to insert emoji) * Reference: https://github.com/ianstormtaylor/slate/issues/938 * * @param {Event} e @@ -535,7 +536,7 @@ function Plugin(options = {}) { */ function onKeyDownSpace(e, data, state) { - if (IS_CHROME) { + if (IS_CHROME && !data.isComposing && !(IS_MAC && e.metaKey && e.ctrlKey)) { e.preventDefault() return state .transform() From 2252fcf735d8518802c7c0b3e1493456b17d6842 Mon Sep 17 00:00:00 2001 From: Dan Burzo Date: Wed, 16 Aug 2017 16:54:30 +0300 Subject: [PATCH 2/3] Simpler solution for this --- src/plugins/core.js | 27 ++++----------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/src/plugins/core.js b/src/plugins/core.js index 556311a181..0fb8ddb372 100644 --- a/src/plugins/core.js +++ b/src/plugins/core.js @@ -162,6 +162,10 @@ function Plugin(options = {}) { // the cursor isn't technique in the right spot. (2016/12/01) (!(pInline && !pInline.isVoid && startOffset == 0)) && (!(nInline && !nInline.isVoid && startOffset == startText.length)) && + // COMPAT: When inserting a Space character , Chrome will sometimes + // split the text node into two adjacent text nodes. See: + // https://github.com/ianstormtaylor/slate/issues/938 + (!(e.data === ' ' && IS_CHROME)) && // If the (chars.equals(nextChars)) ) @@ -478,7 +482,6 @@ function Plugin(options = {}) { switch (data.key) { case 'enter': return onKeyDownEnter(e, data, state) - case 'space': return onKeyDownSpace(e, data, state) case 'backspace': return onKeyDownBackspace(e, data, state) case 'delete': return onKeyDownDelete(e, data, state) case 'left': return onKeyDownLeft(e, data, state) @@ -523,28 +526,6 @@ function Plugin(options = {}) { .apply() } - /** - * On `Space` key down, prevent the default browser behavior - * in Chrome, since in some situation it will result in loss of text. - * (unless we're composing or we're on a Mac and we want to insert emoji) - * Reference: https://github.com/ianstormtaylor/slate/issues/938 - * - * @param {Event} e - * @param {Object} data - * @param {State} state - * @return {State|Null} - */ - - function onKeyDownSpace(e, data, state) { - if (IS_CHROME && !data.isComposing && !(IS_MAC && e.metaKey && e.ctrlKey)) { - e.preventDefault() - return state - .transform() - .insertText(' ') - .apply() - } - } - /** * On `backspace` key down, delete backwards. * From 85eba71fb64387351f4d2d1820f4d6693ce0dedc Mon Sep 17 00:00:00 2001 From: Dan Burzo Date: Wed, 16 Aug 2017 16:56:24 +0300 Subject: [PATCH 3/3] Remove data.isComposing --- src/components/content.js | 1 - src/plugins/core.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/content.js b/src/components/content.js index ed2620f5d6..ef3f98c7df 100644 --- a/src/components/content.js +++ b/src/components/content.js @@ -660,7 +660,6 @@ class Content extends React.Component { data.isModAlt = IS_MAC ? metaKey && altKey : ctrlKey && altKey data.isShift = shiftKey data.isWord = IS_MAC ? altKey : ctrlKey - data.isComposing = this.tmp.isComposing // These key commands have native behavior in contenteditable elements which // will cause our state to be out of sync, so prevent them. diff --git a/src/plugins/core.js b/src/plugins/core.js index 0fb8ddb372..f88e0c5673 100644 --- a/src/plugins/core.js +++ b/src/plugins/core.js @@ -162,7 +162,7 @@ function Plugin(options = {}) { // the cursor isn't technique in the right spot. (2016/12/01) (!(pInline && !pInline.isVoid && startOffset == 0)) && (!(nInline && !nInline.isVoid && startOffset == startText.length)) && - // COMPAT: When inserting a Space character , Chrome will sometimes + // COMPAT: When inserting a Space character, Chrome will sometimes // split the text node into two adjacent text nodes. See: // https://github.com/ianstormtaylor/slate/issues/938 (!(e.data === ' ' && IS_CHROME)) &&