@portabletext/editor 2.21.2 → 3.0.0

package/src/editor-event-listener.tsx

@@ -1,28 +0,0 @@
-import {useEffect} from 'react'
-import type {EditorEmittedEvent} from './editor/relay-machine'
-import {useEditor} from './editor/use-editor'
-
-/**
- * @public
- * @deprecated
- * This component has been renamed. Use `EventListenerPlugin` instead.
- *
- * ```
- * import {EventListenerPlugin} from '@portabletext/editor/plugins'
- * ```
- */
-export function EditorEventListener(props: {
-  on: (event: EditorEmittedEvent) => void
-}) {
-  const editor = useEditor()
-
-  useEffect(() => {
-    const subscription = editor.on('*', props.on)
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [editor, props.on])
-
-  return null
-}

package/src/plugins/plugin.decorator-shortcut.ts

@@ -1,238 +0,0 @@
-import {useActorRef} from '@xstate/react'
-import {isEqual} from 'lodash'
-import {
-  assign,
-  fromCallback,
-  setup,
-  type AnyEventObject,
-  type CallbackLogicFunction,
-} from 'xstate'
-import {createDecoratorPairBehavior} from '../behaviors/behavior.decorator-pair'
-import {effect, execute, forward} from '../behaviors/behavior.types.action'
-import {defineBehavior} from '../behaviors/behavior.types.behavior'
-import type {Editor} from '../editor'
-import type {EditorSchema} from '../editor/editor-schema'
-import {useEditor} from '../editor/use-editor'
-import type {BlockOffset} from '../types/block-offset'
-import {spanSelectionPointToBlockOffset} from '../utils/util.block-offset'
-
-/**
- * @beta
- * @deprecated Install the plugin from `@portabletext/plugin-character-pair-decorator`
- */
-export function DecoratorShortcutPlugin(config: {
-  decorator: ({schema}: {schema: EditorSchema}) => string | undefined
-  pair: {char: string; amount: number}
-}) {
-  const editor = useEditor()
-
-  useActorRef(decoratorPairMachine, {
-    input: {
-      editor,
-      decorator: config.decorator,
-      pair: config.pair,
-    },
-  })
-
-  return null
-}
-
-type MarkdownEmphasisEvent =
-  | {
-      type: 'emphasis.add'
-      blockOffset: BlockOffset
-    }
-  | {
-      type: 'selection'
-      blockOffsets?: {
-        anchor: BlockOffset
-        focus: BlockOffset
-      }
-    }
-  | {
-      type: 'delete.backward'
-    }
-
-const emphasisListener: CallbackLogicFunction<
-  AnyEventObject,
-  MarkdownEmphasisEvent,
-  {
-    decorator: ({schema}: {schema: EditorSchema}) => string | undefined
-    editor: Editor
-    pair: {char: string; amount: number}
-  }
-> = ({sendBack, input}) => {
-  const unregister = input.editor.registerBehavior({
-    behavior: createDecoratorPairBehavior({
-      decorator: input.decorator,
-      pair: input.pair,
-      onDecorate: (offset) => {
-        sendBack({type: 'emphasis.add', blockOffset: offset})
-      },
-    }),
-  })
-
-  return unregister
-}
-
-const selectionListenerCallback: CallbackLogicFunction<
-  AnyEventObject,
-  MarkdownEmphasisEvent,
-  {editor: Editor}
-> = ({sendBack, input}) => {
-  const unregister = input.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: 'select',
-      guard: ({snapshot, event}) => {
-        if (!event.at) {
-          return {blockOffsets: undefined}
-        }
-
-        const anchor = spanSelectionPointToBlockOffset({
-          context: snapshot.context,
-          selectionPoint: event.at.anchor,
-        })
-        const focus = spanSelectionPointToBlockOffset({
-          context: snapshot.context,
-          selectionPoint: event.at.focus,
-        })
-
-        if (!anchor || !focus) {
-          return {blockOffsets: undefined}
-        }
-
-        return {
-          blockOffsets: {
-            anchor,
-            focus,
-          },
-        }
-      },
-      actions: [
-        ({event}, {blockOffsets}) => [
-          {
-            type: 'effect',
-            effect: () => {
-              sendBack({type: 'selection', blockOffsets})
-            },
-          },
-          forward(event),
-        ],
-      ],
-    }),
-  })
-
-  return unregister
-}
-
-const deleteBackwardListenerCallback: CallbackLogicFunction<
-  AnyEventObject,
-  MarkdownEmphasisEvent,
-  {editor: Editor}
-> = ({sendBack, input}) => {
-  const unregister = input.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: 'delete.backward',
-      actions: [
-        () => [
-          execute({
-            type: 'history.undo',
-          }),
-          effect(() => {
-            sendBack({type: 'delete.backward'})
-          }),
-        ],
-      ],
-    }),
-  })
-
-  return unregister
-}
-
-const decoratorPairMachine = setup({
-  types: {
-    context: {} as {
-      decorator: ({schema}: {schema: EditorSchema}) => string | undefined
-      editor: Editor
-      offsetAfterEmphasis?: BlockOffset
-      pair: {char: string; amount: number}
-    },
-    input: {} as {
-      decorator: ({schema}: {schema: EditorSchema}) => string | undefined
-      editor: Editor
-      pair: {char: string; amount: number}
-    },
-    events: {} as MarkdownEmphasisEvent,
-  },
-  actors: {
-    'emphasis listener': fromCallback(emphasisListener),
-    'delete.backward listener': fromCallback(deleteBackwardListenerCallback),
-    'selection listener': fromCallback(selectionListenerCallback),
-  },
-}).createMachine({
-  id: 'decorator pair',
-  context: ({input}) => ({
-    decorator: input.decorator,
-    editor: input.editor,
-    pair: input.pair,
-  }),
-  initial: 'idle',
-  states: {
-    'idle': {
-      invoke: [
-        {
-          src: 'emphasis listener',
-          input: ({context}) => ({
-            decorator: context.decorator,
-            editor: context.editor,
-            pair: context.pair,
-          }),
-        },
-      ],
-      on: {
-        'emphasis.add': {
-          target: 'emphasis added',
-          actions: assign({
-            offsetAfterEmphasis: ({event}) => event.blockOffset,
-          }),
-        },
-      },
-    },
-    'emphasis added': {
-      exit: [
-        assign({
-          offsetAfterEmphasis: undefined,
-        }),
-      ],
-      invoke: [
-        {
-          src: 'selection listener',
-          input: ({context}) => ({editor: context.editor}),
-        },
-        {
-          src: 'delete.backward listener',
-          input: ({context}) => ({editor: context.editor}),
-        },
-      ],
-      on: {
-        'selection': {
-          target: 'idle',
-          guard: ({context, event}) => {
-            const selectionChanged = !isEqual(
-              {
-                anchor: context.offsetAfterEmphasis,
-                focus: context.offsetAfterEmphasis,
-              },
-              event.blockOffsets,
-            )
-
-            return selectionChanged
-          },
-        },
-        'delete.backward': {
-          target: 'idle',
-        },
-      },
-    },
-  },
-})

