Merge branch 'main' into fix/decorations-selection-style

docs/walkthroughs/01-installing-slate.md

@@ -40,7 +40,7 @@ The next step is to create a new `Editor` object. We want the editor to be stabl
 ```jsx
 const App = () => {
   // Create a Slate editor object that won't change across renders.
-  const editor = useState(() => withReact(createEditor()))
+  const [editor] = useState(() => withReact(createEditor()))
   return null
 }
 ```

packages/slate-react/CHANGELOG.md

@@ -1,5 +1,23 @@
 # slate-react
 
+## 0.82.2
+
+### Patch Changes
+
+- [#5120](https://github.com/ianstormtaylor/slate/pull/5120) [`9815bdab`](https://github.com/ianstormtaylor/slate/commit/9815bdabdd34221ed86f68b556cfa43d845e2db0) Thanks [@hueyhe](https://github.com/hueyhe)! - Fix editor selection out of sync in readonly mode
+
+* [#5100](https://github.com/ianstormtaylor/slate/pull/5100) [`8eb1972b`](https://github.com/ianstormtaylor/slate/commit/8eb1972b5b2f9489936b1759afb76574040af5a0) Thanks [@KittyGiraudel](https://github.com/KittyGiraudel)! - Add `aria-multiline` attribute to textbox editor
+
+- [#5105](https://github.com/ianstormtaylor/slate/pull/5105) [`55b95740`](https://github.com/ianstormtaylor/slate/commit/55b9574097f6008bda7ed8e3cb7aa9dd607d9f49) Thanks [@yume-chan](https://github.com/yume-chan)! - Change `Element` component to use callback-style ref to reliably track DOM node of rendered custom elements
+
+## 0.82.1
+
+### Patch Changes
+
+- [#5084](https://github.com/ianstormtaylor/slate/pull/5084) [`50de780b`](https://github.com/ianstormtaylor/slate/commit/50de780b1c32fa2c52ad88d42031748f9d3944e9) Thanks [@BitPhinix](https://github.com/BitPhinix)! - Fix selection handling with slow flush in mark placeholders on android, fix auto-capitalize after placeholder
+
+* [#5091](https://github.com/ianstormtaylor/slate/pull/5091) [`e18879e7`](https://github.com/ianstormtaylor/slate/commit/e18879e728077b09580b29e9a6683aaa66629bc5) Thanks [@e1himself](https://github.com/e1himself)! - Fix `withReact()` function type definition
+
 ## 0.82.0
 
 ### Minor Changes

packages/slate-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slate-react",
   "description": "Tools for building completely customizable richtext editors with React.",
-  "version": "0.82.0",
+  "version": "0.82.2",
   "license": "MIT",
   "repository": "git://github.com/ianstormtaylor/slate.git",
   "main": "dist/index.js",
@@ -35,7 +35,7 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "react-test-renderer": ">=16.8.0",
-    "slate": "^0.82.0",
+    "slate": "^0.82.1",
     "slate-hyperscript": "^0.81.3",
     "source-map-loader": "^4.0.0"
   },

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

@@ -222,7 +222,7 @@ export const Editable = (props: EditableProps) => {
           if (range) {
             if (
               !ReactEditor.isComposing(editor) &&
-              !androidInputManager?.hasPendingDiffs() &&
+              !androidInputManager?.hasPendingChanges() &&
               !androidInputManager?.isFlushing()
             ) {
               Transforms.select(editor, range)
@@ -231,6 +231,11 @@ export const Editable = (props: EditableProps) => {
             }
           }
         }
+
+        // Deselect the editor if the dom selection is not selectable in readonly mode
+        if (readOnly && (!anchorNodeSelectable || !focusNodeSelectable)) {
+          Transforms.deselect(editor)
+        }
       }
     }, 100),
     [readOnly]
@@ -795,11 +800,17 @@ export const Editable = (props: EditableProps) => {
   // before we receive the composition end event.
   useEffect(() => {
     setTimeout(() => {
-      if (marks) {
-        EDITOR_TO_PENDING_INSERTION_MARKS.set(editor, marks)
-      } else {
-        EDITOR_TO_PENDING_INSERTION_MARKS.delete(editor)
+      const { selection } = editor
+      if (selection) {
+        const { anchor } = selection
+        const { text, ...rest } = Node.leaf(editor, anchor.path)
+        if (!Text.equals(rest as Text, marks as Text, { loose: true })) {
+          EDITOR_TO_PENDING_INSERTION_MARKS.set(editor, marks)
+          return
+        }
       }
+
+      EDITOR_TO_PENDING_INSERTION_MARKS.delete(editor)
     })
   })
 
@@ -809,6 +820,7 @@ export const Editable = (props: EditableProps) => {
         <RestoreDOM node={ref} receivedUserInput={receivedUserInput}>
           <Component
             role={readOnly ? undefined : 'textbox'}
+            aria-multiline={readOnly ? undefined : true}
             {...attributes}
             // COMPAT: Certain browsers don't support the `beforeinput` event, so we'd
             // have to use hacks to make these replacement-based features work.
@@ -1627,7 +1639,14 @@ export type RenderPlaceholderProps = {
 export const DefaultPlaceholder = ({
   attributes,
   children,
-}: RenderPlaceholderProps) => <span {...attributes}>{children}</span>
+}: RenderPlaceholderProps) => (
+  // COMPAT: Artificially add a line-break to the end on the placeholder element
+  // to prevent Android IMEs to pick up its content in autocorrect and to auto-capitalize the first letter
+  <span {...attributes}>
+    {children}
+    {IS_ANDROID && <br />}
+  </span>
+)
 
 /**
  * A default memoized decorate function.

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

@@ -1,12 +1,11 @@
-import React, { Fragment, useRef, useMemo } from 'react'
+import React, { Fragment, useCallback, useRef, useMemo } from 'react'
 import getDirection from 'direction'
 import { Editor, Path, Node, Range, Element as SlateElement } from 'slate'
 
 import Text from './text'
 import useChildren from '../hooks/use-children'
 import { useDecorations } from '../hooks/use-decorations'
 import { ReactEditor, useSlateStatic, useReadOnly } from '..'
-import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'
 import {
   NODE_TO_ELEMENT,
   ELEMENT_TO_NODE,
@@ -20,7 +19,6 @@ import {
   RenderLeafProps,
   RenderPlaceholderProps,
 } from './editable'
-import { IS_ANDROID } from '../utils/environment'
 
 /**
  * Element.
@@ -44,12 +42,26 @@ const Element = (props: ElementProps) => {
     renderLeaf,
     selection,
   } = props
-  const ref = useRef<HTMLElement>(null)
   const editor = useSlateStatic()
   const ds = useDecorations(element)
   const readOnly = useReadOnly()
   const isInline = editor.isInline(element)
   const key = ReactEditor.findKey(editor, element)
+  const ref = useCallback(
+    (ref: HTMLElement | null) => {
+      // Update element-related weak maps with the DOM element ref.
+      const KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor)
+      if (ref) {
+        KEY_TO_ELEMENT?.set(key, ref)
+        NODE_TO_ELEMENT.set(element, ref)
+        ELEMENT_TO_NODE.set(ref, element)
+      } else {
+        KEY_TO_ELEMENT?.delete(key)
+        NODE_TO_ELEMENT.delete(element)
+      }
+    },
+    [editor, key, element]
+  )
   let children: React.ReactNode = useChildren({
     decorations: [...ds, ...decorations],
     node: element,
@@ -123,19 +135,6 @@ const Element = (props: ElementProps) => {
     NODE_TO_PARENT.set(text, element)
   }
 
-  // Update element-related weak maps with the DOM element ref.
-  useIsomorphicLayoutEffect(() => {
-    const KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor)
-    if (ref.current) {
-      KEY_TO_ELEMENT?.set(key, ref.current)
-      NODE_TO_ELEMENT.set(element, ref.current)
-      ELEMENT_TO_NODE.set(ref.current, element)
-    } else {
-      KEY_TO_ELEMENT?.delete(key)
-      NODE_TO_ELEMENT.delete(element)
-    }
-  })
-
   return renderElement({ attributes, children, element })
 }
 

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

@@ -101,7 +101,7 @@ export const Slate = (props: {
   return (
     <SlateSelectorContext.Provider value={selectorContext}>
       <SlateContext.Provider value={context}>
-        <EditorContext.Provider value={editor}>
+        <EditorContext.Provider value={context.editor}>
           <FocusedContext.Provider value={isFocused}>
             {children}
           </FocusedContext.Provider>