@portabletext/editor 1.5.4 → 1.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -48,7 +48,7 @@
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
-    "react-compiler-runtime": "19.0.0-beta-9ee70a1-20241017",
+    "react-compiler-runtime": "19.0.0-beta-63b359f-20241101",
     "slate": "0.110.2",
     "slate-dom": "^0.111.0",
     "slate-react": "0.111.0",
@@ -56,55 +56,33 @@
     "xstate": "^5.18.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@jest/globals": "^29.7.0",
-    "@jest/types": "^29.6.3",
-    "@playwright/test": "1.48.2",
     "@portabletext/toolkit": "^2.0.16",
-    "@sanity/block-tools": "^3.62.3",
+    "@sanity/block-tools": "^3.63.0",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.8",
-    "@sanity/schema": "^3.62.3",
-    "@sanity/types": "^3.62.3",
-    "@sanity/ui": "^2.8.18",
-    "@sanity/util": "^3.62.3",
-    "@testing-library/dom": "^10.4.0",
+    "@sanity/pkg-utils": "^6.11.9",
+    "@sanity/schema": "^3.63.0",
+    "@sanity/types": "^3.63.0",
+    "@sanity/util": "^3.63.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
     "@types/debug": "^4.1.5",
-    "@types/express": "^4.17.21",
-    "@types/express-ws": "^3.0.5",
     "@types/lodash": "^4.17.13",
     "@types/lodash.startcase": "^4.4.9",
-    "@types/node": "^18.19.8",
-    "@types/node-ipc": "^9.2.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/ws": "~8.5.12",
-    "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "@typescript-eslint/parser": "^8.12.2",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser": "^2.1.4",
-    "babel-plugin-react-compiler": "beta",
-    "dotenv": "^16.4.5",
+    "babel-plugin-react-compiler": "19.0.0-beta-63b359f-20241101",
     "eslint": "8.57.1",
-    "eslint-plugin-react-compiler": "beta",
+    "eslint-plugin-react-compiler": "19.0.0-beta-63b359f-20241101",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "express": "^4.21.1",
-    "express-ws": "^5.0.2",
-    "jest": "^29.7.0",
-    "jest-dev-server": "^10.1.4",
-    "jest-environment-node": "^29.7.0",
     "jsdom": "^25.0.1",
-    "node-ipc": "npm:@node-ipc/compat@9.2.5",
-    "playwright": "^1.48.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13",
-    "ts-node": "^10.9.2",
     "typescript": "5.6.3",
     "vite": "^5.4.10",
     "vitest": "^2.1.4",
@@ -112,10 +90,10 @@
     "@sanity/gherkin-driver": "^0.0.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.62.3",
-    "@sanity/schema": "^3.62.3",
-    "@sanity/types": "^3.62.3",
-    "@sanity/util": "^3.62.3",
+    "@sanity/block-tools": "^3.63.0",
+    "@sanity/schema": "^3.63.0",
+    "@sanity/types": "^3.63.0",
+    "@sanity/util": "^3.63.0",
     "react": "^16.9 || ^17 || ^18",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"
@@ -135,8 +113,6 @@
     "dev": "pkg-utils watch",
     "lint:fix": "biome lint --write .",
     "test": "vitest --run",
-    "test:watch": "vitest",
-    "test:e2e-legacy": "jest --config=e2e-tests/e2e.config.ts",
-    "test:e2e-legacy:watch": "jest --config=e2e-tests/e2e.config.ts --watch"
+    "test:watch": "vitest"
   }
 }

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

