@portabletext/editor 1.18.6 → 1.19.0

package/src/editor/create-editor.ts

@@ -63,15 +63,13 @@ export type EditorEvent = PickFromUnion<
   'type',
   | 'annotation.add'
   | 'annotation.remove'
-  | 'annotation.toggle'
   | 'blur'
-  | 'decorator.add'
-  | 'decorator.remove'
   | 'decorator.toggle'
   | 'focus'
   | 'insert.block object'
   | 'insert.inline object'
   | 'list item.toggle'
+  | 'select'
   | 'style.toggle'
   | 'patches'
   | 'update behaviors'

package/src/editor/editor-machine.ts

@@ -30,6 +30,7 @@ import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
 import type {EditorSchema} from './define-schema'
 import type {EditorContext} from './editor-snapshot'
 import {getActiveDecorators} from './get-active-decorators'
+import {withApplyingBehaviorActions} from './with-applying-behavior-actions'
 
 export * from 'xstate/guards'
 
@@ -152,6 +153,7 @@ export type InternalEditorEmittedEvent =
       description: string
       data: unknown
     }
+  | {type: 'select'; selection: EditorSelection}
   | {type: 'selection'; selection: EditorSelection}
   | {type: 'blurred'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'focused'; event: FocusEvent<HTMLDivElement, Element>}
@@ -164,10 +166,7 @@ export type InternalEditorEmittedEvent =
       'type',
       | 'annotation.add'
       | 'annotation.remove'
-      | 'annotation.toggle'
       | 'blur'
-      | 'decorator.add'
-      | 'decorator.remove'
       | 'decorator.toggle'
       | 'insert.block object'
       | 'insert.inline object'
@@ -263,10 +262,12 @@ export const editorMachine = setup({
           return
         }
 
-        Editor.withoutNormalizing(event.editor, () => {
-          performAction({
-            context,
-            action: defaultAction,
+        withApplyingBehaviorActions(event.editor, () => {
+          Editor.withoutNormalizing(event.editor, () => {
+            performAction({
+              context,
+              action: defaultAction,
+            })
           })
         })
         event.editor.onChange()
@@ -324,32 +325,28 @@ export const editorMachine = setup({
                 (actionIntend) => actionIntend.type !== 'effect',
               ))
 
-          Editor.withoutNormalizing(event.editor, () => {
-            for (const actionIntend of actionIntends) {
-              const action = {
-                ...actionIntend,
-                editor: event.editor,
-              }
+          withApplyingBehaviorActions(event.editor, () => {
+            Editor.withoutNormalizing(event.editor, () => {
+              for (const actionIntend of actionIntends) {
+                if (actionIntend.type === 'raise') {
+                  enqueue.raise({
+                    type: 'behavior event',
+                    behaviorEvent: actionIntend.event,
+                    editor: event.editor,
+                  })
+                  continue
+                }
 
-              performAction({context, action})
-            }
-          })
-          event.editor.onChange()
+                const action = {
+                  ...actionIntend,
+                  editor: event.editor,
+                }
 
-          if (
-            actionIntends.some(
-              (actionIntend) => actionIntend.type === 'reselect',
-            )
-          ) {
-            enqueue.raise({
-              type: 'selection',
-              selection: toPortableTextRange(
-                event.editor.children,
-                event.editor.selection,
-                context.schema,
-              ),
+                performAction({context, action})
+              }
             })
-          }
+          })
+          event.editor.onChange()
         }
 
         if (behaviorOverwritten) {
@@ -363,10 +360,12 @@ export const editorMachine = setup({
           return
         }
 
-        Editor.withoutNormalizing(event.editor, () => {
-          performAction({
-            context,
-            action: defaultAction,
+        withApplyingBehaviorActions(event.editor, () => {
+          Editor.withoutNormalizing(event.editor, () => {
+            performAction({
+              context,
+              action: defaultAction,
+            })
           })
         })
         event.editor.onChange()
@@ -450,13 +449,7 @@ export const editorMachine = setup({
             'behavior event': {
               actions: 'handle behavior event',
             },
-            'annotation.add': {
-              actions: emit(({event}) => event),
-            },
-            'annotation.remove': {
-              actions: emit(({event}) => event),
-            },
-            'annotation.toggle': {
+            'annotation.*': {
               actions: emit(({event}) => event),
             },
             'blur': {
@@ -474,6 +467,9 @@ export const editorMachine = setup({
             'list item.*': {
               actions: emit(({event}) => event),
             },
+            'select': {
+              actions: emit(({event}) => event),
+            },
             'style.*': {
               actions: emit(({event}) => event),
             },

package/src/editor/plugins/create-with-event-listeners.ts

@@ -1,5 +1,9 @@
-import type {Editor} from 'slate'
+import {Editor} from 'slate'
+import {toPortableTextRange} from '../../utils/ranges'
+import {fromSlateValue} from '../../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import type {EditorActor} from '../editor-machine'
+import {isApplyingBehaviorActions} from '../with-applying-behavior-actions'
 
 export function createWithEventListeners(
   editorActor: EditorActor,
@@ -35,17 +39,6 @@ export function createWithEventListeners(
             })
             break
           }
-          case 'annotation.toggle': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'annotation.toggle',
-                annotation: event.annotation,
-              },
-              editor,
-            })
-            break
-          }
           case 'blur': {
             editorActor.send({
               type: 'behavior event',
@@ -56,28 +49,6 @@ export function createWithEventListeners(
             })
             break
           }
-          case 'decorator.add': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'decorator.add',
-                decorator: event.decorator,
-              },
-              editor,
-            })
-            break
-          }
-          case 'decorator.remove': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'decorator.remove',
-                decorator: event.decorator,
-              },
-              editor,
-            })
-            break
-          }
           case 'decorator.toggle': {
             editorActor.send({
               type: 'behavior event',
@@ -133,6 +104,17 @@ export function createWithEventListeners(
             })
             break
           }
+          case 'select': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'select',
+                selection: event.selection,
+              },
+              editor,
+            })
+            break
+          }
           case 'style.toggle': {
             editorActor.send({
               type: 'behavior event',
@@ -152,29 +134,7 @@ export function createWithEventListeners(
       }
     })
 
-    editor.addMark = (mark) => {
-      editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'decorator.add',
-          decorator: mark,
-        },
-        editor,
-      })
-      return
-    }
-
-    editor.removeMark = (mark) => {
-      editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'decorator.remove',
-          decorator: mark,
-        },
-        editor,
-      })
-      return
-    }
+    const {select} = editor
 
     editor.deleteBackward = (unit) => {
       editorActor.send({
@@ -235,6 +195,33 @@ export function createWithEventListeners(
       return
     }
 
+    editor.select = (location) => {
+      if (isApplyingBehaviorActions(editor)) {
+        select(location)
+        return
+      }
+
+      const range = Editor.range(editor, location)
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'select',
+          selection: toPortableTextRange(
+            fromSlateValue(
+              editor.children,
+              editorActor.getSnapshot().context.schema.block.name,
+              KEY_TO_VALUE_ELEMENT.get(editor),
+            ),
+            range,
+            editorActor.getSnapshot().context.schema,
+          ),
+        },
+        editor,
+      })
+      return
+    }
+
     return editor
   }
 }

