@portabletext/editor 1.52.4 → 1.52.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.52.4",
+  "version": "1.52.6",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,8 +80,8 @@
     "slate-react": "0.114.2",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.4",
-    "@portabletext/block-tools": "1.1.30",
-    "@portabletext/patches": "1.1.4"
+    "@portabletext/patches": "1.1.4",
+    "@portabletext/block-tools": "1.1.30"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",

package/src/editor/Editable.tsx

@@ -534,24 +534,9 @@ export const PortableTextEditable = forwardRef<
 
       if (!event.isDefaultPrevented()) {
         relayActor.send({type: 'focused', event})
-
-        const selection = slateEditor.selection
-          ? slateRangeToSelection({
-              schema: editorActor.getSnapshot().context.schema,
-              editor: slateEditor,
-              range: slateEditor.selection,
-            })
-          : null
-
-        if (selection) {
-          editorActor.send({
-            type: 'update selection',
-            selection,
-          })
-        }
       }
     },
-    [editorActor, onFocus, slateEditor, relayActor],
+    [onFocus, relayActor],
   )
 
   const handleClick = useCallback(

package/src/editor/plugins/createWithEditableAPI.ts

@@ -1,10 +1,9 @@
-import {
-  isPortableTextSpan,
-  type Path,
-  type PortableTextBlock,
-  type PortableTextChild,
-  type PortableTextObject,
-  type PortableTextTextBlock,
+import type {
+  Path,
+  PortableTextBlock,
+  PortableTextChild,
+  PortableTextObject,
+  PortableTextTextBlock,
 } from '@sanity/types'
 import {
   Editor,
@@ -29,6 +28,7 @@ import {
   SLATE_TO_PORTABLE_TEXT_RANGE,
 } from '../../internal-utils/weakMaps'
 import {addAnnotationOperationImplementation} from '../../operations/behavior.operation.annotation.add'
+import {isActiveAnnotation} from '../../selectors'
 import type {
   EditableAPI,
   EditableAPIDeleteOptions,
@@ -396,7 +396,12 @@ export function createEditableAPI(
     isAnnotationActive: (
       annotationType: PortableTextObject['_type'],
     ): boolean => {
-      return isAnnotationActive({editor, annotation: {name: annotationType}})
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: editor,
+      })
+
+      return isActiveAnnotation(annotationType)(snapshot)
     },
     addAnnotation: (type, value) => {
       let paths: ReturnType<EditableAPI['addAnnotation']> = undefined
@@ -546,59 +551,3 @@ export function createEditableAPI(
 
   return editableApi
 }
-
-function isAnnotationActive({
-  editor,
-  annotation,
-}: {
-  editor: PortableTextSlateEditor
-  annotation: {
-    name: string
-  }
-}) {
-  if (!editor.selection || editor.selection.focus.path.length < 2) {
-    return false
-  }
-
-  try {
-    const spans = [
-      ...Editor.nodes(editor, {
-        at: editor.selection,
-        match: (node) => Text.isText(node),
-      }),
-    ]
-
-    if (spans.length === 0) {
-      return false
-    }
-
-    if (
-      spans.some(
-        ([span]) =>
-          !isPortableTextSpan(span) || !span.marks || span.marks?.length === 0,
-      )
-    )
-      return false
-
-    const selectionMarkDefs = spans.reduce((accMarkDefs, [, path]) => {
-      const [block] = Editor.node(editor, path, {depth: 1})
-      if (editor.isTextBlock(block) && block.markDefs) {
-        return [...accMarkDefs, ...block.markDefs]
-      }
-      return accMarkDefs
-    }, [] as PortableTextObject[])
-
-    return spans.every(([span]) => {
-      if (!isPortableTextSpan(span)) return false
-
-      const spanMarkDefs = span.marks?.map(
-        (markKey) =>
-          selectionMarkDefs.find((def) => def?._key === markKey)?._type,
-      )
-
-      return spanMarkDefs?.includes(annotation.name)
-    })
-  } catch {
-    return false
-  }
-}

package/src/editor/plugins/slate-plugin.update-selection.ts

@@ -0,0 +1,51 @@
+import {slateRangeToSelection} from '../../internal-utils/slate-utils'
+import {SLATE_TO_PORTABLE_TEXT_RANGE} from '../../internal-utils/weakMaps'
+import type {PortableTextSlateEditor} from '../../types/editor'
+import type {EditorActor} from '../editor-machine'
+
+export function pluginUpdateSelection({
+  editor,
+  editorActor,
+}: {
+  editor: PortableTextSlateEditor
+  editorActor: EditorActor
+}) {
+  const updateSelection = () => {
+    if (editor.selection) {
+      const existingSelection = SLATE_TO_PORTABLE_TEXT_RANGE.get(
+        editor.selection,
+      )
+
+      if (existingSelection) {
+        editorActor.send({
+          type: 'update selection',
+          selection: existingSelection,
+        })
+      } else {
+        const selection = slateRangeToSelection({
+          schema: editorActor.getSnapshot().context.schema,
+          editor,
+          range: editor.selection,
+        })
+
+        SLATE_TO_PORTABLE_TEXT_RANGE.set(editor.selection, selection)
+
+        editorActor.send({type: 'update selection', selection})
+      }
+    } else {
+      editorActor.send({type: 'update selection', selection: null})
+    }
+  }
+
+  const {onChange} = editor
+
+  editor.onChange = () => {
+    onChange()
+
+    if (!editorActor.getSnapshot().matches({setup: 'setting up'})) {
+      updateSelection()
+    }
+  }
+
+  return editor
+}

package/src/editor/plugins/with-plugins.ts

@@ -8,11 +8,11 @@ import {createWithObjectKeys} from './createWithObjectKeys'
 import {createWithPatches} from './createWithPatches'
 import {createWithPlaceholderBlock} from './createWithPlaceholderBlock'
 import {createWithPortableTextMarkModel} from './createWithPortableTextMarkModel'
-import {createWithPortableTextSelections} from './createWithPortableTextSelections'
 import {createWithSchemaTypes} from './createWithSchemaTypes'
 import {createWithUndoRedo} from './createWithUndoRedo'
 import {createWithUtils} from './createWithUtils'
 import {pluginUpdateMarkState} from './slate-plugin.update-mark-state'
+import {pluginUpdateSelection} from './slate-plugin.update-selection'
 import {pluginUpdateValue} from './slate-plugin.update-value'
 
 export interface OriginalEditorFunctions {
@@ -54,8 +54,6 @@ export const withPlugins = <T extends Editor>(
   const withUtils = createWithUtils({
     editorActor,
   })
-  const withPortableTextSelections =
-    createWithPortableTextSelections(editorActor)
   const withEventListeners = createWithEventListeners(editorActor)
 
   // Ordering is important here, selection dealing last, data manipulation in the middle and core model stuff first.
@@ -68,13 +66,14 @@ export const withPlugins = <T extends Editor>(
               withMaxBlocks(
                 withUndoRedo(
                   withPatches(
-                    withPortableTextSelections(
-                      pluginUpdateValue(
+                    pluginUpdateValue(
+                      editorActor.getSnapshot().context,
+                      pluginUpdateMarkState(
                         editorActor.getSnapshot().context,
-                        pluginUpdateMarkState(
-                          editorActor.getSnapshot().context,
-                          e,
-                        ),
+                        pluginUpdateSelection({
+                          editorActor,
+                          editor: e,
+                        }),
                       ),
                     ),
                   ),

package/src/editor/relay-machine.ts

@@ -1,7 +1,7 @@
 import type {Patch} from '@portabletext/patches'
 import type {PortableTextBlock} from '@sanity/types'
 import type {FocusEvent} from 'react'
-import {emit, setup, type ActorRefFrom} from 'xstate'
+import {assign, emit, setup, type ActorRefFrom} from 'xstate'
 import type {EditorSelection, InvalidValueResolution} from '../types/editor'
 
 /**
@@ -96,14 +96,61 @@ export type RelayActor = ActorRefFrom<typeof relayMachine>
 
 export const relayMachine = setup({
   types: {
+    context: {} as {
+      prevSelection: EditorSelection
+      lastEventWasFocused: boolean
+    },
     events: {} as InternalEditorEmittedEvent,
     emitted: {} as InternalEditorEmittedEvent,
   },
 }).createMachine({
   id: 'relay',
+  context: {
+    prevSelection: null,
+    lastEventWasFocused: false,
+  },
   on: {
+    'focused': {
+      actions: [
+        assign({
+          lastEventWasFocused: true,
+        }),
+        emit(({event}) => event),
+      ],
+    },
+    'selection': [
+      {
+        guard: ({context}) => context.lastEventWasFocused,
+        actions: [
+          assign({
+            prevSelection: ({event}) => event.selection,
+          }),
+          emit(({event}) => event),
+          assign({
+            lastEventWasFocused: false,
+          }),
+        ],
+      },
+      {
+        guard: ({context, event}) => context.prevSelection !== event.selection,
+        actions: [
+          assign({
+            prevSelection: ({event}) => event.selection,
+          }),
+          emit(({event}) => event),
+          assign({
+            lastEventWasFocused: false,
+          }),
+        ],
+      },
+    ],
     '*': {
-      actions: emit(({event}) => event),
+      actions: [
+        emit(({event}) => event),
+        assign({
+          lastEventWasFocused: false,
+        }),
+      ],
     },
   },
 })

package/src/internal-utils/mark-state.ts

@@ -1,8 +1,9 @@
 import {Range} from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
+import {getSelectedSpans} from '../selectors'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {getNextSpan, getPreviousSpan} from './sibling-utils'
-import {getFocusBlock, getFocusSpan, getSelectedSpans} from './slate-utils'
+import {getFocusBlock, getFocusSpan, slateRangeToSelection} from './slate-utils'
 
 export type MarkState = {
   state: 'changed' | 'unchanged'
@@ -36,18 +37,39 @@ export function getMarkState({
   }
 
   if (Range.isExpanded(editor.selection)) {
-    const selectedSpans = getSelectedSpans({editor})
+    const selection = editor.selection
+      ? slateRangeToSelection({
+          schema,
+          editor,
+          range: editor.selection,
+        })
+      : null
+
+    const selectedSpans = getSelectedSpans({
+      context: {
+        value: editor.value,
+        selection,
+        schema,
+        converters: [],
+        keyGenerator: () => '',
+        readOnly: false,
+      },
+      beta: {
+        activeAnnotations: [],
+        activeDecorators: [],
+      },
+    })
 
     let index = 0
     let marks: Array<string> = []
 
-    for (const [span] of selectedSpans) {
+    for (const span of selectedSpans) {
       if (index === 0) {
-        marks = span.marks ?? []
+        marks = span.node.marks ?? []
       } else {
         if (
-          span.marks?.length === 0 ||
-          (span.marks ?? [])?.some((mark) => !marks.includes(mark))
+          span.node.marks?.length === 0 ||
+          (span.node.marks ?? [])?.some((mark) => !marks.includes(mark))
         ) {
           marks = []
         }

package/src/internal-utils/slate-utils.ts

@@ -91,27 +91,6 @@ export function getFocusSpan({
   return [undefined, undefined]
 }
 
-export function getSelectedSpans({
-  editor,
-}: {
-  editor: PortableTextSlateEditor
-}): Array<[node: PortableTextSpan, path: Path]> {
-  if (!editor.selection) {
-    return []
-  }
-
-  try {
-    return Array.from(
-      Editor.nodes(editor, {
-        at: editor.selection,
-        match: (node) => editor.isTextSpan(node),
-      }),
-    )
-  } catch {
-    return []
-  }
-}
-
 export function getSelectionStartBlock({
   editor,
 }: {

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -1,60 +0,0 @@
-import type {BaseRange} from 'slate'
-import {debugWithName} from '../../internal-utils/debug'
-import {slateRangeToSelection} from '../../internal-utils/slate-utils'
-import {SLATE_TO_PORTABLE_TEXT_RANGE} from '../../internal-utils/weakMaps'
-import type {EditorSelection, PortableTextSlateEditor} from '../../types/editor'
-import type {EditorActor} from '../editor-machine'
-
-const debug = debugWithName('plugin:withPortableTextSelections')
-const debugVerbose = debug.enabled && false
-
-// This plugin will make sure that we emit a PT selection whenever the editor has changed.
-export function createWithPortableTextSelections(
-  editorActor: EditorActor,
-): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
-  let prevSelection: BaseRange | null = null
-  return function withPortableTextSelections(
-    editor: PortableTextSlateEditor,
-  ): PortableTextSlateEditor {
-    const emitPortableTextSelection = () => {
-      if (prevSelection !== editor.selection) {
-        let ptRange: EditorSelection | null = null
-        if (editor.selection) {
-          const existing = SLATE_TO_PORTABLE_TEXT_RANGE.get(editor.selection)
-          if (existing) {
-            ptRange = existing
-          } else {
-            ptRange = slateRangeToSelection({
-              schema: editorActor.getSnapshot().context.schema,
-              editor,
-              range: editor.selection,
-            })
-            SLATE_TO_PORTABLE_TEXT_RANGE.set(editor.selection, ptRange)
-          }
-        }
-        if (debugVerbose) {
-          debug(
-            `Emitting selection ${JSON.stringify(ptRange || null)} (${JSON.stringify(
-              editor.selection,
-            )})`,
-          )
-        }
-        if (ptRange) {
-          editorActor.send({type: 'update selection', selection: ptRange})
-        } else {
-          editorActor.send({type: 'update selection', selection: null})
-        }
-      }
-      prevSelection = editor.selection
-    }
-
-    const {onChange} = editor
-    editor.onChange = () => {
-      onChange()
-      if (!editorActor.getSnapshot().matches({setup: 'setting up'})) {
-        emitPortableTextSelection()
-      }
-    }
-    return editor
-  }
-}