@prosekit/react 0.0.0-next-20231120040948 → 0.0.0-next-20240421132240

package/dist/prosekit-react-inline-popover.js

@@ -1,17 +1,17 @@
-// src/components/inline-popover.gen.ts
-import { createComponent } from "@lit/react";
-import { InlinePopover as InlinePopoverElement } from "@prosekit/lit/inline-popover";
-import React from "react";
-var InlinePopoverInner = createComponent({
-  tagName: "prosekit-inline-popover",
-  elementClass: InlinePopoverElement,
-  react: React,
-  displayName: "InlinePopoverInner"
-});
-var InlinePopover = React.forwardRef((props, ref) => {
-  return React.createElement(InlinePopoverInner, { ...props, ref });
-});
-InlinePopover.displayName = "InlinePopover";
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/inline-popover/inline-popover.gen.ts
+import {
+  defaultInlinePopoverProps
+} from "@prosekit/web/inline-popover";
+var InlinePopover = createComponent(
+  "prosekit-inline-popover",
+  "InlinePopover",
+  defaultInlinePopoverProps
+);
 export {
   InlinePopover
 };

package/dist/prosekit-react-popover.d.ts

@@ -1,2 +1,3 @@
-export { PopoverProps } from './_tsup-dts-rollup';
-export { Popover } from './_tsup-dts-rollup';
+export { PopoverContent } from './_tsup-dts-rollup';
+export { PopoverRoot } from './_tsup-dts-rollup';
+export { PopoverTrigger } from './_tsup-dts-rollup';

package/dist/prosekit-react-popover.js

@@ -1,17 +1,39 @@
-// src/components/popover.gen.ts
-import { createComponent } from "@lit/react";
-import { Popover as PopoverElement } from "@prosekit/lit/popover";
-import React from "react";
-var PopoverInner = createComponent({
-  tagName: "prosekit-popover",
-  elementClass: PopoverElement,
-  react: React,
-  displayName: "PopoverInner"
-});
-var Popover = React.forwardRef((props, ref) => {
-  return React.createElement(PopoverInner, { ...props, ref });
-});
-Popover.displayName = "Popover";
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/popover/popover-content.gen.ts
+import {
+  defaultPopoverContentProps
+} from "@prosekit/web/popover";
+var PopoverContent = createComponent(
+  "prosekit-popover-content",
+  "PopoverContent",
+  defaultPopoverContentProps
+);
+
+// src/components/popover/popover-root.gen.ts
+import {
+  defaultPopoverRootProps
+} from "@prosekit/web/popover";
+var PopoverRoot = createComponent(
+  "prosekit-popover-root",
+  "PopoverRoot",
+  defaultPopoverRootProps
+);
+
+// src/components/popover/popover-trigger.gen.ts
+import {
+  defaultPopoverTriggerProps
+} from "@prosekit/web/popover";
+var PopoverTrigger = createComponent(
+  "prosekit-popover-trigger",
+  "PopoverTrigger",
+  defaultPopoverTriggerProps
+);
 export {
-  Popover
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger
 };

package/dist/prosekit-react-resizable.d.ts

@@ -0,0 +1,2 @@
+export { ResizableHandle } from './_tsup-dts-rollup';
+export { ResizableRoot } from './_tsup-dts-rollup';

package/dist/prosekit-react-resizable.js

@@ -0,0 +1,28 @@
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/resizable/resizable-handle.gen.ts
+import {
+  defaultResizableHandleProps
+} from "@prosekit/web/resizable";
+var ResizableHandle = createComponent(
+  "prosekit-resizable-handle",
+  "ResizableHandle",
+  defaultResizableHandleProps
+);
+
+// src/components/resizable/resizable-root.gen.ts
+import {
+  defaultResizableRootProps
+} from "@prosekit/web/resizable";
+var ResizableRoot = createComponent(
+  "prosekit-resizable-root",
+  "ResizableRoot",
+  defaultResizableRootProps
+);
+export {
+  ResizableHandle,
+  ResizableRoot
+};

package/dist/prosekit-react-tooltip.d.ts

@@ -0,0 +1,3 @@
+export { TooltipContent } from './_tsup-dts-rollup';
+export { TooltipRoot } from './_tsup-dts-rollup';
+export { TooltipTrigger } from './_tsup-dts-rollup';

package/dist/prosekit-react-tooltip.js