@@ -30,7 +30,7 @@ export type MarkdownBehaviorsConfig = {
  * @alpha
  */
 export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
-  const automaticStyleOnSpace = defineBehavior({
+  const automaticBlockquoteOnSpace = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
       const isSpace = event.text === ' '
@@ -47,20 +47,15 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const looksLikeMarkdownHeading = /^#+/.test(focusSpan.node.text)
-      const headingStyle = config.mapHeadingStyle(
-        context.schema,
-        focusSpan.node.text.length,
-      )
-
+      const caretAtTheEndOfQuote = context.selection.focus.offset === 1
       const looksLikeMarkdownQuote = /^>/.test(focusSpan.node.text)
       const blockquoteStyle = config.mapBlockquoteStyle(context.schema)
 
-      if (looksLikeMarkdownHeading && headingStyle !== undefined) {
-        return {focusTextBlock, focusSpan, style: headingStyle}
-      }
-
-      if (looksLikeMarkdownQuote && blockquoteStyle !== undefined) {
+      if (
+        caretAtTheEndOfQuote &&
+        looksLikeMarkdownQuote &&
+        blockquoteStyle !== undefined
+      ) {
         return {focusTextBlock, focusSpan, style: blockquoteStyle}
       }
 
@@ -87,10 +82,91 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         {
           type: 'delete',
           selection: {
-            anchor: {path: focusSpan.path, offset: 0},
+            anchor: {
+              path: focusSpan.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusSpan.path,
+              offset: 2,
+            },
+          },
+        },
+      ],
+    ],
+  })
+  const automaticHeadingOnSpace = defineBehavior({
+    on: 'insert text',
+    guard: ({context, event}) => {
+      const isSpace = event.text === ' '
+
+      if (!isSpace) {
+        return false
+      }
+
+      const selectionCollapsed = selectionIsCollapsed(context)
+      const focusTextBlock = getFocusTextBlock(context)
+      const focusSpan = getFocusSpan(context)
+
+      if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+        return false
+      }
+
+      const markdownHeadingSearch = /^#+/.exec(focusSpan.node.text)
+      const headingLevel = markdownHeadingSearch
+        ? markdownHeadingSearch[0].length
+        : undefined
+      const caretAtTheEndOfHeading =
+        context.selection.focus.offset === headingLevel
+
+      if (!caretAtTheEndOfHeading) {
+        return false
+      }
+
+      const headingStyle =
+        headingLevel !== undefined
+          ? config.mapHeadingStyle(context.schema, headingLevel)
+          : undefined
+
+      if (headingLevel !== undefined && headingStyle !== undefined) {
+        return {
+          focusTextBlock,
+          focusSpan,
+          style: headingStyle,
+          level: headingLevel,
+        }
+      }
+
+      return false
+    },
+    actions: [
+      () => [
+        {
+          type: 'insert text',
+          text: ' ',
+        },
+      ],
+      (_, {focusTextBlock, focusSpan, style, level}) => [
+        {
+          type: 'unset block',
+          props: ['listItem', 'level'],
+          paths: [focusTextBlock.path],
+        },
+        {
+          type: 'set block',
+          style,
+          paths: [focusTextBlock.path],
+        },
+        {
+          type: 'delete',
+          selection: {
+            anchor: {
+              path: focusSpan.path,
+              offset: 0,
+            },
             focus: {
               path: focusSpan.path,
-              offset: focusSpan.node.text.length + 1,
+              offset: level + 1,
             },
           },
         },
@@ -108,13 +184,16 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const atTheBeginningOfBLock =
+        focusTextBlock.node.children[0]._key === focusSpan.node._key &&
+        context.selection.focus.offset === 0
+
       const defaultStyle = config.mapDefaultStyle(context.schema)
 
       if (
+        atTheBeginningOfBLock &&
         defaultStyle &&
-        focusTextBlock.node.children.length === 1 &&
-        focusTextBlock.node.style !== config.mapDefaultStyle(context.schema) &&
-        focusSpan.node.text === ''
+        focusTextBlock.node.style !== defaultStyle
       ) {
         return {defaultStyle, focusTextBlock}
       }
@@ -131,7 +210,6 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ],
     ],
   })
-
   const automaticListOnSpace = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
@@ -149,18 +227,38 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const looksLikeUnorderedList = /^-/.test(focusSpan.node.text)
+      const looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text)
       const unorderedListStyle = config.mapUnorderedListStyle(context.schema)
+      const caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1
 
