Feat: Enable selection when editor in readonly=true (#4620)

* make editor.selection avaliable when Editor is contenteditable="false"

* remove dom selection limition of read-only

* Improve grammar of comments regarding selection when read-only is true

* Add Changeset

Co-authored-by: Xheldon <c1006044256@gmail.com>

.changeset/short-squids-remember.md

@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+Support selection in readOnly=true editors.

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

@@ -234,11 +234,7 @@ export const AndroidEditable = (props: EditableProps): JSX.Element => {
   const onDOMSelectionChange = useCallback(
     throttle(() => {
       try {
-        if (
+        if (!state.isUpdatingSelection && !inputManager.isReconciling.current) {
-          !readOnly &&
-          !state.isUpdatingSelection &&
-          !inputManager.isReconciling.current
-        ) {
           const root = ReactEditor.findDocumentOrShadowRoot(editor)
           const { activeElement } = root
           const el = ReactEditor.toDOMNode(editor, editor)

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

@@ -478,7 +478,6 @@ export const Editable = (props: EditableProps) => {
   const onDOMSelectionChange = useCallback(
     throttle(() => {
       if (
-        !readOnly &&
         !state.isComposing &&
         !state.isUpdatingSelection &&
         !state.isDraggingInternally
@@ -585,7 +584,12 @@ export const Editable = (props: EditableProps) => {
           }
           data-slate-editor
           data-slate-node="value"
-          contentEditable={readOnly ? undefined : true}
+          // explicitly set this
+          contentEditable={!readOnly}
+          // in some cases, a decoration needs access to the range / selection to decorate a text node,
+          // then you will select the whole text node when you select part the of text
+          // this magic zIndex="-1" will fix it
+          zindex={-1}
           suppressContentEditableWarning
           ref={ref}
           style={{

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

@@ -216,9 +216,12 @@ export const ReactEditor = {
 
     return (
       targetEl.closest(`[data-slate-editor]`) === editorEl &&
-      (!editable ||
+      (!editable || targetEl.isContentEditable
-        targetEl.isContentEditable ||
+        ? true
-        !!targetEl.getAttribute('data-slate-zero-width'))
+        : (typeof targetEl.isContentEditable === 'boolean' && // isContentEditable exists only on HTMLElement, and on other nodes it will be undefined
+            // this is the core logic that lets you know you got the right editor.selection instead of null when editor is contenteditable="false"(readOnly)
+            targetEl.closest('[contenteditable="false"]') === editorEl) ||
+          !!targetEl.getAttribute('data-slate-zero-width'))
     )
   },