@portabletext/editor 1.52.3 → 1.52.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.52.3",
+  "version": "1.52.5",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -78,7 +78,7 @@
     "slate": "0.115.1",
     "slate-dom": "^0.114.0",
     "slate-react": "0.114.2",
-    "use-effect-event": "^2.0.0",
+    "use-effect-event": "^1.0.2",
     "xstate": "^5.19.4",
     "@portabletext/block-tools": "1.1.30",
     "@portabletext/patches": "1.1.4"

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/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,15 +66,16 @@ export const withPlugins = <T extends Editor>(
               withMaxBlocks(
                 withUndoRedo(
                   withPatches(
-                    withPortableTextSelections(
-                      pluginUpdateValue(
+                    pluginUpdateSelection({
+                      editorActor,
+                      editor: pluginUpdateValue(
                         editorActor.getSnapshot().context,
                         pluginUpdateMarkState(
                           editorActor.getSnapshot().context,
                           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/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
-  }
-}