fix: remove Editor-keyed WeakMaps from slate-dom, move state onto DOMEditor

Remove 18 Editor-keyed WeakMaps from slate-dom/utils/weak-maps.ts and
replace them with direct properties on the DOMEditor interface:

- IS_NODE_MAP_DIRTY → editor.isNodeMapDirty
- EDITOR_TO_WINDOW → editor.domWindow
- EDITOR_TO_ELEMENT → editor.domElement
- EDITOR_TO_PLACEHOLDER → editor.domPlaceholder
- EDITOR_TO_PLACEHOLDER_ELEMENT → editor.domPlaceholderElement
- EDITOR_TO_KEY_TO_ELEMENT → editor.keyToElement
- IS_READ_ONLY → editor.readOnly
- IS_FOCUSED → editor.focused
- IS_COMPOSING → editor.composing
- EDITOR_TO_USER_SELECTION → editor.userSelection
- EDITOR_TO_ON_CHANGE → editor.onContextChange
- EDITOR_TO_SCHEDULE_FLUSH → editor.scheduleFlush
- EDITOR_TO_PENDING_INSERTION_MARKS → editor.pendingInsertionMarks
- EDITOR_TO_USER_MARKS → editor.userMarks
- EDITOR_TO_PENDING_DIFFS → editor.pendingDiffs
- EDITOR_TO_PENDING_ACTION → editor.pendingAction
- EDITOR_TO_PENDING_SELECTION → editor.pendingSelection
- EDITOR_TO_FORCE_RENDER → editor.forceRender

5 Node/Element-keyed WeakMaps remain in weak-maps.ts for a follow-up.

No behaviour changes — pure mechanical substitution.

Author: christianhg

.changeset/remove-slate-dom-weak-maps.md

@@ -0,0 +1,7 @@
+---
+'@portabletext/editor': patch
+---
+
+fix: remove Editor-keyed WeakMaps from slate-dom, move state onto DOMEditor
+
+WeakMaps are an upstream Slate pattern for supporting multiple editor instances sharing a module scope. Since PTE owns the editor lifecycle, storing state directly on the editor object is simpler and easier to debug.

packages/editor/src/editor/editor-machine.ts

@@ -20,7 +20,6 @@ import {debug} from '../internal-utils/debug'
 import type {EventPosition} from '../internal-utils/event-position'
 import {sortByPriority} from '../priority/priority.sort'
 import {Transforms} from '../slate'
-import {EDITOR_TO_PENDING_SELECTION} from '../slate-dom'
 import {ReactEditor} from '../slate-react'
 import type {NamespaceEvent, OmitFromUnion} from '../type-utils'
 import type {EditorSelection} from '../types/editor'
@@ -317,7 +316,7 @@ export const editorMachine = setup({
           Transforms.select(slateEditor, currentSelection)
 
           // Tell Slate to use this selection for DOM sync
-          EDITOR_TO_PENDING_SELECTION.set(slateEditor, slateEditor.selection)
+          slateEditor.pendingSelection = slateEditor.selection
 
           // Trigger the DOM sync
           slateEditor.onChange()

packages/editor/src/operations/operation.insert.child.ts

@@ -2,7 +2,6 @@ import {isTextBlock} from '@portabletext/schema'
 import {getFocusBlock, getFocusSpan} from '../internal-utils/slate-utils'
 import {VOID_CHILD_KEY} from '../internal-utils/values'
 import {Transforms} from '../slate'
-import {EDITOR_TO_PENDING_SELECTION} from '../slate-dom'
 import {parseInlineObject, parseSpan} from '../utils/parse-blocks'
 import type {OperationImplementation} from './operation.types'
 
@@ -57,10 +56,7 @@ export const insertChildOperationImplementation: OperationImplementation<
 
     // This makes sure the selection is set correctly when event handling is run
     // through Slate's Android input handling
-    EDITOR_TO_PENDING_SELECTION.set(
-      operation.editor,
-      operation.editor.selection,
-    )
+    operation.editor.pendingSelection = operation.editor.selection
 
     return
   }

packages/editor/src/operations/operation.select.ts

@@ -1,6 +1,5 @@
 import {toSlateRange} from '../internal-utils/to-slate-range'
 import {Transforms} from '../slate'
-import {IS_FOCUSED, IS_READ_ONLY} from '../slate-dom'
 import type {OperationImplementation} from './operation.types'
 
 export const selectOperationImplementation: OperationImplementation<
@@ -21,7 +20,7 @@ export const selectOperationImplementation: OperationImplementation<
     Transforms.deselect(operation.editor)
   }
 
