@portabletext/editor 1.15.3 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.15.3",
+  "version": "1.16.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -40,7 +40,7 @@
       "default": "./lib/behaviors/index.js"
     },
     "./selectors": {
-      "source": "./src/selectors/index.ts",
+      "source": "./src/selectors/_exports/index.ts",
       "import": "./lib/selectors/index.js",
       "require": "./lib/selectors/index.cjs",
       "default": "./lib/selectors/index.js"
@@ -70,18 +70,18 @@
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.16",
-    "@sanity/block-tools": "^3.66.1",
+    "@sanity/block-tools": "^3.67.1",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.15",
-    "@sanity/schema": "^3.66.1",
-    "@sanity/types": "^3.66.1",
+    "@sanity/pkg-utils": "^6.12.0",
+    "@sanity/schema": "^3.67.1",
+    "@sanity/types": "^3.67.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/debug": "^4.1.5",
     "@types/lodash": "^4.17.13",
     "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -100,12 +100,12 @@
     "vite": "^6.0.3",
     "vitest": "^2.1.8",
     "vitest-browser-react": "^0.0.4",
-    "racejar": "1.1.0"
+    "racejar": "1.1.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.66.1",
-    "@sanity/schema": "^3.66.1",
-    "@sanity/types": "^3.66.1",
+    "@sanity/block-tools": "^3.67.1",
+    "@sanity/schema": "^3.67.1",
+    "@sanity/types": "^3.67.1",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"

package/src/behaviors/behavior.code-editor.ts

@@ -1,8 +1,4 @@
-import {
-  getFirstBlock,
-  getLastBlock,
-  getSelectedBlocks,
-} from '../selectors/selectors'
+import * as selectors from '../selectors'
 import {isHotkey} from '../utils/is-hotkey'
 import {defineBehavior} from './behavior.types'
 
@@ -26,8 +22,8 @@ export function createCodeEditorBehaviors(config: CodeEditorBehaviorsConfig) {
           config.moveBlockUpShortcut,
           event.keyboardEvent,
         )
-        const firstBlock = getFirstBlock({context})
-        const selectedBlocks = getSelectedBlocks({context})
+        const firstBlock = selectors.getFirstBlock({context})
+        const selectedBlocks = selectors.getSelectedBlocks({context})
         const blocksAbove =
           firstBlock?.node._key !== selectedBlocks[0]?.node._key
 
@@ -52,8 +48,8 @@ export function createCodeEditorBehaviors(config: CodeEditorBehaviorsConfig) {
           config.moveBlockDownShortcut,
           event.keyboardEvent,
         )
-        const lastBlock = getLastBlock({context})
-        const selectedBlocks = getSelectedBlocks({context})
+        const lastBlock = selectors.getLastBlock({context})
+        const selectedBlocks = selectors.getSelectedBlocks({context})
         const blocksBelow =
           lastBlock?.node._key !==
           selectedBlocks[selectedBlocks.length - 1]?.node._key

package/src/behaviors/behavior.core.block-objects.ts

@@ -1,12 +1,6 @@
 import {isPortableTextTextBlock} from '@sanity/types'
 import {isEmptyTextBlock} from '../editor/utils/utils'
-import {
-  getFocusBlockObject,
-  getFocusTextBlock,
-  getNextBlock,
-  getPreviousBlock,
-  selectionIsCollapsed,
-} from '../selectors/selectors'
+import * as selectors from '../selectors'
 import {isHotkey} from '../utils/is-hotkey'
 import {defineBehavior} from './behavior.types'
 
@@ -14,8 +8,8 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
   on: 'key.down',
   guard: ({context, event}) => {
     const isArrowDown = isHotkey('ArrowDown', event.keyboardEvent)
-    const focusBlockObject = getFocusBlockObject({context})
-    const nextBlock = getNextBlock({context})
+    const focusBlockObject = selectors.getFocusBlockObject({context})
+    const nextBlock = selectors.getNextBlock({context})
 
     return isArrowDown && focusBlockObject && !nextBlock
   },
@@ -26,8 +20,8 @@ const arrowUpOnLonelyBlockObject = defineBehavior({
   on: 'key.down',
   guard: ({context, event}) => {
     const isArrowUp = isHotkey('ArrowUp', event.keyboardEvent)
-    const focusBlockObject = getFocusBlockObject({context})
-    const previousBlock = getPreviousBlock({context})
+    const focusBlockObject = selectors.getFocusBlockObject({context})
+    const previousBlock = selectors.getPreviousBlock({context})
 
     return isArrowUp && focusBlockObject && !previousBlock
   },
@@ -42,8 +36,8 @@ const arrowUpOnLonelyBlockObject = defineBehavior({
 const breakingBlockObject = defineBehavior({
   on: 'insert.break',
   guard: ({context}) => {
-    const focusBlockObject = getFocusBlockObject({context})
-    const collapsedSelection = selectionIsCollapsed({context})
+    const focusBlockObject = selectors.getFocusBlockObject({context})
+    const collapsedSelection = selectors.isSelectionCollapsed({context})
 
     return collapsedSelection && focusBlockObject !== undefined
   },
@@ -53,9 +47,9 @@ const breakingBlockObject = defineBehavior({
 const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
   on: 'delete.backward',
   guard: ({context}) => {
-    const focusTextBlock = getFocusTextBlock({context})
-    const selectionCollapsed = selectionIsCollapsed({context})
-    const previousBlock = getPreviousBlock({context})
+    const focusTextBlock = selectors.getFocusTextBlock({context})
+    const selectionCollapsed = selectors.isSelectionCollapsed({context})
+    const previousBlock = selectors.getPreviousBlock({context})
 
     if (!focusTextBlock || !selectionCollapsed || !previousBlock) {
       return false
@@ -90,9 +84,9 @@ const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
 const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
   on: 'delete.forward',
   guard: ({context}) => {
-    const focusTextBlock = getFocusTextBlock({context})
-    const selectionCollapsed = selectionIsCollapsed({context})
-    const nextBlock = getNextBlock({context})
+    const focusTextBlock = selectors.getFocusTextBlock({context})
+    const selectionCollapsed = selectors.isSelectionCollapsed({context})
+    const nextBlock = selectors.getNextBlock({context})
 
     if (!focusTextBlock || !selectionCollapsed || !nextBlock) {
       return false

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

@@ -1,12 +1,6 @@
 import {createGuards} from '../behavior-actions/behavior.guards'
 import {isEmptyTextBlock} from '../editor/utils/utils'
-import {
-  getFocusListBlock,
-  getFocusSpan,
-  getFocusTextBlock,
-  getSelectedBlocks,
-  selectionIsCollapsed,
-} from '../selectors/selectors'
+import * as selectors from '../selectors'
 import {isHotkey} from '../utils/is-hotkey'
 import {defineBehavior} from './behavior.types'
 
@@ -15,9 +9,9 @@ const MAX_LIST_LEVEL = 10
 const clearListOnBackspace = defineBehavior({
   on: 'delete.backward',
   guard: ({context}) => {
-    const selectionCollapsed = selectionIsCollapsed({context})
-    const focusTextBlock = getFocusTextBlock({context})
-    const focusSpan = getFocusSpan({context})
+    const selectionCollapsed = selectors.isSelectionCollapsed({context})
+    const focusTextBlock = selectors.getFocusTextBlock({context})
+    const focusSpan = selectors.getFocusSpan({context})
 
     if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
       return false
@@ -47,9 +41,9 @@ const clearListOnBackspace = defineBehavior({
 const unindentListOnBackspace = defineBehavior({
   on: 'delete.backward',
   guard: ({context}) => {
-    const selectionCollapsed = selectionIsCollapsed({context})
-    const focusTextBlock = getFocusTextBlock({context})
-    const focusSpan = getFocusSpan({context})
+    const selectionCollapsed = selectors.isSelectionCollapsed({context})
+    const focusTextBlock = selectors.getFocusTextBlock({context})
+    const focusSpan = selectors.getFocusSpan({context})
 
     if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
       return false
@@ -83,8 +77,8 @@ const unindentListOnBackspace = defineBehavior({
 const clearListOnEnter = defineBehavior({
   on: 'insert.break',
   guard: ({context}) => {
-    const selectionCollapsed = selectionIsCollapsed({context})
-    const focusListBlock = getFocusListBlock({context})
+    const selectionCollapsed = selectors.isSelectionCollapsed({context})
+    const focusListBlock = selectors.getFocusListBlock({context})
 
     if (
       !selectionCollapsed ||
@@ -116,7 +110,7 @@ const indentListOnTab = defineBehavior({
       return false
     }
 
-    const selectedBlocks = getSelectedBlocks({context})
+    const selectedBlocks = selectors.getSelectedBlocks({context})
     const guards = createGuards(context)
     const selectedListBlocks = selectedBlocks.flatMap((block) =>
       guards.isListBlock(block.node)
@@ -157,7 +151,7 @@ const unindentListOnShiftTab = defineBehavior({
       return false
     }
 
-    const selectedBlocks = getSelectedBlocks({context})
+    const selectedBlocks = selectors.getSelectedBlocks({context})
     const guards = createGuards(context)
     const selectedListBlocks = selectedBlocks.flatMap((block) =>
       guards.isListBlock(block.node)

package/src/behaviors/behavior.links.ts

@@ -1,5 +1,5 @@
 import type {EditorSchema} from '../editor/define-schema'
-import {getFocusSpan, selectionIsCollapsed} from '../selectors/selectors'
+import * as selectors from '../selectors'
 import {defineBehavior} from './behavior.types'
 
 /**
@@ -19,7 +19,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   const pasteLinkOnSelection = defineBehavior({
     on: 'paste',
     guard: ({context, event}) => {
-      const selectionCollapsed = selectionIsCollapsed({context})
+      const selectionCollapsed = selectors.isSelectionCollapsed({context})
       const text = event.data.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
@@ -45,8 +45,8 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   const pasteLinkAtCaret = defineBehavior({
     on: 'paste',
     guard: ({context, event}) => {
-      const focusSpan = getFocusSpan({context})
-      const selectionCollapsed = selectionIsCollapsed({context})
+      const focusSpan = selectors.getFocusSpan({context})
+      const selectionCollapsed = selectors.isSelectionCollapsed({context})
 
       if (!focusSpan || !selectionCollapsed) {
         return false

package/src/behaviors/behavior.markdown.ts

@@ -2,13 +2,8 @@ import {isPortableTextTextBlock} from '@sanity/types'
 import type {EditorSchema} from '../editor/define-schema'
 import {getTextBlockText} from '../editor/utils/utils'
 import {spanSelectionPointToBlockOffset} from '../editor/utils/utils.block-offset'
+import * as selectors from '../selectors'
 import {getBlockTextBefore} from '../selectors/selector.get-text-before'
-import {
-  getFocusBlock,
-  getFocusSpan,
-  getFocusTextBlock,
-  selectionIsCollapsed,
-} from '../selectors/selectors'
 import {defineBehavior} from './behavior.types'
 
 /**
@@ -41,9 +36,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const selectionCollapsed = selectionIsCollapsed({context})
-      const focusTextBlock = getFocusTextBlock({context})
-      const focusSpan = getFocusSpan({context})
+      const selectionCollapsed = selectors.isSelectionCollapsed({context})
+      const focusTextBlock = selectors.getFocusTextBlock({context})
+      const focusSpan = selectors.getFocusSpan({context})
 
       if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
         return false
@@ -129,8 +124,8 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const hrObject = config.horizontalRuleObject?.(context)
-      const focusBlock = getFocusTextBlock({context})
-      const selectionCollapsed = selectionIsCollapsed({context})
+      const focusBlock = selectors.getFocusTextBlock({context})
+      const selectionCollapsed = selectors.isSelectionCollapsed({context})
 
       if (!hrObject || !focusBlock || !selectionCollapsed) {
         return false
@@ -181,7 +176,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       const hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm
       const hrCharacters = text.match(hrRegExp)?.[0]
       const hrObject = config.horizontalRuleObject?.(context)
-      const focusBlock = getFocusBlock({context})
+      const focusBlock = selectors.getFocusBlock({context})
 
       if (!hrCharacters || !hrObject || !focusBlock) {
         return false
@@ -229,9 +224,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const selectionCollapsed = selectionIsCollapsed({context})
-      const focusTextBlock = getFocusTextBlock({context})
-      const focusSpan = getFocusSpan({context})
+      const selectionCollapsed = selectors.isSelectionCollapsed({context})
+      const focusTextBlock = selectors.getFocusTextBlock({context})
+      const focusSpan = selectors.getFocusSpan({context})
 
       if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
         return false
@@ -309,9 +304,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
   const clearStyleOnBackspace = defineBehavior({
     on: 'delete.backward',
     guard: ({context}) => {
-      const selectionCollapsed = selectionIsCollapsed({context})
-      const focusTextBlock = getFocusTextBlock({context})
-      const focusSpan = getFocusSpan({context})
+      const selectionCollapsed = selectors.isSelectionCollapsed({context})
+      const focusTextBlock = selectors.getFocusTextBlock({context})
+      const focusSpan = selectors.getFocusSpan({context})
 
       if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
         return false
@@ -352,9 +347,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const selectionCollapsed = selectionIsCollapsed({context})
-      const focusTextBlock = getFocusTextBlock({context})
-      const focusSpan = getFocusSpan({context})
+      const selectionCollapsed = selectors.isSelectionCollapsed({context})
+      const focusTextBlock = selectors.getFocusTextBlock({context})
+      const focusSpan = selectors.getFocusSpan({context})
 
       if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
         return false

package/src/editor/Editable.tsx

@@ -159,7 +159,9 @@ export const PortableTextEditable = forwardRef<
   const rangeDecorationsRef = useRef(rangeDecorations)
 
   const editorActor = useContext(EditorActorContext)
-  const readOnly = useSelector(editorActor, (s) => s.context.readOnly)
+  const readOnly = useSelector(editorActor, (s) =>
+    s.matches({'edit mode': 'read only'}),
+  )
   const schemaTypes = useSelector(editorActor, (s) => s.context.schema)
   const slateEditor = useSlate()
 
@@ -366,6 +368,7 @@ export const PortableTextEditable = forwardRef<
   // Restore selection from props when the editor has been initialized properly with it's value
   useEffect(() => {
     const onReady = editorActor.on('ready', () => {
+      syncRangeDecorations()
       restoreSelectionFromProps()
     })
     const onInvalidValue = editorActor.on('invalid value', () => {
@@ -380,7 +383,7 @@ export const PortableTextEditable = forwardRef<
       onInvalidValue.unsubscribe()
       onValueChanged.unsubscribe()
     }
-  }, [editorActor, restoreSelectionFromProps])
+  }, [editorActor, restoreSelectionFromProps, syncRangeDecorations])
 
   // Restore selection from props when it changes
   useEffect(() => {
@@ -407,9 +410,13 @@ export const PortableTextEditable = forwardRef<
 
   // Sync range decorations after an operation is applied
   useEffect(() => {
-    const teardown = withSyncRangeDecorations(slateEditor, syncRangeDecorations)
+    const teardown = withSyncRangeDecorations({
+      editorActor,
+      slateEditor,
+      syncRangeDecorations,
+    })
     return () => teardown()
-  }, [slateEditor, syncRangeDecorations])
+  }, [editorActor, slateEditor, syncRangeDecorations])
 
   // Handle from props onCopy function
   const handleCopy = useCallback(

package/src/editor/PortableTextEditor.tsx

@@ -238,8 +238,6 @@ export class PortableTextEditor extends Component<
         />
         <Synchronizer
           editorActor={this.editor._internal.editorActor}
-          getValue={this.editor._internal.editable.getValue}
-          portableTextEditor={this}
           slateEditor={this.editor._internal.slateEditor.instance}
         />
         <EditorActorContext.Provider value={this.editor._internal.editorActor}>
@@ -496,7 +494,8 @@ export function RouteEventsToChanges(props: {
         case 'list item.toggle':
         case 'style.toggle':
         case 'patches':
-        case 'readOnly toggled':
+        case 'editable':
+        case 'read only':
           break
         default:
           handleChange(event)

package/src/editor/{hooks/useSyncValue.test.tsx → __tests__/sync-value.test.tsx}

@@ -1,11 +1,8 @@
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
-import {
-  PortableTextEditorTester,
-  schemaType,
-} from '../__tests__/PortableTextEditorTester'
 import {PortableTextEditor} from '../PortableTextEditor'
+import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
 const initialValue = [
   {
@@ -52,6 +49,17 @@ describe('useSyncValue', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     rerender(
       <PortableTextEditorTester
         onChange={onChange}
@@ -60,6 +68,7 @@ describe('useSyncValue', () => {
         value={syncedValue}
       />,
     )
+
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual(
@@ -68,6 +77,7 @@ describe('useSyncValue', () => {
       }
     })
   })
+
   it('replaces span nodes with different keys inside the same children array', async () => {
     const editorRef: RefObject<PortableTextEditor | null> = createRef()
     const onChange = vi.fn()
@@ -95,6 +105,17 @@ describe('useSyncValue', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     rerender(
       <PortableTextEditorTester
         onChange={onChange}
@@ -103,27 +124,25 @@ describe('useSyncValue', () => {
         value={syncedValue}
       />,
     )
+
     await waitFor(() => {
       if (editorRef.current) {
-        expect(PortableTextEditor.getValue(editorRef.current))
-          .toMatchInlineSnapshot(`
-          [
-            {
-              "_key": "77071c3af231",
-              "_type": "myTestBlockType",
-              "children": [
-                {
-                  "_key": "c001f0e92c1f0__NEW_KEY_YA!",
-                  "_type": "span",
-                  "marks": [],
-                  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
-                },
-              ],
-              "markDefs": [],
-              "style": "normal",
-            },
-          ]
-        `)
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {
+            _key: '77071c3af231',
+            _type: 'myTestBlockType',
+            children: [
+              {
+                _key: 'c001f0e92c1f0__NEW_KEY_YA!',
+                _type: 'span',
+                marks: [],
+                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
       }
     })
   })