@tiptap/react 2.0.0-beta.21 → 2.0.0-beta.210

package/dist/index.js

@@ -0,0 +1,437 @@
+// src/BubbleMenu.tsx
+import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+import React, { useEffect, useState } from "react";
+var BubbleMenu = (props) => {
+  const [element, setElement] = useState(null);
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+    if (props.editor.isDestroyed) {
+      return;
+    }
+    const {
+      pluginKey = "bubbleMenu",
+      editor,
+      tippyOptions = {},
+      updateDelay,
+      shouldShow = null
+    } = props;
+    const plugin = BubbleMenuPlugin({
+      updateDelay,
+      editor,
+      element,
+      pluginKey,
+      shouldShow,
+      tippyOptions
+    });
+    editor.registerPlugin(plugin);
+    return () => editor.unregisterPlugin(pluginKey);
+  }, [props.editor, element]);
+  return /* @__PURE__ */ React.createElement("div", { ref: setElement, className: props.className, style: { visibility: "hidden" } }, props.children);
+};
+
+// src/Editor.ts
+import { Editor as CoreEditor } from "@tiptap/core";
+var Editor = class extends CoreEditor {
+  constructor() {
+    super(...arguments);
+    this.contentComponent = null;
+  }
+};
+
+// src/EditorContent.tsx
+import React2 from "react";
+import ReactDOM, { flushSync } from "react-dom";
+var Portals = ({ renderers }) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
+    return ReactDOM.createPortal(
+      renderer.reactElement,
+      renderer.element,
+      key
+    );
+  }));
+};
+var PureEditorContent = class extends React2.Component {
+  constructor(props) {
+    super(props);
+    this.editorContentRef = React2.createRef();
+    this.initialized = false;
+    this.state = {
+      renderers: {}
+    };
+  }
+  componentDidMount() {
+    this.init();
+  }
+  componentDidUpdate() {
+    this.init();
+  }
+  init() {
+    const { editor } = this.props;
+    if (editor && editor.options.element) {
+      if (editor.contentComponent) {
+        return;
+      }
+      const element = this.editorContentRef.current;
+      element.append(...editor.options.element.childNodes);
+      editor.setOptions({
+        element
+      });
+      editor.contentComponent = this;
+      editor.createNodeViews();
+      this.initialized = true;
+    }
+  }
+  maybeFlushSync(fn) {
+    if (this.initialized) {
+      flushSync(fn);
+    } else {
+      fn();
+    }
+  }
+  setRenderer(id, renderer) {
+    this.maybeFlushSync(() => {
+      this.setState(({ renderers }) => ({
+        renderers: {
+          ...renderers,
+          [id]: renderer
+        }
+      }));
+    });
+  }
+  removeRenderer(id) {
+    this.maybeFlushSync(() => {
+      this.setState(({ renderers }) => {
+        const nextRenderers = { ...renderers };
+        delete nextRenderers[id];
+        return { renderers: nextRenderers };
+      });
+    });
+  }
+  componentWillUnmount() {
+    const { editor } = this.props;
+    if (!editor) {
+      return;
+    }
+    if (!editor.isDestroyed) {
+      editor.view.setProps({
+        nodeViews: {}
+      });
+    }
+    editor.contentComponent = null;
+    if (!editor.options.element.firstChild) {
+      return;
+    }
+    const newElement = document.createElement("div");
+    newElement.append(...editor.options.element.childNodes);
+    editor.setOptions({
+      element: newElement
+    });
+  }
+  render() {
+    const { editor, ...rest } = this.props;
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ref: this.editorContentRef, ...rest }), /* @__PURE__ */ React2.createElement(Portals, { renderers: this.state.renderers }));
+  }
+};
+var EditorContent = React2.memo(PureEditorContent);
+
+// src/FloatingMenu.tsx
+import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
+import React3, {
+  useEffect as useEffect2,
+  useState as useState2
+} from "react";
+var FloatingMenu = (props) => {
+  const [element, setElement] = useState2(null);
+  useEffect2(() => {
+    if (!element) {
+      return;
+    }
+    if (props.editor.isDestroyed) {
+      return;
+    }
+    const {
+      pluginKey = "floatingMenu",
+      editor,
+      tippyOptions = {},
+      shouldShow = null
+    } = props;
+    const plugin = FloatingMenuPlugin({
+      pluginKey,
+      editor,
+      element,
+      tippyOptions,
+      shouldShow
+    });
+    editor.registerPlugin(plugin);
+    return () => editor.unregisterPlugin(pluginKey);
+  }, [
+    props.editor,
+    element
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", { ref: setElement, className: props.className, style: { visibility: "hidden" } }, props.children);
+};
+
+// src/NodeViewContent.tsx
+import React4 from "react";
+
+// src/useReactNodeView.ts
+import { createContext, useContext } from "react";
+var ReactNodeViewContext = createContext({
+  onDragStart: void 0
+});
+var useReactNodeView = () => useContext(ReactNodeViewContext);
+
+// src/NodeViewContent.tsx
+var NodeViewContent = (props) => {
+  const Tag = props.as || "div";
+  const { nodeViewContentRef } = useReactNodeView();
+  return /* @__PURE__ */ React4.createElement(
+    Tag,
+    {
+      ...props,
+      ref: nodeViewContentRef,
+      "data-node-view-content": "",
+      style: {
+        whiteSpace: "pre-wrap",
+        ...props.style
+      }
+    }
+  );
+};
+
+// src/NodeViewWrapper.tsx
+import React5 from "react";
+var NodeViewWrapper = React5.forwardRef((props, ref) => {
+  const { onDragStart } = useReactNodeView();
+  const Tag = props.as || "div";
+  return /* @__PURE__ */ React5.createElement(
+    Tag,
+    {
+      ...props,
+      ref,
+      "data-node-view-wrapper": "",
+      onDragStart,
+      style: {
+        whiteSpace: "normal",
+        ...props.style
+      }
+    }
+  );
+});
+
+// src/ReactNodeViewRenderer.tsx
+import {
+  NodeView
+} from "@tiptap/core";
+import React7 from "react";
+
+// src/ReactRenderer.tsx
+import React6 from "react";
+function isClassComponent(Component) {
+  return !!(typeof Component === "function" && Component.prototype && Component.prototype.isReactComponent);
+}
+function isForwardRefComponent(Component) {
+  var _a;
+  return !!(typeof Component === "object" && ((_a = Component.$$typeof) == null ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
+}
+var ReactRenderer = class {
+  constructor(component, {
+    editor,
+    props = {},
+    as = "div",
+    className = ""
+  }) {
+    this.ref = null;
+    this.id = Math.floor(Math.random() * 4294967295).toString();
+    this.component = component;
+    this.editor = editor;
+    this.props = props;
+    this.element = document.createElement(as);
+    this.element.classList.add("react-renderer");
+    if (className) {
+      this.element.classList.add(...className.split(" "));
+    }
+    this.render();
+  }
+  render() {
+    var _a, _b;
+    const Component = this.component;
+    const props = this.props;
+    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
+      props.ref = (ref) => {
+        this.ref = ref;
+      };
+    }
+    this.reactElement = /* @__PURE__ */ React6.createElement(Component, { ...props });
+    (_b = (_a = this.editor) == null ? void 0 : _a.contentComponent) == null ? void 0 : _b.setRenderer(this.id, this);
+  }
+  updateProps(props = {}) {
+    this.props = {
+      ...this.props,
+      ...props
+    };
+    this.render();
+  }
+  destroy() {
+    var _a, _b;
+    (_b = (_a = this.editor) == null ? void 0 : _a.contentComponent) == null ? void 0 : _b.removeRenderer(this.id);
+  }
+};
+
+// src/ReactNodeViewRenderer.tsx
+var ReactNodeView = class extends NodeView {
+  mount() {
+    const props = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations,
+      selected: false,
+      extension: this.extension,
+      getPos: () => this.getPos(),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode()
+    };
+    if (!this.component.displayName) {
+      const capitalizeFirstChar = (string) => {
+        return string.charAt(0).toUpperCase() + string.substring(1);
+      };
+      this.component.displayName = capitalizeFirstChar(this.extension.name);
+    }
+    const ReactNodeViewProvider = (componentProps) => {
+      const Component = this.component;
+      const onDragStart = this.onDragStart.bind(this);
+      const nodeViewContentRef = (element) => {
+        if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
+          element.appendChild(this.contentDOMElement);
+        }
+      };
+      return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } }, /* @__PURE__ */ React7.createElement(Component, { ...componentProps })));
+    };
+    ReactNodeViewProvider.displayName = "ReactNodeView";
+    this.contentDOMElement = this.node.isLeaf ? null : document.createElement(this.node.isInline ? "span" : "div");
+    if (this.contentDOMElement) {
+      this.contentDOMElement.style.whiteSpace = "inherit";
+    }
+    let as = this.node.isInline ? "span" : "div";
+    if (this.options.as) {
+      as = this.options.as;
+    }
+    const { className = "" } = this.options;
+    this.renderer = new ReactRenderer(ReactNodeViewProvider, {
+      editor: this.editor,
+      props,
+      as,
+      className: `node-${this.node.type.name} ${className}`.trim()
+    });
+  }
+  get dom() {
+    var _a;
+    if (this.renderer.element.firstElementChild && !((_a = this.renderer.element.firstElementChild) == null ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) {
+      throw Error("Please use the NodeViewWrapper component for your node view.");
+    }
+    return this.renderer.element;
+  }
+  get contentDOM() {
+    if (this.node.isLeaf) {
+      return null;
+    }
+    return this.contentDOMElement;
+  }
+  update(node, decorations) {
+    const updateProps = (props) => {
+      this.renderer.updateProps(props);
+    };
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    if (typeof this.options.update === "function") {
+      const oldNode = this.node;
+      const oldDecorations = this.decorations;
+      this.node = node;
+      this.decorations = decorations;
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps: () => updateProps({ node, decorations })
+      });
+    }
+    if (node === this.node && this.decorations === decorations) {
+      return true;
+    }
+    this.node = node;
+    this.decorations = decorations;
+    updateProps({ node, decorations });
+    return true;
+  }
+  selectNode() {
+    this.renderer.updateProps({
+      selected: true
+    });
+  }
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: false
+    });
+  }
+  destroy() {
+    this.renderer.destroy();
+    this.contentDOMElement = null;
+  }
+};
+function ReactNodeViewRenderer(component, options) {
+  return (props) => {
+    if (!props.editor.contentComponent) {
+      return {};
+    }
+    return new ReactNodeView(component, props, options);
+  };
+}
+
+// src/useEditor.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+function useForceUpdate() {
+  const [, setValue] = useState3(0);
+  return () => setValue((value) => value + 1);
+}
+var useEditor = (options = {}, deps = []) => {
+  const [editor, setEditor] = useState3(null);
+  const forceUpdate = useForceUpdate();
+  useEffect3(() => {
+    let isMounted = true;
+    const instance = new Editor(options);
+    setEditor(instance);
+    instance.on("transaction", () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (isMounted) {
+            forceUpdate();
+          }
+        });
+      });
+    });
+    return () => {
+      instance.destroy();
+      isMounted = false;
+    };
+  }, deps);
+  return editor;
+};
+
+// src/index.ts
+export * from "@tiptap/core";
+export {
+  BubbleMenu,
+  Editor,
+  EditorContent,
+  FloatingMenu,
+  NodeViewContent,
+  NodeViewWrapper,
+  PureEditorContent,
+  ReactNodeViewRenderer,
+  ReactRenderer,
+  useEditor
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.210",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,28 +12,57 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-react.cjs.js",
-  "umd": "dist/tiptap-react.umd.js",
-  "module": "dist/tiptap-react.esm.js",
-  "unpkg": "dist/tiptap-react.bundle.umd.min.js",
-  "types": "dist/packages/react/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
   "files": [
     "src",
     "dist"
   ],
+  "devDependencies": {
+    "@tiptap/core": "^2.0.0-beta.210",
+    "@tiptap/pm": "^2.0.0-beta.210",
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/pm": "^2.0.0-beta.209",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.0.0-beta.7",
-    "@tiptap/extension-floating-menu": "^2.0.0-beta.4",
-    "prosemirror-view": "^1.18.2"
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.210",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.210"
   },
-  "devDependencies": {
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/react"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup"
   },
-  "gitHead": "ea9f5410915f45f7ba12d5c816965976f1956862"
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
 }

