@portabletext/editor 1.0.19 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.19",
+  "version": "1.1.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -59,8 +59,6 @@
     "@portabletext/toolkit": "^2.0.15",
     "@sanity/block-tools": "^3.55.0",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/eslint-config-i18n": "^1.1.0",
-    "@sanity/eslint-config-studio": "^4.0.0",
     "@sanity/pkg-utils": "^6.10.10",
     "@sanity/schema": "^3.55.0",
     "@sanity/test": "0.0.1-alpha.1",
@@ -78,20 +76,8 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/ws": "~8.5.12",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-sanity": "^7.1.2",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-eeb1b2a-20240818",
-    "eslint-plugin-tsdoc": "^0.3.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-unused-imports": "^4.1.3",
     "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
@@ -125,12 +111,12 @@
   },
   "scripts": {
     "build": "pkg-utils build --strict --check --clean",
-    "check:lint": "eslint .",
-    "check:types": "tsc --project tsconfig.lib.json",
+    "check:lint": "biome lint .",
+    "check:types": "tsc",
     "clean": "del .turbo && del lib && del node_modules",
     "dev": "pkg-utils watch",
     "dev:e2e-server": "cd ./e2e-tests/ && tsx serve",
-    "lint:fix": "eslint . --fix",
+    "lint:fix": "biome lint --write .",
     "test": "jest",
     "test:e2e": "jest --config=e2e-tests/e2e.config.ts",
     "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch",

package/src/editor/Editable.tsx

@@ -1,62 +1,69 @@
-import {type PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import {isEqual, noop} from 'lodash'
 import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
   type ClipboardEvent,
   type CSSProperties,
   type FocusEventHandler,
   type ForwardedRef,
-  forwardRef,
   type HTMLProps,
   type KeyboardEvent,
   type MutableRefObject,
   type TextareaHTMLAttributes,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
 } from 'react'
 import {
-  type BaseRange,
   Editor,
   Node,
-  type NodeEntry,
-  type Operation,
   Path,
   Range as SlateRange,
-  type Text,
   Transforms,
+  type BaseRange,
+  type NodeEntry,
+  type Operation,
+  type Text,
 } from 'slate'
 import {
-  Editable as SlateEditable,
   ReactEditor,
+  Editable as SlateEditable,
+  useSlate,
   type RenderElementProps,
   type RenderLeafProps,
-  useSlate,
 } from 'slate-react'
-
-import {
-  type EditorChange,
-  type EditorSelection,
-  type OnCopyFn,
-  type OnPasteFn,
-  type RangeDecoration,
-  type RenderAnnotationFunction,
-  type RenderBlockFunction,
-  type RenderChildFunction,
-  type RenderDecoratorFunction,
-  type RenderListItemFunction,
-  type RenderPlaceholderFunction,
-  type RenderStyleFunction,
-  type ScrollSelectionIntoViewFunction,
+import type {
+  EditorChange,
+  EditorSelection,
+  OnCopyFn,
+  OnPasteFn,
+  RangeDecoration,
+  RenderAnnotationFunction,
+  RenderBlockFunction,
+  RenderChildFunction,
+  RenderDecoratorFunction,
+  RenderListItemFunction,
+  RenderPlaceholderFunction,
+  RenderStyleFunction,
+  ScrollSelectionIntoViewFunction,
 } from '../types/editor'
-import {type HotkeyOptions} from '../types/options'
-import {type SlateTextBlock, type VoidElement} from '../types/slate'
+import type {HotkeyOptions} from '../types/options'
+import type {SlateTextBlock, VoidElement} from '../types/slate'
 import {debugWithName} from '../utils/debug'
-import {moveRangeByOperation, toPortableTextRange, toSlateRange} from '../utils/ranges'
+import {
+  moveRangeByOperation,
+  toPortableTextRange,
+  toSlateRange,
+} from '../utils/ranges'
 import {normalizeSelection} from '../utils/selection'
-import {fromSlateValue, isEqualToEmptyEditor, toSlateValue} from '../utils/values'
+import {
+  fromSlateValue,
+  isEqualToEmptyEditor,
+  toSlateValue,
+} from '../utils/values'
 import {Element} from './components/Element'
 import {Leaf} from './components/Leaf'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
@@ -138,12 +145,19 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
   const readOnly = usePortableTextEditorReadOnlyStatus()
   const keyGenerator = usePortableTextEditorKeyGenerator()
   const ref = useRef<HTMLDivElement | null>(null)
-  const [editableElement, setEditableElement] = useState<HTMLDivElement | null>(null)
+  const [editableElement, setEditableElement] = useState<HTMLDivElement | null>(
+    null,
+  )
   const [hasInvalidValue, setHasInvalidValue] = useState(false)
-  const [rangeDecorationState, setRangeDecorationsState] = useState<BaseRangeWithDecoration[]>([])
+  const [rangeDecorationState, setRangeDecorationsState] = useState<
+    BaseRangeWithDecoration[]
+  >([])
 
   // Forward ref to parent component
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
 
   const rangeDecorationsRef = useRef(rangeDecorations)
 
@@ -187,7 +201,15 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
         spellCheck={spellCheck}
       />
     ),
-    [schemaTypes, spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle],
+    [
+      schemaTypes,
+      spellCheck,
+      readOnly,
+      renderBlock,
+      renderChild,
+      renderListItem,
+      renderStyle,
+    ],
   )
 
   const renderLeaf = useCallback(
@@ -207,7 +229,11 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
             readOnly={readOnly}
           />
         )
