From 04a2aa2d399fb792fc3dd677e418b1d6e4b269fe Mon Sep 17 00:00:00 2001
From: Matus <peciar.matus@gmail.com>
Date: Fri, 22 Jun 2018 17:26:58 +0800
Subject: [PATCH] IME composition handling, fixes #138

---
 demo.html        |  2 +-
 dist/pell.js     | 29 ++++++++++++++++++++++++++---
 dist/pell.min.js |  2 +-
 src/pell.js      | 23 +++++++++++++++++++++--
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/demo.html b/demo.html
index 7ddb348..6b49ac8 100644
--- a/demo.html
+++ b/demo.html
@@ -46,7 +46,7 @@ <h3>HTML output:</h3>
     <script>
       var editor = window.pell.init({
         element: document.getElementById('pell'),
-        defaultParagraphSeparator: 'p',
+        defaultParagraphSeparator: 'div',
         styleWithCSS: false,
         onChange: function (html) {
           document.getElementById('text-output').innerHTML = html
diff --git a/dist/pell.js b/dist/pell.js
index 62ddf0c..0e1b826 100644
--- a/dist/pell.js
+++ b/dist/pell.js
@@ -170,12 +170,35 @@ var init = function init(settings) {
   var content = settings.element.content = createElement('div');
   content.contentEditable = true;
   content.className = classes.content;
-  content.oninput = function (_ref) {
-    var firstChild = _ref.target.firstChild;
 
-    if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
+  var formatIfTextNode = function formatIfTextNode(node) {
+    if (node && node.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
     settings.onChange(content.innerHTML);
   };
+
+  /*
+  * Prevent formatting text before IME composition ended
+  * (which breaks composition of Chinese characters for example)
+  * https://developer.mozilla.org/en-US/docs/Mozilla/IME_handling_guide
+  **/
+  var isComposing = false;
+  addEventListener(content, 'compositionstart', function () {
+    isComposing = true;
+  });
+  addEventListener(content, 'compositionend', function (_ref) {
+    var firstChild = _ref.target.firstChild;
+
+    isComposing = false;
+    formatIfTextNode(firstChild);
+  });
+
+  content.oninput = function (_ref2) {
+    var firstChild = _ref2.target.firstChild;
+
+    if (!isComposing) {
+      formatIfTextNode(firstChild);
+    }
+  };
   content.onkeydown = function (event) {
     if (event.key === 'Tab') {
       event.preventDefault();
diff --git a/dist/pell.min.js b/dist/pell.min.js
index 8615f8e..1a800ee 100644
--- a/dist/pell.min.js
+++ b/dist/pell.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.pell={})}(this,function(t){"use strict";var e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},n=function(t,e,n){return t.addEventListener(e,n)},r=function(t,e){return t.appendChild(e)},i=function(t){return document.createElement(t)},o=function(t){return document.queryCommandState(t)},u=function(t){return document.queryCommandValue(t)},c=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return document.execCommand(t,!1,e)},l={bold:{icon:"<b>B</b>",title:"Bold",state:function(){return o("bold")},result:function(){return c("bold")}},italic:{icon:"<i>I</i>",title:"Italic",state:function(){return o("italic")},result:function(){return c("italic")}},underline:{icon:"<u>U</u>",title:"Underline",state:function(){return o("underline")},result:function(){return c("underline")}},strikethrough:{icon:"<strike>S</strike>",title:"Strike-through",state:function(){return o("strikeThrough")},result:function(){return c("strikeThrough")}},heading1:{icon:"<b>H<sub>1</sub></b>",title:"Heading 1",result:function(){return c("formatBlock","<h1>")}},heading2:{icon:"<b>H<sub>2</sub></b>",title:"Heading 2",result:function(){return c("formatBlock","<h2>")}},paragraph:{icon:"&#182;",title:"Paragraph",result:function(){return c("formatBlock","<p>")}},quote:{icon:"&#8220; &#8221;",title:"Quote",result:function(){return c("formatBlock","<blockquote>")}},olist:{icon:"&#35;",title:"Ordered List",result:function(){return c("insertOrderedList")}},ulist:{icon:"&#8226;",title:"Unordered List",result:function(){return c("insertUnorderedList")}},code:{icon:"&lt;/&gt;",title:"Code",result:function(){return c("formatBlock","<pre>")}},line:{icon:"&#8213;",title:"Horizontal Line",result:function(){return c("insertHorizontalRule")}},link:{icon:"&#128279;",title:"Link",result:function(){var t=window.prompt("Enter the link URL");t&&c("createLink",t)}},image:{icon:"&#128247;",title:"Image",result:function(){var t=window.prompt("Enter the image URL");t&&c("insertImage",t)}}},a={actionbar:"pell-actionbar",button:"pell-button",content:"pell-content",selected:"pell-button-selected"},s=function(t){var o=t.actions?t.actions.map(function(t){return"string"==typeof t?l[t]:l[t.name]?e({},l[t.name],t):t}):Object.keys(l).map(function(t){return l[t]}),s=e({},a,t.classes),f=t.defaultParagraphSeparator||"div",d=i("div");d.className=s.actionbar,r(t.element,d);var m=t.element.content=i("div");return m.contentEditable=!0,m.className=s.content,m.oninput=function(e){var n=e.target.firstChild;n&&3===n.nodeType?c("formatBlock","<"+f+">"):"<br>"===m.innerHTML&&(m.innerHTML=""),t.onChange(m.innerHTML)},m.onkeydown=function(t){"Tab"===t.key?t.preventDefault():"Enter"===t.key&&"blockquote"===u("formatBlock")&&setTimeout(function(){return c("formatBlock","<"+f+">")},0)},r(t.element,m),o.forEach(function(t){var e=i("button");if(e.className=s.button,e.innerHTML=t.icon,e.title=t.title,e.setAttribute("type","button"),e.onclick=function(){return t.result()&&m.focus()},t.state){var o=function(){return e.classList[t.state()?"add":"remove"](s.selected)};n(m,"keyup",o),n(m,"mouseup",o),n(e,"click",o)}r(d,e)}),t.styleWithCSS&&c("styleWithCSS"),c("defaultParagraphSeparator",f),t.element},f={exec:c,init:s};t.exec=c,t.init=s,t.default=f,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.pell={})}(this,function(t){"use strict";var e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},n=function(t,e,n){return t.addEventListener(e,n)},r=function(t,e){return t.appendChild(e)},i=function(t){return document.createElement(t)},o=function(t){return document.queryCommandState(t)},u=function(t){return document.queryCommandValue(t)},c=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return document.execCommand(t,!1,e)},l={bold:{icon:"<b>B</b>",title:"Bold",state:function(){return o("bold")},result:function(){return c("bold")}},italic:{icon:"<i>I</i>",title:"Italic",state:function(){return o("italic")},result:function(){return c("italic")}},underline:{icon:"<u>U</u>",title:"Underline",state:function(){return o("underline")},result:function(){return c("underline")}},strikethrough:{icon:"<strike>S</strike>",title:"Strike-through",state:function(){return o("strikeThrough")},result:function(){return c("strikeThrough")}},heading1:{icon:"<b>H<sub>1</sub></b>",title:"Heading 1",result:function(){return c("formatBlock","<h1>")}},heading2:{icon:"<b>H<sub>2</sub></b>",title:"Heading 2",result:function(){return c("formatBlock","<h2>")}},paragraph:{icon:"&#182;",title:"Paragraph",result:function(){return c("formatBlock","<p>")}},quote:{icon:"&#8220; &#8221;",title:"Quote",result:function(){return c("formatBlock","<blockquote>")}},olist:{icon:"&#35;",title:"Ordered List",result:function(){return c("insertOrderedList")}},ulist:{icon:"&#8226;",title:"Unordered List",result:function(){return c("insertUnorderedList")}},code:{icon:"&lt;/&gt;",title:"Code",result:function(){return c("formatBlock","<pre>")}},line:{icon:"&#8213;",title:"Horizontal Line",result:function(){return c("insertHorizontalRule")}},link:{icon:"&#128279;",title:"Link",result:function(){var t=window.prompt("Enter the link URL");t&&c("createLink",t)}},image:{icon:"&#128247;",title:"Image",result:function(){var t=window.prompt("Enter the image URL");t&&c("insertImage",t)}}},a={actionbar:"pell-actionbar",button:"pell-button",content:"pell-content",selected:"pell-button-selected"},s=function(t){var o=t.actions?t.actions.map(function(t){return"string"==typeof t?l[t]:l[t.name]?e({},l[t.name],t):t}):Object.keys(l).map(function(t){return l[t]}),s=e({},a,t.classes),f=t.defaultParagraphSeparator||"div",d=i("div");d.className=s.actionbar,r(t.element,d);var m=t.element.content=i("div");m.contentEditable=!0,m.className=s.content;var p=function(e){e&&3===e.nodeType?c("formatBlock","<"+f+">"):"<br>"===m.innerHTML&&(m.innerHTML=""),t.onChange(m.innerHTML)},b=!1;return n(m,"compositionstart",function(){b=!0}),n(m,"compositionend",function(t){var e=t.target.firstChild;b=!1,p(e)}),m.oninput=function(t){var e=t.target.firstChild;b||p(e)},m.onkeydown=function(t){"Tab"===t.key?t.preventDefault():"Enter"===t.key&&"blockquote"===u("formatBlock")&&setTimeout(function(){return c("formatBlock","<"+f+">")},0)},r(t.element,m),o.forEach(function(t){var e=i("button");if(e.className=s.button,e.innerHTML=t.icon,e.title=t.title,e.setAttribute("type","button"),e.onclick=function(){return t.result()&&m.focus()},t.state){var o=function(){return e.classList[t.state()?"add":"remove"](s.selected)};n(m,"keyup",o),n(m,"mouseup",o),n(e,"click",o)}r(d,e)}),t.styleWithCSS&&c("styleWithCSS"),c("defaultParagraphSeparator",f),t.element},f={exec:c,init:s};t.exec=c,t.init=s,t.default=f,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/src/pell.js b/src/pell.js
index 3e2fe64..d81ee33 100644
--- a/src/pell.js
+++ b/src/pell.js
@@ -120,11 +120,30 @@ export const init = settings => {
   const content = settings.element.content = createElement('div')
   content.contentEditable = true
   content.className = classes.content
-  content.oninput = ({ target: { firstChild } }) => {
-    if (firstChild && firstChild.nodeType === 3) exec(formatBlock, `<${defaultParagraphSeparator}>`)
+
+  const formatIfTextNode = node => {
+    if (node && node.nodeType === 3) exec(formatBlock, `<${defaultParagraphSeparator}>`)
     else if (content.innerHTML === '<br>') content.innerHTML = ''
     settings.onChange(content.innerHTML)
   }
+
+  /*
+  * Prevent formatting text before IME composition ended
+  * (which breaks composition of Chinese characters for example)
+  * https://developer.mozilla.org/en-US/docs/Mozilla/IME_handling_guide
+  **/
+  let isComposing = false
+  addEventListener(content, 'compositionstart', () => { isComposing = true })
+  addEventListener(content, 'compositionend', ({ target: { firstChild } }) => {
+    isComposing = false
+    formatIfTextNode(firstChild)
+  })
+
+  content.oninput = ({ target: { firstChild } }) => {
+    if (!isComposing) {
+      formatIfTextNode(firstChild)
+    }
+  }
   content.onkeydown = event => {
     if (event.key === 'Tab') {
       event.preventDefault()