@prosekit/react 0.3.6 → 0.3.7

package/dist/chunk-JQQDRLKV.js

@@ -0,0 +1,33 @@
+import {
+  useEditorContext
+} from "./chunk-BH56NR2Q.js";
+
+// src/components/create-component.ts
+import {
+  createElement,
+  forwardRef,
+  useLayoutEffect,
+  useState
+} from "react";
+import { mergeRefs } from "react-merge-refs";
+function createComponent(tagName, displayName, defaultProps) {
+  let propertyNames = Object.keys(defaultProps), hasEditor = Object.hasOwn(defaultProps, "editor"), Component = forwardRef((props, ref) => {
+    let [el, setEl] = useState(null), properties = {}, attributes = {};
+    for (let [name, value] of Object.entries(props))
+      propertyNames.includes(name) ? properties[name] = value : attributes[name === "className" ? "class" : name] = value;
+    let editor = useEditorContext();
+    return hasEditor && editor && !properties.editor && (properties.editor = editor), useLayoutEffect(() => {
+      if (el)
+        for (let [name, value] of Object.entries(properties))
+          value !== void 0 && (el[name] = value);
+    }, [el, ...propertyNames.map((name) => properties[name])]), createElement(tagName, {
+      ...attributes,
+      ref: mergeRefs([ref, setEl])
+    });
+  });
+  return Component.displayName = displayName, Component;
+}
+
+export {
+  createComponent
+};

package/dist/prosekit-react-autocomplete.js

@@ -1,6 +1,6 @@
 import {
   createComponent
-} from "./chunk-UG3RPLME.js";
+} from "./chunk-JQQDRLKV.js";
 import "./chunk-BH56NR2Q.js";
 
 // src/components/autocomplete/autocomplete-empty.gen.ts

package/dist/prosekit-react-block-handle.js

@@ -1,6 +1,6 @@
 import {
   createComponent
-} from "./chunk-UG3RPLME.js";
+} from "./chunk-JQQDRLKV.js";
 import "./chunk-BH56NR2Q.js";
 
 // src/components/block-handle/block-drag-handle.gen.ts

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

@@ -1,6 +1,6 @@
 import {
   createComponent
-} from "./chunk-UG3RPLME.js";
+} from "./chunk-JQQDRLKV.js";
 import "./chunk-BH56NR2Q.js";
 
 // src/components/inline-popover/inline-popover.gen.ts

package/dist/prosekit-react-popover.js

@@ -1,6 +1,6 @@
 import {
   createComponent
-} from "./chunk-UG3RPLME.js";
+} from "./chunk-JQQDRLKV.js";
 import "./chunk-BH56NR2Q.js";
 
 // src/components/popover/popover-content.gen.ts

package/dist/prosekit-react-resizable.js

@@ -1,6 +1,6 @@
 import {
   createComponent
-} from "./chunk-UG3RPLME.js";
+} from "./chunk-JQQDRLKV.js";
 import "./chunk-BH56NR2Q.js";
 
 // src/components/resizable/resizable-handle.gen.ts

package/dist/prosekit-react-tooltip.js

@@ -1,6 +1,6 @@
 import {
   createComponent
-} from "./chunk-UG3RPLME.js";
+} from "./chunk-JQQDRLKV.js";
 import "./chunk-BH56NR2Q.js";
 
 // src/components/tooltip/tooltip-content.gen.ts

package/dist/prosekit-react.js

