@portabletext/editor 1.1.12-canary.2 → 1.1.12-canary.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.12-canary.2",
+  "version": "1.1.12-canary.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/editor/Editable.tsx

@@ -22,7 +22,6 @@ import {
   Path,
   Range as SlateRange,
   Transforms,
-  type BaseEditor,
   type BaseRange,
   type NodeEntry,
   type Operation,
@@ -39,7 +38,6 @@ import type {
   EditorSelection,
   OnCopyFn,
   OnPasteFn,
-  PortableTextSlateEditor,
   RangeDecoration,
   RenderAnnotationFunction,
   RenderBlockFunction,
@@ -71,7 +69,6 @@ import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {usePortableTextEditorReadOnlyStatus} from './hooks/usePortableTextReadOnly'
 import {createWithHotkeys, createWithInsertData} from './plugins'
 import {PortableTextEditor} from './PortableTextEditor'
-import {withSyncRangeDecorations} from './withSyncRangeDecorations'
 
 const debug = debugWithName('component:Editable')
 
@@ -166,29 +163,27 @@ export const PortableTextEditable = forwardRef<
 
   const blockTypeName = schemaTypes.block.name
 
+  // React/UI-specific plugins
+  const withInsertData = useMemo(
+    () => createWithInsertData(editorActor, schemaTypes),
+    [editorActor, schemaTypes],
+  )
+  const withHotKeys = useMemo(
+    () => createWithHotkeys(portableTextEditor, hotkeys),
+    [hotkeys, portableTextEditor],
+  )
+
   // Output a minimal React editor inside Editable when in readOnly mode.
   // NOTE: make sure all the plugins used here can be safely run over again at any point.
   // There will be a problem if they redefine editor methods and then calling the original method within themselves.
   useMemo(() => {
-    // React/UI-specific plugins
-    const withInsertData = createWithInsertData(editorActor, schemaTypes)
-
     if (readOnly) {
       debug('Editable is in read only mode')
       return withInsertData(slateEditor)
     }
-    const withHotKeys = createWithHotkeys(portableTextEditor, hotkeys)
-
     debug('Editable is in edit mode')
     return withInsertData(withHotKeys(slateEditor))
-  }, [
-    editorActor,
-    hotkeys,
-    portableTextEditor,
-    readOnly,
-    slateEditor,
-    schemaTypes,
-  ])
+  }, [readOnly, slateEditor, withHotKeys, withInsertData])
 
   const renderElement = useCallback(
     (eProps: RenderElementProps) => (
@@ -386,6 +381,9 @@ export const PortableTextEditable = forwardRef<
     }
   }, [hasInvalidValue, propsSelection, restoreSelectionFromProps])
 