@@ -0,0 +1,39 @@
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/tooltip/tooltip-content.gen.ts
+import {
+  defaultTooltipContentProps
+} from "@prosekit/web/tooltip";
+var TooltipContent = createComponent(
+  "prosekit-tooltip-content",
+  "TooltipContent",
+  defaultTooltipContentProps
+);
+
+// src/components/tooltip/tooltip-root.gen.ts
+import {
+  defaultTooltipRootProps
+} from "@prosekit/web/tooltip";
+var TooltipRoot = createComponent(
+  "prosekit-tooltip-root",
+  "TooltipRoot",
+  defaultTooltipRootProps
+);
+
+// src/components/tooltip/tooltip-trigger.gen.ts
+import {
+  defaultTooltipTriggerProps
+} from "@prosekit/web/tooltip";
+var TooltipTrigger = createComponent(
+  "prosekit-tooltip-trigger",
+  "TooltipTrigger",
+  defaultTooltipTriggerProps
+);
+export {
+  TooltipContent,
+  TooltipRoot,
+  TooltipTrigger
+};

package/dist/prosekit-react.d.ts

@@ -1,10 +1,13 @@
-export { useNodeViewContext } from './_tsup-dts-rollup';
 export { ProseKit } from './_tsup-dts-rollup';
 export { ProseKitProps } from './_tsup-dts-rollup';
 export { defineReactNodeView } from './_tsup-dts-rollup';
-export { ReactNodeViewComponentProps } from './_tsup-dts-rollup';
 export { ReactNodeViewOptions } from './_tsup-dts-rollup';
 export { useEditor } from './_tsup-dts-rollup';
-export { UseEditorOptions } from './_tsup-dts-rollup';
 export { useExtension } from './_tsup-dts-rollup';
+export { UseExtensionOptions } from './_tsup-dts-rollup';
 export { useKeymap } from './_tsup-dts-rollup';
+export { useStateUpdate } from './_tsup-dts-rollup';
+export { useDocChange } from './_tsup-dts-rollup';
+export { PropsWithClassName } from './_tsup-dts-rollup';
+export { ReactNodeViewComponent } from './_tsup-dts-rollup';
+export { ReactNodeViewProps } from './_tsup-dts-rollup';

package/dist/prosekit-react.js

@@ -1,79 +1,291 @@
-// src/index.ts
-import { useNodeViewContext as useNodeViewContext2 } from "@prosemirror-adapter/react";
+import {
+  EditorContextProvider,
+  useEditorContext
+} from "./chunk-BH56NR2Q.js";
 
 // src/components/prosekit.ts
 import "@prosekit/core";
-import {
-  ProsemirrorAdapterProvider,
-  useNodeViewFactory
-} from "@prosemirror-adapter/react";
-import { createElement as createElement2, useMemo } from "react";
+import { createElement as createElement3 } from "react";
 
-// src/contexts/editor-context.ts
-import { createContext } from "react";
-var editorContext = createContext(null);
+// src/views/react-views-consumer.ts
+import { useMemo as useMemo2 } from "react";
 
 // src/extensions/react-node-view.ts