-      if (looksLikeUnorderedList && unorderedListStyle !== undefined) {
-        return {focusTextBlock, focusSpan, listItem: unorderedListStyle}
+      if (
+        caretAtTheEndOfUnorderedList &&
+        looksLikeUnorderedList &&
+        unorderedListStyle !== undefined
+      ) {
+        return {
+          focusTextBlock,
+          focusSpan,
+          listItem: unorderedListStyle,
+          listItemLength: 1,
+        }
       }
 
       const looksLikeOrderedList = /^1./.test(focusSpan.node.text)
       const orderedListStyle = config.mapOrderedListStyle(context.schema)
+      const caretAtTheEndOfOrderedList = context.selection.focus.offset === 2
 
-      if (looksLikeOrderedList && orderedListStyle !== undefined) {
-        return {focusTextBlock, focusSpan, listItem: orderedListStyle}
+      if (
+        caretAtTheEndOfOrderedList &&
+        looksLikeOrderedList &&
+        orderedListStyle !== undefined
+      ) {
+        return {
+          focusTextBlock,
+          focusSpan,
+          listItem: orderedListStyle,
+          listItemLength: 2,
+        }
       }
 
       return false
@@ -172,7 +270,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, focusSpan, listItem}) => [
+      (_, {focusTextBlock, focusSpan, listItem, listItemLength}) => [
         {
           type: 'unset block',
           props: ['style'],
@@ -187,10 +285,13 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         {
           type: 'delete',
           selection: {
-            anchor: {path: focusSpan.path, offset: 0},
+            anchor: {
+              path: focusSpan.path,
+              offset: 0,
+            },
             focus: {
               path: focusSpan.path,
-              offset: focusSpan.node.text.length + 1,
+              offset: listItemLength + 1,
             },
           },
         },
@@ -199,7 +300,8 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
   })
 
   const markdownBehaviors = [
-    automaticStyleOnSpace,
+    automaticBlockquoteOnSpace,
+    automaticHeadingOnSpace,
     clearStyleOnBackspace,
     automaticListOnSpace,
   ]

package/src/editor/plugins/createWithUndoRedo.ts

@@ -23,7 +23,10 @@ import {
 import type {PortableTextSlateEditor} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {fromSlateValue} from '../../utils/values'
+import {isChangingRemotely} from '../../utils/withChanges'
 import {
+  isRedoing,
+  isUndoing,
   setIsRedoing,
   setIsUndoing,
   withRedoing,
@@ -115,6 +118,25 @@ export function createWithUndoRedo(
         apply(op)
         return
       }
+
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(op)
+        return
+      }
+
+      /**
+       * We don't want to run any side effects when the editor is undoing or
+       * redoing operations.
+       */
+      if (isUndoing(editor) || isRedoing(editor)) {
+        apply(op)
+        return
+      }
+
       const {operations, history} = editor
       const {undos} = history
       const step = undos[undos.length - 1]

package/src/utils/ucs2Indices.ts

@@ -1,67 +0,0 @@
-import type {Patch} from '@sanity/diff-match-patch'
-
-/**
- * Takes a `patches` array as produced by diff-match-patch and adjusts the
- * `start1` and `start2` properties so that they refer to UCS-2 index instead
- * of a UTF-8 index.
- *
- * @param patches - The patches to adjust
- * @param base - The base string to use for counting bytes
- * @returns A new array of patches with adjusted indicies
- * @beta
- */
-export function adjustIndiciesToUcs2(patches: Patch[], base: string): Patch[] {
-  let byteOffset = 0
-  let idx = 0 // index into the input.
-
-  function advanceTo(target: number) {
-    while (byteOffset < target) {
-      const codePoint = base.codePointAt(idx)
-      if (typeof codePoint === 'undefined') {
-        // Reached the end of the base string - the indicies won't be correct,
-        // but we also cannot advance any further to find a closer index.
-        return idx
-      }
-
-      byteOffset += utf8len(codePoint)
-
-      // This is encoded as a surrogate pair.
-      if (codePoint > 0xffff) {
-        idx += 2
-      } else {
-        idx += 1
-      }
-    }
-
-    // Theoretically, we should have reached target - however, due to differences in
-    // `base` from the string that the patch was originally based upon, occurences
-    // _can_ happen where we go beyond the target due to surrogate pairs or similar.
-    // In the PTE, this is okayish - best effort matching is good enough.
-    return idx
-  }
-
-  const adjusted: Patch[] = []
-  for (const patch of patches) {
-    adjusted.push({
-      diffs: patch.diffs.map((diff) => [...diff]),
-      start1: advanceTo(patch.start1),
-      start2: advanceTo(patch.start2),
-      utf8Start1: patch.utf8Start1,
-      utf8Start2: patch.utf8Start2,
-      length1: patch.length1,
-      length2: patch.length2,
-      utf8Length1: patch.utf8Length1,
-      utf8Length2: patch.utf8Length2,
-    })
-  }
-
-  return adjusted
-}
-
-function utf8len(codePoint: number): 1 | 2 | 3 | 4 {
-  // See table at https://en.wikipedia.org/wiki/UTF-8
-  if (codePoint <= 0x007f) return 1
-  if (codePoint <= 0x07ff) return 2
-  if (codePoint <= 0xffff) return 3
-  return 4
-}