@portabletext/editor 1.33.2 → 1.33.4

package/src/behaviors/behavior.default.ts

@@ -0,0 +1,198 @@
+import * as selectors from '../selectors'
+import {defineBehavior, raise} from './behavior.types'
+
+const toggleAnnotationOff = defineBehavior({
+  on: 'annotation.toggle',
+  guard: ({context, event}) =>
+    selectors.isActiveAnnotation(event.annotation.name)({context}),
+  actions: [
+    ({event}) => [
+      raise({type: 'annotation.remove', annotation: event.annotation}),
+    ],
+  ],
+})
+
+const toggleAnnotationOn = defineBehavior({
+  on: 'annotation.toggle',
+  guard: ({context, event}) =>
+    !selectors.isActiveAnnotation(event.annotation.name)({context}),
+  actions: [
+    ({event}) => [
+      raise({type: 'annotation.add', annotation: event.annotation}),
+    ],
+  ],
+})
+
+const toggleDecoratorOff = defineBehavior({
+  on: 'decorator.toggle',
+  guard: ({context, event}) =>
+    selectors.isActiveDecorator(event.decorator)({context}),
+  actions: [
+    ({event}) => [
+      raise({type: 'decorator.remove', decorator: event.decorator}),
+    ],
+  ],
+})
+
+const toggleDecoratorOn = defineBehavior({
+  on: 'decorator.toggle',
+  guard: ({context, event}) =>
+    !selectors.isActiveDecorator(event.decorator)({context}),
+  actions: [
+    ({event}) => [raise({type: 'decorator.add', decorator: event.decorator})],
+  ],
+})
+
+const toggleListItemOff = defineBehavior({
+  on: 'list item.toggle',
+  guard: ({context, event}) =>
+    selectors.isActiveListItem(event.listItem)({context}),
+  actions: [
+    ({event}) => [
+      raise({
+        type: 'list item.remove',
+        listItem: event.listItem,
+      }),
+    ],
+  ],
+})
+
+const toggleListItemOn = defineBehavior({
+  on: 'list item.toggle',
+  guard: ({context, event}) =>
+    !selectors.isActiveListItem(event.listItem)({context}),
+  actions: [
+    ({event}) => [
+      raise({
+        type: 'list item.add',
+        listItem: event.listItem,
+      }),
+    ],
+  ],
+})
+
+const toggleStyleOff = defineBehavior({
+  on: 'style.toggle',
+  guard: ({context, event}) => selectors.isActiveStyle(event.style)({context}),
+  actions: [({event}) => [raise({type: 'style.remove', style: event.style})]],
+})
+
+const toggleStyleOn = defineBehavior({
+  on: 'style.toggle',
+  guard: ({context, event}) => !selectors.isActiveStyle(event.style)({context}),
+  actions: [({event}) => [raise({type: 'style.add', style: event.style})]],
+})
+
+const raiseDeserializationSuccessOrFailure = defineBehavior({
+  on: 'deserialize',
+  guard: ({context, event}) => {
+    const deserializeEvents = context.converters.flatMap((converter) => {
+      const data = event.dataTransfer.getData(converter.mimeType)
+
+      if (!data) {
+        return []
+      }
+
+      return [
+        converter.deserialize({context, event: {type: 'deserialize', data}}),
+      ]
+    })
+
+    const firstSuccess = deserializeEvents.find(
+      (deserializeEvent) => deserializeEvent.type === 'deserialization.success',
+    )
+
+    if (!firstSuccess) {
+      return {
+        type: 'deserialization.failure',
+        mimeType: '*/*',
+        reason: deserializeEvents
+          .map((deserializeEvent) =>
+            deserializeEvent.type === 'deserialization.failure'
+              ? deserializeEvent.reason
+              : '',
+          )
+          .join(', '),
+      } as const
+    }
+
+    return firstSuccess
+  },
+  actions: [
+    ({event}, deserializeEvent) => [
+      raise({
+        ...deserializeEvent,
+        dataTransfer: event.dataTransfer,
+      }),
+    ],
+  ],
+})
+
+const raiseInsertBlocks = defineBehavior({
+  on: 'deserialization.success',
+  actions: [
+    ({event}) => [
+      raise({
+        type: 'insert.blocks',
+        blocks: event.data,
+      }),
+    ],
+  ],
+})
+
+const raiseSerializationSuccessOrFailure = defineBehavior({
+  on: 'serialize',
+  guard: ({context, event}) => {
+    if (context.converters.length === 0) {
+      return false
+    }
+
+    const serializeEvents = context.converters.map((converter) =>
+      converter.serialize({context, event}),
+    )
+
+    if (serializeEvents.length === 0) {
+      return false
+    }
+
+    return serializeEvents
+  },
+  actions: [
+    ({event}, serializeEvents) =>
+      serializeEvents.map((serializeEvent) =>
+        raise({
+          ...serializeEvent,
+          dataTransfer: event.dataTransfer,
+        }),
+      ),
+  ],
+})
+
+const raiseDataTransferSet = defineBehavior({
+  on: 'serialization.success',
+  actions: [
+    ({event}) => [
+      raise({
+        type: 'data transfer.set',
+        data: event.data,
+        dataTransfer: event.dataTransfer,
+        mimeType: event.mimeType,
+      }),
+    ],
+  ],
+})
+
+export const defaultBehaviors = [
+  toggleAnnotationOff,
+  toggleAnnotationOn,
+  toggleDecoratorOff,
+  toggleDecoratorOn,
+  toggleListItemOff,
+  toggleListItemOn,
+  toggleStyleOff,
+  toggleStyleOn,
+  raiseDeserializationSuccessOrFailure,
+  raiseInsertBlocks,
+  raiseSerializationSuccessOrFailure,
+  raiseDataTransferSet,
+]