+  // Store reference to original apply function (see below for usage in useEffect)
+  const originalApply = useMemo(() => slateEditor.apply, [slateEditor])
+
   const [syncedRangeDecorations, setSyncedRangeDecorations] = useState(false)
   useEffect(() => {
     if (!syncedRangeDecorations) {
@@ -404,9 +402,16 @@ export const PortableTextEditable = forwardRef<
 
   // Sync range decorations after an operation is applied
   useEffect(() => {
-    const teardown = withSyncRangeDecorations(slateEditor, syncRangeDecorations)
-    return () => teardown()
-  }, [slateEditor, syncRangeDecorations])
+    slateEditor.apply = (op: Operation) => {
+      originalApply(op)
+      if (op.type !== 'set_selection') {
+        syncRangeDecorations(op)
+      }
+    }
+    return () => {
+      slateEditor.apply = originalApply
+    }
+  }, [originalApply, slateEditor, syncRangeDecorations])
 
   // Handle from props onCopy function
   const handleCopy = useCallback(
@@ -555,7 +560,64 @@ export const PortableTextEditable = forwardRef<
     [onBeforeInput],
   )
 
-  const validateSelection = useValidateSelection(ref, slateEditor)
+  // This function will handle unexpected DOM changes inside the Editable rendering,
+  // and make sure that we can maintain a stable slateEditor.selection when that happens.
+  //
+  // For example, if this Editable is rendered inside something that might re-render
+  // this component (hidden contexts) while the user is still actively changing the
+  // contentEditable, this could interfere with the intermediate DOM selection,
+  // which again could be picked up by ReactEditor's event listeners.
+  // If that range is invalid at that point, the slate.editorSelection could be
+  // set either wrong, or invalid, to which slateEditor will throw exceptions
+  // that are impossible to recover properly from or result in a wrong selection.
+  //
+  // Also the other way around, when the ReactEditor will try to create a DOM Range
+  // from the current slateEditor.selection, it may throw unrecoverable errors
+  // if the current editor.selection is invalid according to the DOM.
+  // If this is the case, default to selecting the top of the document, if the
+  // user already had a selection.
+  const validateSelection = useCallback(() => {
+    if (!slateEditor.selection) {
+      return
+    }
+    const root = ReactEditor.findDocumentOrShadowRoot(slateEditor)
+    const {activeElement} = root
+    // Return if the editor isn't the active element
+    if (ref.current !== activeElement) {
+      return
+    }
+    const window = ReactEditor.getWindow(slateEditor)
+    const domSelection = window.getSelection()
+    if (!domSelection || domSelection.rangeCount === 0) {
+      return
+    }
+    const existingDOMRange = domSelection.getRangeAt(0)
+    try {
+      const newDOMRange = ReactEditor.toDOMRange(
+        slateEditor,
+        slateEditor.selection,
+      )
+      if (
+        newDOMRange.startOffset !== existingDOMRange.startOffset ||
+        newDOMRange.endOffset !== existingDOMRange.endOffset
+      ) {
+        debug('DOM range out of sync, validating selection')
+        // Remove all ranges temporary
+        domSelection?.removeAllRanges()
+        // Set the correct range
+        domSelection.addRange(newDOMRange)
+      }
+    } catch {
+      debug(`Could not resolve selection, selecting top document`)
+      // Deselect the editor
+      Transforms.deselect(slateEditor)
+      // Select top document if there is a top block to select
+      if (slateEditor.children.length > 0) {
+        Transforms.select(slateEditor, [0, 0])
+      }
+      slateEditor.onChange()
+    }
+  }, [ref, slateEditor])
 
   // Observe mutations (child list and subtree) to this component's DOM,
   // and make sure the editor selection is valid when that happens.
@@ -691,67 +753,3 @@ export const PortableTextEditable = forwardRef<
 })
 
 PortableTextEditable.displayName = 'ForwardRef(PortableTextEditable)'
-
-function useValidateSelection(
-  ref: MutableRefObject<HTMLDivElement | null>,
-  slateEditor: BaseEditor & ReactEditor & PortableTextSlateEditor,
-) {
-  // This function will handle unexpected DOM changes inside the Editable rendering,
-  // and make sure that we can maintain a stable slateEditor.selection when that happens.
-  //
-  // For example, if this Editable is rendered inside something that might re-render
-  // this component (hidden contexts) while the user is still actively changing the
-  // contentEditable, this could interfere with the intermediate DOM selection,
-  // which again could be picked up by ReactEditor's event listeners.
-  // If that range is invalid at that point, the slate.editorSelection could be
-  // set either wrong, or invalid, to which slateEditor will throw exceptions
-  // that are impossible to recover properly from or result in a wrong selection.
-  //
-  // Also the other way around, when the ReactEditor will try to create a DOM Range
-  // from the current slateEditor.selection, it may throw unrecoverable errors
-  // if the current editor.selection is invalid according to the DOM.
-  // If this is the case, default to selecting the top of the document, if the
-  // user already had a selection.
-  return useCallback(() => {
-    if (!slateEditor.selection) {
-      return
-    }
-    const root = ReactEditor.findDocumentOrShadowRoot(slateEditor)
-    const {activeElement} = root
-    // Return if the editor isn't the active element
-    if (ref.current !== activeElement) {
-      return
-    }
-    const window = ReactEditor.getWindow(slateEditor)
-    const domSelection = window.getSelection()
-    if (!domSelection || domSelection.rangeCount === 0) {
-      return
-    }
-    const existingDOMRange = domSelection.getRangeAt(0)
-    try {
-      const newDOMRange = ReactEditor.toDOMRange(
-        slateEditor,
-        slateEditor.selection,
-      )
-      if (
-        newDOMRange.startOffset !== existingDOMRange.startOffset ||
-        newDOMRange.endOffset !== existingDOMRange.endOffset
-      ) {
-        debug('DOM range out of sync, validating selection')
-        // Remove all ranges temporary
-        domSelection?.removeAllRanges()
-        // Set the correct range
-        domSelection.addRange(newDOMRange)
-      }
-    } catch {
-      debug(`Could not resolve selection, selecting top document`)
-      // Deselect the editor
-      Transforms.deselect(slateEditor)
-      // Select top document if there is a top block to select
-      if (slateEditor.children.length > 0) {
-        Transforms.select(slateEditor, [0, 0])
-      }
-      slateEditor.onChange()
-    }
-  }, [ref, slateEditor])
-}