-        if (renderPlaceholder && lProps.leaf.placeholder && lProps.text.text === '') {
+        if (
+          renderPlaceholder &&
+          lProps.leaf.placeholder &&
+          lProps.text.text === ''
+        ) {
           return (
             <>
               <span style={PLACEHOLDER_STYLE} contentEditable={false}>
@@ -225,7 +251,14 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       }
       return lProps.children
     },
-    [readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder, schemaTypes],
+    [
+      readOnly,
+      renderAnnotation,
+      renderChild,
+      renderDecorator,
+      renderPlaceholder,
+      schemaTypes,
+    ],
   )
 
   const restoreSelectionFromProps = useCallback(() => {
@@ -236,7 +269,9 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
         fromSlateValue(slateEditor.children, blockTypeName),
       )
       if (normalizedSelection !== null) {
-        debug(`Normalized selection from props ${JSON.stringify(normalizedSelection)}`)
+        debug(
+          `Normalized selection from props ${JSON.stringify(normalizedSelection)}`,
+        )
         const slateRange = toSlateRange(normalizedSelection, slateEditor)
         if (slateRange) {
           Transforms.select(slateEditor, slateRange)
@@ -256,7 +291,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       if (rangeDecorations && rangeDecorations.length > 0) {
         const newSlateRanges: BaseRangeWithDecoration[] = []
         rangeDecorations.forEach((rangeDecorationItem) => {
-          const slateRange = toSlateRange(rangeDecorationItem.selection, slateEditor)
+          const slateRange = toSlateRange(
+            rangeDecorationItem.selection,
+            slateEditor,
+          )
           if (!SlateRange.isRange(slateRange)) {
             if (rangeDecorationItem.onMoved) {
               rangeDecorationItem.onMoved({
@@ -270,9 +308,16 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           let newRange: BaseRange | null | undefined
           if (operation) {
             newRange = moveRangeByOperation(slateRange, operation)
-            if ((newRange && newRange !== slateRange) || (newRange === null && slateRange)) {
+            if (
+              (newRange && newRange !== slateRange) ||
+              (newRange === null && slateRange)
+            ) {
               const value = PortableTextEditor.getValue(portableTextEditor)
-              const newRangeSelection = toPortableTextRange(value, newRange, schemaTypes)
+              const newRangeSelection = toPortableTextRange(
+                value,
+                newRange,
+                schemaTypes,
+              )
               if (rangeDecorationItem.onMoved) {
                 rangeDecorationItem.onMoved({
                   newSelection: newRangeSelection,
@@ -285,7 +330,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           // If the newRange is null, it means that the range is not valid anymore and should be removed
           // If it's undefined, it means that the slateRange is still valid and should be kept
           if (newRange !== null) {
-            newSlateRanges.push({...(newRange || slateRange), rangeDecoration: rangeDecorationItem})
+            newSlateRanges.push({
+              ...(newRange || slateRange),
+              rangeDecoration: rangeDecorationItem,
+            })
           }
         })
         if (newSlateRanges.length > 0) {
@@ -293,7 +341,9 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           return
         }
       }
-      setRangeDecorationsState([])
+      if (rangeDecorationState.length > 0) {
+        setRangeDecorationsState([])
+      }
     },
     [portableTextEditor, rangeDecorations, schemaTypes, slateEditor],
   )
@@ -388,7 +438,11 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       }
 
       const value = PortableTextEditor.getValue(portableTextEditor)
-      const ptRange = toPortableTextRange(value, slateEditor.selection, schemaTypes)
+      const ptRange = toPortableTextRange(
+        value,
+        slateEditor.selection,
+        schemaTypes,
+      )
       const path = ptRange?.focus.path || []
       const onPasteResult = onPaste({event, value, path, schemaTypes})
 
@@ -406,14 +460,19 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
               slateEditor.insertData(event.clipboardData)
             } else if (result.insert) {
               slateEditor.insertFragment(
-                toSlateValue(result.insert as PortableTextBlock[], {schemaTypes}),
+                toSlateValue(result.insert as PortableTextBlock[], {
+                  schemaTypes,
+                }),
               )
             } else {
-              console.warn('Your onPaste function returned something unexpected:', result)
+              console.warn(
+                'Your onPaste function returned something unexpected:',
+                result,
+              )
             }
           })
           .catch((error) => {
-            console.error(error) // eslint-disable-line no-console
+            console.error(error)
             return error
           })
           .finally(() => {
@@ -465,7 +524,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
             | SlateTextBlock
             | VoidElement
           if (lastBlock && Editor.isVoid(slateEditor, node)) {
-            Transforms.insertNodes(slateEditor, slateEditor.pteCreateEmptyBlock())
+            Transforms.insertNodes(
+              slateEditor,
+              slateEditor.pteCreateTextBlock({decorators: []}),
+            )
             slateEditor.onChange()
           }
         }
@@ -528,7 +590,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
     }
     const existingDOMRange = domSelection.getRangeAt(0)
     try {
-      const newDOMRange = ReactEditor.toDOMRange(slateEditor, slateEditor.selection)
+      const newDOMRange = ReactEditor.toDOMRange(
+        slateEditor,
+        slateEditor.selection,
+      )
       if (
         newDOMRange.startOffset !== existingDOMRange.startOffset ||
         newDOMRange.endOffset !== existingDOMRange.endOffset
@@ -625,12 +690,17 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           if (path.length !== 2) {
             return false
           }
-          return Path.equals(item.focus.path, path) && Path.equals(item.anchor.path, path)
+          return (
+            Path.equals(item.focus.path, path) &&
+            Path.equals(item.anchor.path, path)
+          )
         }
         // Include decorations that either include or intersects with this path
         return (
-          SlateRange.intersection(item, {anchor: {path, offset: 0}, focus: {path, offset: 0}}) ||
-          SlateRange.includes(item, path)
+          SlateRange.intersection(item, {
+            anchor: {path, offset: 0},
+            focus: {path, offset: 0},
+          }) || SlateRange.includes(item, path)
         )
       })
       if (result.length > 0) {
@@ -645,7 +715,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
   // Also set the editable element in a state so that the MutationObserver
   // is setup when this element is ready.
   useEffect(() => {
-    ref.current = ReactEditor.toDOMNode(slateEditor, slateEditor) as HTMLDivElement | null
+    ref.current = ReactEditor.toDOMNode(
+      slateEditor,
+      slateEditor,
+    ) as HTMLDivElement | null
     setEditableElement(ref.current)
   }, [slateEditor, ref])
 

package/src/editor/PortableTextEditor.tsx

@@ -1,25 +1,24 @@
-import {
-  type ArrayDefinition,
-  type ArraySchemaType,
-  type BlockSchemaType,
-  type ObjectSchemaType,
-  type Path,
-  type PortableTextBlock,
-  type PortableTextChild,
-  type PortableTextObject,
-  type SpanSchemaType,
+import type {
+  ArrayDefinition,
+  ArraySchemaType,
+  BlockSchemaType,
+  ObjectSchemaType,
+  Path,
+  PortableTextBlock,
+  PortableTextChild,
+  PortableTextObject,
+  SpanSchemaType,
 } from '@sanity/types'
 import {Component, type MutableRefObject, type PropsWithChildren} from 'react'
 import {Subject} from 'rxjs'
-
-import {
-  type EditableAPI,
-  type EditableAPIDeleteOptions,
-  type EditorChange,
-  type EditorChanges,
-  type EditorSelection,
-  type PatchObservable,
-  type PortableTextMemberSchemaTypes,
+import type {
+  EditableAPI,
+  EditableAPIDeleteOptions,
+  EditorChange,
+  EditorChanges,
+  EditorSelection,
+  PatchObservable,
+  PortableTextMemberSchemaTypes,
 } from '../types/editor'
 import {debugWithName} from '../utils/debug'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
@@ -114,7 +113,9 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     }
 
     if (props.incomingPatches$) {
-      console.warn(`The prop 'incomingPatches$' is deprecated and renamed to 'patches$'`)
+      console.warn(
+        `The prop 'incomingPatches$' is deprecated and renamed to 'patches$'`,
+      )
     }
 
     this.change$.next({type: 'loading', isLoading: true})
@@ -160,7 +161,7 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     const maxBlocks =
       typeof this.props.maxBlocks === 'undefined'
         ? undefined
-        : parseInt(this.props.maxBlocks.toString(), 10) || undefined
+        : Number.parseInt(this.props.maxBlocks.toString(), 10) || undefined
 
     const readOnly = Boolean(this.props.readOnly)
     const keyGenerator = this.props.keyGenerator || defaultKeyGenerator
@@ -192,20 +193,39 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   }
 
   // Static API methods
-  static activeAnnotations = (editor: PortableTextEditor): PortableTextObject[] => {
+  static activeAnnotations = (
+    editor: PortableTextEditor,
+  ): PortableTextObject[] => {
     return editor && editor.editable ? editor.editable.activeAnnotations() : []
   }
   static isAnnotationActive = (
     editor: PortableTextEditor,
     annotationType: PortableTextObject['_type'],
   ): boolean => {
-    return editor && editor.editable ? editor.editable.isAnnotationActive(annotationType) : false
+    return editor && editor.editable
+      ? editor.editable.isAnnotationActive(annotationType)
+      : false
   }
   static addAnnotation = (
     editor: PortableTextEditor,
     type: ObjectSchemaType,
     value?: {[prop: string]: unknown},
-  ): {spanPath: Path; markDefPath: Path} | undefined => editor.editable?.addAnnotation(type, value)
+  ):
+    | {
+        /**
+         * @deprecated An annotation may be applied to multiple blocks, resulting
+         * in multiple `markDef`'s being created. Use `markDefPaths` instead.
+         */
+        markDefPath: Path
+        markDefPaths: Array<Path>
+        /**
+         * @deprecated Does not return anything meaningful since an annotation
+         * can span multiple blocks and spans. If references the span closest
+         * to the focus point of the selection.
+         */
+        spanPath: Path
+      }
+    | undefined => editor.editable?.addAnnotation(type, value)
   static blur = (editor: PortableTextEditor): void => {
     debug('Host blurred')
     editor.editable?.blur()
@@ -219,7 +239,6 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     editor: PortableTextEditor,
     element: PortableTextBlock | PortableTextChild,
   ) => {
-    // eslint-disable-next-line react/no-find-dom-node
     return editor.editable?.findDOMNode(element)
   }
   static findByPath = (editor: PortableTextEditor, path: Path) => {
@@ -232,7 +251,9 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   static focusBlock = (editor: PortableTextEditor) => {
     return editor.editable?.focusBlock()
   }
-  static focusChild = (editor: PortableTextEditor): PortableTextChild | undefined => {
+  static focusChild = (
+    editor: PortableTextEditor,
+  ): PortableTextChild | undefined => {
     return editor.editable?.focusChild()
   }
   static getSelection = (editor: PortableTextEditor) => {
@@ -271,7 +292,10 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   static insertBreak = (editor: PortableTextEditor): void => {
     return editor.editable?.insertBreak()
   }
-  static isVoid = (editor: PortableTextEditor, element: PortableTextBlock | PortableTextChild) => {
+  static isVoid = (
+    editor: PortableTextEditor,
+    element: PortableTextBlock | PortableTextChild,
+  ) => {
     return editor.editable?.isVoid(element)
   }
   static isObjectPath = (editor: PortableTextEditor, path: Path): boolean => {
@@ -283,13 +307,21 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   static marks = (editor: PortableTextEditor) => {
     return editor.editable?.marks()
   }
-  static select = (editor: PortableTextEditor, selection: EditorSelection | null) => {
+  static select = (
+    editor: PortableTextEditor,
+    selection: EditorSelection | null,
+  ) => {
     debug(`Host setting selection`, selection)
     editor.editable?.select(selection)
   }
-  static removeAnnotation = (editor: PortableTextEditor, type: ObjectSchemaType) =>
-    editor.editable?.removeAnnotation(type)
-  static toggleBlockStyle = (editor: PortableTextEditor, blockStyle: string) => {
+  static removeAnnotation = (
+    editor: PortableTextEditor,
+    type: ObjectSchemaType,
+  ) => editor.editable?.removeAnnotation(type)
+  static toggleBlockStyle = (
+    editor: PortableTextEditor,
+    blockStyle: string,
+  ) => {
     debug(`Host is toggling block style`)
     return editor.editable?.toggleBlockStyle(blockStyle)
   }
@@ -300,7 +332,9 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     debug(`Host toggling mark`, mark)
     editor.editable?.toggleMark(mark)
   }
-  static getFragment = (editor: PortableTextEditor): PortableTextBlock[] | undefined => {
+  static getFragment = (
+    editor: PortableTextEditor,
+  ): PortableTextBlock[] | undefined => {
     debug(`Host getting fragment`)
     return editor.editable?.getFragment()
   }