Netlify-cms: Editor crashes when write in Hangul

[ybbarng]

- Do you want to request a feature or report a bug?
bug

- What is the current behavior?
When I write a post in netlify-cms in Hangul(Korean Alphabet), the web page has crashes with following stacktraces.

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (webpack-internal:///657:16983:20)
    at unmountHostComponents (webpack-internal:///657:11342:11)
    at commitDeletion (webpack-internal:///657:11386:5)
    at commitAllHostEffects (webpack-internal:///657:12271:13)
    at HTMLUnknownElement.callCallback (webpack-internal:///657:1299:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///657:1338:16)
    at invokeGuardedCallback (webpack-internal:///657:1195:27)
    at commitAllWork (webpack-internal:///657:12376:9)
    at workLoop (webpack-internal:///657:12687:13)
    at HTMLUnknownElement.callCallback (webpack-internal:///657:1299:14)

react-dom.development.js?054f:8305 The above error occurred in the <br> component:
    in br (created by Leaf)
    in span (created by Leaf)
    in Leaf (created by Text)
    in span (created by Text)
    in Text (created by Node)
    in p (created by paragraph)
    in paragraph (created by Node)
    in Node (created by Content)
    in div (created by Content)
    in Content (created by Editor)
    in Editor (created by Editor)
    in div (created by Editor)
    in Editor (created by MarkdownControl)
    in div (created by MarkdownControl)
    in div (created by StickyContainer)
    in StickyContainer (created by MarkdownControl)
    in MarkdownControl (created by ControlHOC)
    in ControlHOC (created by ControlPane)
    in div (created by ControlPane)
    in div (created by ControlPane)
    in div (created by ControlPane)
    in ControlPane (created by EntryEditor)
    in div (created by StickyContext)
    in StickyContext (created by EntryEditor)
    in ScrollSyncPane (created by EntryEditor)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by EntryEditor)
    in div (created by EntryEditor)
    in ScrollSync (created by EntryEditor)
    in div (created by EntryEditor)
    in EntryEditor (created by EntryPage)
    in EntryPage (created by EntryPageHOC)
    in EntryPageHOC (created by Connect(EntryPageHOC))
    in Connect(EntryPageHOC) (created by Connect(Connect(EntryPageHOC)))
    in Connect(Connect(EntryPageHOC)) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in div (created by App)
    in div (created by App)
    in div (created by App)
    in div (created by Sidebar)
    in div (created by Sidebar)
    in Sidebar (created by Sidebar)
    in Sidebar (created by Connect(Sidebar))
    in Connect(Sidebar) (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by Root)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

I think the problem comes from the syllable block characteristics of Hangul. If you want to type '가', you first type the key of 'ㄱ' and type the key of 'ㅏ'. These are two characters, but have to be merged into one character(if not, it looks like ㄱㅏ). It is the role of IME. When 'ㄱ' is entered, it is not entered to an input form directly, but saved some temporary area because it can be modified with other characters. When 'ㅏ' is entered, IME replace the former character 'ㄱ' to '가'. When a space ' ' is entered or in some situation that '가' is confirmed, it is sent to the input form to be entered.
At that moment, a crash is occurred.
If you copy a Hangul text such as '가' and paste it to editor, the crash is not occurred, because the text is pasted directly without IME support.

- If the current behavior is a bug, please provide the steps to reproduce.

1. You have change your keyboard layout of OS to Korean to prepare a Hangul (Korean) IME.
2. Open the editing post page of netlify-cms.
3. Enter any Hangul character(s) and press space bar.
4. The page turns to white and the error will be raised.

- What is the expected behavior?
Any characters in any languages have to be entered in the editor without any problem.

- Please mention your CMS, node.js, and operating system version.

• CMS: 0.6.0
• nodejs: v8.8.1
• OS: server - Ubuntu 16.04 32bit, client: Windows 10, Android 5.0

[ybbarng]

The crashes occur when a line has no text. ('' --> '가')
There is no crash when there is already other characters in that line. ('a' --> 'a가')
When a line has no data, the DOM looks like this:

<div class="nc-visualEditor-wrapper">
  <div>...</div>
  <div data-slate-editor="true" ... class="nc-visualEditor-editor" ...>
    <h1>
      <span>
        <span>
          <br>    <!-- This br looks like to be related to the error -->
        </span>
      </span>
    </h1>
  </div>
</div>

If I enter 'a', the DOM is changed like this:

<div class="nc-visualEditor-wrapper">
  <div>...</div>
  <div data-slate-editor="true" ... class="nc-visualEditor-editor" ...>
    <h1>
      <span>
        <span>a</span>    <!-- br is gone -->
      </span>
    </h1>
  </div>
</div>

The second error react-dom.development.js?054f:8305 The above error occurred in the <br> component: says that the error is related to the <br>.

Monitoring the DOM changes while entering 'ㅁ', 'ㅏ' and ' ' in empty editor, I found that the <br> is deleted when 'ㅁ' is entered and 'ㅁ' is entered to the DOM correctly. When ' ' is entered, it looks like that react tries to delete <br> which is already deleted.

[ybbarng]

It is not a bug of netlify-cms but a bug of slate.
The commit to fix this bug was merged and included in v0.30.6 which is published 5 hours ago(...)
Now I can do is waiting for the slate of netlify-cms to be updated to that fixed version or prepare PR to do it.

[tech4him1]

@ybbarng Wow, thank you so much for tracing that bug for us.

@erquhart Are you going to be doing an update for Slate soon?

[Benaiah]

@ybbarng awesome - thanks for looking into this and updating us on the fix.

[ybbarng]

I'd like to contribute to this work, but I'm not an expert on netlify-cms, slate and remark (MDAST), it is beyond my ability. Instead, here I share a note for the slate versions that I gathered.

There are lots of breaking update have done in slate, so it looks like not an easy work.
The target packages are: slate, slate-plain-serializer, slate-react

Changelogs

• slate
• slate-plain-serializer
• slate-react

netlify-cms uses: [email protected] [email protected] [email protected]

Updates
Here's are update commit hashes and each versions based on major update of slate.

3b48a083f82be6fa732e836bfdd567e2977ffd5b
[email protected] [email protected] [email protected]

de573f2bfcb1289b15efb87058036f28ec83d7cf
[email protected] [email protected] [email protected]

f57b53c2193822da13125e115a068468d1135b8b
[email protected] [email protected] [email protected]

3e860a1cbe73ab3abc4a26cc7f30543e7a3b0592
[email protected] [email protected] [email protected]

ca57f1f8d32de73b5969d106314591c14c9e703c
[email protected] [email protected] [email protected]

c3b26032ac20b26d272f758050bd73c7bf4b826d
[email protected] [email protected] [email protected]

e218f8a191445e946558841e5b0be790341af7de
[email protected] [email protected] [email protected]   // not a major update but the bug fixed version

[erquhart]

Thanks @ybbarng!! And wow does Slate move fast, yikes. I'll get on the update right away.

[erquhart]

@ybbarng not released yet, but the CMS has Slate 0.30 in master - can you test it out here and confirm whether this is fixed: https://cms-demo.netlify.com

[ybbarng]

Oh, I am sorry for late. I was too busy these days.
I test the demo site and I can see the bug is gone. Wow, it's great.

[erquhart]

Awesome!