package/src/editor/behavior/behavior.core.block-objects.ts

@@ -0,0 +1,106 @@
+import {isPortableTextTextBlock} from '@sanity/types'
+import {defineBehavior} from './behavior.types'
+import {
+  getFocusBlockObject,
+  getFocusTextBlock,
+  getNextBlock,
+  getPreviousBlock,
+  isEmptyTextBlock,
+  selectionIsCollapsed,
+} from './behavior.utils'
+
+const breakingVoidBlock = defineBehavior({
+  on: 'insert break',
+  guard: ({context}) => {
+    const focusBlockObject = getFocusBlockObject(context)
+
+    return !!focusBlockObject
+  },
+  actions: [() => [{type: 'insert text block', decorators: []}]],
+})
+
+const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
+  on: 'delete backward',
+  guard: ({context}) => {
+    const focusTextBlock = getFocusTextBlock(context)
+    const selectionCollapsed = selectionIsCollapsed(context)
+    const previousBlock = getPreviousBlock(context)
+
+    if (!focusTextBlock || !selectionCollapsed || !previousBlock) {
+      return false
+    }
+
+    if (
+      isEmptyTextBlock(focusTextBlock.node) &&
+      !isPortableTextTextBlock(previousBlock.node)
+    ) {
+      return {focusTextBlock, previousBlock}
+    }
+
+    return false
+  },
+  actions: [
+    (_, {focusTextBlock, previousBlock}) => [
+      {
+        type: 'delete',
+        selection: {
+          anchor: {path: focusTextBlock.path, offset: 0},
+          focus: {path: focusTextBlock.path, offset: 0},
+        },
+      },
+      {
+        type: 'select',
+        selection: {
+          anchor: {path: previousBlock.path, offset: 0},
+          focus: {path: previousBlock.path, offset: 0},
+        },
+      },
+    ],
+  ],
+})
+
+const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
+  on: 'delete forward',
+  guard: ({context}) => {
+    const focusTextBlock = getFocusTextBlock(context)
+    const selectionCollapsed = selectionIsCollapsed(context)
+    const nextBlock = getNextBlock(context)
+
+    if (!focusTextBlock || !selectionCollapsed || !nextBlock) {
+      return false
+    }
+
+    if (
+      isEmptyTextBlock(focusTextBlock.node) &&
+      !isPortableTextTextBlock(nextBlock.node)
+    ) {
+      return {focusTextBlock, nextBlock}
+    }
+
+    return false
+  },
+  actions: [
+    (_, {focusTextBlock, nextBlock}) => [
+      {
+        type: 'delete',
+        selection: {
+          anchor: {path: focusTextBlock.path, offset: 0},
+          focus: {path: focusTextBlock.path, offset: 0},
+        },
+      },
+      {
+        type: 'select',
+        selection: {
+          anchor: {path: nextBlock.path, offset: 0},
+          focus: {path: nextBlock.path, offset: 0},
+        },
+      },
+    ],
+  ],
+})
+
+export const coreBlockObjectBehaviors = [
+  breakingVoidBlock,
+  deletingEmptyTextBlockAfterBlockObject,
+  deletingEmptyTextBlockBeforeBlockObject,
+]

package/src/editor/behavior/behavior.core.lists.ts

