@portabletext/editor 2.2.0 → 2.3.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 react21 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;
-}): react21.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(): react21.JSX.Element;
+declare function OneLinePlugin(): react22.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,8 +80,8 @@
     "slate-react": "0.117.4",
     "xstate": "^5.20.2",
     "@portabletext/block-tools": "2.0.8",
-    "@portabletext/keyboard-shortcuts": "1.1.1",
-    "@portabletext/patches": "1.1.6"
+    "@portabletext/patches": "1.1.6",
+    "@portabletext/keyboard-shortcuts": "1.1.1"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",

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

@@ -1,4 +1,4 @@
-import {isSpan} from '../internal-utils/parse-blocks'
+import {isSpan, isTextBlock} from '../internal-utils/parse-blocks'
 import * as selectors from '../selectors'
 import * as utils from '../utils'
 import {raise} from './behavior.types.action'
@@ -25,6 +25,57 @@ export const abstractDeleteBehaviors = [
       ],
     ],
   }),
+  defineBehavior({
+    on: 'delete',
+    guard: ({snapshot, event}) => {
+      if (event.direction !== 'backward') {
+        return false
+      }
+
+      const previousBlock = selectors.getPreviousBlock(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+
+      if (!previousBlock || !focusTextBlock) {
+        return false
+      }
+
+      if (!selectors.isAtTheStartOfBlock(focusTextBlock)(snapshot)) {
+        return false
+      }
+
+      const previousBlockEndPoint = utils.getBlockEndPoint({
+        context: snapshot.context,
+        block: previousBlock,
+      })
+
+      if (!isTextBlock(snapshot.context, previousBlock.node)) {
+        return false
+      }
+
+      return {previousBlockEndPoint, focusTextBlock}
+    },
+    actions: [
+      (_, {previousBlockEndPoint, focusTextBlock}) => [
+        raise({
+          type: 'delete.block',
+          at: focusTextBlock.path,
+        }),
+        raise({
+          type: 'select',
+          at: {
+            anchor: previousBlockEndPoint,
+            focus: previousBlockEndPoint,
+          },
+        }),
+        raise({
+          type: 'insert.block',
+          block: focusTextBlock.node,
+          placement: 'auto',
+          select: 'start',
+        }),
+      ],
+    ],
+  }),
   defineBehavior({
     on: 'delete.forward',
     guard: ({snapshot}) => {
@@ -45,6 +96,45 @@ export const abstractDeleteBehaviors = [
       ],
     ],
   }),
+  defineBehavior({
+    on: 'delete',
+    guard: ({snapshot, event}) => {
+      if (event.direction !== 'forward') {
+        return false
+      }
+
+      const nextBlock = selectors.getNextBlock(snapshot)
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+
+      if (!nextBlock || !focusTextBlock) {
+        return false
+      }
+
+      if (!selectors.isAtTheEndOfBlock(focusTextBlock)(snapshot)) {
+        return false
+      }
+
+      if (!isTextBlock(snapshot.context, nextBlock.node)) {
+        return false
+      }
+
+      return {nextBlock}
+    },
+    actions: [
+      (_, {nextBlock}) => [
+        raise({
+          type: 'delete.block',
+          at: nextBlock.path,
+        }),
+        raise({
+          type: 'insert.block',
+          block: nextBlock.node,
+          placement: 'auto',
+          select: 'none',
+        }),
+      ],
+    ],
+  }),
   defineBehavior({
     on: 'delete.block',
     actions: [

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

@@ -1,9 +1,14 @@
 import {isListBlock, isTextBlock} from '../internal-utils/parse-blocks'
 import {defaultKeyboardShortcuts} from '../keyboard-shortcuts/default-keyboard-shortcuts'
 import * as selectors from '../selectors'
-import {getBlockEndPoint} from '../utils'
+import {
+  getBlockEndPoint,
+  getBlockStartPoint,
+  isEqualSelectionPoints,
+} from '../utils'
 import {isAtTheBeginningOfBlock} from '../utils/util.at-the-beginning-of-block'
 import {isEmptyTextBlock} from '../utils/util.is-empty-text-block'
+import {sliceTextBlock} from '../utils/util.slice-text-block'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
@@ -183,6 +188,148 @@ const mergeTextIntoListOnBackspace = defineBehavior({
   ],
 })
 
+/**
+ * When performing a delete operation where the start point of the operation is
+ * at the start of a list item and the end point of the operation is in another
+ * list item, we make sure the preserve the first list item. Otherwise, the
+ * default behavior would be to preserve the last item.
+ */
+const deletingListFromStart = defineBehavior({
+  on: 'delete',
+  guard: ({snapshot, event}) => {
+    const blocksToDelete = selectors.getSelectedBlocks({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.at,
+      },
+    })
+
+    if (blocksToDelete.length < 2) {
+      return false
+    }
+
+    const startBlock = blocksToDelete.at(0)?.node
+    const middleBlocks = blocksToDelete.slice(1, -1)
+    const endBlock = blocksToDelete.at(-1)?.node
+
+    if (
+      !isListBlock(snapshot.context, startBlock) ||
+      !isListBlock(snapshot.context, endBlock)
+    ) {
+      // It's that any block in between isn't a list item, but the first and
+      // last blocks have to be list items for this Behavior to take effect.
+      return false
+    }
+
+    const deleteStartPoint = selectors.getSelectionStartPoint({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.at,
+      },
+    })
+    const deleteEndPoint = selectors.getSelectionEndPoint({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.at,
+      },
+    })
+
+    if (!deleteStartPoint || !deleteEndPoint) {
+      return false
+    }
+
+    const startBlockStartPoint = getBlockStartPoint({
+      context: snapshot.context,
+      block: {
+        node: startBlock,
+        path: [{_key: startBlock._key}],
+      },
+    })
+
+    if (!isEqualSelectionPoints(deleteStartPoint, startBlockStartPoint)) {
+      // If we aren't deleting from the beginning of the first list item, then
+      // there is no need to proceed. The default delete Behavior will suffice.
+      return false
+    }
+
+    const startBlockEndPoint = getBlockEndPoint({
+      context: snapshot.context,
+      block: {
+        node: startBlock,
+        path: [{_key: startBlock._key}],
+      },
+    })
+    const endBlockEndPoint = getBlockEndPoint({
+      context: snapshot.context,
+      block: {
+        node: endBlock,
+        path: [{_key: endBlock._key}],
+      },
+    })
+    const slicedEndBlock = sliceTextBlock({
+      context: {
+        schema: snapshot.context.schema,
+        selection: {
+          anchor: deleteEndPoint,
+          focus: endBlockEndPoint,
+        },
+      },
+      block: endBlock,
+    })
+
+    return {
+      startBlockStartPoint,
+      startBlockEndPoint,
+      middleBlocks,
+      endBlock,
+      slicedEndBlock,
+    }
+  },
+  actions: [
+    (
+      _,
+      {
+        startBlockStartPoint,
+        startBlockEndPoint,
+        middleBlocks,
+        endBlock,
+        slicedEndBlock,
+      },
+    ) => [
+      // All block in between can safely be deleted.
+      ...middleBlocks.map((block) =>
+        raise({type: 'delete.block', at: block.path}),
+      ),
+      // The last block is deleted as well.
+      raise({type: 'delete.block', at: [{_key: endBlock._key}]}),
+      // But in case the delete operation didn't reach all the way to the end
+      // of it, we first place the caret at the end of the start block...
+      raise({
+        type: 'select',
+        at: {
+          anchor: startBlockEndPoint,
+          focus: startBlockEndPoint,
+        },
+      }),
+      // ...and insert the rest of the end block at the end of it.
+      raise({
+        type: 'insert.block',
+        block: slicedEndBlock,
+        placement: 'auto',
+        select: 'none',
+      }),
+      // And finally, we delete the original text of the start block.
+      raise({
+        type: 'delete',
+        at: {anchor: startBlockStartPoint, focus: startBlockEndPoint},
+      }),
+    ],
+  ],
+})
+
 /**
  * Hitting Enter in an empty list item would create a new list item below by
  * default. Instead, the list properties should be cleared.
@@ -521,6 +668,7 @@ export const coreListBehaviors = {
   unindentListOnBackspace,
   mergeTextIntoListOnDelete,
   mergeTextIntoListOnBackspace,
+  deletingListFromStart,
   clearListOnEnter,
   indentListOnTab,
   unindentListOnShiftTab,

package/src/behaviors/behavior.core.ts

@@ -24,6 +24,7 @@ export const coreBehaviorsConfig = [
   coreListBehaviors.unindentListOnBackspace,
   coreListBehaviors.mergeTextIntoListOnDelete,
   coreListBehaviors.mergeTextIntoListOnBackspace,
+  coreListBehaviors.deletingListFromStart,
   coreListBehaviors.clearListOnEnter,
   coreListBehaviors.indentListOnTab,
   coreListBehaviors.unindentListOnShiftTab,