@@ -15,7 +15,7 @@ import {
   defineNodeViewFactory
 } from "@prosekit/core";
 function defineReactNodeView(options) {
-  const { name, ...userOptions } = options;
+  let { name, ...userOptions } = options;
   return defineNodeViewFactory({
     group: "react",
     name,
@@ -36,13 +36,11 @@ import "@prosekit/core";
 import { EditorNotFoundError } from "@prosekit/core";
 import { useEffect } from "react";
 function useEditorExtension(editor, extension) {
-  if (!editor) {
+  if (!editor)
     throw new EditorNotFoundError();
-  }
   useEffect(() => {
-    if (extension) {
+    if (extension)
       return editor.use(extension);
-    }
   }, [editor, extension]);
 }
 
@@ -50,14 +48,12 @@ function useEditorExtension(editor, extension) {
 import { withPriority } from "@prosekit/core";
 import { useMemo } from "react";
 function usePriorityExtension(extension, priority) {
-  return useMemo(() => {
-    return extension && priority ? withPriority(extension, priority) : extension;
-  }, [extension, priority]);
+  return useMemo(() => extension && priority ? withPriority(extension, priority) : extension, [extension, priority]);
 }
 
 // src/hooks/use-extension.ts
 function useExtension(extension, options) {
-  const editorContext = useEditorContext();
+  let editorContext = useEditorContext();
   useEditorExtension(
     (options == null ? void 0 : options.editor) || editorContext,
     usePriorityExtension(extension, options == null ? void 0 : options.priority)
@@ -69,22 +65,19 @@ import { ProseKitError } from "@prosekit/core";
 import { createContext, useContext } from "react";
 var createNodeViewContext = createContext(null);
 function useNodeViewFactory() {
-  const nodeViewFactory = useContext(createNodeViewContext);
-  if (!nodeViewFactory) {
+  let 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(
+  let nodeViewFactory = useNodeViewFactory(), extension = useMemo2(
     () => defineReactNodeViewFactory(nodeViewFactory),
     [nodeViewFactory]
   );
-  useExtension(extension);
-  return null;
+  return useExtension(extension), null;
 };
 
 // src/views/react-views-provider.ts
@@ -104,8 +97,7 @@ var ReactNodeView = class extends CoreNodeView {
     this.key = _getId();
     this.context = {
       contentRef: (element) => {
-        if (element && this.contentDOM && element.firstChild !== this.contentDOM)
-          element.appendChild(this.contentDOM);
+        element && this.contentDOM && element.firstChild !== this.contentDOM && element.appendChild(this.contentDOM);
       },
       view: this.view,
       getPos: this.getPos,
@@ -124,7 +116,7 @@ var ReactNodeView = class extends CoreNodeView {
       });
     };
     this.render = () => {
-      const UserComponent = this.component;
+      let UserComponent = this.component;
       return createPortal(
         createElement(UserComponent, this.context),
         this.dom,
@@ -136,9 +128,9 @@ var ReactNodeView = class extends CoreNodeView {
 
 // src/views/node-view/use-react-node-view-creator.ts
 function useReactNodeViewCreator(renderReactRenderer, removeReactRenderer) {
-  const createReactNodeView = useCallback(
+  return useCallback(
     (options) => (node, view, getPos, decorations, innerDecorations) => {
-      const nodeView = new ReactNodeView({
+      let nodeView = new ReactNodeView({
         node,
         view,
         getPos,
@@ -148,74 +140,56 @@ function useReactNodeViewCreator(renderReactRenderer, removeReactRenderer) {
           ...options,
           onUpdate() {
             var _a;
-            (_a = options.onUpdate) == null ? void 0 : _a.call(options);
-            renderReactRenderer(nodeView);
+            (_a = options.onUpdate) == null || _a.call(options), renderReactRenderer(nodeView);
           },
           selectNode() {
             var _a;
-            (_a = options.selectNode) == null ? void 0 : _a.call(options);
-            renderReactRenderer(nodeView);
+            (_a = options.selectNode) == null || _a.call(options), renderReactRenderer(nodeView);
           },
           deselectNode() {
             var _a;
-            (_a = options.deselectNode) == null ? void 0 : _a.call(options);
-            renderReactRenderer(nodeView);
+            (_a = options.deselectNode) == null || _a.call(options), renderReactRenderer(nodeView);
           },
           destroy() {
             var _a;
-            (_a = options.destroy) == null ? void 0 : _a.call(options);
-            removeReactRenderer(nodeView);
+            (_a = options.destroy) == null || _a.call(options), removeReactRenderer(nodeView);
           }
         }
       });
-      renderReactRenderer(nodeView, false);
-      return nodeView;
+      return renderReactRenderer(nodeView, !1), 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) => {
+  let [portals, setPortals] = useState({}), mountedRef = useRef(!1);
+  useEffect2(() => (requestAnimationFrame(() => {
+    mountedRef.current = !0;
+  }), () => {
+    mountedRef.current = !1;
+  }), []);
+  let maybeFlushSync = useCallback2((fn) => {
+    mountedRef.current ? flushSync(fn) : fn();
+  }, []), renderReactRenderer = useCallback2(
+    (nodeView, update = !0) => {
       maybeFlushSync(() => {
-        if (update)
-          nodeView.updateContext();
-        setPortals((prev) => ({
+        update && nodeView.updateContext(), setPortals((prev) => ({
           ...prev,
           [nodeView.key]: nodeView.render()
         }));
       });
     },
     [maybeFlushSync]
-  );
-  const removeReactRenderer = useCallback2(
+  ), removeReactRenderer = useCallback2(
     (nodeView) => {
       maybeFlushSync(() => {
         setPortals((prev) => {
-          const next = { ...prev };
-          delete next[nodeView.key];
-          return next;
+          let next = { ...prev };
+          return delete next[nodeView.key], next;
         });
       });
     },
@@ -232,12 +206,10 @@ function useReactRenderer() {
 var ReactViewsProvider = ({
   children
 }) => {
-  const { renderReactRenderer, removeReactRenderer, portals } = useReactRenderer();
-  const createReactNodeView = useReactNodeViewCreator(
+  let { renderReactRenderer, removeReactRenderer, portals } = useReactRenderer(), createReactNodeView = useReactNodeViewCreator(
     renderReactRenderer,
     removeReactRenderer
-  );
-  const memoizedPortals = useMemo3(() => Object.values(portals), [portals]);
+  ), memoizedPortals = useMemo3(() => Object.values(portals), [portals]);
   return createElement2(
     createNodeViewContext.Provider,
     { value: createReactNodeView },
@@ -248,7 +220,7 @@ var ReactViewsProvider = ({
 
 // src/components/prosekit.ts
 var ProseKit = (props) => {
-  const { editor, children } = props;
+  let { editor, children } = props;
   return createElement3(
     ReactViewsProvider,
     null,
@@ -271,27 +243,24 @@ import {
 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 editor = useEditorContext();
-  if (!editor) {
+  let update = (_a = options == null ? void 0 : options.update) != null ? _a : !1, editor = useEditorContext();
+  if (!editor)
     throw new ProseKitError2(
       "useEditor must be used within the ProseKit component"
     );
-  }
-  const forceUpdate = useForceUpdate();
-  useEffect3(() => {
+  let forceUpdate = useForceUpdate();
+  return useEffect3(() => {
     if (update) {
-      const extension = union([
+      let extension = union([
         defineMountHandler(forceUpdate),
         defineUpdateHandler(forceUpdate)
       ]);
       return editor.use(extension);
     }
-  }, [editor, update, forceUpdate]);
-  return editor;
+  }, [editor, update, forceUpdate]), editor;
 }
 function useForceUpdate() {
-  const [, dispatch] = useReducer((x) => x + 1, 0);
+  let [, dispatch] = useReducer((x) => x + 1, 0);
   return dispatch;
 }
 
@@ -299,7 +268,7 @@ function useForceUpdate() {
 import { defineKeymap } from "@prosekit/core";
 import { useMemo as useMemo4 } from "react";
 function useKeymap(keymap, options) {
-  const extension = useMemo4(() => defineKeymap(keymap), [keymap]);
+  let extension = useMemo4(() => defineKeymap(keymap), [keymap]);
   return useExtension(extension, options);
 }
 
@@ -307,7 +276,7 @@ function useKeymap(keymap, options) {
 import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
 import { useMemo as useMemo5 } from "react";
 function useStateUpdate(handler, options) {
-  const extension = useMemo5(
+  let extension = useMemo5(
     () => defineUpdateHandler2((view) => handler(view.state)),
     [handler]
   );
@@ -318,7 +287,7 @@ function useStateUpdate(handler, options) {
 import { defineDocChangeHandler } from "@prosekit/core";
 import { useMemo as useMemo6 } from "react";
 function useDocChange(handler, options) {
-  const extension = useMemo6(
+  let extension = useMemo6(
     () => defineDocChangeHandler((view) => handler(view.state.doc)),
     [handler]
   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -65,11 +65,11 @@
     "dist"
   ],
   "dependencies": {
-    "@prosekit/core": "^0.5.4",
-    "@prosekit/pm": "^0.1.4",
-    "@prosekit/web": "^0.1.9",
     "@prosemirror-adapter/core": "^0.2.6",
-    "react-merge-refs": "^2.1.1"
+    "react-merge-refs": "^2.1.1",
+    "@prosekit/core": "^0.5.5",
+    "@prosekit/web": "^0.1.10",
+    "@prosekit/pm": "^0.1.5"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",
@@ -88,7 +88,7 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5",
     "vitest": "^1.6.0",
     "@prosekit/dev": "0.0.0"

package/dist/chunk-UG3RPLME.js

@@ -1,51 +0,0 @@
-import {
-  useEditorContext
-} from "./chunk-BH56NR2Q.js";
-
-// src/components/create-component.ts
-import {
-  createElement,
-  forwardRef,
-  useLayoutEffect,
-  useState
-} from "react";
-import { mergeRefs } from "react-merge-refs";
-function createComponent(tagName, displayName, defaultProps) {
-  const propertyNames = Object.keys(defaultProps);
-  const hasEditor = Object.hasOwn(defaultProps, "editor");
-  const Component = forwardRef((props, ref) => {
-    const [el, setEl] = useState(null);
-    const properties = {};
-    const attributes = {};
-    for (const [name, value] of Object.entries(props)) {
-      if (propertyNames.includes(name)) {
-        properties[name] = value;
-      } else {
-        attributes[name === "className" ? "class" : name] = value;
-      }
-    }
-    const editor = useEditorContext();
-    if (hasEditor && editor && !properties["editor"]) {
-      properties["editor"] = editor;
-    }
-    useLayoutEffect(() => {
-      if (el) {
-        for (const [name, value] of Object.entries(properties)) {
-          if (value !== void 0) {
-            el[name] = value;
-          }
-        }
-      }
-    }, [el, ...propertyNames.map((name) => properties[name])]);
-    return createElement(tagName, {
-      ...attributes,
-      ref: mergeRefs([ref, setEl])
-    });
-  });
-  Component.displayName = displayName;
-  return Component;
-}
-
-export {
-  createComponent
-};