@portabletext/editor 1.52.7 → 1.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.52.7",
+  "version": "1.53.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

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

@@ -1,8 +1,18 @@
 import {keyIs} from '../internal-utils/key-is'
+import * as selectors from '../selectors'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const abstractKeyboardBehaviors = [
+  defineBehavior({
+    on: 'keyboard.keydown',
+    guard: ({snapshot, event}) =>
+      keyIs.break(event.originEvent) &&
+      selectors.isSelectionCollapsed(snapshot) &&
+      selectors.getFocusInlineObject(snapshot),
+    actions: [() => [raise({type: 'insert.break'})]],
+  }),
+
   /**
    * On WebKit, Shift+Enter results in an `insertParagraph` input event rather
    * than an `insertLineBreak` input event. This Behavior makes sure we catch

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

@@ -1,111 +1,132 @@
 import {isTextBlock, parseBlock} from '../internal-utils/parse-blocks'
 import * as selectors from '../selectors'
-import {getSelectionStartPoint, isSelectionCollapsed} from '../utils'
-import {getBlockEndPoint} from '../utils/util.get-block-end-point'
-import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
-import {sliceBlocks} from '../utils/util.slice-blocks'
+import * as utils from '../utils'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const abstractSplitBehaviors = [
+  /**
+   * You can't split an inline object.
+   */
+  defineBehavior({
+    on: 'split',
+    guard: ({snapshot}) =>
+      selectors.isSelectionCollapsed(snapshot) &&
+      selectors.getFocusInlineObject(snapshot),
+    actions: [],
+  }),
+
+  /**
+   * You can't split a block object.
+   */
+  defineBehavior({
+    on: 'split',
+    guard: ({snapshot}) =>
+      selectors.isSelectionCollapsed(snapshot) &&
+      selectors.getFocusBlockObject(snapshot),
+    actions: [],
+  }),
+
+  defineBehavior({
+    on: 'split',
+    guard: ({snapshot}) => {
+      const selection = snapshot.context.selection
+
+      if (!selection || utils.isSelectionCollapsed(selection)) {
+        return false
+      }
+
+      const selectionStartBlock = selectors.getSelectionStartBlock(snapshot)
+      const selectionEndBlock = selectors.getSelectionEndBlock(snapshot)
+
+      if (!selectionStartBlock || !selectionEndBlock) {
+        return false
+      }
+
+      if (
+        !isTextBlock(snapshot.context, selectionStartBlock.node) &&
+        isTextBlock(snapshot.context, selectionEndBlock.node)
+      ) {
+        return {selection}
+      }
+
+      return false
+    },
+    actions: [(_, {selection}) => [raise({type: 'delete', at: selection})]],
+  }),
+
+  defineBehavior({
+    on: 'split',
+    guard: ({snapshot}) => {
+      const selection = snapshot.context.selection
+
+      if (!selection || utils.isSelectionCollapsed(selection)) {
+        return false
+      }
+
+      return {selection}
+    },
+    actions: [
+      (_, {selection}) => [
+        raise({type: 'delete', at: selection}),
+        raise({type: 'split'}),
+      ],
+    ],
+  }),
+
   defineBehavior({
     on: 'split',
     guard: ({snapshot}) => {
-      if (!snapshot.context.selection) {
+      const selection = snapshot.context.selection
+
+      if (!selection || !utils.isSelectionCollapsed(selection)) {
+        return false
+      }
+
+      const selectionStartPoint = utils.getSelectionStartPoint(selection)
+
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+
+      if (!focusTextBlock) {
         return false
       }
 
-      const selectionStartPoint = getSelectionStartPoint(
-        snapshot.context.selection,
-      )
-      const selectionEndPoint = getSelectionEndPoint(snapshot.context.selection)
-
-      const focusTextBlock = selectors.getFocusTextBlock({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: {
-            anchor: selectionStartPoint,
-            focus: selectionEndPoint,
-          },
-        },
+      const blockEndPoint = utils.getBlockEndPoint({
+        context: snapshot.context,
+        block: focusTextBlock,
       })
 
-      if (focusTextBlock) {
-        const blockEndPoint = getBlockEndPoint({
-          context: snapshot.context,
-          block: focusTextBlock,
-        })
-        const newTextBlockSelection = {
-          anchor: selectionEndPoint,
-          focus: blockEndPoint,
-        }
-        const newTextBlock = parseBlock({
-          block: sliceBlocks({
+      const newTextBlockSelection = {
+        anchor: selectionStartPoint,
+        focus: blockEndPoint,
+      }
+
+      const newTextBlock = parseBlock({
+        block: utils
+          .sliceBlocks({
             context: {
               ...snapshot.context,
               selection: newTextBlockSelection,
             },
             blocks: [focusTextBlock.node],
-          }).at(0),
-          context: snapshot.context,
-          options: {refreshKeys: true, validateFields: true},
-        })
-
-        if (!newTextBlock || !isTextBlock(snapshot.context, newTextBlock)) {
-          return false
-        }
-
-        return {
-          newTextBlock,
-          newTextBlockSelection,
-          selection: {
-            anchor: selectionStartPoint,
-            focus: blockEndPoint,
-          },
-        }
-      }
-
-      const focusBlockObject = selectors.getFocusBlockObject({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: {
-            anchor: selectionStartPoint,
-            focus: selectionEndPoint,
-          },
-        },
+          })
+          .at(0),
+        context: snapshot.context,
+        options: {refreshKeys: true, validateFields: true},
       })
 
-      if (focusBlockObject) {
-        const newTextBlock = parseBlock({
-          block: {
-            _type: snapshot.context.schema.block.name,
-            children: [],
-          },
-          context: snapshot.context,
-          options: {refreshKeys: true, validateFields: true},
-        })
-
-        if (!newTextBlock) {
-          return false
-        }
-
-        return {
-          newTextBlock,
-          newTextBlockSelection: {
-            anchor: selectionEndPoint,
-            focus: selectionEndPoint,
-          },
-          selection: snapshot.context.selection,
-        }
+      if (!newTextBlock) {
+        return false
       }
 
-      return false
+      return {
+        newTextBlock,
+        newTextBlockSelection,
+      }
     },
     actions: [
-      (_, {newTextBlock, selection}) =>
-        isSelectionCollapsed(selection)
+      (_, {newTextBlock, newTextBlockSelection}) =>
+        utils.isSelectionCollapsed(newTextBlockSelection)
           ? [
               raise({
                 type: 'insert.block',
@@ -115,10 +136,7 @@ export const abstractSplitBehaviors = [
               }),
             ]
           : [
-              raise({
-                type: 'delete',
-                at: selection,
-              }),
+              raise({type: 'delete', at: newTextBlockSelection}),
               raise({
                 type: 'insert.block',
                 block: newTextBlock,

package/src/behaviors/behavior.core.insert-break.ts

@@ -235,9 +235,23 @@ const breakingEntireBlocks = defineBehavior({
   ],
 })
 
+const breakingInlineObject = defineBehavior({
+  on: 'insert.break',
+  guard: ({snapshot}) => {
+    const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
+    const focusInlineObject = selectors.getFocusInlineObject(snapshot)
+
+    return selectionCollapsed && focusInlineObject
+  },
+  actions: [
+    () => [raise({type: 'move.forward', distance: 1}), raise({type: 'split'})],
+  ],
+})
+
 export const coreInsertBreakBehaviors = {
   breakingAtTheEndOfTextBlock,
   breakingAtTheStartOfTextBlock,
   breakingEntireDocument,
   breakingEntireBlocks,
+  breakingInlineObject,
 }

package/src/behaviors/behavior.core.ts

@@ -29,6 +29,7 @@ export const coreBehaviorsConfig = [
   coreInsertBreakBehaviors.breakingAtTheStartOfTextBlock,
   coreInsertBreakBehaviors.breakingEntireDocument,
   coreInsertBreakBehaviors.breakingEntireBlocks,
+  coreInsertBreakBehaviors.breakingInlineObject,
 ].map((behavior) => ({
   behavior,
   priority: corePriority,

package/src/editor/components/render-text-block.tsx

@@ -154,7 +154,7 @@ export function RenderTextBlock(props: {
               type: legacyBlockSchemaType,
               value: props.textBlock,
             })
-          : props.children}
+          : children}
       </div>
       {dragPositionBlock === 'end' ? <DropIndicator /> : null}
     </div>

package/src/internal-utils/key-is.ts

@@ -1,4 +1,5 @@
 export const keyIs = {
+  break: (event) => event.key === 'Enter' && !event.shiftKey,
   lineBreak: (event) => event.key === 'Enter' && event.shiftKey,
 } satisfies Record<string, KeyboardEventPredicate>