@portabletext/editor 1.49.0 → 1.49.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.49.0",
+  "version": "1.49.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,15 +79,15 @@
     "slate-react": "0.114.2",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.23",
-    "@portabletext/patches": "1.1.3"
+    "@portabletext/patches": "1.1.3",
+    "@portabletext/block-tools": "1.1.24"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.2.2",
-    "@sanity/schema": "^3.87.1",
-    "@sanity/types": "^3.87.1",
+    "@sanity/schema": "^3.88.0",
+    "@sanity/types": "^3.88.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/debug": "^4.1.12",
@@ -114,8 +114,8 @@
     "racejar": "1.2.4"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.87.1",
-    "@sanity/types": "^3.87.1",
+    "@sanity/schema": "^3.88.0",
+    "@sanity/types": "^3.88.0",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/editor/Editable.tsx

@@ -10,7 +10,6 @@ import {
   useRef,
   useState,
   type ClipboardEvent,
-  type CSSProperties,
   type FocusEventHandler,
   type KeyboardEvent,
   type MutableRefObject,
@@ -53,8 +52,9 @@ import type {
 import type {HotkeyOptions} from '../types/options'
 import {isSelectionCollapsed} from '../utils'
 import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
-import {Leaf} from './components/Leaf'
 import {RenderElement} from './components/render-element'
+import {RenderLeaf} from './components/render-leaf'
+import {RenderText, type RenderTextProps} from './components/render-text'
 import {EditorActorContext} from './editor-actor-context'
 import {getEditorSnapshot} from './editor-selector'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
@@ -67,14 +67,6 @@ import {
 
 const debug = debugWithName('component:Editable')
 
-const PLACEHOLDER_STYLE: CSSProperties = {
-  position: 'absolute',
-  userSelect: 'none',
-  pointerEvents: 'none',
-  left: 0,
-  right: 0,
-}
-
 /**
  * @public
  */
@@ -245,47 +237,20 @@ export const PortableTextEditable = forwardRef<
 
   const renderLeaf = useCallback(
     (
-      lProps: RenderLeafProps & {
+      leafProps: RenderLeafProps & {
         leaf: Text & {placeholder?: boolean; rangeDecoration?: RangeDecoration}
       },
-    ) => {
-      if (lProps.leaf._type === 'span') {
-        let rendered = (
-          <Leaf
-            {...lProps}
-            editorActor={editorActor}
-            schemaTypes={portableTextEditor.schemaTypes}
-            renderAnnotation={renderAnnotation}
-            renderChild={renderChild}
-            renderDecorator={renderDecorator}
-            readOnly={readOnly}
-          />
-        )
-        if (
-          renderPlaceholder &&
-          lProps.leaf.placeholder &&
-          lProps.text.text === ''
-        ) {
-          return (
-            <>
-              <span style={PLACEHOLDER_STYLE} contentEditable={false}>
-                {renderPlaceholder()}
-              </span>
-              {rendered}
-            </>
-          )
-        }
-        const decoration = lProps.leaf.rangeDecoration
-        if (decoration) {
-          rendered = decoration.component({children: rendered})
-        }
-        return rendered
-      }
-      return lProps.children
-    },
+    ) => (
+      <RenderLeaf
+        {...leafProps}
+        readOnly={readOnly}
+        renderAnnotation={renderAnnotation}
+        renderChild={renderChild}
+        renderDecorator={renderDecorator}
+        renderPlaceholder={renderPlaceholder}
+      />
+    ),
     [
-      editorActor,
-      portableTextEditor,
       readOnly,
       renderAnnotation,
       renderChild,
@@ -294,6 +259,11 @@ export const PortableTextEditable = forwardRef<
     ],
   )
 
+  const renderText = useCallback(
+    (props: RenderTextProps) => <RenderText {...props} />,
+    [],
+  )
+
   const restoreSelectionFromProps = useCallback(() => {
     if (propsSelection) {
       debug(`Selection from props ${JSON.stringify(propsSelection)}`)
@@ -1225,6 +1195,7 @@ export const PortableTextEditable = forwardRef<
       renderPlaceholder={undefined}
       renderElement={renderElement}
       renderLeaf={renderLeaf}
+      renderText={renderText}
       scrollSelectionIntoView={scrollSelectionIntoViewToSlate}
     />
   )

package/src/editor/__tests__/PortableTextEditor.test.tsx

@@ -59,6 +59,9 @@ describe('initialization', () => {
     >
       <div>
         <span
+          data-child-key="k1"
+          data-child-name="span"
+          data-child-type="span"
           data-slate-node="text"
         >
           <span
@@ -68,9 +71,6 @@ describe('initialization', () => {
             Jot something down here
           </span>
           <span
-            data-child-key="k1"
-            data-child-name="span"
-            data-child-type="span"
             data-slate-leaf="true"
           >
             <span

package/src/editor/__tests__/RangeDecorations.test.tsx

@@ -125,7 +125,7 @@ describe('RangeDecorations', () => {
     )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
-        3,
+        2,
         'updated-with-different',
       ])
     })
@@ -152,7 +152,7 @@ describe('RangeDecorations', () => {
     )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
-        4,
+        3,
         'updated-with-different',
       ])
     })

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

@@ -53,7 +53,6 @@ export function RenderBlockObject(props: {
 
   return (
     <div
-      key={props.element._key}
       {...props.attributes}
       className="pt-block pt-object-block"
       data-block-key={props.element._key}

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

@@ -57,19 +57,16 @@ export function RenderInlineObject(props: {
   }
 
   return (
-    <span {...props.attributes}>
+    <span
+      {...props.attributes}
+      draggable={!props.readOnly}
+      className="pt-inline-object"
+      data-child-key={props.inlineObject._key}
+      data-child-name={props.inlineObject._type}
+      data-child-type="object"
+    >
       {props.children}
-      <span
-        draggable={!props.readOnly}
-        className="pt-inline-object"
-        data-testid="pt-inline-object"
-        ref={inlineObjectRef}
-        key={props.element._key}
-        style={{display: 'inline-block'}}
-        data-child-key={props.inlineObject._key}
-        data-child-name={props.inlineObject._type}
-        data-child-type="object"
-      >
+      <span ref={inlineObjectRef} style={{display: 'inline-block'}}>
         {props.renderChild && block && legacySchemaType ? (
           props.renderChild({
             annotations: [],

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

@@ -0,0 +1,64 @@
+import {useSelector} from '@xstate/react'
+import {useContext, type CSSProperties} from 'react'
+import type {Text} from 'slate'
+import type {RenderLeafProps} from 'slate-react'
+import type {
+  RangeDecoration,
+  RenderAnnotationFunction,
+  RenderChildFunction,
+  RenderDecoratorFunction,
+  RenderPlaceholderFunction,
+} from '../../types/editor'
+import {EditorActorContext} from '../editor-actor-context'
+import {RenderSpan} from './render-span'
+
+const PLACEHOLDER_STYLE: CSSProperties = {
+  position: 'absolute',
+  userSelect: 'none',
+  pointerEvents: 'none',
+  left: 0,
+  right: 0,
+}
+
+export function RenderLeaf(
+  props: RenderLeafProps & {
+    leaf: Text & {placeholder?: boolean; rangeDecoration?: RangeDecoration}
+    readOnly: boolean
+    renderAnnotation?: RenderAnnotationFunction
+    renderChild?: RenderChildFunction
+    renderDecorator?: RenderDecoratorFunction
+    renderPlaceholder?: RenderPlaceholderFunction
+  },
+) {
+  const editorActor = useContext(EditorActorContext)
+  const schema = useSelector(editorActor, (s) => s.context.schema)
+
+  if (props.leaf._type !== schema.span.name) {
+    return props.children
+  }
+
+  let renderedSpan = <RenderSpan {...props} />
+
+  if (
+    props.renderPlaceholder &&
+    props.leaf.placeholder &&
+    props.text.text === ''
+  ) {
+    return (
+      <>
+        <span style={PLACEHOLDER_STYLE} contentEditable={false}>
+          {props.renderPlaceholder()}
+        </span>
+        {renderedSpan}
+      </>
+    )
+  }
+
+  const rangeDecoration = props.leaf.rangeDecoration
+
+  if (rangeDecoration) {
+    renderedSpan = rangeDecoration.component({children: renderedSpan})
+  }
+
+  return renderedSpan
+}

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

@@ -0,0 +1,260 @@
+import {useSelector} from '@xstate/react'
+import {isEqual, uniq} from 'lodash'
+import {
+  startTransition,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react'
+import {useSelected, useSlateStatic, type RenderLeafProps} from 'slate-react'
+import type {
+  RenderAnnotationFunction,
+  RenderChildFunction,
+  RenderDecoratorFunction,
+} from '../../types/editor'
+import {EditorActorContext} from '../editor-actor-context'
+import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
+import {PortableTextEditor} from '../PortableTextEditor'
+
+export interface RenderSpanProps extends RenderLeafProps {
+  children: ReactElement<any>
+  renderAnnotation?: RenderAnnotationFunction
+  renderChild?: RenderChildFunction
+  renderDecorator?: RenderDecoratorFunction
+  readOnly: boolean
+}
+
+export function RenderSpan(props: RenderSpanProps) {
+  const slateEditor = useSlateStatic()
+  const editorActor = useContext(EditorActorContext)
+  const legacySchema = useSelector(editorActor, (s) =>
+    s.context.getLegacySchema(),
+  )
+  const spanRef = useRef<HTMLElement>(null)
+  const portableTextEditor = usePortableTextEditor()
+  const blockSelected = useSelected()
+  const [focused, setFocused] = useState(false)
+  const [selected, setSelected] = useState(false)
+
+  const parent = props.children.props.parent
+  const block = parent && slateEditor.isTextBlock(parent) ? parent : undefined
+
+  const path = useMemo(
+    () =>
+      block
+        ? [{_key: block._key}, 'children', {_key: props.leaf._key}]
+        : undefined,
+    [block, props.leaf._key],
+  )
+
+  const decoratorSchemaTypes = editorActor
+    .getSnapshot()
+    .context.schema.decorators.map((decorator) => decorator.name)
+
+  const decorators = uniq(
+    (props.leaf.marks ?? []).filter((mark) =>
+      decoratorSchemaTypes.includes(mark),
+    ),
+  )
+
+  const annotationMarkDefs = (props.leaf.marks ?? []).flatMap((mark) => {
+    if (decoratorSchemaTypes.includes(mark)) {
+      return []
+    }
+
+    const markDef = block?.markDefs?.find((markDef) => markDef._key === mark)
+
+    if (markDef) {
+      return [markDef]
+    }
+
+    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
+
+  /**
+   * Support `renderDecorator` render function for each Decorator
+   */
+  for (const mark of decorators) {
+    const legacyDecoratorSchemaType = legacySchema.decorators.find(
+      (dec) => dec.value === mark,
+    )
+
+    if (path && legacyDecoratorSchemaType && props.renderDecorator) {
+      children = props.renderDecorator({
+        children: children,
+        editorElementRef: spanRef,
+        focused,
+        path,
+        selected,
+        schemaType: legacyDecoratorSchemaType,
+        value: mark,
+        type: legacyDecoratorSchemaType,
+      })
+    }
+  }
+
+  /**
+   * Support `renderAnnotation` render function for each Annotation
+   */
+  for (const annotationMarkDef of annotationMarkDefs) {
+    const legacyAnnotationSchemaType = legacySchema.annotations.find(
+      (t) => t.name === annotationMarkDef._type,
+    )
+    if (legacyAnnotationSchemaType) {
+      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,
+            })}
+          </span>
+        )
+      } else {
+        children = <span ref={spanRef}>{children}</span>
+      }
+    }
+  }
+
+  /**
+   * Support `renderChild` render function for the Span itself
+   */
+  if (block && path && props.renderChild) {
+    const child = block.children.find(
+      (_child) => _child._key === props.leaf._key,
+    ) // 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,
+      })
+    }
+  }
+
+  return (
+    <span {...props.attributes} ref={spanRef}>
+      {children}
+    </span>
+  )
+}

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

@@ -103,7 +103,6 @@ export function RenderTextBlock(props: {
 
   return (
     <div
-      key={props.element._key}
       {...props.attributes}
       className={[
         'pt-block',

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

@@ -0,0 +1,18 @@
+import type {Editable} from 'slate-react'
+
+export type RenderTextProps = Parameters<
+  NonNullable<React.ComponentProps<typeof Editable>['renderText']>
+>[0]
+
+export function RenderText(props: RenderTextProps) {
+  return (
+    <span
+      {...props.attributes}
+      data-child-key={props.text._key}
+      data-child-name={props.text._type}
+      data-child-type="span"
+    >
+      {props.children}
+    </span>
+  )
+}