@@ -0,0 +1,76 @@
+import {defineBehavior} from './behavior.types'
+import {
+  getFocusSpan,
+  getFocusTextBlock,
+  selectionIsCollapsed,
+} from './behavior.utils'
+
+const clearListOnBackspace = defineBehavior({
+  on: 'delete backward',
+  guard: ({context}) => {
+    const selectionCollapsed = selectionIsCollapsed(context)
+    const focusTextBlock = getFocusTextBlock(context)
+    const focusSpan = getFocusSpan(context)
+
+    if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+      return false
+    }
+
+    const atTheBeginningOfBLock =
+      focusTextBlock.node.children[0]._key === focusSpan.node._key &&
+      context.selection.focus.offset === 0
+
+    if (atTheBeginningOfBLock && focusTextBlock.node.level === 1) {
+      return {focusTextBlock}
+    }
+
+    return false
+  },
+  actions: [
+    (_, {focusTextBlock}) => [
+      {
+        type: 'unset block',
+        props: ['listItem', 'level'],
+        paths: [focusTextBlock.path],
+      },
+    ],
+  ],
+})
+
+const unindentListOnBackspace = defineBehavior({
+  on: 'delete backward',
+  guard: ({context}) => {
+    const selectionCollapsed = selectionIsCollapsed(context)
+    const focusTextBlock = getFocusTextBlock(context)
+    const focusSpan = getFocusSpan(context)
+
+    if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+      return false
+    }
+
+    const atTheBeginningOfBLock =
+      focusTextBlock.node.children[0]._key === focusSpan.node._key &&
+      context.selection.focus.offset === 0
+
+    if (
+      atTheBeginningOfBLock &&
+      focusTextBlock.node.level !== undefined &&
+      focusTextBlock.node.level > 1
+    ) {
+      return {focusTextBlock, level: focusTextBlock.node.level - 1}
+    }
+
+    return false
+  },
+  actions: [
+    (_, {focusTextBlock, level}) => [
+      {
+        type: 'set block',
+        level,
+        paths: [focusTextBlock.path],
+      },
+    ],
+  ],
+})
+
+export const coreListBehaviors = [clearListOnBackspace, unindentListOnBackspace]

package/src/editor/behavior/behavior.core.ts

@@ -1,112 +1,14 @@
-import {isPortableTextTextBlock} from '@sanity/types'
+import {coreBlockObjectBehaviors} from './behavior.core.block-objects'
+import {coreListBehaviors} from './behavior.core.lists'
 import {defineBehavior} from './behavior.types'
-import {
-  getFocusBlockObject,
-  getFocusTextBlock,
-  getNextBlock,
-  getPreviousBlock,
-  isEmptyTextBlock,
-  selectionIsCollapsed,
-} from './behavior.utils'
 
 const softReturn = defineBehavior({
   on: 'insert soft break',
   actions: [() => [{type: 'insert text', text: '\n'}]],
 })
 
-const breakingVoidBlock = defineBehavior({
-  on: 'insert break',
-  guard: ({context}) => {
-    const focusBlockObject = getFocusBlockObject(context)
-
-    return !!focusBlockObject
-  },
-  actions: [() => [{type: 'insert text block', decorators: []}]],
-})
-
-const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
-  on: 'delete backward',
-  guard: ({context}) => {
-    const focusTextBlock = getFocusTextBlock(context)
-    const selectionCollapsed = selectionIsCollapsed(context)
-    const previousBlock = getPreviousBlock(context)
-
-    if (!focusTextBlock || !selectionCollapsed || !previousBlock) {
-      return false
-    }
-
-    if (
-      isEmptyTextBlock(focusTextBlock.node) &&
-      !isPortableTextTextBlock(previousBlock.node)
-    ) {
-      return {focusTextBlock, previousBlock}
-    }
-
-    return false
-  },
-  actions: [
-    (_, {focusTextBlock, previousBlock}) => [
-      {
-        type: 'delete',
-        selection: {
-          anchor: {path: focusTextBlock.path, offset: 0},
-          focus: {path: focusTextBlock.path, offset: 0},
-        },
-      },
-      {
-        type: 'select',
-        selection: {
-          anchor: {path: previousBlock.path, offset: 0},
-          focus: {path: previousBlock.path, offset: 0},
-        },
-      },
-    ],
-  ],
-})
-
-const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
-  on: 'delete forward',
-  guard: ({context}) => {
-    const focusTextBlock = getFocusTextBlock(context)
-    const selectionCollapsed = selectionIsCollapsed(context)
-    const nextBlock = getNextBlock(context)
-
-    if (!focusTextBlock || !selectionCollapsed || !nextBlock) {
-      return false
-    }
-
-    if (
-      isEmptyTextBlock(focusTextBlock.node) &&
-      !isPortableTextTextBlock(nextBlock.node)
-    ) {
-      return {focusTextBlock, nextBlock}
-    }
-
-    return false
-  },
-  actions: [
-    (_, {focusTextBlock, nextBlock}) => [
-      {
-        type: 'delete',
-        selection: {
-          anchor: {path: focusTextBlock.path, offset: 0},
-          focus: {path: focusTextBlock.path, offset: 0},
-        },
-      },
-      {
-        type: 'select',
-        selection: {
-          anchor: {path: nextBlock.path, offset: 0},
-          focus: {path: nextBlock.path, offset: 0},
-        },
-      },
-    ],
-  ],
-})
-
 export const coreBehaviors = [
   softReturn,
-  breakingVoidBlock,
-  deletingEmptyTextBlockAfterBlockObject,
-  deletingEmptyTextBlockBeforeBlockObject,
+  ...coreBlockObjectBehaviors,
+  ...coreListBehaviors,
 ]

