Fix stale decorations (ianstormtaylor#4876)

* test changes

* fix decoration not updating

* Add changeset

* Fix lint issues

* Tests with earlier version of Node.js

* Bump node version on CI

The base typescript config uses ESNext as target, so presumably the
latest node should be used.

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>

.changeset/twelve-kings-turn.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix decorations not getting applied for children unless parent changes

jest.config.js

@@ -1,5 +1,12 @@
 const config = {
   testMatch: ['<rootDir>/packages/slate-react/test/**/*.{js,ts,tsx,jsx}'],
+  preset: 'ts-jest',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/packages/slate-react/tsconfig.json',
+    },
+  },
+  testEnvironment: 'jsdom',
 }
 
 module.exports = config

package.json

@@ -110,6 +110,7 @@
     "slate-hyperscript": "workspace:*",
     "slate-react": "workspace:*",
     "source-map-loader": "^0.2.4",
+    "ts-jest": "^27.1.3",
     "typescript": "3.9.7"
   },
   "simple-git-hooks": {

packages/slate-react/package.json

@@ -25,9 +25,11 @@
   },
   "devDependencies": {
     "@babel/runtime": "^7.7.4",
+    "@types/jest": "^27.4.1",
+    "@types/jsdom": "^16.2.14",
     "@types/react": "^16.9.13",
     "@types/react-dom": "^16.9.4",
-    "jsdom": "^16.6.0",
+    "@types/react-test-renderer": "^16.8.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "react-test-renderer": ">=16.8.0",

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

@@ -563,7 +563,9 @@ export const Editable = (props: EditableProps) => {
     }
   }, [scheduleOnDOMSelectionChange])
 
-  const decorations = decorate([editor, []])
+  const decorations = [...Node.nodes(editor)].flatMap(([n, p]) =>
+    decorate([n, p])
+  )
 
   if (
     placeholder &&

packages/slate-react/src/custom-types.ts

@@ -5,7 +5,7 @@ declare module 'slate' {
   interface CustomTypes {
     Editor: ReactEditor
     Text: BaseText & {
-      placeholder: string
+      placeholder?: string
     }
     Range: BaseRange & {
       placeholder?: string

packages/slate-react/src/hooks/use-children.tsx

@@ -49,15 +49,8 @@ const useChildren = (props: {
     const key = ReactEditor.findKey(editor, n)
     const range = Editor.range(editor, p)
     const sel = selection && Range.intersection(range, selection)
-    const ds = decorate([n, p])
 
-    for (const dec of decorations) {
-      const d = Range.intersection(dec, range)
-
-      if (d) {
-        ds.push(d)
-      }
-    }
+    const ds = decorations.filter(dec => Range.intersection(dec, range))
 
     if (Element.isElement(n)) {
       children.push(

packages/slate-react/test/index.spec.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { createEditor, NodeEntry, Range } from 'slate'
+import { create, act, ReactTestRenderer } from 'react-test-renderer'
+import {
+  Slate,
+  withReact,
+  DefaultEditable,
+  RenderElementProps,
+  DefaultElement,
+} from '../src'
+
+describe('slate-react', () => {
+  describe('Editable', () => {
+    describe('decorate', () => {
+      const createNodeMock = () => ({
+        ownerDocument: global.document,
+        getRootNode: () => global.document,
+      })
+
+      it('should be called on all nodes in document', () => {
+        const editor = withReact(createEditor())
+        const value = [{ type: 'block', children: [{ text: '' }] }]
+
+        const decorate = jest.fn<Range[], [NodeEntry]>(entry => [])
+
+        let el: ReactTestRenderer
+
+        act(() => {
+          el = create(
+            <Slate editor={editor} value={value} onChange={() => {}}>
+              <DefaultEditable decorate={decorate} />
+            </Slate>,
+            { createNodeMock }
+          )
+        })
+
+        expect(decorate).toHaveBeenCalledTimes(3)
+      })
+
+      it('should rerender the part of the tree that received an updated decoration', () => {
+        const editor = withReact(createEditor())
+
+        const value = [
+          { type: 'block', children: [{ text: '' }] },
+          { type: 'block', children: [{ text: '' }] },
+        ]
+
+        // initial render does not return
+        const decorate = jest.fn<Range[], [NodeEntry]>(() => [])
+
+        const renderElement = jest.fn<JSX.Element, [RenderElementProps]>(
+          DefaultElement
+        )
+
+        const onChange = jest.fn<void, []>()
+
+        let el: ReactTestRenderer
+
+        act(() => {
+          el = create(
+            <Slate editor={editor} value={value} onChange={onChange}>
+              <DefaultEditable
+                decorate={decorate}
+                renderElement={renderElement}
+              />
+            </Slate>,
+            { createNodeMock }
+          )
+        })
+
+        expect(renderElement).toHaveBeenCalledTimes(2)
+
+        decorate.mockImplementation(([node]) => {
+          if (node !== value[0].children[0]) {
+            return []
+          }
+
+          return [
+            {
+              anchor: { path: [0, 0], offset: 0 },
+              focus: { path: [0, 0], offset: 0 },
+            },
+          ]
+        })
+
+        act(() => {
+          el.update(
+            <Slate editor={editor} value={value} onChange={onChange}>
+              <DefaultEditable
+                decorate={decorate}
+                renderElement={renderElement}
+              />
+            </Slate>
+          )
+        })
+
+        expect(renderElement).toHaveBeenCalledTimes(3)
+      })
+    })
+  })
+})

packages/slate-react/test/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../config/typescript/tsconfig.json",
+  "references": [{ "path": "../" }]
+}