@portabletext/editor 1.28.0 → 1.30.0

package/src/behaviors/behavior.core.deserialize.ts

@@ -1,46 +1,60 @@
 import {defineBehavior, raise} from './behavior.types'
 
-export const coreDeserializeBehavior = defineBehavior({
-  on: 'deserialize',
-  guard: ({context, event}) => {
-    const deserializeEvents = context.converters.flatMap((converter) => {
-      const data = event.dataTransfer.getData(converter.mimeType)
+export const coreDeserializeBehaviors = {
+  'deserialize': defineBehavior({
+    on: 'deserialize',
+    guard: ({context, event}) => {
+      const deserializeEvents = context.converters.flatMap((converter) => {
+        const data = event.dataTransfer.getData(converter.mimeType)
 
-      if (!data) {
-        return []
-      }
+        if (!data) {
+          return []
+        }
 
-      return [
-        converter.deserialize({context, event: {type: 'deserialize', data}}),
-      ]
-    })
+        return [
+          converter.deserialize({context, event: {type: 'deserialize', data}}),
+        ]
+      })
 
-    const firstSuccess = deserializeEvents.find(
-      (deserializeEvent) => deserializeEvent.type === 'deserialization.success',
-    )
+      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
-    }
+      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,
-      }),
+      return firstSuccess
+    },
+    actions: [
+      ({event}, deserializeEvent) => [
+        raise({
+          ...deserializeEvent,
+          dataTransfer: event.dataTransfer,
+        }),
+      ],
+    ],
+  }),
+  'deserialization.success': defineBehavior({
+    on: 'deserialization.success',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'insert.blocks',
+          blocks: event.data,
+        }),
+      ],
     ],
-  ],
-})
+  }),
+}

package/src/behaviors/behavior.core.ts

@@ -1,23 +1,16 @@
 import {coreAnnotationBehaviors} from './behavior.core.annotations'
 import {coreBlockObjectBehaviors} from './behavior.core.block-objects'
 import {coreDecoratorBehaviors} from './behavior.core.decorators'
-import {coreDeserializeBehavior} from './behavior.core.deserialize'
+import {coreDeserializeBehaviors} from './behavior.core.deserialize'
 import {coreInsertBreakBehaviors} from './behavior.core.insert-break'
 import {coreListBehaviors} from './behavior.core.lists'
 import {coreSerializeBehaviors} from './behavior.core.serialize'
 import {coreStyleBehaviors} from './behavior.core.style'
