@portabletext/editor 2.12.3 → 2.13.1

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

@@ -8,6 +8,9 @@ import {
 } from 'slate-react'
 import type {EventPositionBlock} from '../../internal-utils/event-position'
 import type {
+  BlockListItemRenderProps,
+  BlockRenderProps,
+  BlockStyleRenderProps,
   PortableTextMemberSchemaTypes,
   RenderBlockFunction,
   RenderListItemFunction,
@@ -61,7 +64,8 @@ export function RenderTextBlock(props: {
 
     if (legacyStyleSchemaType) {
       children = (
-        <props.renderStyle
+        <RenderStyle
+          renderStyle={props.renderStyle}
           block={props.textBlock}
           editorElementRef={blockRef}
           focused={focused}
@@ -71,7 +75,7 @@ export function RenderTextBlock(props: {
           value={props.textBlock.style}
         >
           {children}
-        </props.renderStyle>
+        </RenderStyle>
       )
     } else {
       console.error(
@@ -87,7 +91,8 @@ export function RenderTextBlock(props: {
 
     if (legacyListItemSchemaType) {
       children = (
-        <props.renderListItem
+        <RenderListItem
+          renderListItem={props.renderListItem}
           block={props.textBlock}
           editorElementRef={blockRef}
           focused={focused}
@@ -98,7 +103,7 @@ export function RenderTextBlock(props: {
           schemaType={legacyListItemSchemaType}
         >
           {children}
-        </props.renderListItem>
+        </RenderListItem>
       )
     } else {
       console.error(
@@ -152,7 +157,8 @@ export function RenderTextBlock(props: {
       {dragPositionBlock === 'start' ? <DropIndicator /> : null}
       <div ref={blockRef}>
         {props.renderBlock ? (
-          <props.renderBlock
+          <RenderBlock
+            renderBlock={props.renderBlock}
             editorElementRef={blockRef}
             focused={focused}
             level={props.textBlock.level}
@@ -165,7 +171,7 @@ export function RenderTextBlock(props: {
             value={props.textBlock}
           >
             {children}
-          </props.renderBlock>
+          </RenderBlock>
         ) : (
           children
         )}
@@ -174,3 +180,86 @@ export function RenderTextBlock(props: {
     </div>
   )
 }
+
+function RenderBlock({
+  renderBlock,
+  children,
+  editorElementRef,
+  focused,
+  level,
+  listItem,
+  path,
+  selected,
+  style,
+  schemaType,
+  type,
+  value,
+}: {
+  renderBlock: RenderBlockFunction
+} & BlockRenderProps) {
+  return renderBlock({
+    children,
+    editorElementRef,
+    focused,
+    level,
+    listItem,
+    path,
+    selected,
+    style,
+    schemaType,
+    type,
+    value,
+  })
+}
+
+function RenderListItem({
+  renderListItem,
+  block,
+  children,
+  editorElementRef,
+  focused,
+  level,
+  path,
+  schemaType,
+  selected,
+  value,
+}: {
+  renderListItem: RenderListItemFunction
+} & BlockListItemRenderProps) {
+  return renderListItem({
+    block,
+    children,
+    editorElementRef,
+    focused,
+    level,
+    path,
+    schemaType,
+    selected,
+    value,
+  })
+}
+
+function RenderStyle({
+  renderStyle,
+  block,
+  children,
+  editorElementRef,
+  focused,
+  path,
+  schemaType,
+  selected,
+  value,
+}: {
+  renderStyle: RenderStyleFunction
+} & BlockStyleRenderProps) {
+  return renderStyle({
+    block,
+    children,
+    editorElementRef,
+    focused,
+    path,
+    schemaType,
+    selected,
+    value,
+  })
+}

package/src/internal-utils/asserters.ts

@@ -4,6 +4,6 @@ export function isTypedObject(object: unknown): object is TypedObject {
   return isRecord(object) && typeof object._type === 'string'
 }
 
-function isRecord(value: unknown): value is Record<string, unknown> {
+export function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && (typeof value === 'object' || typeof value === 'function')
 }

package/src/keyboard-shortcuts/default-keyboard-shortcuts.ts

@@ -31,6 +31,17 @@ export const defaultKeyboardShortcuts = {
       },
     ],
   }),
+  backspace: createKeyboardShortcut({
+    default: [
+      {
+        key: 'Backspace',
+        alt: false,
+        ctrl: false,
+        meta: false,
+        shift: false,
+      },
+    ],
+  }),
   break: createKeyboardShortcut({
     default: [
       {
@@ -53,6 +64,17 @@ export const defaultKeyboardShortcuts = {
     underline: underline,
     code: code,
   },
+  delete: createKeyboardShortcut({
+    default: [
+      {
+        key: 'Delete',
+        alt: false,
+        ctrl: false,
+        meta: false,
+        shift: false,
+      },
+    ],
+  }),
   history: {
     undo,
     redo,

package/src/operations/behavior.operation.delete.ts

@@ -9,7 +9,6 @@ import {
 } from 'slate'
 import {DOMEditor} from 'slate-dom'
 import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
-import {getBlockPath} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
 import {getBlockKeyFromSelectionPoint} from '../selection/selection-point'
 import type {PortableTextSlateEditor} from '../types/editor'
@@ -59,30 +58,13 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
     throw new Error('Failed to get end block')
   }
 
-  const anchorBlockPath =
-    anchorBlockKey !== undefined
-      ? getBlockPath({
-          editor: operation.editor,
-          _key: anchorBlockKey,
-        })
-      : undefined
-  const focusBlockPath =
-    focusBlockKey !== undefined
-      ? getBlockPath({
-          editor: operation.editor,
-          _key: focusBlockKey,
-        })
-      : undefined
-
-  if (
-    operation.at.anchor.path.length === 1 &&
-    operation.at.focus.path.length === 1 &&
-    anchorBlockPath &&
-    focusBlockPath &&
-    anchorBlockPath[0] === focusBlockPath[0]
-  ) {
+  if (operation.unit === 'block') {
     Transforms.removeNodes(operation.editor, {
-      at: [anchorBlockPath[0]],
+      at: {
+        anchor: {path: [startBlockIndex], offset: 0},
+        focus: {path: [endBlockIndex], offset: 0},
+      },
+      mode: 'highest',
     })
 
     if (operation.editor.children.length === 0) {

package/src/selectors/index.ts

@@ -17,6 +17,7 @@ export {getFocusSpan} from './selector.get-focus-span'
 export {getFocusTextBlock} from './selector.get-focus-text-block'
 export {getLastBlock} from './selector.get-last-block'
 export {getListIndex} from './selector.get-list-state'
+export {getMarkState} from './selector.get-mark-state'
 export {getNextBlock} from './selector.get-next-block'
 export {getNextInlineObject} from './selector.get-next-inline-object'
 export {getPreviousBlock} from './selector.get-previous-block'

package/src/selectors/selector.get-mark-state.ts

@@ -1,4 +1,6 @@
 import type {EditorSelector} from '../editor/editor-selector'
+import {isBlockPath} from '../types/paths'
+import {blockOffsetToSpanSelectionPoint} from '../utils'
 import {isSelectionExpanded} from '../utils/util.is-selection-expanded'
 import {getFocusSpan} from './selector.get-focus-span'
 import {getFocusTextBlock} from './selector.get-focus-text-block'
@@ -20,6 +22,7 @@ export type MarkState =
 /**
  * Given that text is inserted at the current position, what marks should
  * be applied?
+ * @beta
  */
 export const getMarkState: EditorSelector<MarkState | undefined> = (
   snapshot,
@@ -28,15 +31,69 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
     return undefined
   }
 
+  let selection = snapshot.context.selection
   const focusTextBlock = getFocusTextBlock(snapshot)
-  const focusSpan = getFocusSpan(snapshot)
 
-  if (!focusTextBlock || !focusSpan) {
+  if (!focusTextBlock) {
     return undefined
   }
 
-  if (isSelectionExpanded(snapshot.context.selection)) {
-    const selectedSpans = getSelectedSpans(snapshot)
+  if (isBlockPath(selection.anchor.path)) {
+    const spanSelectionPoint = blockOffsetToSpanSelectionPoint({
+      context: snapshot.context,
+      blockOffset: {
+        path: selection.anchor.path,
+        offset: selection.anchor.offset,
+      },
+      direction: selection.backward ? 'backward' : 'forward',
+    })
+
+    selection = spanSelectionPoint
+      ? {
+          ...selection,
+          anchor: spanSelectionPoint,
+        }
+      : selection
+  }
+
+  if (isBlockPath(selection.focus.path)) {
+    const spanSelectionPoint = blockOffsetToSpanSelectionPoint({
+      context: snapshot.context,
+      blockOffset: {
+        path: selection.focus.path,
+        offset: selection.focus.offset,
+      },
+      direction: selection.backward ? 'backward' : 'forward',
+    })
+
+    selection = spanSelectionPoint
+      ? {
+          ...selection,
+          focus: spanSelectionPoint,
+        }
+      : selection
+  }
+
+  const focusSpan = getFocusSpan({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection,
+    },
+  })
+
+  if (!focusSpan) {
+    return undefined
+  }
+
+  if (isSelectionExpanded(selection)) {
+    const selectedSpans = getSelectedSpans({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection,
+      },
+    })
 
     let index = 0
     let marks: Array<string> = []
@@ -80,8 +137,20 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
   const atTheEndOfSpan =
     snapshot.context.selection.anchor.offset === focusSpan.node.text.length
 
-  const previousSpan = getPreviousSpan(snapshot)
-  const nextSpan = getNextSpan(snapshot)
+  const previousSpan = getPreviousSpan({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection,
+    },
+  })
+  const nextSpan = getNextSpan({
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection,
+    },
+  })
   const nextSpanAnnotations =
     nextSpan?.node?.marks?.filter((mark) => !decorators.includes(mark)) ?? []
   const spanAnnotations = marks.filter((mark) => !decorators.includes(mark))

package/src/types/paths.ts

@@ -1,8 +1,26 @@
+import type {Path} from '@sanity/types'
+import {isRecord} from '../internal-utils/asserters'
+
 /**
  * @public
  */
 export type BlockPath = [{_key: string}]
 
+/**
+ * @public
+ */
+export function isBlockPath(path: Path): path is BlockPath {
+  const firstSegment = path.at(0)
+
+  return (
+    path.length === 1 &&
+    firstSegment !== undefined &&
+    isRecord(firstSegment) &&
+    '_key' in firstSegment &&
+    typeof firstSegment._key === 'string'
+  )
+}
+
 /**
  * @public
  */