@portabletext/editor 1.55.16 → 1.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.55.16",
+  "version": "1.56.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,15 +80,15 @@
     "slate-react": "0.117.3",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.20.0",
-    "@portabletext/block-tools": "1.1.34",
+    "@portabletext/block-tools": "1.1.35",
     "@portabletext/patches": "1.1.5"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.9.0",
-    "@sanity/schema": "^3.96.0",
-    "@sanity/types": "^3.96.0",
+    "@sanity/schema": "^3.97.1",
+    "@sanity/types": "^3.97.1",
     "@testing-library/react": "^16.3.0",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.16",
@@ -114,8 +114,8 @@
     "racejar": "1.2.9"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.96.0",
-    "@sanity/types": "^3.96.0",
+    "@sanity/schema": "^3.97.1",
+    "@sanity/types": "^3.97.1",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.2"
   },

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

@@ -1,6 +1,7 @@
-import {isListBlock} from '../internal-utils/parse-blocks'
+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 {isEmptyTextBlock} from '../utils/util.is-empty-text-block'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
@@ -75,6 +76,104 @@ const unindentListOnBackspace = defineBehavior({
   ],
 })
 
+/**
+ * Hitting Delete in an empty list item would delete it by default. Instead,
+ * then text block below should be merged into it, preserving the list
+ * properties.
+ */
+const mergeTextIntoListOnDelete = defineBehavior({
+  on: 'delete.forward',
+  guard: ({snapshot}) => {
+    const focusListBlock = selectors.getFocusListBlock(snapshot)
+    const nextBlock = selectors.getNextBlock(snapshot)
+
+    if (!focusListBlock || !nextBlock) {
+      return false
+    }
+
+    if (!isTextBlock(snapshot.context, nextBlock.node)) {
+      return false
+    }
+
+    if (!isEmptyTextBlock(snapshot.context, focusListBlock.node)) {
+      return false
+    }
+
+    return {focusListBlock, nextBlock}
+  },
+  actions: [
+    (_, {nextBlock}) => [
+      raise({
+        type: 'insert.block',
+        block: nextBlock.node,
+        placement: 'auto',
+        select: 'start',
+      }),
+      raise({
+        type: 'delete.block',
+        at: nextBlock.path,
+      }),
+    ],
+  ],
+})
+
+/**
+ * Hitting Backspace before an empty list item would delete it by default.
+ * Instead, the text block below should be merged into it, preserving the list
+ * properties.
+ */
+const mergeTextIntoListOnBackspace = defineBehavior({
+  on: 'delete.backward',
+  guard: ({snapshot}) => {
+    const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+    const previousBlock = selectors.getPreviousBlock(snapshot)
+
+    if (!focusTextBlock || !previousBlock) {
+      return false
+    }
+
+    if (!isListBlock(snapshot.context, previousBlock.node)) {
+      return false
+    }
+
+    if (!isEmptyTextBlock(snapshot.context, previousBlock.node)) {
+      return false
+    }
+
+    const previousBlockEndPoint = getBlockEndPoint({
+      context: snapshot.context,
+      block: previousBlock,
+    })
+
+    return {focusTextBlock, previousBlockEndPoint}
+  },
+  actions: [
+    (_, {focusTextBlock, previousBlockEndPoint}) => [
+      raise({
+        type: 'select',
+        at: {
+          anchor: previousBlockEndPoint,
+          focus: previousBlockEndPoint,
+        },
+      }),
+      raise({
+        type: 'insert.block',
+        block: focusTextBlock.node,
+        placement: 'auto',
+        select: 'start',
+      }),
+      raise({
+        type: 'delete.block',
+        at: focusTextBlock.path,
+      }),
+    ],
+  ],
+})
+
+/**
+ * Hitting Enter in an empty list item would create a new list item below by
+ * default. Instead, the list properties should be cleared.
+ */
 const clearListOnEnter = defineBehavior({
   on: 'insert.break',
   guard: ({snapshot}) => {
@@ -102,6 +201,9 @@ const clearListOnEnter = defineBehavior({
   ],
 })
 
+/**
+ * Hitting Tab should indent the list item.
+ */
 const indentListOnTab = defineBehavior({
   on: 'keyboard.keydown',
   guard: ({snapshot, event}) => {
@@ -146,6 +248,9 @@ const indentListOnTab = defineBehavior({
   ],
 })
 
+/**
+ * Hitting Shift+Tab should unindent the list item.
+ */
 const unindentListOnShiftTab = defineBehavior({
   on: 'keyboard.keydown',
   guard: ({snapshot, event}) => {
@@ -192,10 +297,221 @@ const unindentListOnShiftTab = defineBehavior({
   ],
 })
 
+/**
+ * An inserted list inherits the `level` from the list item where it's
+ * inserted. The entire list tree is adjusted to match the new level.
+ */
+const inheritListLevel = defineBehavior({
+  on: 'insert.blocks',
+  guard: ({snapshot, event}) => {
+    const focusListBlock = selectors.getFocusListBlock(snapshot)
+
+    if (!focusListBlock) {
+      return false
+    }
+
+    const firstInsertedBlock = event.blocks.at(0)
+    const secondInsertedBlock = event.blocks.at(1)
+    const insertedListBlock = isListBlock(snapshot.context, firstInsertedBlock)
+      ? firstInsertedBlock
+      : isListBlock(snapshot.context, secondInsertedBlock)
+        ? secondInsertedBlock
+        : undefined
+
+    if (!insertedListBlock) {
+      return false
+    }
+
+    const levelDifference = focusListBlock.node.level - insertedListBlock.level
+
+    if (levelDifference === 0) {
+      return false
+    }
+
+    return {levelDifference, insertedListBlock}
+  },
+  actions: [
+    ({snapshot, event}, {levelDifference, insertedListBlock}) => {
+      let adjustLevel = true
+      let listStartBlockFound = false
+
+      return [
+        raise({
+          ...event,
+          blocks: event.blocks.map((block) => {
+            if (block._key === insertedListBlock._key) {
+              listStartBlockFound = true
+            }
+
+            if (!adjustLevel) {
+              return block
+            }
+
+            if (
+              listStartBlockFound &&
+              adjustLevel &&
+              isListBlock(snapshot.context, block)
+            ) {
+              return {
+                ...block,
+                level: Math.min(
+                  MAX_LIST_LEVEL,
+                  Math.max(1, block.level + levelDifference),
+                ),
+              }
+            }
+
+            if (listStartBlockFound) {
+              adjustLevel = false
+            }
+
+            return block
+          }),
+        }),
+      ]
+    },
+  ],
+})
+
+/**
+ * An inserted list inherits the `listItem` from the list item at the level
+ * it's inserted.
+ */
+const inheritListItem = defineBehavior({
+  on: 'insert.blocks',
+  guard: ({snapshot, event}) => {
+    const focusListBlock = selectors.getFocusListBlock(snapshot)
+
+    if (!focusListBlock) {
+      return false
+    }
+
+    if (isEmptyTextBlock(snapshot.context, focusListBlock.node)) {
+      return false
+    }
+
+    const firstInsertedBlock = event.blocks.at(0)
+    const secondInsertedBlock = event.blocks.at(1)
+    const insertedListBlock = isListBlock(snapshot.context, firstInsertedBlock)
+      ? firstInsertedBlock
+      : isListBlock(snapshot.context, secondInsertedBlock)
+        ? secondInsertedBlock
+        : undefined
+
+    if (!insertedListBlock) {
+      return false
+    }
+
+    if (focusListBlock.node.level !== insertedListBlock.level) {
+      return false
+    }
+
+    if (focusListBlock.node.listItem === insertedListBlock.listItem) {
+      return false
+    }
+
+    return {listItem: focusListBlock.node.listItem, insertedListBlock}
+  },
+  actions: [
+    ({snapshot, event}, {listItem, insertedListBlock}) => {
+      let adjustListItem = true
+      let listStartBlockFound = false
+
+      return [
+        raise({
+          ...event,
+          blocks: event.blocks.map((block) => {
+            if (block._key === insertedListBlock._key) {
+              listStartBlockFound = true
+            }
+
+            if (!adjustListItem) {
+              return block
+            }
+
+            if (
+              listStartBlockFound &&
+              adjustListItem &&
+              isListBlock(snapshot.context, block)
+            ) {
+              return {
+                ...block,
+                listItem:
+                  block.level === insertedListBlock.level
+                    ? listItem
+                    : block.listItem,
+              }
+            }
+
+            if (listStartBlockFound) {
+              adjustListItem = false
+            }
+
+            return block
+          }),
+        }),
+      ]
+    },
+  ],
+})
+
+/**
+ * An inserted text block inherits the `listItem` and `level` from the list
+ * item where it's inserted.
+ */
+const inheritListProperties = defineBehavior({
+  on: 'insert.block',
+  guard: ({snapshot, event}) => {
+    if (event.placement !== 'auto') {
+      return false
+    }
+
+    if (event.block._type !== snapshot.context.schema.block.name) {
+      return false
+    }
+
+    if (event.block.listItem !== undefined) {
+      return false
+    }
+
+    const focusListBlock = selectors.getFocusListBlock(snapshot)
+
+    if (!focusListBlock) {
+      return false
+    }
+
+    if (!isEmptyTextBlock(snapshot.context, focusListBlock.node)) {
+      return false
+    }
+
+    return {
+      level: focusListBlock.node.level,
+      listItem: focusListBlock.node.listItem,
+    }
+  },
+  actions: [
+    ({event}, {level, listItem}) => [
+      raise({
+        ...event,
+        block: {
+          ...event.block,
+          level,
+          listItem,
+        },
+      }),
+    ],
+  ],
+})
+
 export const coreListBehaviors = {
   clearListOnBackspace,
   unindentListOnBackspace,
+  mergeTextIntoListOnDelete,
+  mergeTextIntoListOnBackspace,
   clearListOnEnter,
   indentListOnTab,
   unindentListOnShiftTab,
+  inheritListLevel,
+  inheritListItem,
+  inheritListProperties,
 }

package/src/behaviors/behavior.core.ts

@@ -22,9 +22,14 @@ export const coreBehaviorsConfig = [
   coreBlockObjectBehaviors.deletingEmptyTextBlockBeforeBlockObject,
   coreListBehaviors.clearListOnBackspace,
   coreListBehaviors.unindentListOnBackspace,
+  coreListBehaviors.mergeTextIntoListOnDelete,
+  coreListBehaviors.mergeTextIntoListOnBackspace,
   coreListBehaviors.clearListOnEnter,
   coreListBehaviors.indentListOnTab,
   coreListBehaviors.unindentListOnShiftTab,
+  coreListBehaviors.inheritListLevel,
+  coreListBehaviors.inheritListItem,
+  coreListBehaviors.inheritListProperties,
   coreInsertBreakBehaviors.breakingAtTheEndOfTextBlock,
   coreInsertBreakBehaviors.breakingAtTheStartOfTextBlock,
   coreInsertBreakBehaviors.breakingEntireDocument,

package/src/internal-utils/terse-pt.test.ts

@@ -79,6 +79,16 @@ test(getTersePt.name, () => {
       },
     ]),
   ).toEqual(['>>#h3:foo'])
+  expect(
+    getTersePt([
+      {
+        _key: keyGenerator(),
+        _type: 'block',
+        children: [{_key: keyGenerator(), _type: 'span', text: 'foo'}],
+        style: 'h3',
+      },
+    ]),
+  ).toEqual(['h3:foo'])
 })
 
 test(parseTersePtString.name, () => {

package/src/operations/behavior.operation.insert.block.ts

@@ -11,6 +11,7 @@ import {
 } from '../internal-utils/slate-utils'
 import {isEqualToEmptyEditor, toSlateValue} from '../internal-utils/values'
 import type {PortableTextSlateEditor} from '../types/editor'
+import {isEmptyTextBlock} from '../utils'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
 export const insertBlockOperationImplementation: BehaviorOperationImplementation<
@@ -240,6 +241,16 @@ export function insertBlock({
           return
         }
 
+        Transforms.setNodes(
+          editor,
+          {
+            markDefs: [...(endBlock.markDefs ?? []), ...(block.markDefs ?? [])],
+          },
+          {
+            at: endBlockPath,
+          },
+        )
+
         if (select === 'end') {
           Transforms.insertFragment(editor, [block], {
             voids: true,
@@ -290,7 +301,7 @@ export function insertBlock({
               Transforms.select(editor, Editor.start(editor, endBlockPath))
             }
 
-            if (isEqualToEmptyEditor([endBlock], schema)) {
+            if (isEmptyTextBlock({schema}, endBlock)) {
               Transforms.removeNodes(editor, {at: Path.next(endBlockPath)})
             }
           } else if (