@portabletext/editor 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -42,7 +42,7 @@
     "src"
   ],
   "dependencies": {
-    "@portabletext/patches": "1.0.2",
+    "@portabletext/patches": "1.1.0",
     "debug": "^4.3.4",
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
@@ -50,32 +50,31 @@
     "slate-react": "0.101.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "1.45.0",
+    "@playwright/test": "1.45.3",
     "@portabletext/toolkit": "^2.0.15",
-    "@sanity/block-tools": "^3.48.1",
+    "@sanity/block-tools": "^3.52.2",
     "@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.0",
-    "@sanity/schema": "^3.48.1",
+    "@sanity/pkg-utils": "^6.10.6",
+    "@sanity/schema": "^3.52.2",
     "@sanity/test": "0.0.1-alpha.1",
-    "@sanity/types": "^3.48.1",
-    "@sanity/ui": "^2.5.0",
-    "@sanity/util": "^3.48.1",
+    "@sanity/types": "^3.52.2",
+    "@sanity/ui": "^2.8.8",
+    "@sanity/util": "^3.52.2",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.4",
-    "@types/lodash": "^4.17.5",
+    "@types/lodash": "^4.17.7",
     "@types/node": "^18.19.8",
     "@types/node-ipc": "^9.2.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/ws": "~8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@types/ws": "~8.5.11",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "@vitejs/plugin-react": "^4.3.1",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
@@ -83,11 +82,11 @@
     "eslint-config-sanity": "^7.1.2",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
     "eslint-plugin-tsdoc": "^0.3.0",
     "eslint-plugin-unicorn": "^54.0.0",
-    "eslint-plugin-unused-imports": "^4.0.0",
+    "eslint-plugin-unused-imports": "^4.0.1",
     "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
@@ -97,11 +96,10 @@
     "node-ipc": "npm:@node-ipc/compat@9.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rimraf": "^3.0.2",
     "rxjs": "^7.8.1",
-    "styled-components": "^6.1.11",
-    "tsx": "^4.15.7",
-    "typescript": "^5.4.5",
+    "styled-components": "^6.1.12",
+    "tsx": "^4.16.2",
+    "typescript": "^5.5.3",
     "vite": "^4.5.3"
   },
   "peerDependencies": {
@@ -123,7 +121,7 @@
     "build": "pkg-utils build --strict --check --clean",
     "check:lint": "eslint .",
     "check:types": "tsc --project tsconfig.lib.json",
-    "clean": "rimraf lib",
+    "clean": "del .turbo && del lib && del node_modules",
     "dev": "pkg-utils watch",
     "dev:e2e-server": "cd ./e2e-tests/ && tsx serve",
     "lint:fix": "eslint . --fix",

package/src/editor/Editable.tsx

@@ -79,8 +79,6 @@ interface BaseRangeWithDecoration extends BaseRange {
   rangeDecoration: RangeDecoration
 }
 
-const EMPTY_DECORATIONS_STATE: BaseRangeWithDecoration[] = []
-
 /**
  * @public
  */
@@ -142,8 +140,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
   const ref = useRef<HTMLDivElement | null>(null)
   const [editableElement, setEditableElement] = useState<HTMLDivElement | null>(null)
   const [hasInvalidValue, setHasInvalidValue] = useState(false)
-  const [rangeDecorationState, setRangeDecorationsState] =
-    useState<BaseRangeWithDecoration[]>(EMPTY_DECORATIONS_STATE)
+  const [rangeDecorationState, setRangeDecorationsState] = useState<BaseRangeWithDecoration[]>([])
 
   // Forward ref to parent component
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
@@ -296,7 +293,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           return
         }
       }
-      setRangeDecorationsState(EMPTY_DECORATIONS_STATE)
+      setRangeDecorationsState([])
     },
     [portableTextEditor, rangeDecorations, schemaTypes, slateEditor],
   )