-  if (IS_FOCUSED.get(operation.editor) && IS_READ_ONLY.get(operation.editor)) {
-    IS_FOCUSED.set(operation.editor, false)
+  if (operation.editor.focused && operation.editor.readOnly) {
+    operation.editor.focused = false
   }
 }

packages/editor/src/slate-dom/index.ts

@@ -65,28 +65,12 @@ export {
 } from './utils/range-list'
 
 export {
-  EDITOR_TO_ELEMENT,
-  EDITOR_TO_FORCE_RENDER,
-  EDITOR_TO_KEY_TO_ELEMENT,
-  EDITOR_TO_ON_CHANGE,
-  EDITOR_TO_PENDING_ACTION,
-  EDITOR_TO_PENDING_DIFFS,
-  EDITOR_TO_PENDING_INSERTION_MARKS,
-  EDITOR_TO_PENDING_SELECTION,
-  EDITOR_TO_PLACEHOLDER_ELEMENT,
-  EDITOR_TO_SCHEDULE_FLUSH,
-  EDITOR_TO_USER_MARKS,
-  EDITOR_TO_USER_SELECTION,
-  EDITOR_TO_WINDOW,
   ELEMENT_TO_NODE,
-  IS_COMPOSING,
-  IS_FOCUSED,
-  IS_NODE_MAP_DIRTY,
-  IS_READ_ONLY,
   MARK_PLACEHOLDER_SYMBOL,
   NODE_TO_ELEMENT,
   NODE_TO_INDEX,
   NODE_TO_KEY,
   NODE_TO_PARENT,
   PLACEHOLDER_SYMBOL,
+  type Action,
 } from './utils/weak-maps'

packages/editor/src/slate-dom/plugin/dom-editor.ts