package/src/plugins/plugin.markdown.test.tsx

@@ -1,42 +0,0 @@
-import {defineSchema} from '@portabletext/schema'
-import {getTersePt} from '@portabletext/test'
-import {describe, expect, test, vi} from 'vitest'
-import {userEvent} from 'vitest/browser'
-import {getTextMarks} from '../internal-utils/text-marks'
-import {createTestEditor} from '../test/vitest'
-import {MarkdownPlugin} from './plugin.markdown'
-
-describe(MarkdownPlugin.name, () => {
-  test('Scenario: Undoing bold shortcut', async () => {
-    const {editor, locator} = await createTestEditor({
-      children: (
-        <MarkdownPlugin
-          config={{
-            boldDecorator: () => 'strong',
-          }}
-        />
-      ),
-      schemaDefinition: defineSchema({decorators: [{name: 'strong'}]}),
-    })
-
-    await userEvent.type(locator, '**Hello world!**')
-
-    await vi.waitFor(() => {
-      expect(getTersePt(editor.getSnapshot().context)).toEqual(['Hello world!'])
-    })
-
-    await vi.waitFor(() => {
-      expect(
-        getTextMarks(editor.getSnapshot().context, 'Hello world!'),
-      ).toEqual(['strong'])
-    })
-
-    editor.send({type: 'history.undo'})
-
-    await vi.waitFor(() => {
-      expect(getTersePt(editor.getSnapshot().context)).toEqual([
-        '**Hello world!**',
-      ])
-    })
-  })
-})