package/src/editor/plugins/createWithHotKeys.ts

@@ -9,16 +9,6 @@ import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('plugin:withHotKeys')
 
-const DEFAULT_HOTKEYS: HotkeyOptions = {
-  marks: {
-    'mod+b': 'strong',
-    'mod+i': 'em',
-    'mod+u': 'underline',
-    "mod+'": 'code',
-  },
-  custom: {},
-}
-
 /**
  * This plugin takes care of all hotkeys in the editor
  *
@@ -29,7 +19,7 @@ export function createWithHotkeys(
   hotkeysFromOptions?: HotkeyOptions,
 ): (editor: PortableTextSlateEditor & ReactEditor) => any {
   const reservedHotkeys = ['enter', 'tab', 'shift', 'delete', 'end']
-  const activeHotkeys = hotkeysFromOptions || DEFAULT_HOTKEYS // TODO: Merge where possible? A union?
+  const activeHotkeys = hotkeysFromOptions ?? {}
   return function withHotKeys(editor: PortableTextSlateEditor & ReactEditor) {
     editor.pteWithHotKeys = (event: KeyboardEvent<HTMLDivElement>): void => {
       // Wire up custom marks hotkeys

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -741,7 +741,12 @@ export const addDecoratorActionImplementation: BehaviorActionImplementation<
         editor.marks = marks as Text
       }
     }
-    editor.onChange()
+
+    if (editor.selection) {
+      // Reselect
+      const selection = editor.selection
+      editor.selection = {...selection}
+    }
   }
 }
 
@@ -823,6 +828,12 @@ export const removeDecoratorActionImplementation: BehaviorActionImplementation<
         editor.marks = {marks: marks.marks, _type: 'span'} as Text
       }
     }
+
+    if (editor.selection) {
+      // Reselect
+      const selection = editor.selection
+      editor.selection = {...selection}
+    }
   }
 }
 

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -55,12 +55,8 @@ export function createWithPortableTextSelections(
 
     const {onChange} = editor
     editor.onChange = () => {
-      const hasChanges = editor.operations.length > 0
       onChange()
-      if (
-        hasChanges &&
-        !editorActor.getSnapshot().matches({setup: 'setting up'})
-      ) {
+      if (!editorActor.getSnapshot().matches({setup: 'setting up'})) {
         emitPortableTextSelection()
       }
     }

package/src/editor/with-applying-behavior-actions.ts

@@ -0,0 +1,15 @@
+import type {Editor} from 'slate'
+
+const IS_APPLYING_BEHAVIOR_ACTIONS: WeakMap<Editor, boolean | undefined> =
+  new WeakMap()
+
+export function withApplyingBehaviorActions(editor: Editor, fn: () => void) {
+  const prev = isApplyingBehaviorActions(editor)
+  IS_APPLYING_BEHAVIOR_ACTIONS.set(editor, true)
+  fn()
+  IS_APPLYING_BEHAVIOR_ACTIONS.set(editor, prev)
+}
+
+export function isApplyingBehaviorActions(editor: Editor) {
+  return IS_APPLYING_BEHAVIOR_ACTIONS.get(editor) ?? false
+}

package/src/selectors/selector.get-selected-spans.test.ts

@@ -0,0 +1,122 @@
+import {expect, test} from 'vitest'
+import {getSelectedSpans, type EditorSchema, type EditorSelection} from '.'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
+
+test(getSelectedSpans.name, () => {
+  function snapshot(selection: EditorSelection): EditorSnapshot {
+    return {
+      context: {
+        schema: {} as EditorSchema,
+        keyGenerator: () => '',
+        activeDecorators: [],
+        value: [
+          {
+            _type: 'block',
+            _key: 'b1',
+            children: [
+              {
+                _type: 'span',
+                _key: 's1',
+                text: 'foo',
+                marks: ['strong'],
+              },
+              {
+                _type: 'span',
+                _key: 's2',
+                text: 'bar',
+              },
+            ],
+          },
+          {
+            _type: 'image',
+            _key: 'b2',
+          },
+          {
+            _type: 'block',
+            _key: 'b3',
+            children: [
+              {
+                _type: 'span',
+                _key: 's3',
+                text: 'baz',
+              },
+            ],
+          },
+        ],
+        selection,
+      },
+    }
+  }
+
+  expect(
+    getSelectedSpans(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toEqual([
+    {
+      node: {_type: 'span', _key: 's1', text: 'foo', marks: ['strong']},
+      path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+    },
+  ])
+
+  expect(
+    getSelectedSpans(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 2,
+        },
+        focus: {
+          path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toEqual([
+    {
+      node: {_type: 'span', _key: 's1', text: 'foo', marks: ['strong']},
+      path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+    },
+    {
+      node: {_type: 'span', _key: 's2', text: 'bar'},
+      path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+    },
+  ])
+
+  expect(
+    getSelectedSpans(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 2,
+        },
+        focus: {
+          path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+          offset: 2,
+        },
+      }),
+    ),
+  ).toEqual([
+    {
+      node: {_type: 'span', _key: 's1', text: 'foo', marks: ['strong']},
+      path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+    },
+    {
+      node: {_type: 'span', _key: 's2', text: 'bar'},
+      path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+    },
+    {
+      node: {_type: 'span', _key: 's3', text: 'baz'},
+      path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+    },
+  ])
+})

package/src/selectors/selector.get-selected-spans.ts

@@ -67,9 +67,11 @@ export const getSelectedSpans: EditorSelector<
             path: [{_key: block._key}, 'children', {_key: child._key}],
           })
 
-          if (startBlockKey === endBlockKey) {
+          if (startSpanKey === endSpanKey) {
             break
           }
+
+          continue
         }
 
         if (endSpanKey && child._key === endSpanKey) {

package/src/selectors/selector.is-active-decorator.test.ts

@@ -0,0 +1,65 @@
+import {expect, test} from 'vitest'
+import type {EditorSchema, EditorSelection} from '.'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
+import {isActiveDecorator} from './selector.is-active-decorator'
+
+test(isActiveDecorator.name, () => {
+  function snapshot(selection: EditorSelection): EditorSnapshot {
+    return {
+      context: {
+        schema: {} as EditorSchema,
+        keyGenerator: () => '',
+        activeDecorators: [],
+        value: [
+          {
+            _type: '_block',
+            _key: 'b1',
+            children: [
+              {
+                _type: 'span',
+                _key: 's1',
+                text: 'foo',
+                marks: ['strong'],
+              },
+              {
+                _type: 'span',
+                _key: 's2',
+                text: 'bar',
+              },
+            ],
+          },
+        ],
+        selection,
+      },
+    }
+  }
+
+  expect(
+    isActiveDecorator('strong')(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toBe(true)
+  expect(
+    isActiveDecorator('strong')(
+      snapshot({
+        anchor: {
+          path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+          offset: 2,
+        },
+        focus: {
+          path: [{_key: 'b1'}, 'children', {_key: 's2'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toBe(false)
+})