Add format_text command, and editor.marks state (#3308)

* add format_text command, refactor command extensions

* update onChange to not receive selection

* update docs

* fix tests

packages/slate-react/src/components/slate.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState, useCallback } from 'react'
 import { Editor, Node, Range } from 'slate'
 
 import { ReactEditor } from '../plugin/react-editor'
@@ -15,19 +15,24 @@ import { EDITOR_TO_ON_CHANGE } from '../utils/weak-maps'
 export const Slate = (props: {
   editor: Editor
   value: Node[]
-  selection: Range | null
   children: React.ReactNode
-  onChange: (children: Node[], selection: Range | null) => void
+  onChange: (value: Node[]) => void
   [key: string]: any
 }) => {
-  const { editor, children, onChange, value, selection, ...rest } = props
+  const { editor, children, onChange, value, ...rest } = props
+  const [key, setKey] = useState(0)
   const context: [Editor] = useMemo(() => {
     editor.children = value
-    editor.selection = selection
+    Object.assign(editor, rest)
     return [editor]
-  }, [value, selection, ...Object.values(rest)])
+  }, [key, value, ...Object.values(rest)])
 
-  EDITOR_TO_ON_CHANGE.set(editor, onChange)
+  const onContextChange = useCallback(() => {
+    onChange(editor.children)
+    setKey(key + 1)
+  }, [key, onChange])
+
+  EDITOR_TO_ON_CHANGE.set(editor, onContextChange)
 
   return (
     <SlateContext.Provider value={context}>

packages/slate-react/src/plugin/react-command.ts

@@ -16,23 +16,18 @@ export interface InsertDataCommand {
 export type ReactCommand = InsertDataCommand
 
 export const ReactCommand = {
-  /**
-   * Check if a value is an `InsertDataCommand` object.
-   */
-
-  isInsertDataCommand(value: any): value is InsertDataCommand {
-    return (
-      Command.isCommand(value) &&
-      value.type === 'insert_data' &&
-      value.data instanceof DataTransfer
-    )
-  },
-
   /**
    * Check if a value is a `ReactCommand` object.
    */
 
   isReactCommand(value: any): value is InsertDataCommand {
-    return ReactCommand.isInsertDataCommand(value)
+    if (Command.isCommand(value)) {
+      switch (value.type) {
+        case 'insert_data':
+          return value.data instanceof DataTransfer
+      }
+    }
+
+    return false
   },
 }

packages/slate-react/src/plugin/with-react.ts

@@ -57,7 +57,10 @@ export const withReact = (editor: Editor): Editor => {
   }
 
   editor.exec = (command: Command) => {
-    if (ReactCommand.isInsertDataCommand(command)) {
+    if (
+      ReactCommand.isReactCommand(command) &&
+      command.type === 'insert_data'
+    ) {
       const { data } = command
       const fragment = data.getData('application/x-slate-fragment')
 
@@ -94,11 +97,10 @@ export const withReact = (editor: Editor): Editor => {
     // have to use this unstable API to ensure it batches them. (2019/12/03)
     // https://github.com/facebook/react/issues/14259#issuecomment-439702367
     ReactDOM.unstable_batchedUpdates(() => {
-      const contextOnChange = EDITOR_TO_ON_CHANGE.get(editor)
+      const onContextChange = EDITOR_TO_ON_CHANGE.get(editor)
 
-      if (contextOnChange) {
-        const { children, selection } = editor
-        contextOnChange(children, selection)
+      if (onContextChange) {
+        onContextChange()
       }
 
       onChange()

packages/slate-react/src/utils/weak-maps.ts

@@ -32,13 +32,10 @@ export const IS_DRAGGING: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_CLICKING: WeakMap<Editor, boolean> = new WeakMap()
 
 /**
- * Weak map for associating the context `onChange` prop with the plugin.
+ * Weak map for associating the context `onChange` context with the plugin.
  */
 
-export const EDITOR_TO_ON_CHANGE = new WeakMap<
-  Editor,
-  (children: Node[], selection: Range | null) => void
->()
+export const EDITOR_TO_ON_CHANGE = new WeakMap<Editor, () => void>()
 
 /**
  * Symbols.