@prosekit/web 0.8.0-beta.4 → 0.8.0-beta.6

package/dist/prosekit-web.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"prosekit-web.js","names":[],"sources":["../src/queue-extension.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\n\n/**\n\n  @internal\n\n  Queues an extension to be added to the editor in the next task. Returns a\n  dispose function that can be used to remove the extension in the next task.\n\n  Why?\n\n  Let's take React as an example.\n\n  `editor.use(extension)` is synchronous. If the extension adds a node view that\n  is controlled by `@prosemirror-adapter/react`, adding this extension will\n  cause `prosemirror-adapter` to set UI state synchronously (e.g. `setState`\n  returned by `useState` in React).\n\n  ProseMirror is a sync-based framework. When updating node view, ProseMirror\n  will first stop DOMObserver, then update the DOM, then resume DOMObserver.\n  `prosemirror-adapter` needs to call `React.flushSync()` to update the DOM\n  synchronously right after React state is updated, before ProseMirror resumes\n  DOMObserver.\n\n  If we call `editor.use(extension)` directly in `useEffect`, we eventually are\n  doing something like this:\n\n  ```ts\n  React.useEffect(() => {\n    React.flushSync(() => {\n      setState(newState)\n    })\n  }, [])\n  ```\n\n  This breaks the async nature of React, and causes the following React\n  warning:\n\n  ```\n  flushSync was called from inside a lifecycle method. React cannot flush when\n  React is already rendering. Consider moving this call to a scheduler task or\n  micro task.\n  ```\n\n  To fix this, we need to queue the extension addition to the editor in the next\n  task or in the next microtask.\n\n  ```ts\n  // In the next microtask\n  React.useEffect(() => {\n    queueMicrotask(() => {\n      React.flushSync(() => {\n        setState(newState)\n      })\n    })\n  }, [])\n\n  // In the next task\n  React.useEffect(() => {\n    setTimeout(() => {\n      React.flushSync(() => {\n        setState(newState)\n      })\n    })\n  }, [])\n  ```\n\n  I chose to use `setTimeout` instead of `queueMicrotask` because\n  `queueMicrotask` causes another React act warning `An update to %s inside a\n  test was not wrapped in act(...)` during testing.\n\n  Although the example above is based on React, this is a general pattern for\n  any async based UI framework, including Svelte.\n\n */\nexport function queueExtension(editor: Editor, extension: Extension): VoidFunction {\n  let canceled = false\n  let dispose: VoidFunction | undefined\n  const timeout = setTimeout(() => {\n    if (canceled) return\n    dispose?.()\n    dispose = editor.use(extension)\n  })\n\n  return () => {\n    canceled = true\n    clearTimeout(timeout)\n    setTimeout(() => {\n      dispose?.()\n      dispose = undefined\n    })\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,eAAe,QAAgB,WAAoC;CACjF,IAAI,WAAW;CACf,IAAI;CACJ,MAAM,UAAU,iBAAiB;AAC/B,MAAI,SAAU;AACd,aAAW;AACX,YAAU,OAAO,IAAI,UAAU;GAC/B;AAEF,cAAa;AACX,aAAW;AACX,eAAa,QAAQ;AACrB,mBAAiB;AACf,cAAW;AACX,aAAU,KAAA;IACV"}