@portabletext/editor 1.27.0 → 1.28.0

package/README.md

@@ -36,13 +36,12 @@ yarn add @portabletext/editor
 
 ```
 
-Next, in your app or the component you're building, import `EditorProvider`, `EditorEventListener`, `PortableTextEditable`, `defineSchema`, and the types in the code below.
+Next, in your app or the component you're building, import `EditorProvider`, `PortableTextEditable`, `defineSchema`, `EventListenerPlugin`, and the types in the code below.
 
 ```tsx
 // App.tsx
 import {
   defineSchema,
-  EditorEventListener,
   EditorProvider,
   PortableTextEditable,
 } from '@portabletext/editor'
@@ -51,6 +50,7 @@ import type {
   RenderDecoratorFunction,
   RenderStyleFunction,
 } from '@portabletext/editor'
+import {EventListenerPlugin} from '@portabletext/editor/plugins'
 ```
 
 ### Define the Schema
@@ -104,7 +104,6 @@ Add `useState` from React, then scaffold out a basic application component. For
 // app.tsx
 import {
   defineSchema,
-  EditorEventListener,
   EditorProvider,
   PortableTextEditable,
 } from '@portabletext/editor'
@@ -113,6 +112,7 @@ import type {
   RenderDecoratorFunction,
   RenderStyleFunction,
 } from '@portabletext/editor'
+import {EventListenerPlugin} from '@portabletext/editor/plugins'
 import {useState} from 'react'
 
 const schemaDefinition = defineSchema({
@@ -133,7 +133,7 @@ function App() {
           initialValue: value,
         }}
       >
-        <EditorEventListener
+        <EventListenerPlugin
           on={(event) => {
             if (event.type === 'mutation') {
               setValue(event.value)
@@ -311,7 +311,7 @@ function App() {
           initialValue: value,
         }}
       >
-        <EditorEventListener
+        <EventListenerPlugin
           on={(event) => {
             if (event.type === 'mutation') {
               setValue(event.value)

package/lib/_chunks-cjs/plugin.event-listener.cjs

@@ -4848,51 +4848,54 @@ const blockSetBehaviorActionImplementation = ({
     return;
   const anchorBlockPath = editor.selection.anchor.path.slice(0, 1), focusBlockPath = editor.selection.focus.path.slice(0, 1), focusBlock = slate.Node.descendant(editor, focusBlockPath);
   if (editor.isTextBlock(focusBlock) && anchorBlockPath[0] === focusBlockPath[0]) {
-    slate.Editor.withoutNormalizing(editor, () => {
-      if (!editor.selection)
-        return;
-      slate.Transforms.splitNodes(editor, {
-        at: editor.selection
-      });
-      const [nextNode, nextNodePath] = slate.Editor.node(editor, slate.Path.next(focusBlockPath), {
-        depth: 1
-      });
-      if (slate.Transforms.setSelection(editor, {
-        anchor: {
-          path: [...nextNodePath, 0],
-          offset: 0
-        },
-        focus: {
-          path: [...nextNodePath, 0],
-          offset: 0
-        }
-      }), editor.isTextBlock(nextNode) && nextNode.markDefs && nextNode.markDefs.length > 0) {
-        const newMarkDefKeys = /* @__PURE__ */ new Map(), prevNodeSpans = Array.from(slate.Node.children(editor, focusBlockPath)).map((entry) => entry[0]).filter((node) => editor.isTextSpan(node)), children = slate.Node.children(editor, nextNodePath);
-        for (const [child, childPath] of children) {
-          if (!editor.isTextSpan(child))
-            continue;
-          const marks = child.marks ?? [];
-          for (const mark of marks)
-            schema2.decorators.some((decorator) => decorator.value === mark) || prevNodeSpans.some((prevNodeSpan) => prevNodeSpan.marks?.includes(mark)) && !newMarkDefKeys.has(mark) && newMarkDefKeys.set(mark, keyGenerator());
-          const newMarks = marks.map((mark) => newMarkDefKeys.get(mark) ?? mark);
-          isEqual__default.default(marks, newMarks) || slate.Transforms.setNodes(editor, {
-            marks: newMarks
-          }, {
-            at: childPath
-          });
-        }
-        const newMarkDefs = nextNode.markDefs.map((markDef) => ({
-          ...markDef,
-          _key: newMarkDefKeys.get(markDef._key) ?? markDef._key
-        }));
-        isEqual__default.default(nextNode.markDefs, newMarkDefs) || slate.Transforms.setNodes(editor, {
-          markDefs: newMarkDefs
+    slate.Transforms.splitNodes(editor, {
+      at: editor.selection
+    });
+    const [nextBlock, nextBlockPath] = slate.Editor.node(editor, slate.Path.next(focusBlockPath), {
+      depth: 1
+    }), nextChild = slate.Node.child(nextBlock, 0);
+    if (!editor.isTextSpan(nextChild) && slate.Transforms.insertNodes(editor, {
+      _key: context.keyGenerator(),
+      _type: "span",
+      text: "",
+      marks: []
+    }, {
+      at: [nextBlockPath[0], 0]
+    }), slate.Transforms.setSelection(editor, {
+      anchor: {
+        path: [...nextBlockPath, 0],
+        offset: 0
+      },
+      focus: {
+        path: [...nextBlockPath, 0],
+        offset: 0
+      }
+    }), editor.isTextBlock(nextBlock) && nextBlock.markDefs && nextBlock.markDefs.length > 0) {
+      const newMarkDefKeys = /* @__PURE__ */ new Map(), prevNodeSpans = Array.from(slate.Node.children(editor, focusBlockPath)).map((entry) => entry[0]).filter((node) => editor.isTextSpan(node)), children = slate.Node.children(editor, nextBlockPath);
+      for (const [child, childPath] of children) {
+        if (!editor.isTextSpan(child))
+          continue;
+        const marks = child.marks ?? [];
+        for (const mark of marks)
+          schema2.decorators.some((decorator) => decorator.value === mark) || prevNodeSpans.some((prevNodeSpan) => prevNodeSpan.marks?.includes(mark)) && !newMarkDefKeys.has(mark) && newMarkDefKeys.set(mark, keyGenerator());
+        const newMarks = marks.map((mark) => newMarkDefKeys.get(mark) ?? mark);
+        isEqual__default.default(marks, newMarks) || slate.Transforms.setNodes(editor, {
+          marks: newMarks
         }, {
-          at: nextNodePath,
-          match: (node) => editor.isTextBlock(node)
+          at: childPath
         });
       }
-    }), editor.onChange();
+      const newMarkDefs = nextBlock.markDefs.map((markDef) => ({
+        ...markDef,
+        _key: newMarkDefKeys.get(markDef._key) ?? markDef._key
+      }));
+      isEqual__default.default(nextBlock.markDefs, newMarkDefs) || slate.Transforms.setNodes(editor, {
+        markDefs: newMarkDefs
+      }, {
+        at: nextBlockPath,
+        match: (node) => editor.isTextBlock(node)
+      });
+    }
     return;
   }
   slate.Transforms.splitNodes(editor, {
@@ -6346,30 +6349,224 @@ class PortableTextEditor extends React.Component {
       /* @__PURE__ */ jsxRuntime.jsx(EditorActorContext.Provider, { value: this.editor._internal.editorActor, children: /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, { editor: this.editor._internal.slateEditor.instance, initialValue: this.editor._internal.slateEditor.initialValue, children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorSelectionProvider, { editorActor: this.editor._internal.editorActor, children: this.props.children }) }) }) })
     ] });
   }
-  // Static API methods
+  /**
+   * @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 isActive = useEditorSelector(editor, selectors.getActiveAnnotations)
+   * ```
+   */
   static activeAnnotations = (editor) => editor && editor.editable ? editor.editable.activeAnnotations() : [];