-import {defineBehavior, raise} from './behavior.types'
-
-const softReturn = defineBehavior({
-  on: 'insert.soft break',
-  actions: [() => [raise({type: 'insert.text', text: '\n'})]],
-})
 
 /**
  * @beta
  */
 export const coreBehaviors = [
-  softReturn,
   coreAnnotationBehaviors.toggleAnnotationOff,
   coreAnnotationBehaviors.toggleAnnotationOn,
   coreDecoratorBehaviors.toggleDecoratorOff,
@@ -26,7 +19,8 @@ export const coreBehaviors = [
   coreDecoratorBehaviors.emShortcut,
   coreDecoratorBehaviors.underlineShortcut,
   coreDecoratorBehaviors.codeShortcut,
-  coreDeserializeBehavior,
+  coreDeserializeBehaviors.deserialize,
+  coreDeserializeBehaviors['deserialization.success'],
   coreBlockObjectBehaviors.arrowDownOnLonelyBlockObject,
   coreBlockObjectBehaviors.arrowUpOnLonelyBlockObject,
   coreBlockObjectBehaviors.breakingBlockObject,
@@ -51,10 +45,9 @@ export const coreBehaviors = [
  * @beta
  */
 export const coreBehavior = {
-  softReturn,
   annotation: coreAnnotationBehaviors,
   decorators: coreDecoratorBehaviors,
-  deserialize: coreDeserializeBehavior,
+  deserialize: coreDeserializeBehaviors,
   blockObjects: coreBlockObjectBehaviors,
   insertBreak: coreInsertBreakBehaviors,
   lists: coreListBehaviors,

package/src/behaviors/behavior.types.ts

@@ -66,6 +66,10 @@ export type SyntheticBehaviorEvent =
       type: 'decorator.toggle'
       decorator: string
     }
+  | {
+      type: 'delete'
+      selection: NonNullable<EditorSelection>
+    }
   | {
       type: 'delete.backward'
       unit: TextUnit

package/src/editor/PortableTextEditor.tsx

@@ -671,6 +671,16 @@ export class PortableTextEditor extends Component<
     editor.editable?.toggleMark(mark)
   }
 
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const selectedSlice = useEditorSelector(editor, selectors.getSelectedSlice)
+   * ```
+   */
   static getFragment = (
     editor: PortableTextEditor,
   ): PortableTextBlock[] | undefined => {
@@ -688,6 +698,16 @@ export class PortableTextEditor extends Component<
     editor.editable?.redo()
   }
 
+  /**
+   * @deprecated
+   * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
+   *
+   * ```
+   * import * as selectors from '@portabletext/editor/selectors'
+   * const editor = useEditor()
+   * const isOverlapping = useEditorSelector(editor, selectors.isOverlappingSelection(selectionB))
+   * ```
+   */
   static isSelectionsOverlapping = (
     editor: PortableTextEditor,
     selectionA: EditorSelection,

package/src/internal-utils/__tests__/patchToOperations.test.ts

@@ -75,29 +75,27 @@ describe('operationToPatches', () => {
     patches.forEach((p) => {
       patchToOperations(editor, p)
     })
-    expect(editor.children).toMatchInlineSnapshot(`
-      [
-        {
-          "__inline": false,
-          "_key": "c01739b0d03b",
-          "_type": "image",
-          "children": [
-            {
-              "_key": "${VOID_CHILD_KEY}",
-              "_type": "span",
-              "marks": [],
-              "text": "",
-            },
-          ],
-          "value": {
-            "asset": {
-              "_ref": "image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png",
-              "_type": "reference",
-            },
+    expect(editor.children).toEqual([
+      {
+        __inline: false,
+        _key: 'c01739b0d03b',
+        _type: 'image',
+        children: [
+          {
+            _key: VOID_CHILD_KEY,
+            _type: 'span',
+            marks: [],
+            text: '',
+          },
+        ],
+        value: {
+          asset: {
+            _ref: 'image-b5681d9d0b2b6c922238e7c694500dd7c1349b19-256x256-jpg',
+            _type: 'reference',
           },
         },
-      ]
-    `)
+      },
+    ])
   })
   it('will not create operations for insertion inside blocks', () => {
     editor.children = [

package/src/internal-utils/applyPatch.ts

@@ -298,9 +298,17 @@ function setPatch(editor: PortableTextSlateEditor, patch: SetPatch) {
       })
     }
   } else if (block && 'value' in block) {
-    const newVal = applyAll([block.value], [patch])[0]
-    Transforms.setNodes(editor, {...block, value: newVal}, {at: blockPath})
-    return true
+    if (patch.path.length > 1 && patch.path[1] !== 'children') {
+      const newVal = applyAll(block.value, [
+        {
+          ...patch,
+          path: patch.path.slice(1),
+        },
+      ])
+      Transforms.setNodes(editor, {...block, value: newVal}, {at: blockPath})
+    } else {
+      return false
+    }
   }
   debugState(editor, 'after')
   return true

package/src/plugins/index.ts

@@ -1,3 +1,5 @@
+export {BehaviorPlugin} from './plugin.behavior'
 export {EventListenerPlugin} from './plugin.event-listener'
 export {EditorRefPlugin} from './plugin.editor-ref'
 export {MarkdownPlugin, type MarkdownPluginConfig} from './plugin.markdown'
+export {OneLinePlugin} from './plugin.one-line'

package/src/plugins/plugin.behavior.tsx

@@ -0,0 +1,22 @@
+import {useEffect} from 'react'
+import type {Behavior} from '../behaviors'
+import {useEditor} from '../editor/editor-provider'
+
+/**
+ * @beta
+ */
+export function BehaviorPlugin(props: {behaviors: Array<Behavior>}) {
+  const editor = useEditor()
+
+  useEffect(() => {
+    const unregisterBehaviors = props.behaviors.map((behavior) =>
+      editor.registerBehavior({behavior}),
+    )
+
+    return () => {
+      unregisterBehaviors.forEach((unregister) => unregister())
+    }
+  }, [editor, props.behaviors])
+
+  return null
+}

package/src/plugins/plugin.one-line.tsx

@@ -0,0 +1,225 @@
+import {defineBehavior, raise} from '../behaviors'
+import * as selectors from '../selectors'
+import * as utils from '../utils'
+import {BehaviorPlugin} from './plugin.behavior'
+
+const oneLineBehaviors = [
+  /**
+   * Hitting Enter on an expanded selection should just delete that selection
+   * without causing a line break.
+   */
+  defineBehavior({
+    on: 'insert.break',
+    guard: ({context}) =>
+      context.selection && selectors.isSelectionExpanded({context})
+        ? {selection: context.selection}
+        : false,
+    actions: [(_, {selection}) => [{type: 'delete', selection}]],
+  }),
+  /**
+   * All other cases of `insert.break` should be aborted.
+   */
+  defineBehavior({
+    on: 'insert.break',
+    actions: [() => [{type: 'noop'}]],
+  }),
+  /**
+   * `insert.block` `before` or `after` is not allowed in a one-line editor.
+   */
+  defineBehavior({
+    on: 'insert.block',
+    guard: ({event}) =>
+      event.placement === 'before' || event.placement === 'after',
+    actions: [() => [{type: 'noop'}]],
+  }),
+  /**
+   * Other cases of `insert.block` are allowed.
+   *
+   * If a text block is inserted and the focus block is fully selected, then
+   * the focus block can be replaced with the inserted block.
+   */
+  defineBehavior({
+    on: 'insert.block',
+    guard: ({context, event}) => {
+      const focusTextBlock = selectors.getFocusTextBlock({context})
+      const selectionStartPoint = selectors.getSelectionStartPoint({context})
+      const selectionEndPoint = selectors.getSelectionEndPoint({context})
+
+      if (
+        !focusTextBlock ||
+        !utils.isTextBlock(context, event.block) ||
+        !selectionStartPoint ||
+        !selectionEndPoint
+      ) {
+        return false
+      }
+
+      const blockStartPoint = utils.getBlockStartPoint(focusTextBlock)
+      const blockEndPoint = utils.getBlockEndPoint(focusTextBlock)
+      const newFocus = utils.getBlockEndPoint({
+        node: event.block,
+        path: [{_key: event.block._key}],
+      })
+
+      if (
+        utils.isEqualSelectionPoints(blockStartPoint, selectionStartPoint) &&
+        utils.isEqualSelectionPoints(blockEndPoint, selectionEndPoint)
+      ) {
+        return {focusTextBlock, newFocus}
+      }
+
+      return false
+    },
+    actions: [
+      ({event}, {focusTextBlock, newFocus}) => [
+        {type: 'delete.block', blockPath: focusTextBlock.path},
+        {type: 'insert.block', block: event.block, placement: 'auto'},
+        {
+          type: 'select',
+          selection: {
+            anchor: newFocus,
+            focus: newFocus,
+          },
+        },
+      ],
+    ],
+  }),
+  /**
+   * An ordinary `insert.block` is acceptable if it's a text block. In that
+   * case it will get merged into the existing text block.
+   */
+  defineBehavior({
+    on: 'insert.block',
+    guard: ({context, event}) => {
+      const focusTextBlock = selectors.getFocusTextBlock({context})
+      const selectionStartPoint = selectors.getSelectionStartPoint({context})
+      const selectionEndPoint = selectors.getSelectionEndPoint({context})
+
+      if (
+        !focusTextBlock ||
+        !utils.isTextBlock(context, event.block) ||
+        !selectionStartPoint ||
+        !selectionEndPoint
+      ) {
+        return false
+      }
+
+      const blockBeforeStartPoint = utils.splitTextBlock({
+        context,
+        block: focusTextBlock.node,
+        point: selectionStartPoint,
+      })?.before
+      const blockAfterEndPoint = utils.splitTextBlock({
+        context,
+        block: focusTextBlock.node,
+        point: selectionEndPoint,
+      })?.after
+
+      if (!blockBeforeStartPoint || !blockAfterEndPoint) {
+        return false
+      }
+
+      const targetBlock = utils.mergeTextBlocks({
+        context,
+        targetBlock: blockBeforeStartPoint,
+        incomingBlock: event.block,
+      })
+
+      const newFocus = utils.getBlockEndPoint({
+        node: targetBlock,
+        path: [{_key: targetBlock._key}],
+      })
+
+      const mergedBlock = utils.mergeTextBlocks({
+        context,
+        targetBlock,
+        incomingBlock: blockAfterEndPoint,
+      })
+
+      return {focusTextBlock, mergedBlock, newFocus}
+    },
+    actions: [
+      (_, {focusTextBlock, mergedBlock, newFocus}) => [
+        {type: 'delete.block', blockPath: focusTextBlock.path},
+        {type: 'insert.block', block: mergedBlock, placement: 'auto'},
+        {
+          type: 'select',
+          selection: {
+            anchor: newFocus,
+            focus: newFocus,
+          },
+        },
+      ],
+    ],
+  }),
+  /**
+   * Fallback Behavior to avoid `insert.block` in case the Behaviors above all
+   * end up with a falsy guard.
+   */
+  defineBehavior({
+    on: 'insert.block',
+    actions: [() => [{type: 'noop'}]],
+  }),
+  /**
+   * If multiple blocks are inserted, then the non-text blocks are filtered out
+   * and the text blocks are merged into one block
+   */
+  defineBehavior({
+    on: 'insert.blocks',
+    guard: ({context, event}) => {
+      return event.blocks
+        .filter((block) => utils.isTextBlock(context, block))
+        .reduce((targetBlock, incomingBlock) => {
+          return utils.mergeTextBlocks({
+            context,
+            targetBlock,
+            incomingBlock,
+          })
+        })
+    },
+    actions: [
+      // `insert.block` is raised so the Behavior above can handle the
+      // insertion
+      (_, block) => [raise({type: 'insert.block', block, placement: 'auto'})],
+    ],
+  }),
+  /**
+   * Block objects do not fit in a one-line editor
+   */
+  defineBehavior({
+    on: 'insert.block object',
+    actions: [() => [{type: 'noop'}]],
+  }),
+  /**
+   * `insert.text block` is raised as an `insert.block` so it can be handled
+   * by the Behaviors above.
+   */
+  defineBehavior({
+    on: 'insert.text block',
+    actions: [
+      ({context, event}) => [
+        raise({
+          type: 'insert.block',
+          block: {
+            _key: context.keyGenerator(),
+            _type: context.schema.block.name,
+            children: event.textBlock?.children ?? [],
+          },
+          placement: event.placement,
+        }),
+      ],
+    ],
+  }),
+]
+
+/**
+ * @beta
+ * Restrict the editor to one line. The plugin takes care of blocking
+ * `insert.break` events and smart handling of other `insert.*` events.
+ *
+ * Place it with as high priority as possible to make sure other plugins don't
+ * overwrite `insert.*` events before this plugin gets a chance to do so.
+ */
+export function OneLinePlugin() {
+  return <BehaviorPlugin behaviors={oneLineBehaviors} />
+}

package/src/selectors/index.ts

@@ -12,6 +12,8 @@ export {getActiveStyle} from './selector.get-active-style'
 export {getSelectedSlice} from './selector.get-selected-slice'
 export {getSelectedSpans} from './selector.get-selected-spans'
 export {getSelection} from './selector.get-selection'
+export {getSelectionEndPoint} from './selector.get-selection-end-point'
+export {getSelectionStartPoint} from './selector.get-selection-start-point'
 export {getSelectionText} from './selector.get-selection-text'
 export {getBlockTextBefore} from './selector.get-text-before'
 export {getValue} from './selector.get-value'
@@ -21,6 +23,7 @@ export {isActiveListItem} from './selector.is-active-list-item'
 export {isActiveStyle} from './selector.is-active-style'
 export {isAtTheEndOfBlock} from './selector.is-at-the-end-of-block'
 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 {isSelectionCollapsed} from './selector.is-selection-collapsed'

package/src/selectors/selector.get-selection-end-point.ts

@@ -0,0 +1,17 @@
+import type {EditorSelector} from '../editor/editor-selector'
+import type {EditorSelectionPoint} from '../utils'
+
+/**
+ * @public
+ */
+export const getSelectionEndPoint: EditorSelector<
+  EditorSelectionPoint | undefined
+> = ({context}) => {
+  if (!context.selection) {
+    return undefined
+  }
+
+  return context.selection.backward
+    ? context.selection.anchor
+    : context.selection.focus
+}

package/src/selectors/selector.get-selection-start-point.ts

@@ -0,0 +1,17 @@
+import type {EditorSelector} from '../editor/editor-selector'
+import type {EditorSelectionPoint} from '../utils'
+
+/**
+ * @public
+ */
+export const getSelectionStartPoint: EditorSelector<
+  EditorSelectionPoint | undefined
+> = ({context}) => {
+  if (!context.selection) {
+    return undefined
+  }
+
+  return context.selection.backward
+    ? context.selection.focus
+    : context.selection.anchor
+}

package/src/selectors/selector.is-overlapping-selection.ts

@@ -0,0 +1,46 @@
+import type {EditorSelection} from '../types/editor'
+import type {EditorSelector} from './../editor/editor-selector'
+import {getSelectionEndPoint} from './selector.get-selection-end-point'
+import {getSelectionStartPoint} from './selector.get-selection-start-point'
+import {isPointAfterSelection} from './selector.is-point-after-selection'
+import {isPointBeforeSelection} from './selector.is-point-before-selection'
+
+/**
+ * @public
+ */
+export function isOverlappingSelection(
+  selection: EditorSelection,
+): EditorSelector<boolean> {
+  return ({context}) => {
+    if (!selection || !context.selection) {
+      return false
+    }
+
+    const selectionStartPoint = getSelectionStartPoint({
+      context: {
+        ...context,
+        selection,
+      },
+    })
+    const selectionEndPoint = getSelectionEndPoint({
+      context: {
+        ...context,
+        selection,
+      },
+    })
+
+    if (!selectionStartPoint || !selectionEndPoint) {
+      return false
+    }
+
+    if (!isPointAfterSelection(selectionStartPoint)({context})) {
+      return false
+    }
+
+    if (!isPointBeforeSelection(selectionEndPoint)({context})) {
+      return false
+    }
+
+    return true
+  }
+}

package/src/utils/index.ts

@@ -10,5 +10,9 @@ export {getTextBlockText} from './util.get-text-block-text'
 export {isEmptyTextBlock} from './util.is-empty-text-block'
 export {isEqualSelectionPoints} from './util.is-equal-selection-points'
 export {isKeyedSegment} from './util.is-keyed-segment'
+export {isSpan} from './util.is-span'
+export {isTextBlock} from './util.is-text-block'
+export {mergeTextBlocks} from './util.merge-text-blocks'
 export {reverseSelection} from './util.reverse-selection'
 export {sliceBlocks} from './util.slice-blocks'
+export {splitTextBlock} from './util.split-text-block'

package/src/utils/util.is-span.ts

@@ -0,0 +1,12 @@
+import type {PortableTextChild, PortableTextSpan} from '@sanity/types'
+import type {EditorContext} from '../selectors'
+
+/**
+ * @public
+ */
+export function isSpan(
+  context: Pick<EditorContext, 'schema'>,
+  child: PortableTextChild,
+): child is PortableTextSpan {
+  return child._type === context.schema.span.name
+}

package/src/utils/util.is-text-block.ts

@@ -0,0 +1,12 @@
+import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
+import type {EditorContext} from '../selectors'
+
+/**
+ * @public
+ */
+export function isTextBlock(
+  context: Pick<EditorContext, 'schema'>,
+  block: PortableTextBlock,
+): block is PortableTextTextBlock {
+  return block._type === context.schema.block.name
+}