@prosekit/web 0.7.9 → 0.7.10

package/src/index.ts

@@ -1 +1 @@
-export {}
+export { queueExtension } from './queue-extension'

package/src/queue-extension.ts

@@ -0,0 +1,93 @@
+import type { Editor, Extension } from '@prosekit/core'
+
+/**
+
+  @internal
+
+  Queues an extension to be added to the editor in the next task. Returns a
+  dispose function that can be used to remove the extension in the next task.
+
+  Why?
+
+  Let's take React as an example.
+
+  `editor.use(extension)` is synchronous. If the extension adds a node view that
+  is controlled by `@prosemirror-adapter/react`, adding this extension will
+  cause `prosemirror-adapter` to set UI state synchronously (e.g. `setState`
+  returned by `useState` in React).
+
+  ProseMirror is a sync-based framework. When updating node view, ProseMirror
+  will first stop DOMObserver, then update the DOM, then resume DOMObserver.
+  `prosemirror-adapter` needs to call `React.flushSync()` to update the DOM
+  synchronously right after React state is updated, before ProseMirror resumes
+  DOMObserver.
+
+  If we call `editor.use(extension)` directly in `useEffect`, we eventually are
+  doing something like this:
+
+  ```ts
+  React.useEffect(() => {
+    React.flushSync(() => {
+      setState(newState)
+    })
+  }, [])
+  ```
+
+  This breaks the async nature of React, and causes the following React
+  warning:
+
+  ```
+  flushSync was called from inside a lifecycle method. React cannot flush when
+  React is already rendering. Consider moving this call to a scheduler task or
+  micro task.
+  ```
+
+  To fix this, we need to queue the extension addition to the editor in the next
+  task or in the next microtask.
+
+  ```ts
+  // In the next microtask
+  React.useEffect(() => {
+    queueMicrotask(() => {
+      React.flushSync(() => {
+        setState(newState)
+      })
+    })
+  }, [])
+
+  // In the next task
+  React.useEffect(() => {
+    setTimeout(() => {
+      React.flushSync(() => {
+        setState(newState)
+      })
+    })
+  }, [])
+  ```
+
+  I chose to use `setTimeout` instead of `queueMicrotask` because
+  `queueMicrotask` causes another React act warning `An update to %s inside a
+  test was not wrapped in act(...)` during testing.
+
+  Although the example above is based on React, this is a general pattern for
+  any async based UI framework, including Svelte.
+
+ */
+export function queueExtension(editor: Editor, extension: Extension): VoidFunction {
+  let canceled = false
+  let dispose: VoidFunction | undefined
+  const timeout = setTimeout(() => {
+    if (canceled) return
+    dispose?.()
+    dispose = editor.use(extension)
+  })
+
+  return () => {
+    canceled = true
+    clearTimeout(timeout)
+    setTimeout(() => {
+      dispose?.()
+      dispose = undefined
+    })
+  }
+}

package/src/utils/get-default-state.spec.ts

@@ -1,13 +1,5 @@
-import {
-  createSignal,
-  type PropDeclarations,
-  type SignalState,
-} from '@aria-ui/core'
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { createSignal, type PropDeclarations, type SignalState } from '@aria-ui/core'
+import { describe, expect, it } from 'vitest'
 
 import { getStateWithDefaults } from './get-default-state'
 

package/src/utils/get-default-state.ts

@@ -1,8 +1,4 @@
-import {
-  createSignal,
-  type PropDeclarations,
-  type SignalState,
-} from '@aria-ui/core'
+import { createSignal, type PropDeclarations, type SignalState } from '@aria-ui/core'
 
 export function getStateWithDefaults<
   Props extends Record<string, any> = Record<string, any>,