+  /**
+   * @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 isActive = useEditorSelector(editor, selectors.isActiveAnnotation(...))
+   * ```
+   */
   static isAnnotationActive = (editor, annotationType) => editor && editor.editable ? editor.editable.isAnnotationActive(annotationType) : !1;
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'annotation.add',
+   *  annotation: {
+   *    name: '...',
+   *    value: {...},
+   *  }
+   * })
+   * ```
+   */
   static addAnnotation = (editor, type, value) => editor.editable?.addAnnotation(type, value);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'blur',
+   * })
+   * ```
+   */
   static blur = (editor) => {
     debug("Host blurred"), editor.editable?.blur();
   };
   static delete = (editor, selection, options) => editor.editable?.delete(selection, options);
   static findDOMNode = (editor, element) => editor.editable?.findDOMNode(element);
   static findByPath = (editor, path) => editor.editable?.findByPath(path) || [];
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'focus',
+   * })
+   * ```
+   */
   static focus = (editor) => {
     debug("Host requesting focus"), editor.editable?.focus();
   };
+  /**
+   * @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 focusBlock = useEditorSelector(editor, selectors.getFocusBlock)
+   * ```
+   */
   static focusBlock = (editor) => editor.editable?.focusBlock();
+  /**
+   * @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 focusChild = useEditorSelector(editor, selectors.getFocusChild)
+   * ```
+   */
   static focusChild = (editor) => editor.editable?.focusChild();