package/src/behaviors/behavior.foundational.ts

@@ -1,15 +1,15 @@
 import {keyIs} from '../internal-utils/key-is'
 import {defineBehavior, raise} from './behavior.types'
 
-export const foundationalBehaviors = [
-  /**
-   * On WebKit, Shift+Enter results in an `insertParagraph` input event rather
-   * than an `insertLineBreak` input event. This Behavior makes sure we catch
-   * that `key.down` event beforehand and raise an `insert.soft break` manually.
-   */
-  defineBehavior({
-    on: 'key.down',
-    guard: ({event}) => keyIs.lineBreak(event.keyboardEvent),
-    actions: [() => [raise({type: 'insert.soft break'})]],
-  }),
-]
+/**
+ * On WebKit, Shift+Enter results in an `insertParagraph` input event rather
+ * than an `insertLineBreak` input event. This Behavior makes sure we catch
+ * that `key.down` event beforehand and raise an `insert.soft break` manually.
+ */
+const raiseSoftBreak = defineBehavior({
+  on: 'key.down',
+  guard: ({event}) => keyIs.lineBreak(event.keyboardEvent),
+  actions: [() => [raise({type: 'insert.soft break'})]],
+})
+
+export const foundationalBehaviors = [raiseSoftBreak]

package/src/behaviors/behavior.markdown-emphasis.ts

@@ -125,10 +125,12 @@ const emphasisListener: CallbackLogicFunction<
           const anchor = utils.blockOffsetToSpanSelectionPoint({
             value: context.value,
             blockOffset: prefixOffsets.focus,
+            direction: 'backward',
           })
           const focus = utils.blockOffsetToSpanSelectionPoint({
             value: context.value,
             blockOffset: suffixOffsets.anchor,
+            direction: 'forward',
           })
 
           if (!anchor || !focus) {
@@ -169,10 +171,12 @@ const emphasisListener: CallbackLogicFunction<
           const anchor = utils.blockOffsetToSpanSelectionPoint({
             value: context.value,
             blockOffset: prefixOffsets.focus,
+            direction: 'backward',
           })
           const focus = utils.blockOffsetToSpanSelectionPoint({
             value: context.value,
             blockOffset: suffixOffsets.anchor,
+            direction: 'forward',
           })
 
           if (!anchor || !focus) {

package/src/converters/converter.text-html.serialize.test.ts

@@ -168,7 +168,7 @@ describe(converterTextHtml.serialize.name, () => {
         },
       }),
     ).toMatchObject({
-      data: '<p>fizz  buzz</p>',
+      data: '<p>fizz  buz</p>',
     })
   })
 

