@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
41 lines (38 loc) • 1.36 kB
JavaScript
import { flushSync } from 'react-dom';
import { createRoot } from 'react-dom/client';
/**
* Shared registry of React roots created via `createRoot`.
*
* Both `decorations-drag-handle.ts` (render) and `decorations-common.ts`
* (unmount) must operate on the **same** root for a given DOM element, so
* the WeakMap lives here and is imported by both modules.
*/
var reactRoots = new WeakMap();
/**
* Mounts `element` into `mountPoint` using the `createRoot` API wrapped in
* `flushSync` so the render is synchronous – matching the legacy
* `ReactDOM.render` timing that ProseMirror decoration widgets depend on
* (focus management, anchor positioning, block-menu visibility all read
* the rendered DOM immediately after the callback returns).
*/
export var renderToMountPoint = function renderToMountPoint(element, mountPoint) {
var root = reactRoots.get(mountPoint);
if (!root) {
root = createRoot(mountPoint);
reactRoots.set(mountPoint, root);
}
var activeRoot = root;
flushSync(function () {
return activeRoot.render(element);
});
};
/**
* Unmounts the React tree at `mountPoint` and removes it from the shared registry.
*/
export var unmountFromMountPoint = function unmountFromMountPoint(mountPoint) {
var root = reactRoots.get(mountPoint);
if (root) {
root.unmount();
reactRoots.delete(mountPoint);
}
};