Add Android 8 and 9 compatibility using Mutations (#2853)

* Add debug-mutations

* Fix linting

* Add debug-mutations to o core plugins

* Fix debug output

* Add comment about debug statement

* Add comment explaining the building of debug output object

* Add framework for mutations and mutation observer

* Working splitBlock and mergeBlock

* many things working but not autocorrect

* All later tests pass

* Before adding isComposing to composition-manager

* Fixit

* fix enter enter backspace backspace

* Pass all tests except space-back-space-back

* Passes all tests I think but doesn't continuous backspace or select delete

* Passes all tests and delete selection work

* Fix for merge

* Passes all tests including typing hello world on new line and enter

* Before switching to a function

* Fix enter after last char

* Fix it wasn't me. no. bug

* Remove timeout delay on compositionEnd and everthing works except it wasnt me. no.

* Passes all tests but need to add tests for delete all and select delete

* Pass all tests

* Fix  remove selection

* Added flush onCompositionEnd just in case

* Fix bugs for Android 8 split join and fix side effects on Android 9 to that fix

* Add comments to composition manager

* Clean up code

* Fix bug with delete range

* Add comments

* Fix focus lost bug on change examples

* Improve comments

* Rename clear to clearAction and a comment

* Rename lastEl to last.rootEl

* Remove isListening

* Rename vars

* Fix bug where changing to new example during a composition messes up update

* Add comment to switching examples in composition fix

* Improve comments

* Refactor

* Refactor removeNode

* Remove unused event callbacks

* Refactor connect

* Cleanup mutation plugin

* Remove unnecessary comments

* Remove readme

* Refactor ReactPlugin

* Refactor plugins and injection locations

* Remove dom-observer

* Remove is-input-data helpers

* Move fixSelectionInZeroWidthBlock

* Fix some linting and also a composition manager bug

* Fix linting and remove placeholder on Android

* Refactor

* Update composition-manager description

* Fix comment on composition manager

Co-Authored-By: Nick Anderson <tetramputechture@gmail.com>

packages/slate-react/package.json

@@ -33,6 +33,7 @@
   "peerDependencies": {
     "immutable": ">=3.8.1 || >4.0.0-rc",
     "react": ">=16.6.0",
+    "react-dom": ">=16.6.0",
     "slate": ">=0.47.0"
   },
   "devDependencies": {

packages/slate-react/src/components/content.js

@@ -101,6 +101,7 @@ class Content extends React.Component {
     isUpdatingSelection: false,
     nodeRef: React.createRef(),
     nodeRefs: {},
+    contentKey: 0,
   }
 
   /**
@@ -211,7 +212,7 @@ class Content extends React.Component {
     const native = window.getSelection()
     const { activeElement } = window.document
 
-    if (debug.enabled) {
+    if (debug.update.enabled) {
       debug.update('updateSelection', { selection: selection.toJSON() })
     }
 
@@ -322,12 +323,23 @@ class Content extends React.Component {
         }
 
         this.tmp.isUpdatingSelection = false
+
+        debug.update('updateSelection:setTimeout', {
+          anchorOffset: window.getSelection().anchorOffset,
+        })
       })
     }
 
-    if (updated && debug.enabled) {
+    if (updated && (debug.enabled || debug.update.enabled)) {
       debug('updateSelection', { selection, native, activeElement })
-      debug.update('updateSelection-applied', { selection })
+
+      debug.update('updateSelection:applied', {
+        selection: selection.toJSON(),
+        native: {
+          anchorOffset: native.anchorOffset,
+          focusOffset: native.focusOffset,
+        },
+      })
     }
   }
 
@@ -470,6 +482,11 @@ class Content extends React.Component {
 
     const window = getWindow(event.target)
     const { activeElement } = window.document
+
+    debug.update('onNativeSelectionChange', {
+      anchorOffset: window.getSelection().anchorOffset,
+    })
+
     if (activeElement !== this.ref.current) return
 
     this.props.onEvent('onSelect', event)
@@ -512,7 +529,10 @@ class Content extends React.Component {
       ...props.style,
     }
 
+    // console.log('rerender content', this.tmp.contentKey, document.text)
+
     debug('render', { props })
+    debug.update('render', this.tmp.contentKey, document.text)
 
     this.props.onEvent('onRender')
 
@@ -523,7 +543,7 @@ class Content extends React.Component {
 
     return (
       <Container
-        key={this.props.contentKey}
+        key={this.tmp.contentKey}
         {...handlers}
         {...data}
         ref={this.setRef}