@portabletext/editor 1.43.0 → 1.44.0

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,37 @@ 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',
+      | 'insert.blocks'
+      | 'list item.add'
+      | 'list item.remove'
+      | 'list item.toggle'
+      | 'style.add'
+      | 'style.remove'
+      | 'style.toggle'
+    >
 
 /**************************************
  * Synthetic events
@@ -53,18 +73,13 @@ type SyntheticBehaviorEventNamespace =
   | 'annotation'
   | 'block'
   | 'blur'
-  | 'data transfer'
   | 'decorator'
   | 'delete'
-  | 'deserialization'
   | 'focus'
   | 'history'
   | 'insert'
-  | 'list item'
   | 'move'
   | 'select'
-  | 'serialization'
-  | 'style'
 
 /**
  * @beta
@@ -103,12 +118,6 @@ export type SyntheticBehaviorEvent =
   | {
       type: SyntheticBehaviorEventType<'blur'>
     }
-  | {
-      type: SyntheticBehaviorEventType<'data transfer', 'set'>
-      data: string
-      dataTransfer: DataTransfer
-      mimeType: MIMEType
-    }
   | {
       type: SyntheticBehaviorEventType<'decorator', 'add'>
       decorator: string
@@ -153,11 +162,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 +194,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 +211,55 @@ 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 =
+  | '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: SyntheticBehaviorEventType<'style', 'add'>
-      style: string
-    }
-  | {
-      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 +271,7 @@ export type SyntheticBehaviorEvent =
         | InputBehaviorEvent
     }
   | {
-      type: SyntheticBehaviorEventType<'deserialization', 'failure'>
+      type: InternalBehaviorEventType<'deserialization', 'failure'>
       mimeType: MIMEType
       reason: string
       originEvent:
@@ -264,7 +283,7 @@ export type SyntheticBehaviorEvent =
         | InputBehaviorEvent
     }
   | {
-      type: SyntheticBehaviorEventType<'serialization', 'success'>
+      type: InternalBehaviorEventType<'serialization', 'success'>
       mimeType: MIMEType
       data: string
       originEvent: PickFromUnion<
@@ -274,7 +293,7 @@ export type SyntheticBehaviorEvent =
       >
     }
   | {
-      type: SyntheticBehaviorEventType<'serialization', 'failure'>
+      type: InternalBehaviorEventType<'serialization', 'failure'>
       mimeType: MIMEType
       reason: string
       originEvent: PickFromUnion<
@@ -283,45 +302,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 +372,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 +417,7 @@ type ClipboardBehaviorEvent =
       position: Pick<EventPosition, 'selection'>
     }
 
-export function isClipboardBehaviorEvent(
+function isClipboardBehaviorEvent(
   event: BehaviorEvent,
 ): event is ClipboardBehaviorEvent {
   return event.type.startsWith('clipboard.')
@@ -426,9 +471,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 +493,7 @@ export type InputBehaviorEvent = {
   }
 }
 
-export function isInputBehaviorEvent(
+function isInputBehaviorEvent(
   event: BehaviorEvent,
 ): event is InputBehaviorEvent {
   return event.type.startsWith('input.')
@@ -477,7 +520,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' ||

package/src/editor/plugins/createWithEditableAPI.ts

@@ -18,11 +18,10 @@ import {
 } from 'slate'
 import type {DOMNode} from 'slate-dom'
 import {ReactEditor} from 'slate-react'
-import {isListItemActive} from '../../behavior-actions/behavior.action.list-item'
-import {isStyleActive} from '../../behavior-actions/behavior.action.style'
 import type {BehaviorActionImplementation} from '../../behavior-actions/behavior.actions'
 import {debugWithName} from '../../internal-utils/debug'
 import {toPortableTextRange, toSlateRange} from '../../internal-utils/ranges'
+import {isListItemActive, isStyleActive} from '../../internal-utils/slate-utils'
 import {fromSlateValue, toSlateValue} from '../../internal-utils/values'
 import {
   KEY_TO_VALUE_ELEMENT,

package/src/editor/sync-machine.ts

@@ -526,7 +526,7 @@ async function* getBlocks({
 }) {
   let index = 0
   for await (const block of slateValue) {
-    if (streamBlocks) {
+    if (streamBlocks && index % 10 === 0) {
       await new Promise<void>((resolve) => setTimeout(resolve, 0))
     }
     yield [block, index] as const

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

@@ -126,3 +126,55 @@ function isBlockElement(
       ))
   )
 }
+
+export function isListItemActive({
+  editor,
+  listItem,
+}: {
+  editor: Editor
+  listItem: string
+}): boolean {
+  if (!editor.selection) {
+    return false
+  }
+
+  const selectedBlocks = [
+    ...Editor.nodes(editor, {
+      at: editor.selection,
+      match: (node) => editor.isTextBlock(node),
+    }),
+  ]
+
+  if (selectedBlocks.length > 0) {
+    return selectedBlocks.every(
+      ([node]) => editor.isListBlock(node) && node.listItem === listItem,
+    )
+  }
+
+  return false
+}
+
+export function isStyleActive({
+  editor,
+  style,
+}: {
+  editor: Editor
+  style: string
+}): boolean {
+  if (!editor.selection) {
+    return false
+  }
+
+  const selectedBlocks = [
+    ...Editor.nodes(editor, {
+      at: editor.selection,
+      match: (node) => editor.isTextBlock(node),
+    }),
+  ]
+
+  if (selectedBlocks.length > 0) {
+    return selectedBlocks.every(([node]) => node.style === style)
+  }
+
+  return false
+}

package/src/plugins/plugin.internal.editor-actor-ref.tsx

@@ -0,0 +1,15 @@
+import React, {useContext} from 'react'
+import {EditorActorContext} from '../editor/editor-actor-context'
+import type {EditorActor} from '../editor/editor-machine'
+
+export const InternalEditorAfterRefPlugin =
+  React.forwardRef<EditorActor | null>((_, ref) => {
+    const editorActor = useContext(EditorActorContext)
+
+    const editorActorRef = React.useRef(editorActor)
+
+    React.useImperativeHandle(ref, () => editorActorRef.current, [])
+
+    return null
+  })
+InternalEditorAfterRefPlugin.displayName = 'InternalEditorAfterRefPlugin'

package/src/plugins/plugin.internal.slate-editor-ref.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {useSlateStatic} from 'slate-react'
+import type {PortableTextSlateEditor} from '../types/editor'
+
+export const InternalSlateEditorRefPlugin =
+  React.forwardRef<PortableTextSlateEditor | null>((_, ref) => {
+    const slateEditor = useSlateStatic()
+
+    const slateEditorRef = React.useRef(slateEditor)
+
+    React.useImperativeHandle(ref, () => slateEditorRef.current, [])
+
+    return null
+  })
+InternalSlateEditorRefPlugin.displayName = 'InternalSlateEditorRefPlugin'

package/src/selectors/index.ts

@@ -1,4 +1,3 @@
-export {isSelectingEntireBlocks} from './selector.is-selecting-entire-blocks'
 export {getActiveAnnotations} from './selector.get-active-annotations'
 export {getActiveListItem} from './selector.get-active-list-item'
 export {getActiveStyle} from './selector.get-active-style'
@@ -13,6 +12,7 @@ export {getNextInlineObject} from './selector.get-next-inline-object'
 export {getPreviousInlineObject} from './selector.get-previous-inline-object'
 export {getSelectedSlice} from './selector.get-selected-slice'
 export {getSelectedSpans} from './selector.get-selected-spans'
+export {getSelectedTextBlocks} from './selector.get-selected-text-blocks'
 export {getSelection} from './selector.get-selection'
 export {getSelectionEndPoint} from './selector.get-selection-end-point'
 export {getSelectionStartPoint} from './selector.get-selection-start-point'
@@ -29,6 +29,7 @@ export {isAtTheStartOfBlock} from './selector.is-at-the-start-of-block'
 export {isOverlappingSelection} from './selector.is-overlapping-selection'
 export {isPointAfterSelection} from './selector.is-point-after-selection'
 export {isPointBeforeSelection} from './selector.is-point-before-selection'
+export {isSelectingEntireBlocks} from './selector.is-selecting-entire-blocks'
 export {isSelectionCollapsed} from './selector.is-selection-collapsed'
 export {isSelectionExpanded} from './selector.is-selection-expanded'
 export * from './selectors'

package/src/selectors/selector.get-selected-text-blocks.ts

@@ -0,0 +1,67 @@
+import type {KeyedSegment, PortableTextTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {isTextBlock} from '../internal-utils/parse-blocks'
+import {isKeyedSegment} from '../utils'
+
+/**
+ * @public
+ */
+export const getSelectedTextBlocks: EditorSelector<
+  Array<{node: PortableTextTextBlock; path: [KeyedSegment]}>
+> = (snapshot) => {
+  if (!snapshot.context.selection) {
+    return []
+  }
+
+  const selectedTextBlocks: Array<{
+    node: PortableTextTextBlock
+    path: [KeyedSegment]
+  }> = []
+  const startKey = snapshot.context.selection.backward
+    ? isKeyedSegment(snapshot.context.selection.focus.path[0])
+      ? snapshot.context.selection.focus.path[0]._key
+      : undefined
+    : isKeyedSegment(snapshot.context.selection.anchor.path[0])
+      ? snapshot.context.selection.anchor.path[0]._key
+      : undefined
+  const endKey = snapshot.context.selection.backward
+    ? isKeyedSegment(snapshot.context.selection.anchor.path[0])
+      ? snapshot.context.selection.anchor.path[0]._key
+      : undefined
+    : isKeyedSegment(snapshot.context.selection.focus.path[0])
+      ? snapshot.context.selection.focus.path[0]._key
+      : undefined
+
+  if (!startKey || !endKey) {
+    return selectedTextBlocks
+  }
+
+  for (const block of snapshot.context.value) {
+    if (block._key === startKey) {
+      if (isTextBlock(snapshot.context.schema, block)) {
+        selectedTextBlocks.push({node: block, path: [{_key: block._key}]})
+      }
+
+      if (startKey === endKey) {
+        break
+      }
+      continue
+    }
+
+    if (block._key === endKey) {
+      if (isTextBlock(snapshot.context.schema, block)) {
+        selectedTextBlocks.push({node: block, path: [{_key: block._key}]})
+      }
+
+      break
+    }
+
+    if (selectedTextBlocks.length > 0) {
+      if (isTextBlock(snapshot.context.schema, block)) {
+        selectedTextBlocks.push({node: block, path: [{_key: block._key}]})
+      }
+    }
+  }
+
+  return selectedTextBlocks
+}