@portabletext/editor 1.43.1 → 1.44.1

package/src/behaviors/behavior.internal.list-item.ts

@@ -0,0 +1,61 @@
+import {getSelectedTextBlocks, isActiveListItem} from '../selectors'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const internalListItemBehaviors = [
+  defineBehavior({
+    on: 'list item.add',
+    guard: ({snapshot}) => {
+      const selectedTextBlocks = getSelectedTextBlocks(snapshot)
+
+      return {selectedTextBlocks}
+    },
+    actions: [
+      ({event}, {selectedTextBlocks}) =>
+        selectedTextBlocks.map((block) =>
+          raise({
+            type: 'block.set',
+            at: block.path,
+            props: {
+              level: 1,
+              listItem: event.listItem,
+            },
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'list item.remove',
+    guard: ({snapshot}) => {
+      const selectedTextBlocks = getSelectedTextBlocks(snapshot)
+
+      return {selectedTextBlocks}
+    },
+    actions: [
+      (_, {selectedTextBlocks}) =>
+        selectedTextBlocks.map((block) =>
+          raise({
+            type: 'block.unset',
+            at: block.path,
+            props: ['level', 'listItem'],
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'list item.toggle',
+    guard: ({snapshot, event}) => isActiveListItem(event.listItem)(snapshot),
+    actions: [
+      ({event}) => [
+        raise({type: 'list item.remove', listItem: event.listItem}),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'list item.toggle',
+    guard: ({snapshot, event}) => !isActiveListItem(event.listItem)(snapshot),
+    actions: [
+      ({event}) => [raise({type: 'list item.add', listItem: event.listItem})],
+    ],
+  }),
+]

package/src/behaviors/behavior.internal.select.ts

@@ -0,0 +1,62 @@
+import {getNextBlock, getPreviousBlock} from '../selectors'
+import {getBlockEndPoint, getBlockStartPoint} from '../utils'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const internalSelectBehaviors = [
+  defineBehavior({
+    on: 'select.previous block',
+    guard: ({snapshot, event}) => {
+      const previousBlock = getPreviousBlock(snapshot)
+
+      if (!previousBlock) {
+        return false
+      }
+
+      const point =
+        event.select === 'end'
+          ? getBlockEndPoint(previousBlock)
+          : getBlockStartPoint(previousBlock)
+
+      return {
+        selection: {
+          anchor: point,
+          focus: point,
+        },
+      }
+    },
+    actions: [
+      (_, {selection}) => [
+        raise({
+          type: 'select',
+          selection,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'select.next block',
+    guard: ({snapshot, event}) => {
+      const nextBlock = getNextBlock(snapshot)
+
+      if (!nextBlock) {
+        return false
+      }
+
+      const point =
+        event.select === 'end'
+          ? getBlockEndPoint(nextBlock)
+          : getBlockStartPoint(nextBlock)
+
+      return {selection: {anchor: point, focus: point}}
+    },
+    actions: [
+      (_, {selection}) => [
+        raise({
+          type: 'select',
+          selection,
+        }),
+      ],
+    ],
+  }),
+]

package/src/behaviors/behavior.internal.style.ts

@@ -0,0 +1,54 @@
+import {getSelectedTextBlocks, isActiveStyle} from '../selectors'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const internalStyleBehaviors = [
+  defineBehavior({
+    on: 'style.add',
+    guard: ({snapshot}) => {
+      const selectedTextBlocks = getSelectedTextBlocks(snapshot)
+
+      return {selectedTextBlocks}
+    },
+    actions: [
+      ({event}, {selectedTextBlocks}) =>
+        selectedTextBlocks.map((block) =>
+          raise({
+            type: 'block.set',
+            at: block.path,
+            props: {
+              style: event.style,
+            },
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'style.remove',
+    guard: ({snapshot}) => {
+      const selectedTextBlocks = getSelectedTextBlocks(snapshot)
+
+      return {selectedTextBlocks}
+    },
+    actions: [
+      (_, {selectedTextBlocks}) =>
+        selectedTextBlocks.map((block) =>
+          raise({
+            type: 'block.unset',
+            at: block.path,
+            props: ['style'],
+          }),
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'style.toggle',
+    guard: ({snapshot, event}) => isActiveStyle(event.style)(snapshot),
+    actions: [({event}) => [raise({type: 'style.remove', style: event.style})]],
+  }),
+  defineBehavior({
+    on: 'style.toggle',
+    guard: ({snapshot, event}) => !isActiveStyle(event.style)(snapshot),
+    actions: [({event}) => [raise({type: 'style.add', style: event.style})]],
+  }),
+]

package/src/behaviors/behavior.perform-event.ts

@@ -10,16 +10,23 @@ import {debugWithName} from '../internal-utils/debug'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {InternalBehaviorAction} from './behavior.types.action'
 import {
-  isClipboardBehaviorEvent,
   isCustomBehaviorEvent,
-  isDragBehaviorEvent,
-  isInputBehaviorEvent,
-  isKeyboardBehaviorEvent,
-  isMouseBehaviorEvent,
+  isInternalBehaviorEvent,
+  isNativeBehaviorEvent,
 } from './behavior.types.event'
 
 const debug = debugWithName('behaviors:event')
 
+function eventCategory(event: BehaviorEvent) {
+  return isNativeBehaviorEvent(event)
+    ? 'native'
+    : isInternalBehaviorEvent(event)
+      ? 'internal'
+      : isCustomBehaviorEvent(event)
+        ? 'custom'
+        : 'synthetic'
+}
+
 export function performEvent({
   behaviors,
   event,
@@ -43,17 +50,12 @@ export function performEvent({
       }
     | undefined
 }) {
-  debug(JSON.stringify(event, null, 2))
+  debug(`(${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
   const defaultAction =
     isCustomBehaviorEvent(event) ||
-    isClipboardBehaviorEvent(event) ||
-    isDragBehaviorEvent(event) ||
-    isInputBehaviorEvent(event) ||
-    isKeyboardBehaviorEvent(event) ||
-    isMouseBehaviorEvent(event) ||
-    event.type === 'deserialize' ||
-    event.type === 'serialize'
+    isNativeBehaviorEvent(event) ||
+    isInternalBehaviorEvent(event)
       ? undefined
       : ({
           ...event,

package/src/behaviors/behavior.types.event.ts

@@ -28,17 +28,39 @@ type NamespacedBehaviorEventType<
   ? BehaviorEvent['type']
   : Extract<BehaviorEvent['type'], TNamespace | `${TNamespace}.${string}`>
 
-/**
- * @beta
- */
-export type ExternalSyntheticBehaviorEvent = {
-  type: SyntheticBehaviorEventType<'insert', 'block object'>
-  placement: InsertPlacement
-  blockObject: {
-    name: string
-    value?: {[prop: string]: unknown}
-  }
-}
+/**************************************
+ * External events
+ **************************************/
+
+type ExternalBehaviorEventNamespace = 'insert'
+
+type ExternalBehaviorEventType<
+  TNamespace extends ExternalBehaviorEventNamespace,
+  TType extends string = '',
+> = TType extends '' ? `${TNamespace}` : `${TNamespace}.${TType}`
+
+export type ExternalBehaviorEvent =
+  | {
+      type: ExternalBehaviorEventType<'insert', 'block object'>
+      placement: InsertPlacement
+      blockObject: {
+        name: string
+        value?: {[prop: string]: unknown}
+      }
+    }
+  | PickFromUnion<
+      InternalBehaviorEvent,
+      'type',
+      | 'annotation.toggle'
+      | 'decorator.toggle'
+      | 'insert.blocks'
+      | 'list item.add'
+      | 'list item.remove'
+      | 'list item.toggle'
+      | 'style.add'
+      | 'style.remove'
+      | 'style.toggle'
+    >
 
 /**************************************
  * Synthetic events
@@ -53,18 +75,13 @@ type SyntheticBehaviorEventNamespace =
   | 'annotation'
   | 'block'
   | 'blur'
-  | 'data transfer'
   | 'decorator'
   | 'delete'
-  | 'deserialization'
   | 'focus'
   | 'history'
   | 'insert'
-  | 'list item'
   | 'move'
   | 'select'
-  | 'serialization'
-  | 'style'
 
 /**
  * @beta
@@ -83,13 +100,6 @@ export type SyntheticBehaviorEvent =
         name: string
       }
     }
-  | {
-      type: SyntheticBehaviorEventType<'annotation', 'toggle'>
-      annotation: {
-        name: string
-        value: {[prop: string]: unknown}
-      }
-    }
   | {
       type: SyntheticBehaviorEventType<'block', 'set'>
       at: [KeyedSegment]
@@ -103,12 +113,6 @@ export type SyntheticBehaviorEvent =
   | {
       type: SyntheticBehaviorEventType<'blur'>
     }
-  | {
-      type: SyntheticBehaviorEventType<'data transfer', 'set'>
-      data: string
-      dataTransfer: DataTransfer
-      mimeType: MIMEType
-    }
   | {
       type: SyntheticBehaviorEventType<'decorator', 'add'>
       decorator: string
@@ -118,11 +122,6 @@ export type SyntheticBehaviorEvent =
       type: SyntheticBehaviorEventType<'decorator', 'remove'>
       decorator: string
     }
-  | {
-      type: SyntheticBehaviorEventType<'decorator', 'toggle'>
-      decorator: string
-      offsets?: {anchor: BlockOffset; focus: BlockOffset}
-    }
   | {
       type: SyntheticBehaviorEventType<'delete'>
       selection: NonNullable<EditorSelection>
@@ -153,11 +152,6 @@ export type SyntheticBehaviorEvent =
   | {
       type: SyntheticBehaviorEventType<'history', 'undo'>
     }
-  | {
-      type: SyntheticBehaviorEventType<'insert', 'blocks'>
-      blocks: Array<PortableTextBlock>
-      placement: InsertPlacement
-    }
   | {
       type: SyntheticBehaviorEventType<'insert', 'inline object'>
       inlineObject: {
@@ -190,18 +184,6 @@ export type SyntheticBehaviorEvent =
       type: SyntheticBehaviorEventType<'insert', 'text'>
       text: string
     }
-  | {
-      type: SyntheticBehaviorEventType<'list item', 'add'>
-      listItem: string
-    }
-  | {
-      type: SyntheticBehaviorEventType<'list item', 'remove'>
-      listItem: string
-    }
-  | {
-      type: SyntheticBehaviorEventType<'list item', 'toggle'>
-      listItem: string
-    }
   | {
       type: SyntheticBehaviorEventType<'move', 'block'>
       at: [KeyedSegment]
@@ -219,28 +201,69 @@ export type SyntheticBehaviorEvent =
       type: SyntheticBehaviorEventType<'select'>
       selection: EditorSelection
     }
+
+export type InsertPlacement = 'auto' | 'after' | 'before'
+
+export function isKeyboardBehaviorEvent(
+  event: BehaviorEvent,
+): event is KeyboardBehaviorEvent {
+  return event.type.startsWith('keyboard.')
+}
+
+/**************************************
+ * Internal events
+ **************************************/
+
+type InternalBehaviorEventNamespace =
+  | 'annotation'
+  | 'decorator'
+  | 'deserialize'
+  | 'deserialization'
+  | 'list item'
+  | 'insert'
+  | 'select'
+  | 'serialize'
+  | 'serialization'
+  | 'style'
+
+type InternalBehaviorEventType<
+  TNamespace extends InternalBehaviorEventNamespace,
+  TType extends string = '',
+> = TType extends '' ? `${TNamespace}` : `${TNamespace}.${TType}`
+
+export type InternalBehaviorEvent =
   | {
-      type: SyntheticBehaviorEventType<'select', 'previous block'>
-      select?: 'start' | 'end'
-    }
-  | {
-      type: SyntheticBehaviorEventType<'select', 'next block'>
-      select?: 'start' | 'end'
+      type: InternalBehaviorEventType<'annotation', 'toggle'>
+      annotation: {
+        name: string
+        value: {[prop: string]: unknown}
+      }
     }
   | {
-      type: SyntheticBehaviorEventType<'style', 'add'>
-      style: string
+      type: InternalBehaviorEventType<'decorator', 'toggle'>
+      decorator: string
+      offsets?: {anchor: BlockOffset; focus: BlockOffset}
     }
   | {
-      type: SyntheticBehaviorEventType<'style', 'remove'>
-      style: string
+      type: InternalBehaviorEventType<'deserialize'>
+      originEvent:
+        | PickFromUnion<
+            NativeBehaviorEvent,
+            'type',
+            'drag.drop' | 'clipboard.paste'
+          >
+        | InputBehaviorEvent
     }
   | {
-      type: SyntheticBehaviorEventType<'style', 'toggle'>
-      style: string
+      type: InternalBehaviorEventType<'serialize'>
+      originEvent: PickFromUnion<
+        NativeBehaviorEvent,
+        'type',
+        'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'
+      >
     }
   | {
-      type: SyntheticBehaviorEventType<'deserialization', 'success'>
+      type: InternalBehaviorEventType<'deserialization', 'success'>
       mimeType: MIMEType
       data: Array<PortableTextBlock>
       originEvent:
@@ -252,7 +275,7 @@ export type SyntheticBehaviorEvent =
         | InputBehaviorEvent
     }
   | {
-      type: SyntheticBehaviorEventType<'deserialization', 'failure'>
+      type: InternalBehaviorEventType<'deserialization', 'failure'>
       mimeType: MIMEType
       reason: string
       originEvent:
@@ -264,7 +287,7 @@ export type SyntheticBehaviorEvent =
         | InputBehaviorEvent
     }
   | {
-      type: SyntheticBehaviorEventType<'serialization', 'success'>
+      type: InternalBehaviorEventType<'serialization', 'success'>
       mimeType: MIMEType
       data: string
       originEvent: PickFromUnion<
@@ -274,7 +297,7 @@ export type SyntheticBehaviorEvent =
       >
     }
   | {
-      type: SyntheticBehaviorEventType<'serialization', 'failure'>
+      type: InternalBehaviorEventType<'serialization', 'failure'>
       mimeType: MIMEType
       reason: string
       originEvent: PickFromUnion<
@@ -283,45 +306,59 @@ export type SyntheticBehaviorEvent =
         'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'
       >
     }
-
-export type InsertPlacement = 'auto' | 'after' | 'before'
-
-export function isKeyboardBehaviorEvent(
-  event: BehaviorEvent,
-): event is KeyboardBehaviorEvent {
-  return event.type.startsWith('keyboard.')
-}
-
-/**************************************
- * Internal events
- **************************************/
-
-type InternalBehaviorEventNamespace = 'deserialize' | 'serialize'
-
-type InternalBehaviorEventType<
-  TNamespace extends InternalBehaviorEventNamespace,
-  TType extends string = '',
-> = TType extends '' ? `${TNamespace}` : `${TNamespace}.${TType}`
-
-export type InternalBehaviorEvent =
   | {
-      type: InternalBehaviorEventType<'deserialize'>
-      originEvent:
-        | PickFromUnion<
-            NativeBehaviorEvent,
-            'type',
-            'drag.drop' | 'clipboard.paste'
-          >
-        | InputBehaviorEvent
+      type: InternalBehaviorEventType<'insert', 'blocks'>
+      blocks: Array<PortableTextBlock>
+      placement: InsertPlacement
     }
   | {
-      type: InternalBehaviorEventType<'serialize'>
-      originEvent: PickFromUnion<
-        NativeBehaviorEvent,
-        'type',
-        'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'
-      >
+      type: InternalBehaviorEventType<'list item', 'add'>
+      listItem: string
+    }
+  | {
+      type: InternalBehaviorEventType<'list item', 'remove'>
+      listItem: string
+    }
+  | {
+      type: InternalBehaviorEventType<'list item', 'toggle'>
+      listItem: string
+    }
+  | {
+      type: InternalBehaviorEventType<'select', 'previous block'>
+      select?: 'start' | 'end'
+    }
+  | {
+      type: InternalBehaviorEventType<'select', 'next block'>
+      select?: 'start' | 'end'
+    }
+  | {
+      type: InternalBehaviorEventType<'style', 'add'>
+      style: string
+    }
+  | {
+      type: InternalBehaviorEventType<'style', 'remove'>
+      style: string
     }
+  | {
+      type: InternalBehaviorEventType<'style', 'toggle'>
+      style: string
+    }
+
+export function isInternalBehaviorEvent(
+  event: BehaviorEvent,
+): event is InternalBehaviorEvent {
+  return (
+    event.type === 'deserialize' ||
+    event.type.startsWith('deserialization.') ||
+    event.type === 'insert.blocks' ||
+    event.type.startsWith('list item.') ||
+    event.type === 'serialize' ||
+    event.type.startsWith('serialization.') ||
+    event.type === 'select.next block' ||
+    event.type === 'select.previous block' ||
+    event.type.startsWith('style.')
+  )
+}
 
 /**************************************
  * Native events
@@ -339,6 +376,18 @@ type NativeBehaviorEventType<
   TType extends string = '',
 > = TType extends '' ? `${TNamespace}` : `${TNamespace}.${TType}`
 
+export function isNativeBehaviorEvent(
+  event: BehaviorEvent,
+): event is NativeBehaviorEvent {
+  return (
+    isClipboardBehaviorEvent(event) ||
+    isDragBehaviorEvent(event) ||
+    isInputBehaviorEvent(event) ||
+    isKeyboardBehaviorEvent(event) ||
+    isMouseBehaviorEvent(event)
+  )
+}
+
 /**
  * @beta
  */
@@ -372,7 +421,7 @@ type ClipboardBehaviorEvent =
       position: Pick<EventPosition, 'selection'>
     }
 
-export function isClipboardBehaviorEvent(
+function isClipboardBehaviorEvent(
   event: BehaviorEvent,
 ): event is ClipboardBehaviorEvent {
   return event.type.startsWith('clipboard.')
@@ -426,9 +475,7 @@ type DragBehaviorEvent =
       }
     }
 
-export function isDragBehaviorEvent(
-  event: BehaviorEvent,
-): event is DragBehaviorEvent {
+function isDragBehaviorEvent(event: BehaviorEvent): event is DragBehaviorEvent {
   return event.type.startsWith('drag.')
 }
 
@@ -450,7 +497,7 @@ export type InputBehaviorEvent = {
   }
 }
 
-export function isInputBehaviorEvent(
+function isInputBehaviorEvent(
   event: BehaviorEvent,
 ): event is InputBehaviorEvent {
   return event.type.startsWith('input.')
@@ -477,7 +524,7 @@ export type MouseBehaviorEvent = {
   position: EventPosition
 }
 
-export function isMouseBehaviorEvent(
+function isMouseBehaviorEvent(
   event: BehaviorEvent,
 ): event is MouseBehaviorEvent {
   return event.type.startsWith('mouse.')

package/src/editor/create-editor.ts

@@ -14,7 +14,7 @@ import {
 import type {Behavior} from '../behaviors/behavior.types.behavior'
 import type {
   CustomBehaviorEvent,
-  ExternalSyntheticBehaviorEvent,
+  ExternalBehaviorEvent,
   SyntheticBehaviorEvent,
 } from '../behaviors/behavior.types.event'
 import {coreConverters} from '../converters/converters.core'
@@ -65,7 +65,7 @@ export type EditorConfig = {
  */
 export type EditorEvent =
   | ExternalEditorEvent
-  | ExternalSyntheticBehaviorEvent
+  | ExternalBehaviorEvent
   | SyntheticBehaviorEvent
   | CustomBehaviorEvent
 

package/src/editor/editor-machine.ts

@@ -15,7 +15,7 @@ import {performEvent} from '../behaviors/behavior.perform-event'
 import type {Behavior} from '../behaviors/behavior.types.behavior'
 import type {
   CustomBehaviorEvent,
-  ExternalSyntheticBehaviorEvent,
+  ExternalBehaviorEvent,
   InternalBehaviorEvent,
   NativeBehaviorEvent,
   SyntheticBehaviorEvent,
@@ -193,7 +193,7 @@ export type InternalEditorEvent =
       nativeEvent?: {preventDefault: () => void}
     }
   | CustomBehaviorEvent
-  | ExternalSyntheticBehaviorEvent
+  | ExternalBehaviorEvent
   | ExternalEditorEvent
   | MutationEvent
   | InternalPatchEvent
@@ -213,7 +213,7 @@ export type InternalEditorEvent =
  */
 export type InternalEditorEmittedEvent =
   | EditorEmittedEvent
-  | ExternalSyntheticBehaviorEvent
+  | ExternalBehaviorEvent
   | InternalPatchEvent
   | PatchesEvent
   | UnsetEvent
@@ -406,7 +406,6 @@ export const editorMachine = setup({
               actions: 'handle behavior event',
               guard: ({event}) =>
                 event.behaviorEvent.type === 'clipboard.copy' ||
-                event.behaviorEvent.type === 'data transfer.set' ||
                 event.behaviorEvent.type === 'serialize' ||
                 event.behaviorEvent.type === 'serialization.failure' ||
                 event.behaviorEvent.type === 'serialization.success' ||