@portabletext/editor 2.7.0 → 2.7.1

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react22 from "react";
+import * as react12 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react22.JSX.Element;
+}): react12.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react22.JSX.Element;
+declare function OneLinePlugin(): react12.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-import * as react21 from "react";
+import * as react22 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react21.JSX.Element;
+}): react22.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react21.JSX.Element;
+declare function OneLinePlugin(): react22.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.js";
-import * as _sanity_types9 from "@sanity/types";
+import * as _sanity_types8 from "@sanity/types";
 import { KeyedSegment, PortableTextBlock, PortableTextTextBlock } from "@sanity/types";
 import { isSpan, isTextBlock } from "@portabletext/schema";
 /**
@@ -143,7 +143,7 @@ declare function mergeTextBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>;
   targetBlock: PortableTextTextBlock;
   incomingBlock: PortableTextTextBlock;
-}): PortableTextTextBlock<_sanity_types9.PortableTextObject | _sanity_types9.PortableTextSpan>;
+}): PortableTextTextBlock<_sanity_types8.PortableTextObject | _sanity_types8.PortableTextSpan>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

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>