@portabletext/editor 1.12.0 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -58,11 +58,11 @@
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.16",
-    "@sanity/block-tools": "^3.64.3",
+    "@sanity/block-tools": "^3.65.1",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.12",
-    "@sanity/schema": "^3.64.3",
-    "@sanity/types": "^3.64.3",
+    "@sanity/pkg-utils": "^6.11.13",
+    "@sanity/schema": "^3.65.1",
+    "@sanity/types": "^3.65.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/debug": "^4.1.5",
@@ -72,27 +72,27 @@
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^2.1.5",
     "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint": "8.57.1",
     "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint-plugin-react-hooks": "^5.0.0",
     "jsdom": "^25.0.1",
-    "racejar": "1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13",
-    "typescript": "5.6.3",
+    "typescript": "5.7.2",
     "vite": "^5.4.11",
     "vitest": "^2.1.5",
-    "vitest-browser-react": "^0.0.3"
+    "vitest-browser-react": "^0.0.4",
+    "racejar": "1.0.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.64.3",
-    "@sanity/schema": "^3.64.3",
-    "@sanity/types": "^3.64.3",
+    "@sanity/block-tools": "^3.65.1",
+    "@sanity/schema": "^3.65.1",
+    "@sanity/types": "^3.65.1",
     "react": "^16.9 || ^17 || ^18",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"

package/src/editor/behavior/behavior.action-utils.insert-block.ts

@@ -12,7 +12,7 @@ export function insertBlock({
   schema,
 }: {
   block: Descendant
-  placement: 'auto' | 'after'
+  placement: 'auto' | 'after' | 'before'
   editor: PortableTextSlateEditor
   schema: PortableTextMemberSchemaTypes
 }) {
@@ -50,6 +50,8 @@ export function insertBlock({
         anchor: {path: [nextPath[0], 0], offset: 0},
         focus: {path: [nextPath[0], 0], offset: 0},
       })
+    } else if (placement === 'before') {
+      Transforms.insertNodes(editor, block, {at: focusBlockPath})
     } else {
       Editor.insertNode(editor, block)
     }

package/src/editor/behavior/behavior.markdown.ts

@@ -1,4 +1,3 @@
-import {isPortableTextSpan} from '@portabletext/toolkit'
 import {isPortableTextTextBlock} from '@sanity/types'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {defineBehavior} from './behavior.types'
@@ -10,6 +9,7 @@ import {
   selectionIsCollapsed,
 } from './behavior.utils'
 import {spanSelectionPointToBlockOffset} from './behavior.utils.block-offset'