package/src/editor/PortableTextEditor.tsx

@@ -812,7 +812,7 @@ export function RouteEventsToChanges(props: {
       debug('Unsubscribing to changes')
       sub.unsubscribe()
     }
-  }, [props.editorActor, handleChange])
+  }, [props.editorActor])
 
   return null
 }

package/src/editor/editor-machine.ts

@@ -11,6 +11,7 @@ import {
 } from 'xstate'
 import {performAction} from '../behavior-actions/behavior.actions'
 import {coreBehaviors} from '../behaviors/behavior.core'
+import {defaultBehaviors} from '../behaviors/behavior.default'
 import {foundationalBehaviors} from '../behaviors/behavior.foundational'
 import {
   isCustomBehaviorEvent,
@@ -255,7 +256,7 @@ export const editorMachine = setup({
     'assign behaviors': assign({
       behaviors: ({event}) => {
         assertEvent(event, 'update behaviors')
-        return new Set([...foundationalBehaviors, ...event.behaviors])
+        return new Set([...event.behaviors])
       },
     }),
     'assign schema': assign({
@@ -310,9 +311,11 @@ export const editorMachine = setup({
           ? event.defaultActionCallback
           : undefined
 
-      const eventBehaviors = [...context.behaviors.values()].filter(
-        (behavior) => behavior.on === event.behaviorEvent.type,
-      )
+      const eventBehaviors = [
+        ...foundationalBehaviors,
+        ...context.behaviors.values(),
+        ...defaultBehaviors,
+      ].filter((behavior) => behavior.on === event.behaviorEvent.type)
 
       if (eventBehaviors.length === 0) {
         if (defaultActionCallback) {
@@ -474,10 +477,7 @@ export const editorMachine = setup({
 }).createMachine({
   id: 'editor',
   context: ({input}) => ({
-    behaviors: new Set([
-      ...foundationalBehaviors,
-      ...(input.behaviors ?? coreBehaviors),
-    ]),
+    behaviors: new Set([...(input.behaviors ?? coreBehaviors)]),
     converters: new Set(input.converters ?? []),
     keyGenerator: input.keyGenerator,
     pendingEvents: [],

package/src/plugins/plugin.event-listener.tsx

@@ -64,7 +64,7 @@ export function EventListenerPlugin(props: {
     return () => {
       subscription.unsubscribe()
     }
-  }, [editor, on])
+  }, [editor])
 
   return null
 }

package/src/selectors/selector.get-caret-word-selection.ts

@@ -74,6 +74,13 @@ export const getCaretWordSelection: EditorSelector<EditorSelection> = ({
   })
   const textDirectlyAfter = textAfter.split(/\s+/).at(0)
 
+  if (
+    (textDirectlyBefore === undefined || textDirectlyBefore === '') &&
+    (textDirectlyAfter === undefined || textDirectlyAfter === '')
+  ) {
+    return null
+  }
+
   const caretWordStartOffset: BlockOffset = textDirectlyBefore
     ? {
         ...selectionStartOffset,
@@ -90,10 +97,12 @@ export const getCaretWordSelection: EditorSelector<EditorSelection> = ({
   const caretWordStartSelectionPoint = blockOffsetToSpanSelectionPoint({
     value: context.value,
     blockOffset: caretWordStartOffset,
+    direction: 'backward',
   })
   const caretWordEndSelectionPoint = blockOffsetToSpanSelectionPoint({
     value: context.value,
     blockOffset: caretWordEndOffset,
+    direction: 'forward',
   })
 
   if (!caretWordStartSelectionPoint || !caretWordEndSelectionPoint) {