package/dist/get-default-state-Bqluw34o.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-default-state-Bqluw34o.js","names":[],"sources":["../src/utils/get-default-state.ts"],"sourcesContent":["import {\n  createSignal,\n  type PropDeclarations,\n  type SignalState,\n} from '@aria-ui/core'\n\nexport function getStateWithDefaults<\n  Props extends Record<string, any> = Record<string, any>,\n>(\n  state: Partial<SignalState<Props>>,\n  props: PropDeclarations<Props>,\n): SignalState<Props> {\n  const merged = { ...state } as SignalState<Props>\n\n  for (const key of Object.keys(props) as (keyof Props)[]) {\n    if (!merged[key]) {\n      merged[key] = createSignal(props[key].default)\n    }\n  }\n\n  return merged\n}\n"],"mappings":";;;AAMA,SAAgB,qBAGd,OACA,OACoB;CACpB,MAAM,SAAS,EAAE,GAAG,OAAO;AAE3B,MAAK,MAAM,OAAO,OAAO,KAAK,MAAM,CAClC,KAAI,CAAC,OAAO,KACV,QAAO,OAAO,aAAa,MAAM,KAAK,QAAQ;AAIlD,QAAO"}

package/dist/inject-style-DYQXx-cE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inject-style-DYQXx-cE.js","names":["styles: string[]","source","target","cssProps: string[]"],"sources":["../src/utils/clone-element.ts","../src/utils/inject-style.ts"],"sourcesContent":["import { getId } from '@ocavue/utils'\n\n/**\n * Creates a deep clone of an Element, including all computed styles so that\n * it looks almost exactly the same as the original element.\n */\nexport function deepCloneElement<T extends Element>(element: T, important = false): [T, string] {\n  const clonedElement = element.cloneNode(true) as T\n  const style = deepCopyStyles(element, clonedElement, important)\n  return [clonedElement, style]\n}\n\n/**\n * Creates a clone of an Element, including all computed styles so that\n * it looks similar enough to the original element.\n */\nexport function cloneElement<T extends Element>(element: T, important = false): [T, string] {\n  const clonedElement = element.cloneNode() as T\n  const style = copyStyles(element, clonedElement, important)\n  return [clonedElement, style]\n}\n\nfunction deepCopyStyles(source: Element, target: Element, important: boolean): string {\n  const sources = [source]\n  const targets = [target]\n  const styles: string[] = []\n\n  while (sources.length > 0 && sources.length === targets.length) {\n    const source = sources.pop()\n    const target = targets.pop()\n\n    if (!source || !target) {\n      break\n    }\n\n    const style = copyStyles(source, target, important)\n    if (style) {\n      styles.push(style)\n    }\n\n    sources.push(...source.children)\n    targets.push(...target.children)\n  }\n\n  return styles.join('\\n')\n}\n\nfunction copyStyles(source: Element, target: Element, important: boolean): string {\n  if (!source || !target) {\n    return ''\n  }\n\n  const view = source.ownerDocument?.defaultView\n  if (!view) {\n    return ''\n  }\n\n  // Known issue: pseudo styles are not copied.\n  const sourceStyle = view.getComputedStyle(source)\n  const targetStyle = (target as HTMLElement | SVGElement | MathMLElement).style\n\n  if (!sourceStyle || !targetStyle) {\n    return ''\n  }\n\n  for (const key of sourceStyle) {\n    targetStyle.setProperty(\n      key,\n      sourceStyle.getPropertyValue(key),\n      // Enforce important to avoid the style being overridden when the element\n      // is connected to the page.\n      // See https://github.com/prosekit/prosekit/issues/1185 for more details.\n      important ? 'important' : (sourceStyle.getPropertyPriority(key) || ''),\n    )\n  }\n\n  const styles: string[] = []\n  for (const pseudoSelector of [':before', ':after']) {\n    const sourcePseudoStyle = view.getComputedStyle(source, pseudoSelector)\n    const targetPseudoStyle = view.getComputedStyle(target, pseudoSelector)\n\n    if (!sourcePseudoStyle) {\n      continue\n    }\n\n    const content = sourcePseudoStyle.getPropertyValue('content')\n    const hasPseudoElement = content && content !== 'none' && content !== 'normal'\n\n    if (!hasPseudoElement) {\n      continue\n    }\n\n    const cssProps: string[] = []\n    for (const property of sourcePseudoStyle) {\n      const sourceValue = sourcePseudoStyle.getPropertyValue(property)\n      const sourcePriority = sourcePseudoStyle.getPropertyPriority(property)\n      const targetValue = targetPseudoStyle.getPropertyValue(property)\n      const targetPriority = targetPseudoStyle.getPropertyPriority(property)\n      if (sourceValue !== targetValue || sourcePriority !== targetPriority) {\n        cssProps.push(`${property}: ${sourceValue}${sourcePriority ? ' !important' : ''};`)\n      }\n    }\n\n    const uniqueClassName = `clone-pseudo-element-${getId()}`\n    target.classList.add(uniqueClassName)\n    styles.push(`.${uniqueClassName}${pseudoSelector} { ${cssProps.join(' ')} }`)\n  }\n\n  return styles.join('\\n')\n}\n","import { getDocument } from '@ocavue/utils'\n\nexport function injectStyle(container: HTMLElement, styleText: string): void {\n  if (!styleText) {\n    return\n  }\n  const document = getDocument(container)\n  const style = document.createElement('style')\n  style.textContent = styleText\n  container.appendChild(style)\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,iBAAoC,SAAY,YAAY,OAAoB;CAC9F,MAAM,gBAAgB,QAAQ,UAAU,KAAK;AAE7C,QAAO,CAAC,eADM,eAAe,SAAS,eAAe,UAAU,CAClC;;;;;;AAO/B,SAAgB,aAAgC,SAAY,YAAY,OAAoB;CAC1F,MAAM,gBAAgB,QAAQ,WAAW;AAEzC,QAAO,CAAC,eADM,WAAW,SAAS,eAAe,UAAU,CAC9B;;AAG/B,SAAS,eAAe,QAAiB,QAAiB,WAA4B;CACpF,MAAM,UAAU,CAAC,OAAO;CACxB,MAAM,UAAU,CAAC,OAAO;CACxB,MAAMA,SAAmB,EAAE;AAE3B,QAAO,QAAQ,SAAS,KAAK,QAAQ,WAAW,QAAQ,QAAQ;EAC9D,MAAMC,WAAS,QAAQ,KAAK;EAC5B,MAAMC,WAAS,QAAQ,KAAK;AAE5B,MAAI,CAACD,YAAU,CAACC,SACd;EAGF,MAAM,QAAQ,WAAWD,UAAQC,UAAQ,UAAU;AACnD,MAAI,MACF,QAAO,KAAK,MAAM;AAGpB,UAAQ,KAAK,GAAGD,SAAO,SAAS;AAChC,UAAQ,KAAK,GAAGC,SAAO,SAAS;;AAGlC,QAAO,OAAO,KAAK,KAAK;;AAG1B,SAAS,WAAW,QAAiB,QAAiB,WAA4B;AAChF,KAAI,CAAC,UAAU,CAAC,OACd,QAAO;CAGT,MAAM,OAAO,OAAO,eAAe;AACnC,KAAI,CAAC,KACH,QAAO;CAIT,MAAM,cAAc,KAAK,iBAAiB,OAAO;CACjD,MAAM,cAAe,OAAoD;AAEzE,KAAI,CAAC,eAAe,CAAC,YACnB,QAAO;AAGT,MAAK,MAAM,OAAO,YAChB,aAAY,YACV,KACA,YAAY,iBAAiB,IAAI,EAIjC,YAAY,cAAe,YAAY,oBAAoB,IAAI,IAAI,GACpE;CAGH,MAAMF,SAAmB,EAAE;AAC3B,MAAK,MAAM,kBAAkB,CAAC,WAAW,SAAS,EAAE;EAClD,MAAM,oBAAoB,KAAK,iBAAiB,QAAQ,eAAe;EACvE,MAAM,oBAAoB,KAAK,iBAAiB,QAAQ,eAAe;AAEvE,MAAI,CAAC,kBACH;EAGF,MAAM,UAAU,kBAAkB,iBAAiB,UAAU;AAG7D,MAAI,EAFqB,WAAW,YAAY,UAAU,YAAY,UAGpE;EAGF,MAAMG,WAAqB,EAAE;AAC7B,OAAK,MAAM,YAAY,mBAAmB;GACxC,MAAM,cAAc,kBAAkB,iBAAiB,SAAS;GAChE,MAAM,iBAAiB,kBAAkB,oBAAoB,SAAS;GACtE,MAAM,cAAc,kBAAkB,iBAAiB,SAAS;GAChE,MAAM,iBAAiB,kBAAkB,oBAAoB,SAAS;AACtE,OAAI,gBAAgB,eAAe,mBAAmB,eACpD,UAAS,KAAK,GAAG,SAAS,IAAI,cAAc,iBAAiB,gBAAgB,GAAG,GAAG;;EAIvF,MAAM,kBAAkB,wBAAwB,OAAO;AACvD,SAAO,UAAU,IAAI,gBAAgB;AACrC,SAAO,KAAK,IAAI,kBAAkB,eAAe,KAAK,SAAS,KAAK,IAAI,CAAC,IAAI;;AAG/E,QAAO,OAAO,KAAK,KAAK;;;;;AC1G1B,SAAgB,YAAY,WAAwB,WAAyB;AAC3E,KAAI,CAAC,UACH;CAGF,MAAM,QADW,YAAY,UAAU,CAChB,cAAc,QAAQ;AAC7C,OAAM,cAAc;AACpB,WAAU,YAAY,MAAM"}

package/dist/use-editor-extension-B_5BbYvf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-editor-extension-B_5BbYvf.js","names":[],"sources":["../src/hooks/use-editor-extension.ts"],"sourcesContent":["import {\n  useEffect,\n  type ConnectableElement,\n  type ReadonlySignal,\n} from '@aria-ui/core'\nimport type {\n  Editor,\n  Extension,\n} from '@prosekit/core'\n\nexport function useEditorExtension(\n  host: ConnectableElement,\n  editor: ReadonlySignal<Editor | null>,\n  extension: Extension,\n): void {\n  useEffect(host, () => {\n    return editor.get()?.use(extension)\n  })\n}\n"],"mappings":";;;AAUA,SAAgB,mBACd,MACA,QACA,WACM;AACN,WAAU,YAAY;AACpB,SAAO,OAAO,KAAK,EAAE,IAAI,UAAU;GACnC"}

package/dist/use-scrolling-BjI3cuLt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-scrolling-BjI3cuLt.js","names":[],"sources":["../src/utils/assign-styles.ts","../src/hooks/use-scrolling.ts"],"sourcesContent":["import type { ConditionalPick } from 'type-fest'\n\n// Only include CSS properties whose value type is `string`\ntype StringStyleDeclaration = Partial<ConditionalPick<CSSStyleDeclaration, string>>\n\n/**\n * A type-safe version of `Object.assign` for `element.style`.\n */\nexport function assignStyles(\n  element: HTMLElement | SVGElement | MathMLElement,\n  styles: StringStyleDeclaration,\n): void {\n  Object.assign(element.style, styles)\n}\n","import {\n  createSignal,\n  useEffect,\n  type ConnectableElement,\n  type ReadonlySignal,\n} from '@aria-ui/core'\nimport { getNearestOverflowAncestor } from '@zag-js/dom-query'\n\nexport function useScrolling(host: ConnectableElement): ReadonlySignal<boolean> {\n  const scrolling = createSignal(false)\n\n  useEffect(host, () => {\n    const scrollableParent = getNearestOverflowAncestor(host)\n\n    const handleScroll = () => {\n      scrolling.set(true)\n    }\n\n    const handleMouseMove = () => {\n      scrolling.set(false)\n    }\n\n    scrollableParent.addEventListener('scroll', handleScroll, { passive: true })\n    window.addEventListener('mousemove', handleMouseMove, { passive: true })\n\n    return () => {\n      scrollableParent.removeEventListener('scroll', handleScroll)\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  })\n\n  return scrolling\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,aACd,SACA,QACM;AACN,QAAO,OAAO,QAAQ,OAAO,OAAO;;;;;ACJtC,SAAgB,aAAa,MAAmD;CAC9E,MAAM,YAAY,aAAa,MAAM;AAErC,WAAU,YAAY;EACpB,MAAM,mBAAmB,2BAA2B,KAAK;EAEzD,MAAM,qBAAqB;AACzB,aAAU,IAAI,KAAK;;EAGrB,MAAM,wBAAwB;AAC5B,aAAU,IAAI,MAAM;;AAGtB,mBAAiB,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM,CAAC;AAC5E,SAAO,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC;AAExE,eAAa;AACX,oBAAiB,oBAAoB,UAAU,aAAa;AAC5D,UAAO,oBAAoB,aAAa,gBAAgB;;GAE1D;AAEF,QAAO"}