+import {getBlockTextBefore} from './behavior.utilts.get-text-before'
 
 /**
  * @alpha
@@ -146,13 +146,23 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const onlyText = focusBlock.node.children.every(isPortableTextSpan)
-      const blockText = focusBlock.node.children
-        .map((child) => child.text ?? '')
-        .join('')
+      const textBefore = getBlockTextBefore({
+        value: context.value,
+        point: context.selection.focus,
+      })
+      const hrBlockOffsets = {
+        anchor: {
+          path: focusBlock.path,
+          offset: 0,
+        },
+        focus: {
+          path: focusBlock.path,
+          offset: 3,
+        },
+      }
 
-      if (onlyText && blockText === `${hrCharacter}${hrCharacter}`) {
-        return {hrObject, focusBlock, hrCharacter}
+      if (textBefore === `${hrCharacter}${hrCharacter}`) {
+        return {hrObject, focusBlock, hrCharacter, hrBlockOffsets}
       }
 
       return false
@@ -164,19 +174,15 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: hrCharacter,
         },
       ],
-      (_, {hrObject, focusBlock}) => [
+      (_, {hrObject, hrBlockOffsets}) => [
         {
           type: 'insert block object',
-          placement: 'after',
+          placement: 'before',
           blockObject: hrObject,
         },
         {
-          type: 'delete block',
-          blockPath: focusBlock.path,
-        },
-        {
-          type: 'insert text block',
-          placement: 'after',
+          type: 'delete text',
+          ...hrBlockOffsets,
         },
       ],
     ],
@@ -412,11 +418,11 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         }
       }
 
-      const looksLikeOrderedList = /^1./.test(focusSpan.node.text)
+      const looksLikeOrderedList = /^1\./.test(blockText)
       const orderedListStyle = config.orderedListStyle?.({
         schema: context.schema,
       })
-      const caretAtTheEndOfOrderedList = context.selection.focus.offset === 2
+      const caretAtTheEndOfOrderedList = blockOffset.offset === 2
 
       if (
         defaultStyle &&

package/src/editor/behavior/behavior.types.ts

@@ -105,7 +105,7 @@ export type BehaviorActionIntend =
   | BehaviorEvent
   | {
       type: 'insert block object'
-      placement: 'auto' | 'after'
+      placement: 'auto' | 'after' | 'before'
       blockObject: {
         name: string
         value?: {[prop: string]: unknown}
@@ -122,7 +122,7 @@ export type BehaviorActionIntend =
     }
   | {
       type: 'insert text block'
-      placement: 'auto' | 'after'
+      placement: 'auto' | 'after' | 'before'
       textBlock?: {
         children?: PortableTextTextBlock['children']
       }

package/src/editor/behavior/behavior.utils.get-selection-text.ts

@@ -0,0 +1,92 @@
+import {
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type PortableTextBlock,
+} from '@sanity/types'
+import type {EditorSelection} from '../../types/editor'
+import {isKeyedSegment} from './behavior.utils.is-keyed-segment'
+import {reverseSelection} from './behavior.utils.reverse-selection'
+
+export function getSelectionText({
+  value,
+  selection,
+}: {
+  value: Array<PortableTextBlock>
+  selection: NonNullable<EditorSelection>
+}): string {
+  let text = ''
+
+  if (!value || !selection) {
+    return text
+  }
+
+  const forwardSelection = selection.backward
+    ? reverseSelection(selection)
+    : selection
+
+  if (!forwardSelection) {
+    return text
+  }
+
+  for (const block of value) {
+    if (
+      isKeyedSegment(forwardSelection.anchor.path[0]) &&
+      block._key !== forwardSelection.anchor.path[0]._key
+    ) {
+      continue
+    }
+
+    if (!isPortableTextTextBlock(block)) {
+      continue
+    }
+
+    for (const child of block.children) {
+      if (isPortableTextSpan(child)) {
+        if (
+          isKeyedSegment(forwardSelection.anchor.path[2]) &&
+          child._key === forwardSelection.anchor.path[2]._key &&
+          isKeyedSegment(forwardSelection.focus.path[2]) &&
+          child._key === forwardSelection.focus.path[2]._key
+        ) {
+          text =
+            text +
+            child.text.slice(
+              forwardSelection.anchor.offset,
+              forwardSelection.focus.offset,
+            )
+
+          break
+        }
+
+        if (
+          isKeyedSegment(forwardSelection.anchor.path[2]) &&
+          child._key === forwardSelection.anchor.path[2]._key
+        ) {
+          text = text + child.text.slice(forwardSelection.anchor.offset)
+          continue
+        }
+
+        if (
+          isKeyedSegment(forwardSelection.focus.path[2]) &&
+          child._key === forwardSelection.focus.path[2]._key
+        ) {
+          text = text + child.text.slice(0, forwardSelection.focus.offset)
+          break
+        }
+
+        if (text.length > 0) {
+          text + child.text
+        }
+      }
+    }
+
+    if (
+      isKeyedSegment(forwardSelection.focus.path[0]) &&
+      block._key === forwardSelection.focus.path[0]._key
+    ) {
+      break
+    }
+  }
+
+  return text
+}

package/src/editor/behavior/behavior.utils.get-start-point.ts

@@ -0,0 +1,26 @@
+import {
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+} from '@sanity/types'
+import type {EditorSelectionPoint} from '../../types/editor'
+
+export function getStartPoint({
+  node,
+  path,
+}: {
+  node: PortableTextBlock
+  path: [KeyedSegment]
+}): EditorSelectionPoint {
+  if (isPortableTextTextBlock(node)) {
+    return {
+      path: [...path, 'children', {_key: node.children[0]._key}],
+      offset: 0,
+    }
+  }
+
+  return {
+    path,
+    offset: 0,
+  }
+}

package/src/editor/behavior/behavior.utils.is-keyed-segment.ts

@@ -0,0 +1,5 @@
+import type {KeyedSegment, PathSegment} from '@sanity/types'
+
+export function isKeyedSegment(segment: PathSegment): segment is KeyedSegment {
+  return typeof segment === 'object' && segment !== null && '_key' in segment
+}

package/src/editor/behavior/behavior.utils.reverse-selection.ts

@@ -0,0 +1,21 @@
+import type {EditorSelection} from '../../types/editor'
+
+export function reverseSelection(selection: EditorSelection): EditorSelection {
+  if (!selection) {
+    return selection
+  }
+
+  if (selection.backward) {
+    return {
+      anchor: selection.focus,
+      focus: selection.anchor,
+      backward: false,
+    }
+  }
+
+  return {
+    anchor: selection.focus,
+    focus: selection.anchor,
+    backward: true,
+  }
+}

package/src/editor/behavior/behavior.utilts.get-text-before.ts

@@ -0,0 +1,31 @@
+import type {PortableTextBlock} from '@sanity/types'
+import type {EditorSelectionPoint} from '../../types/editor'
+import {getSelectionText} from './behavior.utils.get-selection-text'
+import {getStartPoint} from './behavior.utils.get-start-point'
+import {isKeyedSegment} from './behavior.utils.is-keyed-segment'
+
+export function getBlockTextBefore({
+  value,
+  point,
+}: {
+  value: Array<PortableTextBlock>
+  point: EditorSelectionPoint
+}) {
+  const key = isKeyedSegment(point.path[0]) ? point.path[0]._key : undefined
+
+  const block = key ? value.find((block) => block._key === key) : undefined
+
+  if (!block) {
+    return ''
+  }
+
+  const startPoint = getStartPoint({node: block, path: [{_key: block._key}]})
+
+  return getSelectionText({
+    value,
+    selection: {
+      anchor: startPoint,
+      focus: point,
+    },
+  })
+}