@@ -619,7 +616,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       }
       // Editor node has a path length of 0 (should never be decorated)
       if (path.length === 0) {
-        return EMPTY_DECORATIONS_STATE
+        return []
       }
       const result = rangeDecorationState.filter((item) => {
         // Special case in order to only return one decoration for collapsed ranges
@@ -639,7 +636,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       if (result.length > 0) {
         return result
       }
-      return EMPTY_DECORATIONS_STATE
+      return []
     },
     [slateEditor, schemaTypes, rangeDecorationState],
   )

package/src/editor/PortableTextEditor.tsx

@@ -26,15 +26,16 @@ import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSc
 import {compileType} from '../utils/schema'
 import {SlateContainer} from './components/SlateContainer'
 import {Synchronizer} from './components/Synchronizer'
-import {defaultKeyGenerator} from './hooks/usePortableTextEditorKeyGenerator'
+import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
+import {
+  defaultKeyGenerator,
+  PortableTextEditorKeyGeneratorContext,
+} from './hooks/usePortableTextEditorKeyGenerator'
+import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
+import {PortableTextEditorReadOnlyContext} from './hooks/usePortableTextReadOnly'
 
 const debug = debugWithName('component:PortableTextEditor')
 
-/**
- * Props for the PortableTextEditor component
- *
- * @public
- */
 /**
  * Props for the PortableTextEditor component
  *
@@ -109,7 +110,7 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     super(props)
 
     if (!props.schemaType) {
-      throw new Error('PortableTextEditor: missing "type" property')
+      throw new Error('PortableTextEditor: missing "schemaType" property')
     }
 
     if (props.incomingPatches$) {
@@ -143,6 +144,14 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     this.editable = {...this.editable, ...editable}
   }
 
+  private getValue = () => {
+    if (this.editable) {
+      return this.editable.getValue()
+    }
+
+    return undefined
+  }
+
   render() {
     const {onChange, value, children, patches$, incomingPatches$} = this.props
     const {change$} = this
@@ -163,16 +172,21 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
         portableTextEditor={this}
         readOnly={readOnly}
       >
-        <Synchronizer
-          change$={change$}
-          keyGenerator={keyGenerator}
-          onChange={onChange}
-          portableTextEditor={this}
-          readOnly={readOnly}
-          value={value}
-        >
-          {children}
-        </Synchronizer>
+        <PortableTextEditorKeyGeneratorContext.Provider value={keyGenerator}>
+          <PortableTextEditorContext.Provider value={this}>
+            <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
+              <PortableTextEditorSelectionProvider change$={change$}>
+                <Synchronizer
+                  change$={change$}
+                  getValue={this.getValue}
+                  onChange={onChange}
+                  value={value}
+                />
+                {children}
+              </PortableTextEditorSelectionProvider>
+            </PortableTextEditorReadOnlyContext.Provider>
+          </PortableTextEditorContext.Provider>
+        </PortableTextEditorKeyGeneratorContext.Provider>
       </SlateContainer>
     )
   }

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

@@ -46,7 +46,7 @@ describe('RangeDecorations', () => {
       />,
     )
     await waitFor(() => {
-      expect([rangeDecorationIteration, 'initial']).toEqual([0, 'initial'])
+      expect([rangeDecorationIteration, 'initial']).toEqual([1, 'initial'])
     })
     // Re-render with the same range decorations
     rerender(
@@ -59,7 +59,7 @@ describe('RangeDecorations', () => {
       />,
     )
     await waitFor(() => {
-      expect([rangeDecorationIteration, 'initial']).toEqual([0, 'initial'])
+      expect([rangeDecorationIteration, 'initial']).toEqual([1, 'initial'])
     })
     // Update the range decorations, a new object with identical values
     rangeDecorations = [
@@ -82,7 +82,7 @@ describe('RangeDecorations', () => {
     )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-equal-values']).toEqual([
-        0,
+        1,
         'updated-with-equal-values',
       ])
     })
@@ -107,7 +107,7 @@ describe('RangeDecorations', () => {
     )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
-        1,
+        2,
         'updated-with-different',
       ])
     })

package/src/editor/components/Synchronizer.tsx

@@ -1,28 +1,17 @@
 import {type Patch} from '@portabletext/patches'
 import {type PortableTextBlock} from '@sanity/types'
 import {throttle} from 'lodash'
-import {
-  type PropsWithChildren,
-  startTransition,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import {useCallback, useEffect, useMemo, useRef} from 'react'
 import {Editor} from 'slate'
 import {useSlate} from 'slate-react'
 
-import {type EditorChange, type EditorChanges, type EditorSelection} from '../../types/editor'
+import {type EditorChange, type EditorChanges} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {IS_PROCESSING_LOCAL_CHANGES} from '../../utils/weakMaps'
-import {PortableTextEditorContext} from '../hooks/usePortableTextEditor'
-import {PortableTextEditorKeyGeneratorContext} from '../hooks/usePortableTextEditorKeyGenerator'
-import {PortableTextEditorSelectionContext} from '../hooks/usePortableTextEditorSelection'
-import {PortableTextEditorValueContext} from '../hooks/usePortableTextEditorValue'
-import {PortableTextEditorReadOnlyContext} from '../hooks/usePortableTextReadOnly'
+import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
+import {usePortableTextEditorKeyGenerator} from '../hooks/usePortableTextEditorKeyGenerator'
+import {usePortableTextEditorReadOnlyStatus} from '../hooks/usePortableTextReadOnly'
 import {useSyncValue} from '../hooks/useSyncValue'
-import {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('component:PortableTextEditor:Synchronizer')
 const debugVerbose = debug.enabled && false
@@ -34,13 +23,11 @@ const FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === 'test' ? 500 : 1000
 /**
  * @internal
  */