@@ -6,8 +6,11 @@ import {
   Transforms,
   type BaseEditor,
   type Node,
+  type Operation,
   type Path,
   type Point,
+  type RangeRef,
+  type Text,
 } from '../../slate'
 import type {TextDiff} from '../utils/diff-text'
 import {
@@ -32,18 +35,11 @@ import {
 import {IS_ANDROID, IS_CHROME, IS_FIREFOX} from '../utils/environment'
 import {Key} from '../utils/key'
 import {
-  EDITOR_TO_ELEMENT,
-  EDITOR_TO_KEY_TO_ELEMENT,
-  EDITOR_TO_PENDING_DIFFS,
-  EDITOR_TO_SCHEDULE_FLUSH,
-  EDITOR_TO_WINDOW,
   ELEMENT_TO_NODE,
-  IS_COMPOSING,
-  IS_FOCUSED,
-  IS_READ_ONLY,
   NODE_TO_INDEX,
   NODE_TO_KEY,
   NODE_TO_PARENT,
+  type Action,
 } from '../utils/weak-maps'
 
 /**
@@ -69,6 +65,25 @@ export interface DOMEditor extends BaseEditor {
     data: DataTransfer,
     originEvent?: 'drag' | 'copy' | 'cut',
   ) => void
+
+  isNodeMapDirty: boolean
+  domWindow: Window | null
+  domElement: HTMLElement | null
+  domPlaceholder: string
+  domPlaceholderElement: HTMLElement | null
+  keyToElement: WeakMap<Key, HTMLElement>
+  readOnly: boolean
+  focused: boolean
+  composing: boolean
+  userSelection: RangeRef | null
+  onContextChange: ((options?: {operation?: Operation}) => void) | null
+  scheduleFlush: (() => void) | null
+  pendingInsertionMarks: Partial<Text> | null
+  userMarks: Partial<Text> | null
+  pendingDiffs: TextDiff[]
+  pendingAction: Action | null
+  pendingSelection: Range | null
+  forceRender: (() => void) | null
 }
 
 export interface DOMEditorInterface {
@@ -258,16 +273,16 @@ export interface DOMEditorInterface {
 
 // eslint-disable-next-line no-redeclare
 export const DOMEditor: DOMEditorInterface = {
-  androidPendingDiffs: (editor) => EDITOR_TO_PENDING_DIFFS.get(editor),
+  androidPendingDiffs: (editor) => editor.pendingDiffs,
 
   androidScheduleFlush: (editor) => {
-    EDITOR_TO_SCHEDULE_FLUSH.get(editor)?.()
+    editor.scheduleFlush?.()
   },
 
   blur: (editor) => {
     const el = DOMEditor.toDOMNode(editor, editor)
     const root = DOMEditor.findDocumentOrShadowRoot(editor)
-    IS_FOCUSED.set(editor, false)
+    editor.focused = false
 
     if (root.activeElement === el) {
       el.blur()
@@ -407,13 +422,13 @@ export const DOMEditor: DOMEditorInterface = {
 
   focus: (editor, options = {retries: 5}) => {
     // Return if already focused
-    if (IS_FOCUSED.get(editor)) {
+    if (editor.focused) {
       return
     }
 
     // Return if no dom node is associated with the editor, which means the editor is not yet mounted
     // or has been unmounted. This can happen especially, while retrying to focus the editor.
-    if (!EDITOR_TO_ELEMENT.get(editor)) {
+    if (!editor.domElement) {
       return
     }
 
@@ -448,13 +463,13 @@ export const DOMEditor: DOMEditorInterface = {
       }
       // IS_FOCUSED should be set before calling el.focus() to ensure that
       // FocusedContext is updated to the correct value
-      IS_FOCUSED.set(editor, true)
+      editor.focused = true
       el.focus({preventScroll: true})
     }
   },
 
   getWindow: (editor) => {
-    const window = EDITOR_TO_WINDOW.get(editor)
+    const window = editor.domWindow
     if (!window) {
       throw new Error('Unable to find a host window element for this editor')
     }
@@ -525,15 +540,15 @@ export const DOMEditor: DOMEditorInterface = {
   insertTextData: (editor, data) => editor.insertTextData(data),
 
   isComposing: (editor) => {
-    return !!IS_COMPOSING.get(editor)
+    return !!editor.composing
   },
 
-  isFocused: (editor) => !!IS_FOCUSED.get(editor),
+  isFocused: (editor) => !!editor.focused,
 
-  isReadOnly: (editor) => !!IS_READ_ONLY.get(editor),
+  isReadOnly: (editor) => !!editor.readOnly,
 
   isTargetInsideNonReadonlyVoid: (editor, target) => {
-    if (IS_READ_ONLY.get(editor)) {
+    if (editor.readOnly) {
       return false
     }
 
@@ -547,10 +562,9 @@ export const DOMEditor: DOMEditorInterface = {
     editor.setFragmentData(data, originEvent),
 
   toDOMNode: (editor, node) => {
-    const KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor)
     const domNode = Editor.isEditor(node)
-      ? EDITOR_TO_ELEMENT.get(editor)
-      : KEY_TO_ELEMENT?.get(DOMEditor.findKey(editor, node))
+      ? editor.domElement
+      : editor.keyToElement?.get(DOMEditor.findKey(editor, node))
 
     if (!domNode) {
       throw new Error(

packages/editor/src/slate-dom/plugin/with-dom.ts

@@ -16,16 +16,7 @@ import {
 } from '../utils/diff-text'
 import {getPlainText, getSlateFragmentAttribute, isDOMText} from '../utils/dom'
 import type {Key} from '../utils/key'
-import {
-  EDITOR_TO_KEY_TO_ELEMENT,
-  EDITOR_TO_ON_CHANGE,
-  EDITOR_TO_PENDING_ACTION,
-  EDITOR_TO_PENDING_DIFFS,
-  EDITOR_TO_PENDING_SELECTION,
-  EDITOR_TO_USER_SELECTION,
-  IS_NODE_MAP_DIRTY,
-  NODE_TO_KEY,
-} from '../utils/weak-maps'
+import {NODE_TO_KEY} from '../utils/weak-maps'
 import {DOMEditor} from './dom-editor'
 
 /**
@@ -44,40 +35,53 @@ export const withDOM = <T extends Editor>(
   const e = editor as T & DOMEditor
   const {apply, onChange} = e
 
-  // The WeakMap which maps a key to a specific HTMLElement must be scoped to the editor instance to
-  // avoid collisions between editors in the DOM that share the same value.
-  EDITOR_TO_KEY_TO_ELEMENT.set(e, new WeakMap())
+  // Initialize DOMEditor state properties
+  e.isNodeMapDirty = false
+  e.domWindow = null
+  e.domElement = null
+  e.domPlaceholder = ''
+  e.domPlaceholderElement = null
+  e.keyToElement = new WeakMap()
+  e.readOnly = false
+  e.focused = false
+  e.composing = false
+  e.userSelection = null
+  e.onContextChange = null
+  e.scheduleFlush = null
+  e.pendingInsertionMarks = null
+  e.userMarks = null
+  e.pendingDiffs = []
+  e.pendingAction = null
+  e.pendingSelection = null
+  e.forceRender = null
 
   // This attempts to reset the NODE_TO_KEY entry to the correct value
   // as apply() changes the object reference and hence invalidates the NODE_TO_KEY entry
   e.apply = (op: Operation) => {
     const matches: [Path, Key][] = []
     const pathRefMatches: [PathRef, Key][] = []
 
-    const pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(e)
+    const pendingDiffs = e.pendingDiffs
     if (pendingDiffs?.length) {
       const transformed = pendingDiffs
         .map((textDiff) => transformTextDiff(textDiff, op))
         .filter(Boolean) as TextDiff[]
 
-      EDITOR_TO_PENDING_DIFFS.set(e, transformed)
+      e.pendingDiffs = transformed
     }
 
-    const pendingSelection = EDITOR_TO_PENDING_SELECTION.get(e)
+    const pendingSelection = e.pendingSelection
     if (pendingSelection) {
-      EDITOR_TO_PENDING_SELECTION.set(
-        e,
-        transformPendingRange(e, pendingSelection, op),
-      )
+      e.pendingSelection = transformPendingRange(e, pendingSelection, op)
     }
 
-    const pendingAction = EDITOR_TO_PENDING_ACTION.get(e)
+    const pendingAction = e.pendingAction
     if (pendingAction?.at) {
       const at = Point.isPoint(pendingAction?.at)
         ? transformPendingPoint(e, pendingAction.at, op)
         : transformPendingRange(e, pendingAction.at, op)
 
-      EDITOR_TO_PENDING_ACTION.set(e, at ? {...pendingAction, at} : null)
+      e.pendingAction = at ? {...pendingAction, at} : null
     }
 
     switch (op.type) {
@@ -91,8 +95,8 @@ export const withDOM = <T extends Editor>(
 
       case 'set_selection': {
         // Selection was manually set, don't restore the user selection after the change.
-        EDITOR_TO_USER_SELECTION.get(e)?.unref()
-        EDITOR_TO_USER_SELECTION.delete(e)
+        e.userSelection?.unref()
+        e.userSelection = null
         break
       }
 
@@ -146,7 +150,7 @@ export const withDOM = <T extends Editor>(
       case 'set_selection': {
         // FIXME: Rename to something like IS_DOM_EDITOR_DESYNCED
         // to better reflect reality, see #5792
-        IS_NODE_MAP_DIRTY.set(e, true)
+        e.isNodeMapDirty = true
       }
     }
 
@@ -295,7 +299,7 @@ export const withDOM = <T extends Editor>(
   }
 
   e.onChange = (options) => {
-    const onContextChange = EDITOR_TO_ON_CHANGE.get(e)
+    const onContextChange = e.onContextChange
 
     if (onContextChange) {
       onContextChange(options)

packages/editor/src/slate-dom/utils/diff-text.ts

@@ -8,7 +8,6 @@ import {
   Text,
   type Operation,
 } from '../../slate'
-import {EDITOR_TO_PENDING_DIFFS} from './weak-maps'
 
 export type StringDiff = {
   start: number
@@ -223,7 +222,7 @@ export function transformPendingPoint(
   point: Point,
   op: Operation,
 ): Point | null {
-  const pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(editor)
+  const pendingDiffs = editor.pendingDiffs
   const textDiff = pendingDiffs?.find(({path}) => Path.equals(path, point.path))
 
   if (!textDiff || point.offset <= textDiff.diff.start) {