package/src/editor/components/Synchronizer.tsx

@@ -1,7 +1,7 @@
 import type {Patch} from '@portabletext/patches'
 import type {PortableTextBlock} from '@sanity/types'
 import {throttle} from 'lodash'
-import {useCallback, useEffect, useRef} from 'react'
+import {useCallback, useEffect, useMemo, useRef} from 'react'
 import {Editor} from 'slate'
 import {useSlate} from 'slate-react'
 import {useEffectEvent} from 'use-effect-event'
@@ -69,24 +69,8 @@ export function Synchronizer(props: SynchronizerProps) {
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, false)
   }, [editorActor, slateEditor, getValue])
 
-  // Flush pending patches immediately on unmount
-  useEffect(() => {
-    return () => {
-      onFlushPendingPatches()
-    }
-  }, [onFlushPendingPatches])
-
-  // We want to ensure that _when_ `props.onChange` is called, it uses the current value.
-  // But we don't want to have the `useEffect` run setup + teardown + setup every time the prop might change, as that's unnecessary.
-  // So we use our own polyfill that lets us use an upcoming React hook that solves this exact problem.
-  // https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event
-  const handleChange = useEffectEvent((change: EditorChange) =>
-    onChange(change),
-  )
-
-  // Subscribe to, and handle changes from the editor
-  useEffect(() => {
-    const onFlushPendingPatchesThrottled = throttle(
+  const onFlushPendingPatchesThrottled = useMemo(() => {
+    return throttle(
       () => {
         // If the editor is normalizing (each operation) it means that it's not in the middle of a bigger transform,
         // and we can flush these changes immediately.
@@ -103,7 +87,25 @@ export function Synchronizer(props: SynchronizerProps) {
         trailing: true,
       },
     )
+  }, [onFlushPendingPatches, slateEditor])
 
+  // Flush pending patches immediately on unmount
+  useEffect(() => {
+    return () => {
+      onFlushPendingPatches()
+    }
+  }, [onFlushPendingPatches])
+
+  // We want to ensure that _when_ `props.onChange` is called, it uses the current value.
+  // But we don't want to have the `useEffect` run setup + teardown + setup every time the prop might change, as that's unnecessary.
+  // So we use our own polyfill that lets us use an upcoming React hook that solves this exact problem.
+  // https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+  const handleChange = useEffectEvent((change: EditorChange) =>
+    onChange(change),
+  )
+
+  // Subscribe to, and handle changes from the editor
+  useEffect(() => {
     debug('Subscribing to editor changes')
     const sub = editorActor.on('*', (event) => {
       switch (event.type) {
@@ -156,7 +158,7 @@ export function Synchronizer(props: SynchronizerProps) {
       debug('Unsubscribing to changes')
       sub.unsubscribe()
     }
-  }, [editorActor, handleChange, onFlushPendingPatches, slateEditor])
+  }, [handleChange, editorActor, onFlushPendingPatchesThrottled, slateEditor])
 
   // Sync the value when going online
   const handleOnline = useCallback(() => {

package/src/editor/withSyncRangeDecorations.tsx

@@ -1,20 +0,0 @@
-import type {BaseEditor, Operation} from 'slate'
-import type {ReactEditor} from 'slate-react'
-import type {PortableTextSlateEditor} from '../types/editor'
-
-// React Compiler considers `slateEditor` as immutable, and opts-out if we do this inline in a useEffect, doing it in a function moves it out of the scope, and opts-in again for the rest of the component.
-export function withSyncRangeDecorations(
-  slateEditor: BaseEditor & ReactEditor & PortableTextSlateEditor,
-  syncRangeDecorations: (operation?: Operation) => void,
-) {
-  const originalApply = slateEditor.apply
-  slateEditor.apply = (op: Operation) => {
-    originalApply(op)
-    if (op.type !== 'set_selection') {
-      syncRangeDecorations(op)
-    }
-  }
-  return () => {
-    slateEditor.apply = originalApply
-  }
-}