@portabletext/editor 2.8.4 → 2.9.1

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react12 from "react";
+import * as react22 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react12.JSX.Element;
+}): react22.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react12.JSX.Element;
+declare function OneLinePlugin(): react22.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-import * as react22 from "react";
+import * as react21 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react22.JSX.Element;
+}): react21.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react22.JSX.Element;
+declare function OneLinePlugin(): react21.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.8.4",
+  "version": "2.9.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -81,8 +81,8 @@
     "xstate": "^5.21.0",
     "@portabletext/block-tools": "^3.5.5",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
-    "@portabletext/schema": "^1.2.0",
-    "@portabletext/patches": "^1.1.8"
+    "@portabletext/patches": "^1.1.8",
+    "@portabletext/schema": "^1.2.0"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
@@ -111,8 +111,8 @@
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
     "@portabletext/sanity-bridge": "1.1.9",
-    "racejar": "1.2.15",
-    "@portabletext/test": "^0.0.0"
+    "@portabletext/test": "^0.0.0",
+    "racejar": "1.2.15"
   },
   "peerDependencies": {
     "@portabletext/sanity-bridge": "^1.1.9",

package/src/behaviors/behavior.abstract.insert.ts

@@ -1,37 +1,134 @@
 import {getFocusTextBlock} from '../selectors'
-import {isEmptyTextBlock} from '../utils'
+import {
+  getBlockEndPoint,
+  getBlockStartPoint,
+  isEmptyTextBlock,
+  isEqualSelectionPoints,
+} from '../utils'
+import {sliceTextBlock} from '../utils/util.slice-text-block'
 import {execute, raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const abstractInsertBehaviors = [
   defineBehavior({
     on: 'insert.blocks',
-    guard: ({event}) => event.placement === 'before',
+    guard: ({event}) => {
+      const onlyBlock =
+        event.blocks.length === 1 ? event.blocks.at(0) : undefined
+
+      if (!onlyBlock) {
+        return false
+      }
+
+      return {onlyBlock}
+    },
     actions: [
-      ({event}) =>
-        event.blocks.map((block, index) =>
+      ({event}, {onlyBlock}) => [
+        raise({
+          type: 'insert.block',
+          block: onlyBlock,
+          placement: event.placement,
+          select: event.select ?? 'end',
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'insert.blocks',
+    guard: ({snapshot, event}) => {
+      if (event.placement !== 'before') {
+        return false
+      }
+
+      const firstBlockKey =
+        event.blocks.at(0)?._key ?? snapshot.context.keyGenerator()
+      const lastBlockKey =
+        event.blocks.at(-1)?._key ?? snapshot.context.keyGenerator()
+
+      return {firstBlockKey, lastBlockKey}
+    },
+    actions: [
+      ({snapshot, event}, {firstBlockKey, lastBlockKey}) => [
+        ...event.blocks.map((block, index) =>
           raise({
             type: 'insert.block',
             block,
             placement: index === 0 ? 'before' : 'after',
-            select: event.select ?? 'end',
+            select: index !== event.blocks.length - 1 ? 'end' : 'none',
           }),
         ),
+        ...(event.select === 'none'
+          ? [
+              raise({
+                type: 'select',
+                at: snapshot.context.selection,
+              }),
+            ]
+          : event.select === 'start'
+            ? [
+                raise({
+                  type: 'select.block',
+                  at: [{_key: firstBlockKey}],
+                  select: 'start',
+                }),
+              ]
+            : [
+                raise({
+                  type: 'select.block',
+                  at: [{_key: lastBlockKey}],
+                  select: 'end',
+                }),
+              ]),
+      ],
     ],
   }),
   defineBehavior({
     on: 'insert.blocks',
-    guard: ({event}) => event.placement === 'after',
+    guard: ({snapshot, event}) => {
+      if (event.placement !== 'after') {
+        return false
+      }
+
+      const firstBlockKey =
+        event.blocks.at(0)?._key ?? snapshot.context.keyGenerator()
+      const lastBlockKey =
+        event.blocks.at(-1)?._key ?? snapshot.context.keyGenerator()
+
+      return {firstBlockKey, lastBlockKey}
+    },
     actions: [
-      ({event}) =>
-        event.blocks.map((block) =>
+      ({snapshot, event}, {firstBlockKey, lastBlockKey}) => [
+        ...event.blocks.map((block, index) =>
           raise({
             type: 'insert.block',
             block,
             placement: 'after',
-            select: event.select ?? 'end',
+            select: index !== event.blocks.length - 1 ? 'end' : 'none',
           }),
         ),
+        ...(event.select === 'none'
+          ? [
+              raise({
+                type: 'select',
+                at: snapshot.context.selection,
+              }),
+            ]
+          : event.select === 'start'
+            ? [
+                raise({
+                  type: 'select.block',
+                  at: [{_key: firstBlockKey}],
+                  select: 'start',
+                }),
+              ]
+            : [
+                raise({
+                  type: 'select.block',
+                  at: [{_key: lastBlockKey}],
+                  select: 'end',
+                }),
+              ]),
+      ],
     ],
   }),
   defineBehavior({
@@ -47,67 +144,168 @@ export const abstractInsertBehaviors = [
         return false
       }
 
-      return {focusTextBlock}
+      if (!isEmptyTextBlock(snapshot.context, focusTextBlock.node)) {
+        return false
+      }
+
+      const firstBlockKey =
+        event.blocks.at(0)?._key ?? snapshot.context.keyGenerator()
+      const lastBlockKey =
+        event.blocks.at(-1)?._key ?? snapshot.context.keyGenerator()
+
+      return {focusTextBlock, firstBlockKey, lastBlockKey}
     },
     actions: [
-      ({snapshot, event}, {focusTextBlock}) =>
-        event.blocks.length === 1
+      ({event}, {firstBlockKey, lastBlockKey}) => [
+        ...event.blocks.map((block, index) =>
+          raise({
+            type: 'insert.block',
+            block,
+            placement: index === 0 ? 'auto' : 'after',
+            select: index !== event.blocks.length - 1 ? 'end' : 'none',
+          }),
+        ),
+        ...(event.select === 'none' || event.select === 'start'
           ? [
               raise({
-                type: 'insert.block',
-                block: event.blocks[0],
-                placement: 'auto',
-                select: event.select ?? 'end',
+                type: 'select.block',
+                at: [{_key: firstBlockKey}],
+                select: 'start',
               }),
             ]
-          : isEmptyTextBlock(snapshot.context, focusTextBlock.node)
-            ? event.blocks.map((block, index) =>
+          : [
+              raise({
+                type: 'select.block',
+                at: [{_key: lastBlockKey}],
+                select: 'end',
+              }),
+            ]),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'insert.blocks',
+    guard: ({snapshot, event}) => {
+      if (event.placement !== 'auto') {
+        return false
+      }
+
+      const focusTextBlock = getFocusTextBlock(snapshot)
+
+      if (!focusTextBlock || !snapshot.context.selection) {
+        return false
+      }
+
+      const focusBlockStartPoint = getBlockStartPoint({
+        context: snapshot.context,
+        block: focusTextBlock,
+      })
+      const focusBlockEndPoint = getBlockEndPoint({
+        context: snapshot.context,
+        block: focusTextBlock,
+      })
+      const focusTextBlockAfter = sliceTextBlock({
+        context: {
+          schema: snapshot.context.schema,
+          selection: {
+            anchor: snapshot.context.selection.focus,
+            focus: focusBlockEndPoint,
+          },
+        },
+        block: focusTextBlock.node,
+      })
+      const firstBlockKey =
+        event.blocks.at(0)?._key ?? snapshot.context.keyGenerator()
+
+      return {
+        firstBlockKey,
+        focusBlockStartPoint,
+        focusBlockEndPoint,
+        focusTextBlockAfter,
+        selection: snapshot.context.selection,
+      }
+    },
+    actions: [
+      (
+        {event},
+        {
+          focusBlockEndPoint,
+          focusTextBlockAfter,
+          selection,
+          firstBlockKey,
+          focusBlockStartPoint,
+        },
+      ) => [
+        ...event.blocks.flatMap((block, index) =>
+          index === 0
+            ? [
+                ...(isEqualSelectionPoints(selection.focus, focusBlockEndPoint)
+                  ? []
+                  : [
+                      raise({
+                        type: 'delete',
+                        at: {
+                          anchor: selection.focus,
+                          focus: focusBlockEndPoint,
+                        },
+                      }),
+                    ]),
                 raise({
                   type: 'insert.block',
                   block,
-                  placement: index === 0 ? 'auto' : 'after',
-                  select: event.select ?? 'end',
+                  placement: 'auto',
+                  select: 'end',
                 }),
-              )
-            : event.blocks.flatMap((block, index) =>
-                index === 0
-                  ? [
-                      raise({
-                        type: 'split',
-                      }),
-                      raise({
-                        type: 'select.previous block',
-                        select: 'end',
-                      }),
-                      raise({
-                        type: 'insert.block',
-                        block,
-                        placement: 'auto',
-                        select: event.select ?? 'end',
-                      }),
-                    ]
-                  : index === event.blocks.length - 1
-                    ? [
-                        raise({
-                          type: 'select.next block',
-                          select: 'start',
-                        }),
-                        raise({
-                          type: 'insert.block',
-                          block,
-                          placement: 'auto',
-                          select: event.select ?? 'end',
-                        }),
-                      ]
-                    : [
-                        raise({
-                          type: 'insert.block',
-                          block,
-                          placement: 'after',
-                          select: event.select ?? 'end',
-                        }),
-                      ],
-              ),
+              ]
+            : index === event.blocks.length - 1
+              ? [
+                  raise({
+                    type: 'insert.block',
+                    block,
+                    placement: 'after',
+                    select: 'end',
+                  }),
+                  raise({
+                    type: 'insert.block',
+                    block: focusTextBlockAfter,
+                    placement: 'auto',
+                    select: event.select === 'end' ? 'none' : 'end',
+                  }),
+                ]
+              : [
+                  raise({
+                    type: 'insert.block',
+                    block,
+                    placement: 'after',
+                    select: 'end',
+                  }),
+                ],
+        ),
+        ...(event.select === 'none'
+          ? [
+              raise({
+                type: 'select',
+                at: selection,
+              }),
+            ]
+          : event.select === 'start'
+            ? [
+                isEqualSelectionPoints(selection.focus, focusBlockStartPoint)
+                  ? raise({
+                      type: 'select.block',
+                      at: [{_key: firstBlockKey}],
+                      select: 'start',
+                    })
+                  : raise({
+                      type: 'select',
+                      at: {
+                        anchor: selection.focus,
+                        focus: selection.focus,
+                      },
+                    }),
+              ]
+            : []),
+      ],
     ],
   }),
   defineBehavior({

package/src/behaviors/behavior.abstract.select.ts

@@ -1,72 +1,114 @@
-import {getNextBlock, getPreviousBlock} from '../selectors'
-import {getBlockEndPoint, getBlockStartPoint} from '../utils'
+import {getFocusBlock, getNextBlock, getPreviousBlock} from '../selectors'
+import {getBlockEndPoint} from '../utils'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const abstractSelectBehaviors = [
   defineBehavior({
-    on: 'select.previous block',
+    on: 'select.block',
     guard: ({snapshot, event}) => {
-      const previousBlock = getPreviousBlock(snapshot)
-
-      if (!previousBlock) {
+      if (event.select !== 'end') {
         return false
       }
 
-      const point =
-        event.select === 'end'
-          ? getBlockEndPoint({
-              context: snapshot.context,
-              block: previousBlock,
-            })
-          : getBlockStartPoint({
-              context: snapshot.context,
-              block: previousBlock,
-            })
-
-      return {
-        selection: {
-          anchor: point,
-          focus: point,
+      const block = getFocusBlock({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: {
+            anchor: {
+              path: event.at,
+              offset: 0,
+            },
+            focus: {
+              path: event.at,
+              offset: 0,
+            },
+          },
         },
+      })
+
+      if (!block) {
+        return false
       }
+
+      const blockEndPoint = getBlockEndPoint({
+        context: snapshot.context,
+        block,
+      })
+
+      return {blockEndPoint}
     },
     actions: [
-      (_, {selection}) => [
+      (_, {blockEndPoint}) => [
         raise({
           type: 'select',
-          at: selection,
+          at: {
+            anchor: blockEndPoint,
+            focus: blockEndPoint,
+          },
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'select.block',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'select',
+          at: {
+            anchor: {
+              path: event.at,
+              offset: 0,
+            },
+            focus: {
+              path: event.at,
+              offset: 0,
+            },
+          },
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'select.previous block',
+    guard: ({snapshot}) => {
+      const previousBlock = getPreviousBlock(snapshot)
+
+      if (!previousBlock) {
+        return false
+      }
+
+      return {previousBlock}
+    },
+    actions: [
+      ({event}, {previousBlock}) => [
+        raise({
+          type: 'select.block',
+          at: previousBlock.path,
+          select: event.select,
         }),
       ],
     ],
   }),
   defineBehavior({
     on: 'select.next block',
-    guard: ({snapshot, event}) => {
+    guard: ({snapshot}) => {
       const nextBlock = getNextBlock(snapshot)
 
       if (!nextBlock) {
         return false
       }
 
-      const point =
-        event.select === 'end'
-          ? getBlockEndPoint({
-              context: snapshot.context,
-              block: nextBlock,
-            })
-          : getBlockStartPoint({
-              context: snapshot.context,
-              block: nextBlock,
-            })
-
-      return {selection: {anchor: point, focus: point}}
+      return {nextBlock}
     },
     actions: [
-      (_, {selection}) => [
+      ({event}, {nextBlock}) => [
         raise({
-          type: 'select',
-          at: selection,
+          type: 'select.block',
+          at: nextBlock.path,
+          select: event.select,
         }),
       ],
     ],

package/src/behaviors/behavior.types.event.ts

@@ -228,6 +228,7 @@ const abstractBehaviorEventTypes = [
   'list item.toggle',
   'move.block down',
   'move.block up',
+  'select.block',
   'select.previous block',
   'select.next block',
   'serialize',
@@ -415,6 +416,11 @@ type AbstractBehaviorEvent =
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block up'>
       at: BlockPath
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'select.block'>
+      at: BlockPath
+      select?: 'start' | 'end'
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select.previous block'>
       select?: 'start' | 'end'

package/src/editor/Editable.tsx

@@ -1027,7 +1027,18 @@ function validateSelection(slateEditor: Editor, activeElement: HTMLDivElement) {
   if (!slateEditor.selection) {
     return
   }
-  const root = ReactEditor.findDocumentOrShadowRoot(slateEditor)
+
+  let root: Document | ShadowRoot | undefined
+
+  try {
+    root = ReactEditor.findDocumentOrShadowRoot(slateEditor)
+  } catch {}
+
+  if (!root) {
+    // The editor has most likely been unmounted
+    return
+  }
+
   // Return if the editor isn't the active element
   if (activeElement !== root.activeElement) {
     return