package/src/BubbleMenu.tsx

@@ -1,29 +1,45 @@
-import React, { useEffect, useRef } from 'react'
-import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import React, { useEffect, useState } from 'react'
 
-export type BubbleMenuProps = Omit<BubbleMenuPluginProps, 'element'> & {
-  className?: string,
-}
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
+  className?: string;
+  children: React.ReactNode;
+  updateDelay?: number;
+};
 
-export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
-  const element = useRef<HTMLDivElement>(null)
+export const BubbleMenu = (props: BubbleMenuProps) => {
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    const { editor, tippyOptions } = props
+    if (!element) {
+      return
+    }
 
-    editor.registerPlugin(BubbleMenuPlugin({
+    if (props.editor.isDestroyed) {
+      return
+    }
+
+    const {
+      pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null,
+    } = props
+
+    const plugin = BubbleMenuPlugin({
+      updateDelay,
       editor,
-      element: element.current as HTMLElement,
+      element,
+      pluginKey,
+      shouldShow,
       tippyOptions,
-    }))
+    })
 
-    return () => {
-      editor.unregisterPlugin(BubbleMenuPluginKey)
-    }
-  }, [])
+    editor.registerPlugin(plugin)
+    return () => editor.unregisterPlugin(pluginKey)
+  }, [props.editor, element])
 
   return (
-    <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>
+    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
       {props.children}
     </div>
   )

package/src/Editor.ts

@@ -1,7 +1,14 @@
-import React from 'react'
 import { Editor as CoreEditor } from '@tiptap/core'
+import React from 'react'
+
 import { EditorContentProps, EditorContentState } from './EditorContent'
+import { ReactRenderer } from './ReactRenderer'
+
+type ContentComponent = React.Component<EditorContentProps, EditorContentState> & {
+  setRenderer(id: string, renderer: ReactRenderer): void;
+  removeRenderer(id: string): void;
+}
 
 export class Editor extends CoreEditor {
-  public contentComponent: React.Component<EditorContentProps, EditorContentState> | null = null
+  public contentComponent: ContentComponent | null = null
 }