@portabletext/editor 2.6.10-canary.0 → 2.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.6.10-canary.0",
+  "version": "2.7.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,8 +80,8 @@
     "slate-react": "0.117.4",
     "xstate": "^5.21.0",
     "@portabletext/block-tools": "^3.5.1",
-    "@portabletext/patches": "^1.1.8",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
+    "@portabletext/patches": "^1.1.8",
     "@portabletext/schema": "^1.2.0"
   },
   "devDependencies": {
@@ -95,19 +95,19 @@
     "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.39.1",
-    "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-istanbul": "^3.2.4",
     "babel-plugin-react-compiler": "19.1.0-rc.3",
-    "eslint": "8.57.1",
+    "eslint": "^9.34.0",
+    "eslint-formatter-gha": "^1.6.0",
     "eslint-plugin-react-hooks": "6.0.0-rc.2",
     "jsdom": "^26.0.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "rxjs": "^7.8.2",
     "typescript": "5.9.2",
+    "typescript-eslint": "^8.41.0",
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
@@ -131,7 +131,7 @@
   "scripts": {
     "build": "pkg-utils build --strict --check --clean",
     "check:lint": "biome lint .",
-    "check:react-compiler": "eslint --cache --no-inline-config --no-eslintrc --ignore-pattern '**/__tests__/**' --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-hooks --rule 'react-hooks/rules-of-hooks: [error]' --rule 'react-hooks/exhaustive-deps: [error]' src",
+    "check:react-compiler": "eslint --cache .",
     "check:types": "tsc",
     "check:types:watch": "tsc --watch",
     "clean": "del .turbo && del lib && del node_modules",

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

@@ -73,16 +73,17 @@ export function RenderBlockObject(props: {
         draggable={!props.readOnly}
       >
         {props.renderBlock && legacySchemaType ? (
-          props.renderBlock({
-            children: <RenderDefaultBlockObject blockObject={blockObject} />,
-            editorElementRef: blockObjectRef,
-            focused,
-            path: [{_key: props.element._key}],
-            schemaType: legacySchemaType,
-            selected,
-            type: legacySchemaType,
-            value: blockObject,
-          })
+          <props.renderBlock
+            editorElementRef={blockObjectRef}
+            focused={focused}
+            path={[{_key: props.element._key}]}
+            schemaType={legacySchemaType}
+            selected={selected}
+            type={legacySchemaType}
+            value={blockObject}
+          >
+            <RenderDefaultBlockObject blockObject={blockObject} />
+          </props.renderBlock>
         ) : (
           <RenderDefaultBlockObject blockObject={blockObject} />
         )}

package/src/editor/components/render-inline-object.tsx

@@ -79,17 +79,18 @@ export function RenderInlineObject(props: {
       {props.children}
       <span ref={inlineObjectRef} style={{display: 'inline-block'}}>
         {props.renderChild && block && legacySchemaType ? (
-          props.renderChild({
-            annotations: [],
-            children: <RenderDefaultInlineObject inlineObject={inlineObject} />,
-            editorElementRef: inlineObjectRef,
-            selected,
-            focused,
-            path: [{_key: block._key}, 'children', {_key: props.element._key}],
-            schemaType: legacySchemaType,
-            value: inlineObject,
-            type: legacySchemaType,
-          })
+          <props.renderChild
+            annotations={[]}
+            editorElementRef={inlineObjectRef}
+            selected={selected}
+            focused={focused}
+            path={[{_key: block._key}, 'children', {_key: props.element._key}]}
+            schemaType={legacySchemaType}
+            value={inlineObject}
+            type={legacySchemaType}
+          >
+            <RenderDefaultInlineObject inlineObject={inlineObject} />
+          </props.renderChild>
         ) : (
           <RenderDefaultInlineObject inlineObject={inlineObject} />
         )}

package/src/editor/components/render-span.tsx

@@ -1,24 +1,21 @@
+import {isTextBlock} from '@portabletext/schema'
 import {useSelector} from '@xstate/react'
-import {isEqual, uniq} from 'lodash'
+import {uniq} from 'lodash'
+import {useContext, useMemo, useRef, type ReactElement} from 'react'
+import {useSlateStatic, type RenderLeafProps} from 'slate-react'
 import {
-  startTransition,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactElement,
-} from 'react'
-import {useSelected, useSlateStatic, type RenderLeafProps} from 'slate-react'
+  getFocusSpan,
+  isOverlappingSelection,
+  isSelectionCollapsed,
+} from '../../selectors'
 import type {
+  EditorSelection,
   RenderAnnotationFunction,
   RenderChildFunction,
   RenderDecoratorFunction,
 } from '../../types/editor'
 import {EditorActorContext} from '../editor-actor-context'
-import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
-import {PortableTextEditor} from '../PortableTextEditor'
+import {getEditorSnapshot} from '../editor-selector'
 
 export interface RenderSpanProps extends RenderLeafProps {
   children: ReactElement<any>
@@ -35,10 +32,66 @@ export function RenderSpan(props: RenderSpanProps) {
     s.context.getLegacySchema(),
   )
   const spanRef = useRef<HTMLElement>(null)
-  const portableTextEditor = usePortableTextEditor()
-  const blockSelected = useSelected()
-  const [focused, setFocused] = useState(false)
-  const [selected, setSelected] = useState(false)
+
+  /**
+   * A span is considered focused if the selection is collapsed and the caret
+   * is inside the span.
+   */
+  const focused = useSelector(editorActor, (editorActorSnapshot) => {
+    const snapshot = getEditorSnapshot({
+      editorActorSnapshot,
+      slateEditorInstance: slateEditor,
+    })
+
+    if (!snapshot.context.selection) {
+      return false
+    }
+
+    if (!isSelectionCollapsed(snapshot)) {
+      return false
+    }
+
+    const focusedSpan = getFocusSpan(snapshot)
+
+    if (!focusedSpan) {
+      return false
+    }
+
+    return focusedSpan.node._key === props.leaf._key
+  })
+
+  /**
+   * A span is considered selected if editor selection is overlapping with the
+   * span selection points.
+   */
+  const selected = useSelector(editorActor, (editorActorSnapshot) => {
+    const snapshot = getEditorSnapshot({
+      editorActorSnapshot,
+      slateEditorInstance: slateEditor,
+    })
+
+    if (!snapshot.context.selection) {
+      return false
+    }
+
+    const parent = props.children.props.parent
+    const block =
+      parent && isTextBlock(snapshot.context, parent) ? parent : undefined
+    const spanSelection: EditorSelection = block
+      ? {
+          anchor: {
+            path: [{_key: block._key}, 'children', {_key: props.leaf._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: block._key}, 'children', {_key: props.leaf._key}],
+            offset: props.leaf.text.length,
+          },
+        }
+      : null
+
+    return isOverlappingSelection(spanSelection)(snapshot)
+  })
 
   const parent = props.children.props.parent
   const block = parent && slateEditor.isTextBlock(parent) ? parent : undefined
@@ -75,106 +128,6 @@ export function RenderSpan(props: RenderSpanProps) {
     return []
   })
 
-  const shouldTrackSelectionAndFocus =
-    annotationMarkDefs.length > 0 && blockSelected
-
-  useEffect(() => {
-    if (!shouldTrackSelectionAndFocus) {
-      setFocused(false)
-      return
-    }
-
-    const sel = PortableTextEditor.getSelection(portableTextEditor)
-
-    if (
-      sel &&
-      isEqual(sel.focus.path, path) &&
-      PortableTextEditor.isCollapsedSelection(portableTextEditor)
-    ) {
-      startTransition(() => {
-        setFocused(true)
-      })
-    }
-  }, [shouldTrackSelectionAndFocus, path, portableTextEditor])
-
-  // Function to check if this leaf is currently inside the user's text selection
-  const setSelectedFromRange = useCallback(() => {
-    if (!shouldTrackSelectionAndFocus) {
-      return
-    }
-
-    const winSelection = window.getSelection()
-
-    if (!winSelection) {
-      setSelected(false)
-      return
-    }
-
-    if (winSelection && winSelection.rangeCount > 0) {
-      const range = winSelection.getRangeAt(0)
-
-      if (spanRef.current && range.intersectsNode(spanRef.current)) {
-        setSelected(true)
-      } else {
-        setSelected(false)
-      }
-    } else {
-      setSelected(false)
-    }
-  }, [shouldTrackSelectionAndFocus])
-
-  useEffect(() => {
-    if (!shouldTrackSelectionAndFocus) {
-      return undefined
-    }
-
-    const onBlur = editorActor.on('blurred', () => {
-      setFocused(false)
-      setSelected(false)
-    })
-
-    const onFocus = editorActor.on('focused', () => {
-      const sel = PortableTextEditor.getSelection(portableTextEditor)
-
-      if (
-        sel &&
-        isEqual(sel.focus.path, path) &&
-        PortableTextEditor.isCollapsedSelection(portableTextEditor)
-      ) {
-        setFocused(true)
-      }
-
-      setSelectedFromRange()
-    })
-
-    const onSelection = editorActor.on('selection', (event) => {
-      if (
-        event.selection &&
-        isEqual(event.selection.focus.path, path) &&
-        PortableTextEditor.isCollapsedSelection(portableTextEditor)
-      ) {
-        setFocused(true)
-      } else {
-        setFocused(false)
-      }
-      setSelectedFromRange()
-    })
-
-    return () => {
-      onBlur.unsubscribe()
-      onFocus.unsubscribe()
-      onSelection.unsubscribe()
-    }
-  }, [
-    editorActor,
-    path,
-    portableTextEditor,
-    setSelectedFromRange,
-    shouldTrackSelectionAndFocus,
-  ])
-
-  useEffect(() => setSelectedFromRange(), [setSelectedFromRange])
-
   let children = props.children
 
   /**
@@ -186,16 +139,19 @@ export function RenderSpan(props: RenderSpanProps) {
     )
 
     if (path && legacyDecoratorSchemaType && props.renderDecorator) {
-      children = props.renderDecorator({
-        children: children,
-        editorElementRef: spanRef,
-        focused,
-        path,
-        selected,
-        schemaType: legacyDecoratorSchemaType,
-        value: mark,
-        type: legacyDecoratorSchemaType,
-      })
+      children = (
+        <props.renderDecorator
+          editorElementRef={spanRef}
+          focused={focused}
+          path={path}
+          selected={selected}
+          schemaType={legacyDecoratorSchemaType}
+          value={mark}
+          type={legacyDecoratorSchemaType}
+        >
+          {children}
+        </props.renderDecorator>
+      )
     }
   }
 
@@ -210,17 +166,18 @@ export function RenderSpan(props: RenderSpanProps) {
       if (block && path && props.renderAnnotation) {
         children = (
           <span ref={spanRef}>
-            {props.renderAnnotation({
-              block,
-              children: children,
-              editorElementRef: spanRef,
-              focused,
-              path,
-              selected,
-              schemaType: legacyAnnotationSchemaType,
-              value: annotationMarkDef,
-              type: legacyAnnotationSchemaType,
-            })}
+            <props.renderAnnotation
+              block={block}
+              editorElementRef={spanRef}
+              focused={focused}
+              path={path}
+              selected={selected}
+              schemaType={legacyAnnotationSchemaType}
+              value={annotationMarkDef}
+              type={legacyAnnotationSchemaType}
+            >
+              {children}
+            </props.renderAnnotation>
           </span>
         )
       } else {
@@ -238,17 +195,20 @@ export function RenderSpan(props: RenderSpanProps) {
     ) // Ensure object equality
 
     if (child) {
-      children = props.renderChild({
-        annotations: annotationMarkDefs,
-        children: children,
-        editorElementRef: spanRef,
-        focused,
-        path,
-        schemaType: legacySchema.span,
-        selected,
-        value: child,
-        type: legacySchema.span,
-      })
+      children = (
+        <props.renderChild
+          annotations={annotationMarkDefs}
+          editorElementRef={spanRef}
+          focused={focused}
+          path={path}
+          schemaType={legacySchema.span}
+          selected={selected}
+          value={child}
+          type={legacySchema.span}
+        >
+          {children}
+        </props.renderChild>
+      )
     }
   }
 

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

@@ -60,16 +60,19 @@ export function RenderTextBlock(props: {
         : undefined
 
     if (legacyStyleSchemaType) {
-      children = props.renderStyle({
-        block: props.textBlock,
-        children,
-        editorElementRef: blockRef,
-        focused,
-        path: [{_key: props.textBlock._key}],
-        schemaType: legacyStyleSchemaType,
-        selected,
-        value: props.textBlock.style,
-      })
+      children = (
+        <props.renderStyle
+          block={props.textBlock}
+          editorElementRef={blockRef}
+          focused={focused}
+          path={[{_key: props.textBlock._key}]}
+          schemaType={legacyStyleSchemaType}
+          selected={selected}
+          value={props.textBlock.style}
+        >
+          {children}
+        </props.renderStyle>
+      )
     } else {
       console.error(
         `Unable to find Schema type for text block style ${props.textBlock.style}`,
@@ -83,17 +86,20 @@ export function RenderTextBlock(props: {
     )
 
     if (legacyListItemSchemaType) {
-      children = props.renderListItem({
-        block: props.textBlock,
-        children,
-        editorElementRef: blockRef,
-        focused,
-        level: props.textBlock.level ?? 1,
-        path: [{_key: props.textBlock._key}],
-        selected,
-        value: props.textBlock.listItem,
-        schemaType: legacyListItemSchemaType,
-      })
+      children = (
+        <props.renderListItem
+          block={props.textBlock}
+          editorElementRef={blockRef}
+          focused={focused}
+          level={props.textBlock.level ?? 1}
+          path={[{_key: props.textBlock._key}]}
+          selected={selected}
+          value={props.textBlock.listItem}
+          schemaType={legacyListItemSchemaType}
+        >
+          {children}
+        </props.renderListItem>
+      )
     } else {
       console.error(
         `Unable to find Schema type for text block list item ${props.textBlock.listItem}`,
@@ -145,21 +151,24 @@ export function RenderTextBlock(props: {
     >
       {dragPositionBlock === 'start' ? <DropIndicator /> : null}
       <div ref={blockRef}>
-        {props.renderBlock
-          ? props.renderBlock({
-              children,
-              editorElementRef: blockRef,
-              focused,
-              level: props.textBlock.level,
-              listItem: props.textBlock.listItem,
-              path: [{_key: props.textBlock._key}],
-              selected,
-              schemaType: props.legacySchema.block,
-              style: props.textBlock.style,
-              type: props.legacySchema.block,
-              value: props.textBlock,
-            })
-          : children}
+        {props.renderBlock ? (
+          <props.renderBlock
+            editorElementRef={blockRef}
+            focused={focused}
+            level={props.textBlock.level}
+            listItem={props.textBlock.listItem}
+            path={[{_key: props.textBlock._key}]}
+            selected={selected}
+            schemaType={props.legacySchema.block}
+            style={props.textBlock.style}
+            type={props.legacySchema.block}
+            value={props.textBlock}
+          >
+            {children}
+          </props.renderBlock>
+        ) : (
+          children
+        )}
       </div>
       {dragPositionBlock === 'end' ? <DropIndicator /> : null}
     </div>

package/src/editor/editor-provider.tsx

@@ -1,9 +1,8 @@
 import type React from 'react'
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
 import {Slate} from 'slate-react'
 import type {EditorConfig} from '../editor'
 import {stopActor} from '../internal-utils/stop-actor'
-import useConstant from '../internal-utils/use-constant'
 import {createInternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {EditorContext} from './editor-context'
@@ -42,7 +41,7 @@ export type EditorProviderProps = {
  * @group Components
  */
 export function EditorProvider(props: EditorProviderProps) {
-  const {internalEditor, portableTextEditor} = useConstant(() => {
+  const [{internalEditor, portableTextEditor}] = useState(() => {
     const internalEditor = createInternalEditor(props.initialConfig)
     const portableTextEditor = new PortableTextEditor({
       editor: internalEditor.editor,

package/src/selectors/selector.is-overlapping-selection.test.ts

@@ -170,6 +170,122 @@ describe(isOverlappingSelection.name, () => {
     ).toBe(false)
   })
 
+  test('partial span selection', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 3},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 2},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 1},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('expanded selection at the end edge of span', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 3},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 3},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 1},
+        }),
+      ),
+    ).toBe(false)
+  })
+
+  test('collapsed selection at the end edge of span', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 3},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 3},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 3},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('expanded selection at the start edge of span', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 3},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k3'}], offset: 3},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 0},
+        }),
+      ),
+    ).toBe(false)
+  })
+
+  test('collapsed selection at the start edge of span', () => {
+    expect(
+      isOverlappingSelection({
+        anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 0},
+        focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 3},
+      })(
+        snapshot({
+          anchor: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 0},
+          focus: {path: [{_key: 'k1'}, 'children', {_key: 'k5'}], offset: 0},
+        }),
+      ),
+    ).toBe(true)
+  })
+
+  test('selecting entire span', () => {
+    const blockKey = defaultKeyGenerator()
+    const fooKey = defaultKeyGenerator()
+    const barKey = defaultKeyGenerator()
+    const bazKey = defaultKeyGenerator()
+
+    expect(
+      isOverlappingSelection({
+        anchor: {
+          path: [{_key: blockKey}, 'children', {_key: barKey}],
+          offset: 0,
+        },
+        focus: {
+          path: [{_key: blockKey}, 'children', {_key: barKey}],
+          offset: 3,
+        },
+      })(
+        createTestSnapshot({
+          context: {
+            value: [
+              {
+                _key: blockKey,
+                _type: 'block',
+                children: [
+                  {_key: fooKey, _type: 'span', text: 'foo'},
+                  {_key: barKey, _type: 'span', text: 'bar', marks: ['strong']},
+                  {_key: bazKey, _type: 'span', text: 'baz'},
+                ],
+              },
+            ],
+            selection: {
+              anchor: {
+                path: [{_key: blockKey}, 'children', {_key: barKey}],
+                offset: 0,
+              },
+              focus: {
+                path: [{_key: blockKey}, 'children', {_key: barKey}],
+                offset: 3,
+              },
+            },
+          },
+        }),
+      ),
+    ).toBe(true)
+  })
+
   test('unknown block', () => {
     const unknownBlockKey = defaultKeyGenerator()