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

package/README.md

@@ -7,8 +7,8 @@
 ## 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*.
 
-## Offical Documentation
+## 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-next/blob/main/LICENSE.md).
+tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/index.cjs

@@ -0,0 +1,437 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); }// src/BubbleMenu.tsx
+var _extensionbubblemenu = require('@tiptap/extension-bubble-menu');
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var BubbleMenu = (props) => {
+  const [element, setElement] = _react.useState.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!element) {
+      return;
+    }
+    if (props.editor.isDestroyed) {
+      return;
+    }
+    const {
+      pluginKey = "bubbleMenu",
+      editor,
+      tippyOptions = {},
+      updateDelay,
+      shouldShow = null
+    } = props;
+    const plugin = _extensionbubblemenu.BubbleMenuPlugin.call(void 0, {
+      updateDelay,
+      editor,
+      element,
+      pluginKey,
+      shouldShow,
+      tippyOptions
+    });
+    editor.registerPlugin(plugin);
+    return () => editor.unregisterPlugin(pluginKey);
+  }, [props.editor, element]);
+  return /* @__PURE__ */ _react2.default.createElement("div", { ref: setElement, className: props.className, style: { visibility: "hidden" } }, props.children);
+};
+
+// src/Editor.ts
+var _core = require('@tiptap/core'); _createStarExport(_core);
+var Editor = class extends _core.Editor {
+  constructor() {
+    super(...arguments);
+    this.contentComponent = null;
+  }
+};
+
+// src/EditorContent.tsx
+
+var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
+var Portals = ({ renderers }) => {
+  return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
+    return _reactdom2.default.createPortal(
+      renderer.reactElement,
+      renderer.element,
+      key
+    );
+  }));
+};
+var PureEditorContent = class extends _react2.default.Component {
+  constructor(props) {
+    super(props);
+    this.editorContentRef = _react2.default.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) {
+      _reactdom.flushSync.call(void 0, 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.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement("div", { ref: this.editorContentRef, ...rest }), /* @__PURE__ */ _react2.default.createElement(Portals, { renderers: this.state.renderers }));
+  }
+};
+var EditorContent = _react2.default.memo(PureEditorContent);
+
+// src/FloatingMenu.tsx
+var _extensionfloatingmenu = require('@tiptap/extension-floating-menu');
+
+
+
+
+var FloatingMenu = (props) => {
+  const [element, setElement] = _react.useState.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!element) {
+      return;
+    }
+    if (props.editor.isDestroyed) {
+      return;
+    }
+    const {
+      pluginKey = "floatingMenu",
+      editor,
+      tippyOptions = {},
+      shouldShow = null
+    } = props;
+    const plugin = _extensionfloatingmenu.FloatingMenuPlugin.call(void 0, {
+      pluginKey,
+      editor,
+      element,
+      tippyOptions,
+      shouldShow
+    });
+    editor.registerPlugin(plugin);
+    return () => editor.unregisterPlugin(pluginKey);
+  }, [
+    props.editor,
+    element
+  ]);
+  return /* @__PURE__ */ _react2.default.createElement("div", { ref: setElement, className: props.className, style: { visibility: "hidden" } }, props.children);
+};
+
+// src/NodeViewContent.tsx
+
+
+// src/useReactNodeView.ts
+
+var ReactNodeViewContext = _react.createContext.call(void 0, {
+  onDragStart: void 0
+});
+var useReactNodeView = () => _react.useContext.call(void 0, ReactNodeViewContext);
+
+// src/NodeViewContent.tsx
+var NodeViewContent = (props) => {
+  const Tag = props.as || "div";
+  const { nodeViewContentRef } = useReactNodeView();
+  return /* @__PURE__ */ _react2.default.createElement(
+    Tag,
+    {
+      ...props,
+      ref: nodeViewContentRef,
+      "data-node-view-content": "",
+      style: {
+        whiteSpace: "pre-wrap",
+        ...props.style
+      }
+    }
+  );
+};
+
+// src/NodeViewWrapper.tsx
+
+var NodeViewWrapper = _react2.default.forwardRef((props, ref) => {
+  const { onDragStart } = useReactNodeView();
+  const Tag = props.as || "div";
+  return /* @__PURE__ */ _react2.default.createElement(
+    Tag,
+    {
+      ...props,
+      ref,
+      "data-node-view-wrapper": "",
+      onDragStart,
+      style: {
+        whiteSpace: "normal",
+        ...props.style
+      }
+    }
+  );
+});
+
+// src/ReactNodeViewRenderer.tsx
+
+
+
+
+
+// src/ReactRenderer.tsx
+
+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__ */ _react2.default.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 _core.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__ */ _react2.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } }, /* @__PURE__ */ _react2.default.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
+
+function useForceUpdate() {
+  const [, setValue] = _react.useState.call(void 0, 0);
+  return () => setValue((value) => value + 1);
+}
+var useEditor = (options = {}, deps = []) => {
+  const [editor, setEditor] = _react.useState.call(void 0, null);
+  const forceUpdate = useForceUpdate();
+  _react.useEffect.call(void 0, () => {
+    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
+
+
+
+
+
+
+
+
+
+
+
+
+exports.BubbleMenu = BubbleMenu; exports.Editor = Editor; exports.EditorContent = EditorContent; exports.FloatingMenu = FloatingMenu; exports.NodeViewContent = NodeViewContent; exports.NodeViewWrapper = NodeViewWrapper; exports.PureEditorContent = PureEditorContent; exports.ReactNodeViewRenderer = ReactNodeViewRenderer; exports.ReactRenderer = ReactRenderer; exports.useEditor = useEditor;

package/dist/index.d.ts

@@ -0,0 +1,101 @@
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+import React, { HTMLProps, DependencyList } from 'react';
+import { Editor as Editor$1, NodeViewRendererOptions, NodeViewRenderer, EditorOptions } from '@tiptap/core';
+export * from '@tiptap/core';
+import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
+import { Node } from '@tiptap/pm/model';
+import { Decoration } from '@tiptap/pm/view';
+
+declare type Optional$1<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+declare type BubbleMenuProps = Omit<Optional$1<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
+    className?: string;
+    children: React.ReactNode;
+    updateDelay?: number;
+};
+declare const BubbleMenu: (props: BubbleMenuProps) => JSX.Element;
+
+interface ReactRendererOptions {
+    editor: Editor$1;
+    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>>;
+declare class ReactRenderer<R = unknown, P = unknown> {
+    id: string;
+    editor: Editor;
+    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;
+}
+
+interface EditorContentProps extends HTMLProps<HTMLDivElement> {
+    editor: Editor | null;
+}
+interface EditorContentState {
+    renderers: Record<string, ReactRenderer>;
+}
+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;
+}
+declare const EditorContent: React.MemoExoticComponent<typeof PureEditorContent>;
+
+declare type ContentComponent = React.Component<EditorContentProps, EditorContentState> & {
+    setRenderer(id: string, renderer: ReactRenderer): void;
+    removeRenderer(id: string): void;
+};
+declare class Editor extends Editor$1 {
+    contentComponent: ContentComponent | null;
+}
+
+declare type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+declare type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {
+    className?: string;
+    children: React.ReactNode;
+};
+declare const FloatingMenu: (props: FloatingMenuProps) => JSX.Element;
+
+interface NodeViewContentProps {
+    [key: string]: any;
+    as?: React.ElementType;
+}
+declare const NodeViewContent: React.FC<NodeViewContentProps>;
+
+interface NodeViewWrapperProps {
+    [key: string]: any;
+    as?: React.ElementType;
+}
+declare const NodeViewWrapper: React.FC<NodeViewWrapperProps>;
+
+interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
+    update: ((props: {
+        oldNode: Node;
+        oldDecorations: Decoration[];
+        newNode: Node;
+        newDecorations: Decoration[];
+        updateProps: () => void;
+    }) => boolean) | null;
+    as?: string;
+    className?: string;
+}
+declare function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
+
+declare const useEditor: (options?: Partial<EditorOptions>, deps?: DependencyList) => Editor | null;
+
+export { BubbleMenu, BubbleMenuProps, Editor, EditorContent, EditorContentProps, EditorContentState, FloatingMenu, FloatingMenuProps, NodeViewContent, NodeViewContentProps, NodeViewWrapper, NodeViewWrapperProps, PureEditorContent, ReactNodeViewRenderer, ReactNodeViewRendererOptions, ReactRenderer, ReactRendererOptions, useEditor };