package/src/plugins/plugin.markdown.tsx

@@ -1,131 +0,0 @@
-import {useEffect} from 'react'
-import {
-  createMarkdownBehaviors,
-  type MarkdownBehaviorsConfig,
-} from '../behaviors/behavior.markdown'
-import type {EditorSchema} from '../editor/editor-schema'
-import {useEditor} from '../editor/use-editor'
-import {DecoratorShortcutPlugin} from './plugin.decorator-shortcut'
-
-/**
- * @beta
- */
-export type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
-  boldDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
-  codeDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
-  italicDecorator?: ({schema}: {schema: EditorSchema}) => string | undefined
-  strikeThroughDecorator?: ({
-    schema,
-  }: {
-    schema: EditorSchema
-  }) => string | undefined
-}
-
-/**
- * @beta
- * Add markdown behaviors for common markdown actions such as converting ### to headings, --- to HRs, and more.
- *
- * @example
- * Configure the bundled markdown behaviors
- * ```ts
- * import {EditorProvider} from '@portabletext/editor'
- * import {MarkdownPlugin} from '@portabletext/editor/plugins'
- *
- * function App() {
- *   return (
- *    <EditorProvider>
- *      <MarkdownPlugin
- *        config={{
- *          boldDecorator: ({schema}) =>
- *            schema.decorators.find((decorator) => decorator.value === 'strong')?.value,
- *          codeDecorator: ({schema}) =>
- *            schema.decorators.find((decorator) => decorator.value === 'code')?.value,
- *          italicDecorator: ({schema}) =>
- *            schema.decorators.find((decorator) => decorator.value === 'em')?.value,
- *          strikeThroughDecorator: ({schema}) =>
- *            schema.decorators.find((decorator) => decorator.value === 'strike-through')?.value,
- *          horizontalRuleObject: ({schema}) => {
- *            const name = schema.blockObjects.find(
- *              (object) => object.name === 'break',
- *            )?.name
- *            return name ? {name} : undefined
- *          },
- *          defaultStyle: ({schema}) => schema.styles[0].value,
- *          headingStyle: ({schema, level}) =>
- *            schema.styles.find((style) => style.value === `h${level}`)
- *              ?.value,
- *          blockquoteStyle: ({schema}) =>
- *            schema.styles.find((style) => style.value === 'blockquote')
- *              ?.value,
- *          unorderedListStyle: ({schema}) =>
- *            schema.lists.find((list) => list.value === 'bullet')?.value,
- *          orderedListStyle: ({schema}) =>
- *            schema.lists.find((list) => list.value === 'number')?.value,
- *        }}
- *      />
- *      {...}
- *    </EditorProvider>
- *  )
- * }
- * ```
- *
- * @deprecated Install the plugin from `@portabletext/plugin-markdown-shortcuts`
- */
-export function MarkdownPlugin(props: {config: MarkdownPluginConfig}) {
-  const editor = useEditor()
-
-  useEffect(() => {
-    const behaviors = createMarkdownBehaviors(props.config)
-
-    const unregisterBehaviors = behaviors.map((behavior) =>
-      editor.registerBehavior({behavior}),
-    )
-
-    return () => {
-      for (const unregisterBehavior of unregisterBehaviors) {
-        unregisterBehavior()
-      }
-    }
-  }, [editor, props.config])
-
-  return (
-    <>
-      {props.config.boldDecorator ? (
-        <>
-          <DecoratorShortcutPlugin
-            decorator={props.config.boldDecorator}
-            pair={{char: '*', amount: 2}}
-          />
-          <DecoratorShortcutPlugin
-            decorator={props.config.boldDecorator}
-            pair={{char: '_', amount: 2}}
-          />
-        </>
-      ) : null}
-      {props.config.codeDecorator ? (
-        <DecoratorShortcutPlugin
-          decorator={props.config.codeDecorator}
-          pair={{char: '`', amount: 1}}
-        />
-      ) : null}
-      {props.config.italicDecorator ? (
-        <>
-          <DecoratorShortcutPlugin
-            decorator={props.config.italicDecorator}
-            pair={{char: '*', amount: 1}}
-          />
-          <DecoratorShortcutPlugin
-            decorator={props.config.italicDecorator}
-            pair={{char: '_', amount: 1}}
-          />
-        </>
-      ) : null}
-      {props.config.strikeThroughDecorator ? (
-        <DecoratorShortcutPlugin
-          decorator={props.config.strikeThroughDecorator}
-          pair={{char: '~', amount: 2}}
-        />
-      ) : null}
-    </>
-  )
-}

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