-export interface SynchronizerProps extends PropsWithChildren {
+export interface SynchronizerProps {
   change$: EditorChanges
-  portableTextEditor: PortableTextEditor
-  keyGenerator: () => string
+  getValue: () => Array<PortableTextBlock> | undefined
   onChange: (change: EditorChange) => void
-  readOnly: boolean
-  value: PortableTextBlock[] | undefined
+  value: Array<PortableTextBlock> | undefined
 }
 
 /**
@@ -48,8 +35,10 @@ export interface SynchronizerProps extends PropsWithChildren {
  * @internal
  */
 export function Synchronizer(props: SynchronizerProps) {
-  const {change$, portableTextEditor, onChange, keyGenerator, readOnly, value} = props
-  const [selection, setSelection] = useState<EditorSelection>(null)
+  const portableTextEditor = usePortableTextEditor()
+  const keyGenerator = usePortableTextEditorKeyGenerator()
+  const readOnly = usePortableTextEditorReadOnlyStatus()
+  const {change$, getValue, onChange, value} = props
   const pendingPatches = useRef<Patch[]>([])
 
   const syncValue = useSyncValue({
@@ -71,12 +60,12 @@ export function Synchronizer(props: SynchronizerProps) {
       if (debugVerbose) {
         debug(`Patches:\n${JSON.stringify(pendingPatches.current, null, 2)}`)
       }
-      const snapshot = PortableTextEditor.getValue(portableTextEditor)
+      const snapshot = getValue()
       change$.next({type: 'mutation', patches: pendingPatches.current, snapshot})
       pendingPatches.current = []
     }
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, false)
-  }, [slateEditor, portableTextEditor, change$])
+  }, [slateEditor, getValue, change$])
 
   const onFlushPendingPatchesThrottled = useMemo(() => {
     return throttle(
@@ -116,14 +105,6 @@ export function Synchronizer(props: SynchronizerProps) {
           onFlushPendingPatchesThrottled()
           onChange(next)
           break
-        case 'selection':
-          // Set the selection state in a transition, we don't need the state immediately.
-          startTransition(() => {
-            if (debugVerbose) debug('Setting selection')
-            setSelection(next.selection)
-          })
-          onChange(next) // Keep this out of the startTransition!
-          break
         default:
           onChange(next)
       }
@@ -174,17 +155,5 @@ export function Synchronizer(props: SynchronizerProps) {
     }
   }, [change$, syncValue, value])
 
-  return (
-    <PortableTextEditorKeyGeneratorContext.Provider value={keyGenerator}>
-      <PortableTextEditorContext.Provider value={portableTextEditor}>
-        <PortableTextEditorValueContext.Provider value={value}>
-          <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
-            <PortableTextEditorSelectionContext.Provider value={selection}>
-              {props.children}
-            </PortableTextEditorSelectionContext.Provider>
-          </PortableTextEditorReadOnlyContext.Provider>
-        </PortableTextEditorValueContext.Provider>
-      </PortableTextEditorContext.Provider>
-    </PortableTextEditorKeyGeneratorContext.Provider>
-  )
+  return null
 }