-import { defineNodeViewEffect } from "@prosekit/core";
 import {
-  useNodeViewContext
-} from "@prosemirror-adapter/react";
-import { createElement } from "react";
+  defineNodeViewFactory
+} from "@prosekit/core";
 function defineReactNodeView(options) {
-  return defineNodeViewEffect({
+  const { name, ...userOptions } = options;
+  return defineNodeViewFactory({
     group: "react",
-    name: options.name,
-    args: options
+    name,
+    args: userOptions
   });
 }
-function defineReactNodeViewRenderer({
-  nodeViewFactory
-}) {
-  return defineNodeViewEffect({
+function defineReactNodeViewFactory(nodeViewFactory) {
+  return defineNodeViewFactory({
     group: "react",
-    factory: (args) => {
-      const nodeViewOptions = args;
-      return nodeViewFactory({
-        component: function ReactNodeViewWrapper() {
-          const context = useNodeViewContext();
-          return createElement(nodeViewOptions.component, context);
-        },
-        // Optional: add some options
-        as: () => {
-          const dom = document.createElement("div");
-          dom.style.display = "contents";
-          return dom;
-        },
-        contentAs: "code"
-      });
-    }
+    factory: nodeViewFactory
   });
 }
 
 // src/hooks/use-extension.ts
 import "@prosekit/core";
-import { useEffect as useEffect2 } from "react";
+
+// src/hooks/use-editor-extension.ts
+import { EditorNotFoundError } from "@prosekit/core";
+import { useEffect } from "react";
+function useEditorExtension(editor, extension) {
+  if (!editor) {
+    throw new EditorNotFoundError();
+  }
+  useEffect(() => {
+    if (extension) {
+      return editor.use(extension);
+    }
+  }, [editor, extension]);
+}
+
+// src/hooks/use-priority-extension.ts
+import { withPriority } from "@prosekit/core";
+import { useMemo } from "react";
+function usePriorityExtension(extension, priority) {
+  return useMemo(() => {
+    return extension && priority ? withPriority(extension, priority) : extension;
+  }, [extension, priority]);
+}
+
+// src/hooks/use-extension.ts
+function useExtension(extension, options) {
+  const editorContext = useEditorContext();
+  useEditorExtension(
+    (options == null ? void 0 : options.editor) || editorContext,
+    usePriorityExtension(extension, options == null ? void 0 : options.priority)
+  );
+}
+
+// src/views/node-view/node-view-context.ts
+import { ProseKitError } from "@prosekit/core";
+import { createContext, useContext } from "react";
+var createNodeViewContext = createContext(null);
+function useNodeViewFactory() {
+  const nodeViewFactory = useContext(createNodeViewContext);
+  if (!nodeViewFactory) {
+    throw new ProseKitError("Cannot find node view factory context.");
+  }
+  return nodeViewFactory;
+}
+
+// src/views/react-views-consumer.ts
+var ReactViewsConsumer = () => {
+  const nodeViewFactory = useNodeViewFactory();
+  const extension = useMemo2(
+    () => defineReactNodeViewFactory(nodeViewFactory),
+    [nodeViewFactory]
+  );
+  useExtension(extension);
+  return null;
+};
+
+// src/views/react-views-provider.ts
+import { createElement as createElement2, useMemo as useMemo3 } from "react";
+
+// src/views/node-view/use-react-node-view-creator.ts
+import { useCallback } from "react";
+
+// src/views/node-view/react-node-view.ts
+import { _getId } from "@prosekit/core";
+import { CoreNodeView } from "@prosemirror-adapter/core";
+import { createElement } from "react";
+import { createPortal } from "react-dom";
+var ReactNodeView = class extends CoreNodeView {
+  constructor() {
+    super(...arguments);
+    this.key = _getId();
+    this.context = {
+      contentRef: (element) => {
+        if (element && this.contentDOM && element.firstChild !== this.contentDOM)
+          element.appendChild(this.contentDOM);
+      },
+      view: this.view,
+      getPos: this.getPos,
+      setAttrs: this.setAttrs,
+      node: this.node,
+      selected: this.selected,
+      decorations: this.decorations,
+      innerDecorations: this.innerDecorations
+    };
+    this.updateContext = () => {
+      Object.assign(this.context, {
+        node: this.node,
+        selected: this.selected,
+        decorations: this.decorations,
+        innerDecorations: this.innerDecorations
+      });
+    };
+    this.render = () => {
+      const UserComponent = this.component;
+      return createPortal(
+        createElement(UserComponent, this.context),
+        this.dom,
+        this.key
+      );
+    };
+  }
+};
+
+// src/views/node-view/use-react-node-view-creator.ts
+function useReactNodeViewCreator(renderReactRenderer, removeReactRenderer) {
+  const createReactNodeView = useCallback(
+    (options) => (node, view, getPos, decorations, innerDecorations) => {
+      const nodeView = new ReactNodeView({
+        node,
+        view,
+        getPos,
+        decorations,
+        innerDecorations,
+        options: {
+          ...options,
+          onUpdate() {
+            var _a;
+            (_a = options.onUpdate) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          selectNode() {
+            var _a;
+            (_a = options.selectNode) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          deselectNode() {
+            var _a;
+            (_a = options.deselectNode) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          destroy() {
+            var _a;
+            (_a = options.destroy) == null ? void 0 : _a.call(options);
+            removeReactRenderer(nodeView);
+          }
+        }
+      });
+      renderReactRenderer(nodeView, false);
+      return nodeView;
+    },
+    [removeReactRenderer, renderReactRenderer]
+  );
+  return createReactNodeView;
+}
+
+// src/views/react-renderer.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+function useReactRenderer() {
+  const [portals, setPortals] = useState({});
+  const mountedRef = useRef(false);
+  useEffect2(() => {
+    requestAnimationFrame(() => {
+      mountedRef.current = true;
+    });
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const maybeFlushSync = useCallback2((fn) => {
+    if (mountedRef.current)
+      flushSync(fn);
+    else
+      fn();
+  }, []);
+  const renderReactRenderer = useCallback2(
+    (nodeView, update = true) => {
+      maybeFlushSync(() => {
+        if (update)
+          nodeView.updateContext();
+        setPortals((prev) => ({
+          ...prev,
+          [nodeView.key]: nodeView.render()
+        }));
+      });
+    },
+    [maybeFlushSync]
+  );
+  const removeReactRenderer = useCallback2(
+    (nodeView) => {
+      maybeFlushSync(() => {
+        setPortals((prev) => {
+          const next = { ...prev };
+          delete next[nodeView.key];
+          return next;
+        });
+      });
+    },
+    [maybeFlushSync]
+  );
+  return {
+    portals,
+    renderReactRenderer,
+    removeReactRenderer
+  };
+}
+
+// src/views/react-views-provider.ts
+var ReactViewsProvider = ({
+  children
+}) => {
+  const { renderReactRenderer, removeReactRenderer, portals } = useReactRenderer();
+  const createReactNodeView = useReactNodeViewCreator(
+    renderReactRenderer,
+    removeReactRenderer
+  );
+  const memoizedPortals = useMemo3(() => Object.values(portals), [portals]);
+  return createElement2(
+    createNodeViewContext.Provider,
+    { value: createReactNodeView },
+    children,
+    memoizedPortals
+  );
+};
+
+// src/components/prosekit.ts
+var ProseKit = (props) => {
+  const { editor, children } = props;
+  return createElement3(
+    ReactViewsProvider,
+    null,
+    createElement3(
+      EditorContextProvider,
+      { value: editor },
+      createElement3(ReactViewsConsumer),
+      children
+    )
+  );
+};
 
 // src/hooks/use-editor.ts
 import {
-  ProseKitError,
-  defineUpdateHandler
+  ProseKitError as ProseKitError2,
+  defineMountHandler,
+  defineUpdateHandler,
+  union
 } from "@prosekit/core";
-import { useContext, useEffect, useReducer } from "react";
+import { useEffect as useEffect3, useReducer } from "react";
 function useEditor(options) {
   var _a;
   const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
-  const value = useContext(editorContext);
-  if (!value) {
-    throw new ProseKitError(
+  const editor = useEditorContext();
+  if (!editor) {
+    throw new ProseKitError2(
       "useEditor must be used within the ProseKit component"
     );
   }
-  const editor = value.editor;
   const forceUpdate = useForceUpdate();
-  useEffect(() => {
+  useEffect3(() => {
     if (update) {
-      return editor.use(defineUpdateHandler(forceUpdate));
+      const extension = union([
+        defineMountHandler(forceUpdate),
+        defineUpdateHandler(forceUpdate)
+      ]);
+      return editor.use(extension);
     }
   }, [editor, update, forceUpdate]);
   return editor;
@@ -83,51 +295,41 @@ function useForceUpdate() {
   return dispatch;
 }
 
-// src/hooks/use-extension.ts
-function useExtension(extension) {
-  const editor = useEditor();
-  useEffect2(() => {
-    return editor.use(extension);
-  }, [editor, extension]);
+// src/hooks/use-keymap.ts
+import { defineKeymap } from "@prosekit/core";
+import { useMemo as useMemo4 } from "react";
+function useKeymap(keymap, options) {
+  const extension = useMemo4(() => defineKeymap(keymap), [keymap]);
+  return useExtension(extension, options);
 }
 
-// src/components/prosekit.ts
-var ProseKit = (props) => {
-  const { editor, children } = props;
-  return createElement2(
-    ProsemirrorAdapterProvider,
-    null,
-    createElement2(
-      EditorContextProvider,
-      { value: { editor } },
-      children,
-      createElement2(RendererRegister)
-    )
+// src/hooks/use-state-update.ts
+import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
+import { useMemo as useMemo5 } from "react";
+function useStateUpdate(handler, options) {
+  const extension = useMemo5(
+    () => defineUpdateHandler2((view) => handler(view.state)),
+    [handler]
   );
-};
-function RendererRegister() {
-  const nodeViewFactory = useNodeViewFactory();
-  const extension = useMemo(
-    () => defineReactNodeViewRenderer({ nodeViewFactory }),
-    [nodeViewFactory]
-  );
-  useExtension(extension);
-  return null;
+  return useExtension(extension, options);
 }
-var EditorContextProvider = editorContext.Provider;
 
-// src/hooks/use-keymap.ts
-import { defineKeymap } from "@prosekit/core";
-import { useMemo as useMemo2 } from "react";
-function useKeymap(keymap) {
-  const extension = useMemo2(() => defineKeymap(keymap), [keymap]);
-  useExtension(extension);
+// src/hooks/use-doc-change.ts
+import { defineDocChangeHandler } from "@prosekit/core";
+import { useMemo as useMemo6 } from "react";
+function useDocChange(handler, options) {
+  const extension = useMemo6(
+    () => defineDocChangeHandler((view) => handler(view.state.doc)),
+    [handler]
+  );
+  return useExtension(extension, options);
 }
 export {
   ProseKit,
   defineReactNodeView,
+  useDocChange,
   useEditor,
   useExtension,
   useKeymap,
-  useNodeViewContext2 as useNodeViewContext
+  useStateUpdate
 };