@@ -1,123 +0,0 @@
-import {isTextBlock} from '@portabletext/schema'
-import {execute, raise} from '../behaviors/behavior.types.action'
-import {defineBehavior} from '../behaviors/behavior.types.behavior'
-import {getFocusTextBlock} from '../selectors/selector.get-focus-text-block'
-import {isSelectionExpanded} from '../selectors/selector.is-selection-expanded'
-import {mergeTextBlocks} from '../utils/util.merge-text-blocks'
-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: ({snapshot}) =>
-      snapshot.context.selection && isSelectionExpanded(snapshot)
-        ? {selection: snapshot.context.selection}
-        : false,
-    actions: [(_, {selection}) => [execute({type: 'delete', at: selection})]],
-  }),
-  /**
-   * All other cases of `insert.break` should be aborted.
-   */
-  defineBehavior({
-    on: 'insert.break',
-    actions: [],
-  }),
-  /**
-   * `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: [],
-  }),
-  /**
-   * 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: ({snapshot, event}) => {
-      const focusTextBlock = getFocusTextBlock(snapshot)
-
-      if (!focusTextBlock || !isTextBlock(snapshot.context, event.block)) {
-        return false
-      }
-
-      return true
-    },
-    actions: [
-      ({event}) => [
-        execute({
-          type: 'insert.block',
-          block: event.block,
-          placement: 'auto',
-          select: 'end',
-        }),
-      ],
-    ],
-  }),
-  /**
-   * Fallback Behavior to avoid `insert.block` in case the Behaviors above all
-   * end up with a falsy guard.
-   */
-  defineBehavior({
-    on: 'insert.block',
-    actions: [],
-  }),
-  /**
-   * 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: ({snapshot, event}) => {
-      const textBlocks = event.blocks.filter((block) =>
-        isTextBlock(snapshot.context, block),
-      )
-
-      if (textBlocks.length === 0) {
-        return false
-      }
-
-      return textBlocks.reduce((targetBlock, incomingBlock) => {
-        return mergeTextBlocks({
-          context: snapshot.context,
-          targetBlock,
-          incomingBlock,
-        })
-      })
-    },
-    actions: [
-      // `insert.block` is raised so the Behavior above can handle the
-      // insertion
-      (_, block) => [raise({type: 'insert.block', block, placement: 'auto'})],
-    ],
-  }),
-  /**
-   * Fallback Behavior to avoid `insert.blocks` in case the Behavior above
-   * ends up with a falsy guard.
-   */
-  defineBehavior({
-    on: 'insert.blocks',
-    actions: [],
-  }),
-]
-
-/**
- * @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.
- *
- * @deprecated Install the plugin from `@portabletext/plugin-one-line`
- */
-export function OneLinePlugin() {
-  return <BehaviorPlugin behaviors={oneLineBehaviors} />
-}