@tiptap/react 2.0.0-beta.209 → 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.209",
+  "version": "2.0.0-beta.210",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,35 +12,57 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-react.cjs",
-  "umd": "dist/tiptap-react.umd.js",
-  "module": "dist/tiptap-react.esm.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.209",
+    "@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.193",
+    "@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.209",
-    "@tiptap/extension-floating-menu": "^2.0.0-beta.209",
-    "prosemirror-view": "^1.28.2"
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.210",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.210"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/react"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
 }

package/src/EditorContent.tsx

@@ -142,6 +142,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     return (
       <>
         <div ref={this.editorContentRef} {...rest} />
+        {/* @ts-ignore */}
         <Portals renderers={this.state.renderers} />
       </>
     )

package/src/ReactNodeViewRenderer.tsx

@@ -5,8 +5,8 @@ import {
   NodeViewRendererOptions,
   NodeViewRendererProps,
 } from '@tiptap/core'
-import { Node as ProseMirrorNode } from 'prosemirror-model'
-import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 import React from 'react'
 
 import { Editor } from './Editor'
@@ -16,15 +16,15 @@ import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeV
 export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
   update:
     | ((props: {
-        oldNode: ProseMirrorNode;
-        oldDecorations: Decoration[];
-        newNode: ProseMirrorNode;
-        newDecorations: Decoration[];
-        updateProps: () => void;
+        oldNode: ProseMirrorNode
+        oldDecorations: Decoration[]
+        newNode: ProseMirrorNode
+        newDecorations: Decoration[]
+        updateProps: () => void
       }) => boolean)
-    | null;
-  as?: string;
-  className?: string;
+    | null
+  as?: string
+  className?: string
 }
 
 class ReactNodeView extends NodeView<
@@ -66,9 +66,13 @@ class ReactNodeView extends NodeView<
       }
 
       return (
-        <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
-          <Component {...componentProps} />
-        </ReactNodeViewContext.Provider>
+        <>
+          {/* @ts-ignore */}
+          <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
+            {/* @ts-ignore */}
+            <Component {...componentProps} />
+          </ReactNodeViewContext.Provider>
+        </>
       )
     }
 

package/dist/packages/react/src/BubbleMenu.d.ts

@@ -1,10 +0,0 @@
-import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
-import React from 'react';
-declare type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-export declare type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
-    className?: string;
-    children: React.ReactNode;
-    updateDelay?: number;
-};
-export declare const BubbleMenu: (props: BubbleMenuProps) => JSX.Element;
-export {};

package/dist/packages/react/src/Editor.d.ts

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

package/dist/packages/react/src/EditorContent.d.ts

@@ -1,23 +0,0 @@
-import React, { HTMLProps } from 'react';
-import { Editor } from './Editor';
-import { ReactRenderer } from './ReactRenderer';
-export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
-    editor: Editor | null;
-}
-export interface EditorContentState {
-    renderers: Record<string, ReactRenderer>;
-}
-export declare class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
-    editorContentRef: React.RefObject<any>;
-    initialized: boolean;
-    constructor(props: EditorContentProps);
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    init(): void;
-    maybeFlushSync(fn: () => void): void;
-    setRenderer(id: string, renderer: ReactRenderer): void;
-    removeRenderer(id: string): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
-export declare const EditorContent: React.MemoExoticComponent<typeof PureEditorContent>;

package/dist/packages/react/src/FloatingMenu.d.ts

@@ -1,9 +0,0 @@
-import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
-import React from 'react';
-declare type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-export declare type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {
-    className?: string;
-    children: React.ReactNode;
-};
-export declare const FloatingMenu: (props: FloatingMenuProps) => JSX.Element;
-export {};

package/dist/packages/react/src/NodeViewContent.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface NodeViewContentProps {
-    [key: string]: any;
-    as?: React.ElementType;
-}
-export declare const NodeViewContent: React.FC<NodeViewContentProps>;

package/dist/packages/react/src/NodeViewWrapper.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface NodeViewWrapperProps {
-    [key: string]: any;
-    as?: React.ElementType;
-}
-export declare const NodeViewWrapper: React.FC<NodeViewWrapperProps>;

package/dist/packages/react/src/ReactNodeViewRenderer.d.ts

@@ -1,15 +0,0 @@
-import { NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core';
-import { Node as ProseMirrorNode } from 'prosemirror-model';
-import { Decoration } from 'prosemirror-view';
-export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
-    update: ((props: {
-        oldNode: ProseMirrorNode;
-        oldDecorations: Decoration[];
-        newNode: ProseMirrorNode;
-        newDecorations: Decoration[];
-        updateProps: () => void;
-    }) => boolean) | null;
-    as?: string;
-    className?: string;
-}
-export declare function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;

package/dist/packages/react/src/ReactRenderer.d.ts

@@ -1,24 +0,0 @@
-import { Editor } from '@tiptap/core';
-import React from 'react';
-import { Editor as ExtendedEditor } from './Editor';
-export interface ReactRendererOptions {
-    editor: Editor;
-    props?: Record<string, any>;
-    as?: string;
-    className?: string;
-}
-declare type ComponentType<R, P> = React.ComponentClass<P> | React.FunctionComponent<P> | React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
-export declare class ReactRenderer<R = unknown, P = unknown> {
-    id: string;
-    editor: ExtendedEditor;
-    component: any;
-    element: Element;
-    props: Record<string, any>;
-    reactElement: React.ReactNode;
-    ref: R | null;
-    constructor(component: ComponentType<R, P>, { editor, props, as, className, }: ReactRendererOptions);
-    render(): void;
-    updateProps(props?: Record<string, any>): void;
-    destroy(): void;
-}
-export {};