+  /**
+   * @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 selection = useEditorSelector(editor, selectors.getSelection)
+   * ```
+   */
   static getSelection = (editor) => editor.editable ? editor.editable.getSelection() : null;
+  /**
+   * @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 value = useEditorSelector(editor, selectors.getValue)
+   * ```
+   */
   static getValue = (editor) => editor.editable?.getValue();
+  /**
+   * @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 isActive = useEditorSelector(editor, selectors.isActiveStyle(...))
+   * ```
+   */
   static hasBlockStyle = (editor, blockStyle) => editor.editable?.hasBlockStyle(blockStyle);
+  /**
+   * @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 isActive = useEditorSelector(editor, selectors.isActiveListItem(...))
+   * ```
+   */
   static hasListStyle = (editor, listStyle) => editor.editable?.hasListStyle(listStyle);
+  /**
+   * @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 isSelectionCollapsed = useEditorSelector(editor, selectors.isSelectionCollapsed)
+   * ```
+   */
   static isCollapsedSelection = (editor) => editor.editable?.isCollapsedSelection();
+  /**
+   * @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 isSelectionExpanded = useEditorSelector(editor, selectors.isSelectionExpanded)
+   * ```
+   */
   static isExpandedSelection = (editor) => editor.editable?.isExpandedSelection();
+  /**
+   * @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 isActive = useEditorSelector(editor, selectors.isActiveDecorator(...))
+   * ```
+   */
   static isMarkActive = (editor, mark) => editor.editable?.isMarkActive(mark);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'insert.span',
+   *  text: '...',
+   *  annotations: [{name: '...', value: {...}}],
+   *  decorators: ['...'],
+   * })
+   * editor.send({
+   *  type: 'insert.inline object',
+   *  inlineObject: {
+   *    name: '...',
+   *    value: {...},
+   *  },
+   * })
+   * ```
+   */
   static insertChild = (editor, type, value) => (debug("Host inserting child"), editor.editable?.insertChild(type, value));
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'insert.block object',
+   *  blockObject: {
+   *    name: '...',
+   *    value: {...},
+   *  },
+   *  placement: 'auto' | 'after' | 'before',
+   * })
+   * ```
+   */
   static insertBlock = (editor, type, value) => editor.editable?.insertBlock(type, value);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'insert.break',
+   * })
+   * ```
+   */
   static insertBreak = (editor) => editor.editable?.insertBreak();
   static isVoid = (editor, element) => editor.editable?.isVoid(element);
   static isObjectPath = (_editor, path) => {
@@ -6378,12 +6575,74 @@ class PortableTextEditor extends React.Component {
     return path.length > 1 && path[1] !== "children" || isChildObjectEditPath;
   };
   static marks = (editor) => editor.editable?.marks();
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'select',
+   *  selection: {...},
+   * })
+   * ```
+   */
   static select = (editor, selection) => {
     debug("Host setting selection", selection), editor.editable?.select(selection);
   };
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'annotation.remove',
+   *  annotation: {
+   *    name: '...',
+   *  },
+   * })
+   * ```
+   */
   static removeAnnotation = (editor, type) => editor.editable?.removeAnnotation(type);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'style.toggle',
+   *  style: '...',
+   * })
+   * ```
+   */
   static toggleBlockStyle = (editor, blockStyle) => (debug("Host is toggling block style"), editor.editable?.toggleBlockStyle(blockStyle));
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'list item.toggle',
+   *  listItem: '...',
+   * })
+   * ```
+   */
   static toggleList = (editor, listStyle) => editor.editable?.toggleList(listStyle);
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'decorator.toggle',
+   *  decorator: '...',
+   * })
+   * ```
+   */
   static toggleMark = (editor, mark) => {
     debug("Host toggling mark", mark), editor.editable?.toggleMark(mark);
   };