Repository: ianstormtaylor/slate
File: packages/slate-react/src/components/editable.tsx (TypeScript)

Code before:
            (!state.isUpdatingSelection || androidInputManager?.isFlushing()) &&
            !state.isDraggingInternally
          ) {
            const root = ReactEditor.findDocumentOrShadowRoot(editor)
            const { activeElement } = root
            const el = ReactEditor.toDOMNode(editor, editor)
            const domSelection = getSelection(root)

            if (activeElement === el) {
              state.latestElement = activeElement
              IS_FOCUSED.set(editor, true)
            } else {
              IS_FOCUSED.delete(editor)
            }

            if (!domSelection) {
              return Transforms.deselect(editor)
            }

            const { anchorNode, focusNode } = domSelection

            const anchorNodeSelectable =
              ReactEditor.hasEditableTarget(editor, anchorNode) ||
              ReactEditor.isTargetInsideNonReadonlyVoid(editor, anchorNode)

            const focusNodeSelectable = ReactEditor.hasTarget(editor, focusNode)

            if (anchorNodeSelectable && focusNodeSelectable) {
              const range = ReactEditor.toSlateRange(editor, domSelection, {
                exactMatch: false,
                suppressThrow: true,
              })

              if (range) {
                if (
                  !ReactEditor.isComposing(editor) &&
                  !androidInputManager?.hasPendingChanges() &&
                  !androidInputManager?.isFlushing()
                ) {
                  Transforms.select(editor, range)
                } else {
                  androidInputManager?.handleUserSelect(range)
                }
              }
            }

            // Deselect the editor if the dom selection is not selectable in readonly mode
            if (readOnly && (!anchorNodeSelectable || !focusNodeSelectable)) {
              Transforms.deselect(editor)
            }
          }

Review comment (suggestion):
I'm not sure `focusNodeSelectable` is still the best name for this variable, since the non-void non-editable nodes still aren't selectable. `ReactEditor.toSlateRange` just changes the focus to a node that _is_ selectable now. Can't think of a better name at the moment, though.

Code after:
            (!state.isUpdatingSelection || androidInputManager?.isFlushing()) &&
            !state.isDraggingInternally
          ) {
            const root = ReactEditor.findDocumentOrShadowRoot(editor)
            const { activeElement } = root
            const el = ReactEditor.toDOMNode(editor, editor)
            const domSelection = getSelection(root)

            if (activeElement === el) {
              state.latestElement = activeElement
              IS_FOCUSED.set(editor, true)
            } else {
              IS_FOCUSED.delete(editor)
            }

            if (!domSelection) {
              return Transforms.deselect(editor)
            }

            const { anchorNode, focusNode } = domSelection

            const anchorNodeSelectable =
              ReactEditor.hasEditableTarget(editor, anchorNode) ||
              ReactEditor.isTargetInsideNonReadonlyVoid(editor, anchorNode)

            const focusNodeInEditor = ReactEditor.hasTarget(editor, focusNode)

            if (anchorNodeSelectable && focusNodeInEditor) {
              const range = ReactEditor.toSlateRange(editor, domSelection, {
                exactMatch: false,
                suppressThrow: true,
              })

              if (range) {
                if (
                  !ReactEditor.isComposing(editor) &&
                  !androidInputManager?.hasPendingChanges() &&
                  !androidInputManager?.isFlushing()
                ) {
                  Transforms.select(editor, range)
                } else {
                  androidInputManager?.handleUserSelect(range)
                }
              }
            }

            // Deselect the editor if the dom selection is not selectable in readonly mode
            if (readOnly && (!anchorNodeSelectable || !focusNodeInEditor)) {
              Transforms.deselect(editor)
            }
          }