package/src/editor/hooks/usePortableTextEditor.ts

@@ -8,6 +8,7 @@ import {type PortableTextEditor} from '../PortableTextEditor'
 export const PortableTextEditorContext = createContext<PortableTextEditor | null>(null)
 
 /**
+ * @public
  * Get the current editor object from the React context.
  */
 export const usePortableTextEditor = (): PortableTextEditor => {

package/src/editor/hooks/usePortableTextEditorKeyGenerator.ts

@@ -1,6 +1,9 @@
 import {randomKey} from '@sanity/util/content'
 import {createContext, useContext} from 'react'
 
+/**
+ * @public
+ */
 export const defaultKeyGenerator = (): string => randomKey(12)
 
 /**

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -0,0 +1,63 @@
+import {createContext, startTransition, useContext, useEffect, useState} from 'react'
+
+import {type EditorChanges, type EditorSelection} from '../../types/editor'
+import {debugWithName} from '../../utils/debug'
+
+/**
+ * A React context for sharing the editor selection.
+ */
+const PortableTextEditorSelectionContext = createContext<EditorSelection | null>(null)
+
+/**
+ * @public
+ * Get the current editor selection from the React context.
+ */
+export const usePortableTextEditorSelection = (): EditorSelection => {
+  const selection = useContext(PortableTextEditorSelectionContext)
+
+  if (selection === undefined) {
+    throw new Error(
+      `The \`usePortableTextEditorSelection\` hook must be used inside the <PortableTextEditor> component's context.`,
+    )
+  }
+  return selection
+}
+const debug = debugWithName('component:PortableTextEditor:SelectionProvider')
+const debugVerbose = debug.enabled && false
+
+/**
+ * @internal
+ */
+export function PortableTextEditorSelectionProvider(
+  props: React.PropsWithChildren<{
+    change$: EditorChanges
+  }>,
+) {
+  const {change$} = props
+  const [selection, setSelection] = useState<EditorSelection>(null)
+
+  // Subscribe to, and handle changes from the editor
+  useEffect(() => {
+    debug('Subscribing to selection changes$')
+    const subscription = change$.subscribe((next): void => {
+      if (next.type === 'selection') {
+        // Set the selection state in a transition, we don't need the state immediately.
+        startTransition(() => {
+          if (debugVerbose) debug('Setting selection')
+          setSelection(next.selection)
+        })
+      }
+    })
+
+    return () => {
+      debug('Unsubscribing to selection changes$')
+      subscription.unsubscribe()
+    }
+  }, [change$])
+
+  return (
+    <PortableTextEditorSelectionContext.Provider value={selection}>
+      {props.children}
+    </PortableTextEditorSelectionContext.Provider>
+  )
+}

package/src/editor/plugins/createWithHotKeys.ts

@@ -195,12 +195,16 @@ export function createWithHotkeys(
         ) as SlateTextBlock | VoidElement
         const focusBlockPath = editor.selection.focus.path.slice(0, 1)
         const focusBlock = Node.descendant(editor, focusBlockPath) as SlateTextBlock | VoidElement
+        const isTextBlock = isPortableTextTextBlock(focusBlock)
+        const isEmptyFocusBlock =
+          isTextBlock && focusBlock.children.length === 1 && focusBlock.children?.[0]?.text === ''
 
         if (
           nextBlock &&
           focusBlock &&
           !Editor.isVoid(editor, focusBlock) &&
-          Editor.isVoid(editor, nextBlock)
+          Editor.isVoid(editor, nextBlock) &&
+          isEmptyFocusBlock
         ) {
           debug('Preventing deleting void block below')
           event.preventDefault()

package/src/types/editor.ts

@@ -375,6 +375,9 @@ export type EditorChange =
   | UnsetChange
   | ValueChange
 
+/**
+ * @beta
+ */
 export type EditorChanges = Subject<EditorChange>
 
 /** @beta */
@@ -384,6 +387,10 @@ export type OnPasteResult =
       path?: Path
     }
   | undefined
+
+/**
+ * @beta
+ */
 export type OnPasteResultOrPromise = OnPasteResult | Promise<OnPasteResult>
 
 /** @beta */

package/src/types/options.ts

@@ -3,6 +3,9 @@ import {type BaseSyntheticEvent} from 'react'
 import {type PortableTextEditor} from '../editor/PortableTextEditor'
 import {type PatchObservable} from './editor'
 
+/**
+ * @internal
+ */
 export type createEditorOptions = {
   keyGenerator: () => string
   patches$?: PatchObservable
@@ -11,6 +14,9 @@ export type createEditorOptions = {
   maxBlocks?: number
 }
 
+/**
+ * @beta
+ */
 export type HotkeyOptions = {
   marks?: Record<string, string>
   custom?: Record<string, (event: BaseSyntheticEvent, editor: PortableTextEditor) => void>

package/src/utils/withChanges.ts

@@ -13,13 +13,6 @@ export function isChangingRemotely(editor: Editor): boolean | undefined {
   return IS_PROCESSING_REMOTE_CHANGES.get(editor)
 }
 
-export function withLocalChanges(editor: Editor, fn: () => void): void {
-  const prev = isChangingLocally(editor) || false
-  IS_PROCESSING_LOCAL_CHANGES.set(editor, true)
-  fn()
-  IS_PROCESSING_LOCAL_CHANGES.set(editor, prev)
-}
-
 export function isChangingLocally(editor: Editor): boolean | undefined {
   return IS_PROCESSING_LOCAL_CHANGES.get(editor)
 }

package/src/editor/hooks/usePortableTextEditorSelection.ts

@@ -1,22 +0,0 @@
-import {createContext, useContext} from 'react'
-
-import {type EditorSelection} from '../../types/editor'
-
-/**
- * A React context for sharing the editor selection.
- */
-export const PortableTextEditorSelectionContext = createContext<EditorSelection | null>(null)
-
-/**
- * Get the current editor selection from the React context.
- */
-export const usePortableTextEditorSelection = (): EditorSelection => {
-  const selection = useContext(PortableTextEditorSelectionContext)
-
-  if (selection === undefined) {
-    throw new Error(
-      `The \`usePortableTextEditorSelection\` hook must be used inside the <PortableTextEditor> component's context.`,
-    )
-  }
-  return selection
-}

package/src/editor/hooks/usePortableTextEditorValue.ts

@@ -1,16 +0,0 @@
-import {type PortableTextBlock} from '@sanity/types'
-import {createContext, useContext} from 'react'
-
-/**
- * A React context for sharing the editor value.
- */
-export const PortableTextEditorValueContext = createContext<PortableTextBlock[] | undefined>(
-  undefined,
-)
-
-/**
- * Get the current editor value from the React context.
- */
-export const usePortableTextEditorValue = () => {
-  return useContext(PortableTextEditorValueContext)
-}

package/src/utils/bufferUntil.ts

@@ -1,15 +0,0 @@
-import {defer, EMPTY, type Observable, of, type OperatorFunction, switchMap, tap} from 'rxjs'
-
-export function bufferUntil<T>(
-  emitWhen: (currentBuffer: T[]) => boolean,
-): OperatorFunction<T, T[]> {
-  return (source: Observable<T>) =>
-    defer(() => {
-      let buffer: T[] = [] // custom buffer
-      return source.pipe(
-        tap((v) => buffer.push(v)), // add values to buffer
-        switchMap(() => (emitWhen(buffer) ? of(buffer) : EMPTY)), // emit the buffer when the condition is met
-        tap(() => (buffer = [])), // clear the buffer
-      )
-    })
-}