@portabletext/editor 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -97,7 +97,6 @@
     "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",
@@ -123,7 +122,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,7 +26,13 @@ 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')
 
@@ -143,6 +149,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 +177,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/usePortableTextEditorSelection.tsx

@@ -0,0 +1,62 @@
+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)
+
+/**
+ * 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/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)
-}