@portabletext/editor 1.27.0 → 1.30.0

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

@@ -1,3 +1,4 @@
+export type {EditorSchema} from '../editor/define-schema'
 export type {EditorSelector} from '../editor/editor-selector'
 export type {EditorContext, EditorSnapshot} from '../editor/editor-snapshot'
 export type {
@@ -5,20 +6,24 @@ export type {
   EditorSelectionPoint,
   PortableTextMemberSchemaTypes,
 } from '../types/editor'
-
-export type {EditorSchema} from '../editor/define-schema'
+export {getActiveAnnotations} from './selector.get-active-annotations'
 export {getActiveListItem} from './selector.get-active-list-item'
 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'
 export {isActiveAnnotation} from './selector.is-active-annotation'
 export {isActiveDecorator} from './selector.is-active-decorator'
 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-active-annotations.test.ts

@@ -0,0 +1,122 @@
+import type {PortableTextBlock} from '@sanity/types'
+import {expect, test} from 'vitest'
+import type {EditorSchema} from '../editor/define-schema'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
+import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
+import type {EditorSelection} from '../utils'
+import {getActiveAnnotations} from './selector.get-active-annotations'
+
+function snapshot(
+  value: Array<PortableTextBlock>,
+  selection: EditorSelection,
+): EditorSnapshot {
+  return {
+    context: {
+      converters: [],
+      schema: {} as EditorSchema,
+      keyGenerator: createTestKeyGenerator(),
+      activeDecorators: [],
+      value,
+      selection,
+    },
+  }
+}
+
+const link = {
+  _key: 'k4',
+  _type: 'link',
+  href: 'https://example.com',
+}
+
+const comment = {
+  _key: 'k5',
+  _type: 'comment',
+  comment: 'Consider rewriting this',
+}
+
+const block = {
+  _type: 'block',
+  _key: 'k0',
+  children: [
+    {
+      _key: 'k1',
+      _type: 'span',
+      text: 'foo',
+      marks: ['strong'],
+    },
+    {
+      _type: 'span',
+      _key: 'k2',
+      text: 'bar',
+      marks: [link._key, comment._key, 'strong'],
+    },
+    {
+      _key: 'k3',
+      _type: 'span',
+      text: 'baz',
+      marks: [comment._key, 'strong'],
+    },
+  ],
+  markDefs: [link, comment],
+}
+
+test(getActiveAnnotations.name, () => {
+  expect(getActiveAnnotations(snapshot([], null))).toEqual([])
+  expect(getActiveAnnotations(snapshot([block], null))).toEqual([])
+  expect(
+    getActiveAnnotations(
+      snapshot([block], {
+        anchor: {
+          path: [{_key: 'k0'}, 'children', {_key: 'k1'}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: 'k0'}, 'children', {_key: 'k1'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toEqual([])
+  expect(
+    getActiveAnnotations(
+      snapshot([block], {
+        anchor: {
+          path: [{_key: 'k0'}, 'children', {_key: 'k1'}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: 'k0'}, 'children', {_key: 'k2'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toEqual([link, comment])
+  expect(
+    getActiveAnnotations(
+      snapshot([block], {
+        anchor: {
+          path: [{_key: 'k0'}, 'children', {_key: 'k1'}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: 'k0'}, 'children', {_key: 'k3'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toEqual([link, comment])
+  expect(
+    getActiveAnnotations(
+      snapshot([block], {
+        anchor: {
+          path: [{_key: 'k0'}, 'children', {_key: 'k3'}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: 'k0'}, 'children', {_key: 'k3'}],
+          offset: 3,
+        },
+      }),
+    ),
+  ).toEqual([comment])
+})

package/src/selectors/selector.get-active-annotations.ts

@@ -0,0 +1,30 @@
+import {isPortableTextTextBlock, type PortableTextObject} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {getSelectedSpans} from './selector.get-selected-spans'
+import {getSelectedBlocks} from './selectors'
+
+/**
+ * @public
+ */
+export const getActiveAnnotations: EditorSelector<Array<PortableTextObject>> = (
+  snapshot,
+) => {
+  if (!snapshot.context.selection) {
+    return []
+  }
+
+  const selectedBlocks = getSelectedBlocks(snapshot)
+  const selectedSpans = getSelectedSpans(snapshot)
+
+  if (selectedSpans.length === 0) {
+    return []
+  }
+
+  const selectionMarkDefs = selectedBlocks.flatMap((block) =>
+    isPortableTextTextBlock(block.node) ? (block.node.markDefs ?? []) : [],
+  )
+
+  return selectionMarkDefs.filter((markDef) =>
+    selectedSpans.some((span) => span.node.marks?.includes(markDef._key)),
+  )
+}

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.get-selection.ts

@@ -0,0 +1,8 @@
+import type {EditorSelection, EditorSelector} from './_exports'
+
+/**
+ * @public
+ */
+export const getSelection: EditorSelector<EditorSelection> = ({context}) => {
+  return context.selection
+}

package/src/selectors/selector.get-value.ts

@@ -0,0 +1,11 @@
+import type {PortableTextBlock} from '@sanity/types'
+import type {EditorSelector} from './_exports'
+
+/**
+ * @public
+ */
+export const getValue: EditorSelector<Array<PortableTextBlock>> = ({
+  context,
+}) => {
+  return context.value
+}

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
+}

package/src/utils/util.merge-text-blocks.ts

@@ -0,0 +1,36 @@
+import type {PortableTextTextBlock} from '@sanity/types'
+import {parseBlock} from '../internal-utils/parse-blocks'
+import type {EditorContext} from '../selectors'
+import {isTextBlock} from './util.is-text-block'
+
+/**
+ * @beta
+ */
+export function mergeTextBlocks({
+  context,
+  targetBlock,
+  incomingBlock,
+}: {
+  context: Pick<EditorContext, 'keyGenerator' | 'schema'>
+  targetBlock: PortableTextTextBlock
+  incomingBlock: PortableTextTextBlock
+}) {
+  const parsedIncomingBlock = parseBlock({
+    context,
+    block: incomingBlock,
+    options: {refreshKeys: true},
+  })
+
+  if (!parsedIncomingBlock || !isTextBlock(context, parsedIncomingBlock)) {
+    return targetBlock
+  }
+
+  return {
+    ...targetBlock,
+    children: [...targetBlock.children, ...parsedIncomingBlock.children],
+    markDefs: [
+      ...(targetBlock.markDefs ?? []),
+      ...(parsedIncomingBlock.markDefs ?? []),
+    ],
+  }
+}

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

@@ -0,0 +1,55 @@
+import type {PortableTextTextBlock} from '@sanity/types'
+import {isTextBlock, sliceBlocks, type EditorSelectionPoint} from '.'
+import type {EditorContext} from '../selectors'
+import {isSpan} from './util.is-span'
+
+/**
+ * @beta
+ */
+export function splitTextBlock({
+  context,
+  block,
+  point,
+}: {
+  context: Pick<EditorContext, 'schema'>
+  block: PortableTextTextBlock
+  point: EditorSelectionPoint
+}): {before: PortableTextTextBlock; after: PortableTextTextBlock} | undefined {
+  const firstChild = block.children.at(0)
+  const lastChild = block.children.at(block.children.length - 1)
+
+  if (!firstChild || !lastChild) {
+    return undefined
+  }
+
+  const before = sliceBlocks({
+    blocks: [block],
+    selection: {
+      anchor: {
+        path: [{_key: block._key}, 'children', {_key: firstChild._key}],
+        offset: 0,
+      },
+      focus: point,
+    },
+  }).at(0)
+  const after = sliceBlocks({
+    blocks: [block],
+    selection: {
+      anchor: point,
+      focus: {
+        path: [{_key: block._key}, 'children', {_key: lastChild._key}],
+        offset: isSpan(context, lastChild) ? lastChild.text.length : 0,
+      },
+    },
+  }).at(0)
+
+  if (!before || !after) {
+    return undefined
+  }
+
+  if (!isTextBlock(context, before) || !isTextBlock(context, after)) {
+    return undefined
+  }
+
+  return {before, after}
+}

package/src/editor/nodes/DefaultAnnotation.tsx

@@ -1,20 +0,0 @@
-import type {PortableTextObject} from '@sanity/types'
-import {useCallback, type ReactNode} from 'react'
-
-type Props = {
-  annotation: PortableTextObject
-  children: ReactNode
-}
-export function DefaultAnnotation(props: Props) {
-  const handleClick = useCallback(
-    () => alert(JSON.stringify(props.annotation)),
-    [props.annotation],
-  )
-  return (
-    <span style={{color: 'blue'}} onClick={handleClick}>
-      {props.children}
-    </span>
-  )
-}
-
-DefaultAnnotation.displayName = 'DefaultAnnotation'

package/src/editor/nodes/DefaultObject.tsx

@@ -1,18 +0,0 @@
-import type {PortableTextBlock, PortableTextChild} from '@sanity/types'
-import type {JSX} from 'react'
-
-type Props = {
-  value: PortableTextBlock | PortableTextChild
-}
-
-const DefaultObject = (props: Props): JSX.Element => {
-  return (
-    <div style={{userSelect: 'none'}}>
-      [{props.value._type}: {props.value._key}]
-    </div>
-  )
-}
-
-DefaultObject.displayName = 'DefaultObject'
-
-export default DefaultObject