@tiptap/react 3.0.0-next.2 → 3.0.0-next.4

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024, Tiptap GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,14 +1,18 @@
 # @tiptap/react
+
 [![Version](https://img.shields.io/npm/v/@tiptap/react.svg?label=version)](https://www.npmjs.com/package/@tiptap/react)
 [![Downloads](https://img.shields.io/npm/dm/@tiptap/react.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
 [![License](https://img.shields.io/npm/l/@tiptap/react.svg)](https://www.npmjs.com/package/@tiptap/react)
 [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
 
 ## Introduction
-Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
 
 ## Official Documentation
+
 Documentation can be found on the [Tiptap website](https://tiptap.dev).
 
 ## License
+
 Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/index.cjs

@@ -29,8 +29,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   BubbleMenu: () => BubbleMenu,
   EditorConsumer: () => EditorConsumer,
   EditorContent: () => EditorContent,
@@ -41,6 +41,7 @@ __export(src_exports, {
   NodeViewWrapper: () => NodeViewWrapper,
   PureEditorContent: () => PureEditorContent,
   ReactNodeView: () => ReactNodeView,
+  ReactNodeViewContentProvider: () => ReactNodeViewContentProvider,
   ReactNodeViewContext: () => ReactNodeViewContext,
   ReactNodeViewRenderer: () => ReactNodeViewRenderer,
   ReactRenderer: () => ReactRenderer,
@@ -49,7 +50,7 @@ __export(src_exports, {
   useEditorState: () => useEditorState,
   useReactNodeView: () => useReactNodeView
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/BubbleMenu.tsx
 var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
@@ -69,14 +70,13 @@ var mergeRefs = (...refs) => {
       if (typeof ref === "function") {
         ref(node);
       } else if (ref) {
+        ;
         ref.current = node;
       }
     });
   };
 };
-var Portals = ({
-  contentComponent
-}) => {
+var Portals = ({ contentComponent }) => {
   const renderers = (0, import_shim.useSyncExternalStore)(
     contentComponent.subscribe,
     contentComponent.getSnapshot,
@@ -556,16 +556,7 @@ function EditorProvider({
 
 // src/BubbleMenu.tsx
 var BubbleMenu = import_react6.default.forwardRef(
-  ({
-    pluginKey = "bubbleMenu",
-    editor,
-    updateDelay,
-    resizeDelay,
-    shouldShow = null,
-    options,
-    children,
-    ...restProps
-  }, ref) => {
+  ({ pluginKey = "bubbleMenu", editor, updateDelay, resizeDelay, shouldShow = null, options, children, ...restProps }, ref) => {
     const menuEl = (0, import_react6.useRef)(document.createElement("div"));
     if (typeof ref === "function") {
       ref(menuEl.current);
@@ -582,9 +573,7 @@ var BubbleMenu = import_react6.default.forwardRef(
       }
       const attachToEditor = editor || currentEditor;
       if (!attachToEditor) {
-        console.warn(
-          "BubbleMenu component is not rendered inside of an editor component or does not have editor prop."
-        );
+        console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
         return;
       }
       const plugin = (0, import_extension_bubble_menu.BubbleMenuPlugin)({
@@ -606,16 +595,7 @@ var BubbleMenu = import_react6.default.forwardRef(
         });
       };
     }, [editor, currentEditor]);
-    return (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ import_react6.default.createElement(
-        "div",
-        {
-          ...restProps
-        },
-        children
-      ),
-      menuEl.current
-    );
+    return (0, import_react_dom2.createPortal)(/* @__PURE__ */ import_react6.default.createElement("div", { ...restProps }, children), menuEl.current);
   }
 );
 
@@ -623,63 +603,49 @@ var BubbleMenu = import_react6.default.forwardRef(
 var import_extension_floating_menu = require("@tiptap/extension-floating-menu");
 var import_react7 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
-var FloatingMenu = import_react7.default.forwardRef(({
-  pluginKey = "floatingMenu",
-  editor,
-  shouldShow = null,
-  options,
-  children,
-  ...restProps
-}, ref) => {
-  const menuEl = (0, import_react7.useRef)(document.createElement("div"));
-  if (typeof ref === "function") {
-    ref(menuEl.current);
-  } else if (ref) {
-    ref.current = menuEl.current;
-  }
-  const { editor: currentEditor } = useCurrentEditor();
-  (0, import_react7.useEffect)(() => {
-    const floatingMenuElement = menuEl.current;
-    floatingMenuElement.style.visibility = "hidden";
-    floatingMenuElement.style.position = "absolute";
-    if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
-      return;
-    }
-    const attachToEditor = editor || currentEditor;
-    if (!attachToEditor) {
-      console.warn(
-        "FloatingMenu component is not rendered inside of an editor component or does not have editor prop."
-      );
-      return;
+var FloatingMenu = import_react7.default.forwardRef(
+  ({ pluginKey = "floatingMenu", editor, shouldShow = null, options, children, ...restProps }, ref) => {
+    const menuEl = (0, import_react7.useRef)(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
     }
-    const plugin = (0, import_extension_floating_menu.FloatingMenuPlugin)({
-      editor: attachToEditor,
-      element: floatingMenuElement,
-      pluginKey,
-      shouldShow,
-      options
-    });
-    attachToEditor.registerPlugin(plugin);
-    return () => {
-      attachToEditor.unregisterPlugin(pluginKey);
-      window.requestAnimationFrame(() => {
-        if (floatingMenuElement.parentNode) {
-          floatingMenuElement.parentNode.removeChild(floatingMenuElement);
-        }
+    const { editor: currentEditor } = useCurrentEditor();
+    (0, import_react7.useEffect)(() => {
+      const floatingMenuElement = menuEl.current;
+      floatingMenuElement.style.visibility = "hidden";
+      floatingMenuElement.style.position = "absolute";
+      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
+        return;
+      }
+      const attachToEditor = editor || currentEditor;
+      if (!attachToEditor) {
+        console.warn(
+          "FloatingMenu component is not rendered inside of an editor component or does not have editor prop."
+        );
+        return;
+      }
+      const plugin = (0, import_extension_floating_menu.FloatingMenuPlugin)({
+        editor: attachToEditor,
+        element: floatingMenuElement,
+        pluginKey,
+        shouldShow,
+        options
       });
-    };
-  }, [editor, currentEditor]);
-  return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ import_react7.default.createElement(
-      "div",
-      {
-        ...restProps
-      },
-      children
-    ),
-    menuEl.current
-  );
-});
+      attachToEditor.registerPlugin(plugin);
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey);
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement);
+          }
+        });
+      };
+    }, [editor, currentEditor]);
+    return (0, import_react_dom3.createPortal)(/* @__PURE__ */ import_react7.default.createElement("div", { ...restProps }, children), menuEl.current);
+  }
+);
 
 // src/NodeViewContent.tsx
 var import_react9 = __toESM(require("react"), 1);
@@ -687,14 +653,23 @@ var import_react9 = __toESM(require("react"), 1);
 // src/useReactNodeView.ts
 var import_react8 = require("react");
 var ReactNodeViewContext = (0, import_react8.createContext)({
-  onDragStart: void 0
+  onDragStart: () => {
+  },
+  nodeViewContentChildren: void 0,
+  nodeViewContentRef: () => {
+  }
 });
+var ReactNodeViewContentProvider = ({ children, content }) => {
+  return (0, import_react8.createElement)(ReactNodeViewContext.Provider, { value: { nodeViewContentChildren: content } }, children);
+};
 var useReactNodeView = () => (0, import_react8.useContext)(ReactNodeViewContext);
 
 // src/NodeViewContent.tsx
-var NodeViewContent = (props) => {
-  const Tag = props.as || "div";
-  const { nodeViewContentRef } = useReactNodeView();
+function NodeViewContent({
+  as: Tag = "div",
+  ...props
+}) {
+  const { nodeViewContentRef, nodeViewContentChildren } = useReactNodeView();
   return (
     // @ts-ignore
     /* @__PURE__ */ import_react9.default.createElement(
@@ -707,10 +682,11 @@ var NodeViewContent = (props) => {
           whiteSpace: "pre-wrap",
           ...props.style
         }
-      }
+      },
+      nodeViewContentChildren
     )
   );
-};
+}
 
 // src/NodeViewWrapper.tsx
 var import_react10 = __toESM(require("react"), 1);
@@ -753,12 +729,7 @@ var ReactRenderer = class {
   /**
    * Immediately creates element and renders the provided React component.
    */
-  constructor(component, {
-    editor,
-    props = {},
-    as = "div",
-    className = ""
-  }) {
+  constructor(component, { editor, props = {}, as = "div", className = "" }) {
     this.ref = null;
     this.id = Math.floor(Math.random() * 4294967295).toString();
     this.component = component;
@@ -855,11 +826,9 @@ var ReactNodeView = class extends import_core2.NodeView {
     };
     const context = { onDragStart, nodeViewContentRef };
     const Component = this.component;
-    const ReactNodeViewProvider = import_react12.default.memo(
-      (componentProps) => {
-        return /* @__PURE__ */ import_react12.default.createElement(ReactNodeViewContext.Provider, { value: context }, import_react12.default.createElement(Component, componentProps));
-      }
-    );
+    const ReactNodeViewProvider = import_react12.default.memo((componentProps) => {
+      return /* @__PURE__ */ import_react12.default.createElement(ReactNodeViewContext.Provider, { value: context }, import_react12.default.createElement(Component, componentProps));
+    });
     ReactNodeViewProvider.displayName = "ReactNodeView";
     if (this.node.isLeaf) {
       this.contentDOMElement = null;
@@ -1026,7 +995,7 @@ function ReactNodeViewRenderer(component, options) {
 }
 
 // src/index.ts
-__reExport(src_exports, require("@tiptap/core"), module.exports);
+__reExport(index_exports, require("@tiptap/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BubbleMenu,
@@ -1039,6 +1008,7 @@ __reExport(src_exports, require("@tiptap/core"), module.exports);
   NodeViewWrapper,
   PureEditorContent,
   ReactNodeView,
+  ReactNodeViewContentProvider,
   ReactNodeViewContext,
   ReactNodeViewRenderer,
   ReactRenderer,