@tiptap/react 2.5.0-beta.2 → 2.5.0-beta.3

package/dist/index.umd.js

@@ -4,558 +4,553 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/react"] = {}, global.extensionBubbleMenu, global.React, global.ReactDOM, global.core, global.extensionFloatingMenu));
 })(this, (function (exports, extensionBubbleMenu, React, ReactDOM, core, extensionFloatingMenu) { 'use strict';
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-
-  const mergeRefs = (...refs) => {
-      return (node) => {
-          refs.forEach(ref => {
-              if (typeof ref === 'function') {
-                  ref(node);
-              }
-              else if (ref) {
-                  ref.current = node;
-              }
-          });
-      };
-  };
-  const Portals = ({ renderers }) => {
-      return (React__default["default"].createElement(React__default["default"].Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
-          return ReactDOM__default["default"].createPortal(renderer.reactElement, renderer.element, key);
-      })));
-  };
-  class PureEditorContent extends React__default["default"].Component {
-      constructor(props) {
-          super(props);
-          this.editorContentRef = React__default["default"].createRef();
-          this.initialized = false;
-          this.state = {
-              renderers: {},
-          };
-      }
-      componentDidMount() {
-          this.init();
-      }
-      componentDidUpdate() {
-          this.init();
-      }
-      init() {
-          const { editor } = this.props;
-          if (editor && !editor.isDestroyed && 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) {
-          // Avoid calling flushSync until the editor is initialized.
-          // Initialization happens during the componentDidMount or componentDidUpdate
-          // lifecycle methods, and React doesn't allow calling flushSync from inside
-          // a lifecycle method.
-          if (this.initialized) {
-              ReactDOM.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;
-          }
-          this.initialized = false;
-          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, innerRef, ...rest } = this.props;
-          return (React__default["default"].createElement(React__default["default"].Fragment, null,
-              React__default["default"].createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
-              React__default["default"].createElement(Portals, { renderers: this.state.renderers })));
-      }
-  }
-  // EditorContent should be re-created whenever the Editor instance changes
-  const EditorContentWithKey = React.forwardRef((props, ref) => {
-      const key = React__default["default"].useMemo(() => {
-          return Math.floor(Math.random() * 0xFFFFFFFF).toString();
-      }, [props.editor]);
-      // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
-      return React__default["default"].createElement(PureEditorContent, {
-          key,
-          innerRef: ref,
-          ...props,
-      });
-  });
-  const EditorContent = React__default["default"].memo(EditorContentWithKey);
+  const mergeRefs = (...refs) => {
+      return (node) => {
+          refs.forEach(ref => {
+              if (typeof ref === 'function') {
+                  ref(node);
+              }
+              else if (ref) {
+                  ref.current = node;
+              }
+          });
+      };
+  };
+  const Portals = ({ renderers }) => {
+      return (React.createElement(React.Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
+          return ReactDOM.createPortal(renderer.reactElement, renderer.element, key);
+      })));
+  };
+  class PureEditorContent extends React.Component {
+      constructor(props) {
+          super(props);
+          this.editorContentRef = React.createRef();
+          this.initialized = false;
+          this.state = {
+              renderers: {},
+          };
+      }
+      componentDidMount() {
+          this.init();
+      }
+      componentDidUpdate() {
+          this.init();
+      }
+      init() {
+          const { editor } = this.props;
+          if (editor && !editor.isDestroyed && 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) {
+          // Avoid calling flushSync until the editor is initialized.
+          // Initialization happens during the componentDidMount or componentDidUpdate
+          // lifecycle methods, and React doesn't allow calling flushSync from inside
+          // a lifecycle method.
+          if (this.initialized) {
+              ReactDOM.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;
+          }
+          this.initialized = false;
+          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, innerRef, ...rest } = this.props;
+          return (React.createElement(React.Fragment, null,
+              React.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
+              React.createElement(Portals, { renderers: this.state.renderers })));
+      }
+  }
+  // EditorContent should be re-created whenever the Editor instance changes
+  const EditorContentWithKey = React.forwardRef((props, ref) => {
+      const key = React.useMemo(() => {
+          return Math.floor(Math.random() * 0xFFFFFFFF).toString();
+      }, [props.editor]);
+      // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
+      return React.createElement(PureEditorContent, {
+          key,
+          innerRef: ref,
+          ...props,
+      });
+  });
+  const EditorContent = React.memo(EditorContentWithKey);
 
-  class Editor extends core.Editor {
-      constructor() {
-          super(...arguments);
-          this.contentComponent = null;
-      }
+  class Editor extends core.Editor {
+      constructor() {
+          super(...arguments);
+          this.contentComponent = null;
+      }
   }
 
-  /**
-   * This hook allows you to create an editor instance.
-   * @param options The editor options
-   * @param deps The dependencies to watch for changes
-   * @returns The editor instance
-   * @example const editor = useEditor({ extensions: [...] })
-   */
-  const useEditor = (options = {}, deps = []) => {
-      const editorRef = React.useRef(null);
-      const [, forceUpdate] = React.useState({});
-      const { onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, onContentError, } = options;
-      const onBeforeCreateRef = React.useRef(onBeforeCreate);
-      const onBlurRef = React.useRef(onBlur);
-      const onCreateRef = React.useRef(onCreate);
-      const onDestroyRef = React.useRef(onDestroy);
-      const onFocusRef = React.useRef(onFocus);
-      const onSelectionUpdateRef = React.useRef(onSelectionUpdate);
-      const onTransactionRef = React.useRef(onTransaction);
-      const onUpdateRef = React.useRef(onUpdate);
-      const onContentErrorRef = React.useRef(onContentError);
-      // This effect will handle updating the editor instance
-      // when the event handlers change.
-      React.useEffect(() => {
-          if (!editorRef.current) {
-              return;
-          }
-          if (onBeforeCreate) {
-              editorRef.current.off('beforeCreate', onBeforeCreateRef.current);
-              editorRef.current.on('beforeCreate', onBeforeCreate);
-              onBeforeCreateRef.current = onBeforeCreate;
-          }
-          if (onBlur) {
-              editorRef.current.off('blur', onBlurRef.current);
-              editorRef.current.on('blur', onBlur);
-              onBlurRef.current = onBlur;
-          }
-          if (onCreate) {
-              editorRef.current.off('create', onCreateRef.current);
-              editorRef.current.on('create', onCreate);
-              onCreateRef.current = onCreate;
-          }
-          if (onDestroy) {
-              editorRef.current.off('destroy', onDestroyRef.current);
-              editorRef.current.on('destroy', onDestroy);
-              onDestroyRef.current = onDestroy;
-          }
-          if (onFocus) {
-              editorRef.current.off('focus', onFocusRef.current);
-              editorRef.current.on('focus', onFocus);
-              onFocusRef.current = onFocus;
-          }
-          if (onSelectionUpdate) {
-              editorRef.current.off('selectionUpdate', onSelectionUpdateRef.current);
-              editorRef.current.on('selectionUpdate', onSelectionUpdate);
-              onSelectionUpdateRef.current = onSelectionUpdate;
-          }
-          if (onTransaction) {
-              editorRef.current.off('transaction', onTransactionRef.current);
-              editorRef.current.on('transaction', onTransaction);
-              onTransactionRef.current = onTransaction;
-          }
-          if (onUpdate) {
-              editorRef.current.off('update', onUpdateRef.current);
-              editorRef.current.on('update', onUpdate);
-              onUpdateRef.current = onUpdate;
-          }
-          if (onContentError) {
-              editorRef.current.off('contentError', onContentErrorRef.current);
-              editorRef.current.on('contentError', onContentError);
-              onContentErrorRef.current = onContentError;
-          }
-      }, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, editorRef.current]);
-      React.useEffect(() => {
-          let isMounted = true;
-          const editor = new Editor(options);
-          editorRef.current = editor;
-          editorRef.current.on('transaction', () => {
-              requestAnimationFrame(() => {
-                  requestAnimationFrame(() => {
-                      if (isMounted) {
-                          forceUpdate({});
-                      }
-                  });
-              });
-          });
-          return () => {
-              isMounted = false;
-              editor.destroy();
-          };
-      }, deps);
-      return editorRef.current;
+  /**
+   * This hook allows you to create an editor instance.
+   * @param options The editor options
+   * @param deps The dependencies to watch for changes
+   * @returns The editor instance
+   * @example const editor = useEditor({ extensions: [...] })
+   */
+  const useEditor = (options = {}, deps = []) => {
+      const editorRef = React.useRef(null);
+      const [, forceUpdate] = React.useState({});
+      const { onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, onContentError, } = options;
+      const onBeforeCreateRef = React.useRef(onBeforeCreate);
+      const onBlurRef = React.useRef(onBlur);
+      const onCreateRef = React.useRef(onCreate);
+      const onDestroyRef = React.useRef(onDestroy);
+      const onFocusRef = React.useRef(onFocus);
+      const onSelectionUpdateRef = React.useRef(onSelectionUpdate);
+      const onTransactionRef = React.useRef(onTransaction);
+      const onUpdateRef = React.useRef(onUpdate);
+      const onContentErrorRef = React.useRef(onContentError);
+      // This effect will handle updating the editor instance
+      // when the event handlers change.
+      React.useEffect(() => {
+          if (!editorRef.current) {
+              return;
+          }
+          if (onBeforeCreate) {
+              editorRef.current.off('beforeCreate', onBeforeCreateRef.current);
+              editorRef.current.on('beforeCreate', onBeforeCreate);
+              onBeforeCreateRef.current = onBeforeCreate;
+          }
+          if (onBlur) {
+              editorRef.current.off('blur', onBlurRef.current);
+              editorRef.current.on('blur', onBlur);
+              onBlurRef.current = onBlur;
+          }
+          if (onCreate) {
+              editorRef.current.off('create', onCreateRef.current);
+              editorRef.current.on('create', onCreate);
+              onCreateRef.current = onCreate;
+          }
+          if (onDestroy) {
+              editorRef.current.off('destroy', onDestroyRef.current);
+              editorRef.current.on('destroy', onDestroy);
+              onDestroyRef.current = onDestroy;
+          }
+          if (onFocus) {
+              editorRef.current.off('focus', onFocusRef.current);
+              editorRef.current.on('focus', onFocus);
+              onFocusRef.current = onFocus;
+          }
+          if (onSelectionUpdate) {
+              editorRef.current.off('selectionUpdate', onSelectionUpdateRef.current);
+              editorRef.current.on('selectionUpdate', onSelectionUpdate);
+              onSelectionUpdateRef.current = onSelectionUpdate;
+          }
+          if (onTransaction) {
+              editorRef.current.off('transaction', onTransactionRef.current);
+              editorRef.current.on('transaction', onTransaction);
+              onTransactionRef.current = onTransaction;
+          }
+          if (onUpdate) {
+              editorRef.current.off('update', onUpdateRef.current);
+              editorRef.current.on('update', onUpdate);
+              onUpdateRef.current = onUpdate;
+          }
+          if (onContentError) {
+              editorRef.current.off('contentError', onContentErrorRef.current);
+              editorRef.current.on('contentError', onContentError);
+              onContentErrorRef.current = onContentError;
+          }
+      }, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, editorRef.current]);
+      React.useEffect(() => {
+          let isMounted = true;
+          const editor = new Editor(options);
+          editorRef.current = editor;
+          editorRef.current.on('transaction', () => {
+              requestAnimationFrame(() => {
+                  requestAnimationFrame(() => {
+                      if (isMounted) {
+                          forceUpdate({});
+                      }
+                  });
+              });
+          });
+          return () => {
+              isMounted = false;
+              editor.destroy();
+          };
+      }, deps);
+      return editorRef.current;
   };
 
-  const EditorContext = React.createContext({
-      editor: null,
-  });
-  const EditorConsumer = EditorContext.Consumer;
-  const useCurrentEditor = () => React.useContext(EditorContext);
-  const EditorProvider = ({ children, slotAfter, slotBefore, ...editorOptions }) => {
-      const editor = useEditor(editorOptions);
-      if (!editor) {
-          return null;
-      }
-      return (React__default["default"].createElement(EditorContext.Provider, { value: { editor } },
-          slotBefore,
-          React__default["default"].createElement(EditorConsumer, null, ({ editor: currentEditor }) => (React__default["default"].createElement(EditorContent, { editor: currentEditor }))),
-          children,
-          slotAfter));
+  const EditorContext = React.createContext({
+      editor: null,
+  });
+  const EditorConsumer = EditorContext.Consumer;
+  const useCurrentEditor = () => React.useContext(EditorContext);
+  const EditorProvider = ({ children, slotAfter, slotBefore, ...editorOptions }) => {
+      const editor = useEditor(editorOptions);
+      if (!editor) {
+          return null;
+      }
+      return (React.createElement(EditorContext.Provider, { value: { editor } },
+          slotBefore,
+          React.createElement(EditorConsumer, null, ({ editor: currentEditor }) => (React.createElement(EditorContent, { editor: currentEditor }))),
+          children,
+          slotAfter));
   };
 
-  const BubbleMenu = (props) => {
-      const [element, setElement] = React.useState(null);
-      const { editor: currentEditor } = useCurrentEditor();
-      React.useEffect(() => {
-          var _a;
-          if (!element) {
-              return;
-          }
-          if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
-              return;
-          }
-          const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null, } = props;
-          const menuEditor = editor || currentEditor;
-          if (!menuEditor) {
-              console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.');
-              return;
-          }
-          const plugin = extensionBubbleMenu.BubbleMenuPlugin({
-              updateDelay,
-              editor: menuEditor,
-              element,
-              pluginKey,
-              shouldShow,
-              tippyOptions,
-          });
-          menuEditor.registerPlugin(plugin);
-          return () => menuEditor.unregisterPlugin(pluginKey);
-      }, [props.editor, currentEditor, element]);
-      return (React__default["default"].createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+  const BubbleMenu = (props) => {
+      const [element, setElement] = React.useState(null);
+      const { editor: currentEditor } = useCurrentEditor();
+      React.useEffect(() => {
+          var _a;
+          if (!element) {
+              return;
+          }
+          if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
+              return;
+          }
+          const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null, } = props;
+          const menuEditor = editor || currentEditor;
+          if (!menuEditor) {
+              console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.');
+              return;
+          }
+          const plugin = extensionBubbleMenu.BubbleMenuPlugin({
+              updateDelay,
+              editor: menuEditor,
+              element,
+              pluginKey,
+              shouldShow,
+              tippyOptions,
+          });
+          menuEditor.registerPlugin(plugin);
+          return () => menuEditor.unregisterPlugin(pluginKey);
+      }, [props.editor, currentEditor, element]);
+      return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
   };
 
-  const FloatingMenu = (props) => {
-      const [element, setElement] = React.useState(null);
-      const { editor: currentEditor } = useCurrentEditor();
-      React.useEffect(() => {
-          var _a;
-          if (!element) {
-              return;
-          }
-          if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
-              return;
-          }
-          const { pluginKey = 'floatingMenu', editor, tippyOptions = {}, shouldShow = null, } = props;
-          const menuEditor = editor || currentEditor;
-          if (!menuEditor) {
-              console.warn('FloatingMenu component is not rendered inside of an editor component or does not have editor prop.');
-              return;
-          }
-          const plugin = extensionFloatingMenu.FloatingMenuPlugin({
-              pluginKey,
-              editor: menuEditor,
-              element,
-              tippyOptions,
-              shouldShow,
-          });
-          menuEditor.registerPlugin(plugin);
-          return () => menuEditor.unregisterPlugin(pluginKey);
-      }, [
-          props.editor,
-          currentEditor,
-          element,
-      ]);
-      return (React__default["default"].createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+  const FloatingMenu = (props) => {
+      const [element, setElement] = React.useState(null);
+      const { editor: currentEditor } = useCurrentEditor();
+      React.useEffect(() => {
+          var _a;
+          if (!element) {
+              return;
+          }
+          if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
+              return;
+          }
+          const { pluginKey = 'floatingMenu', editor, tippyOptions = {}, shouldShow = null, } = props;
+          const menuEditor = editor || currentEditor;
+          if (!menuEditor) {
+              console.warn('FloatingMenu component is not rendered inside of an editor component or does not have editor prop.');
+              return;
+          }
+          const plugin = extensionFloatingMenu.FloatingMenuPlugin({
+              pluginKey,
+              editor: menuEditor,
+              element,
+              tippyOptions,
+              shouldShow,
+          });
+          menuEditor.registerPlugin(plugin);
+          return () => menuEditor.unregisterPlugin(pluginKey);
+      }, [
+          props.editor,
+          currentEditor,
+          element,
+      ]);
+      return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
   };
 
-  const ReactNodeViewContext = React.createContext({
-      onDragStart: undefined,
-  });
+  const ReactNodeViewContext = React.createContext({
+      onDragStart: undefined,
+  });
   const useReactNodeView = () => React.useContext(ReactNodeViewContext);
 
-  const NodeViewContent = props => {
-      const Tag = props.as || 'div';
-      const { nodeViewContentRef } = useReactNodeView();
-      return (React__default["default"].createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
-              whiteSpace: 'pre-wrap',
-              ...props.style,
-          } }));
+  const NodeViewContent = props => {
+      const Tag = props.as || 'div';
+      const { nodeViewContentRef } = useReactNodeView();
+      return (React.createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
+              whiteSpace: 'pre-wrap',
+              ...props.style,
+          } }));
   };
 
-  const NodeViewWrapper = React__default["default"].forwardRef((props, ref) => {
-      const { onDragStart } = useReactNodeView();
-      const Tag = props.as || 'div';
-      return (React__default["default"].createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
-              whiteSpace: 'normal',
-              ...props.style,
-          } }));
+  const NodeViewWrapper = React.forwardRef((props, ref) => {
+      const { onDragStart } = useReactNodeView();
+      const Tag = props.as || 'div';
+      return (React.createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
+              whiteSpace: 'normal',
+              ...props.style,
+          } }));
   });
 
-  /**
-   * Check if a component is a class component.
-   * @param Component
-   * @returns {boolean}
-   */
-  function isClassComponent(Component) {
-      return !!(typeof Component === 'function'
-          && Component.prototype
-          && Component.prototype.isReactComponent);
-  }
-  /**
-   * Check if a component is a forward ref component.
-   * @param Component
-   * @returns {boolean}
-   */
-  function isForwardRefComponent(Component) {
-      var _a;
-      return !!(typeof Component === 'object'
-          && ((_a = Component.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === 'Symbol(react.forward_ref)');
-  }
-  /**
-   * The ReactRenderer class. It's responsible for rendering React components inside the editor.
-   * @example
-   * new ReactRenderer(MyComponent, {
-   *   editor,
-   *   props: {
-   *     foo: 'bar',
-   *   },
-   *   as: 'span',
-   * })
-  */
-  class ReactRenderer {
-      constructor(component, { editor, props = {}, as = 'div', className = '', attrs, }) {
-          this.ref = null;
-          this.id = Math.floor(Math.random() * 0xFFFFFFFF).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(' '));
-          }
-          if (attrs) {
-              Object.keys(attrs).forEach(key => {
-                  this.element.setAttribute(key, attrs[key]);
-              });
-          }
-          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 = React__default["default"].createElement(Component, { ...props });
-          (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? 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 || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.removeRenderer(this.id);
-      }
+  /**
+   * Check if a component is a class component.
+   * @param Component
+   * @returns {boolean}
+   */
+  function isClassComponent(Component) {
+      return !!(typeof Component === 'function'
+          && Component.prototype
+          && Component.prototype.isReactComponent);
+  }
+  /**
+   * Check if a component is a forward ref component.
+   * @param Component
+   * @returns {boolean}
+   */
+  function isForwardRefComponent(Component) {
+      var _a;
+      return !!(typeof Component === 'object'
+          && ((_a = Component.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === 'Symbol(react.forward_ref)');
+  }
+  /**
+   * The ReactRenderer class. It's responsible for rendering React components inside the editor.
+   * @example
+   * new ReactRenderer(MyComponent, {
+   *   editor,
+   *   props: {
+   *     foo: 'bar',
+   *   },
+   *   as: 'span',
+   * })
+  */
+  class ReactRenderer {
+      constructor(component, { editor, props = {}, as = 'div', className = '', attrs, }) {
+          this.ref = null;
+          this.id = Math.floor(Math.random() * 0xFFFFFFFF).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(' '));
+          }
+          if (attrs) {
+              Object.keys(attrs).forEach(key => {
+                  this.element.setAttribute(key, attrs[key]);
+              });
+          }
+          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 = React.createElement(Component, { ...props });
+          (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? 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 || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.removeRenderer(this.id);
+      }
   }
 
-  class ReactNodeView 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 (React__default["default"].createElement(React__default["default"].Fragment, null,
-                  React__default["default"].createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
-                      React__default["default"].createElement(Component, { ...componentProps }))));
-          };
-          ReactNodeViewProvider.displayName = 'ReactNodeView';
-          if (this.node.isLeaf) {
-              this.contentDOMElement = null;
-          }
-          else if (this.options.contentDOMElementTag) {
-              this.contentDOMElement = document.createElement(this.options.contentDOMElementTag);
-          }
-          else {
-              this.contentDOMElement = document.createElement(this.node.isInline ? 'span' : 'div');
-          }
-          if (this.contentDOMElement) {
-              // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
-              // With this fix it seems to work fine
-              // See: https://github.com/ueberdosis/tiptap/issues/1197
-              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.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
-          this.editor.on('selectionUpdate', this.handleSelectionUpdate);
-          this.renderer = new ReactRenderer(ReactNodeViewProvider, {
-              editor: this.editor,
-              props,
-              as,
-              className: `node-${this.node.type.name} ${className}`.trim(),
-              attrs: this.options.attrs,
-          });
-      }
-      get dom() {
-          var _a;
-          if (this.renderer.element.firstElementChild
-              && !((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? 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;
-      }
-      handleSelectionUpdate() {
-          const { from, to } = this.editor.state.selection;
-          if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
-              if (this.renderer.props.selected) {
-                  return;
-              }
-              this.selectNode();
-          }
-          else {
-              if (!this.renderer.props.selected) {
-                  return;
-              }
-              this.deselectNode();
-          }
-      }
-      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,
-          });
-          this.renderer.element.classList.add('ProseMirror-selectednode');
-      }
-      deselectNode() {
-          this.renderer.updateProps({
-              selected: false,
-          });
-          this.renderer.element.classList.remove('ProseMirror-selectednode');
-      }
-      destroy() {
-          this.renderer.destroy();
-          this.editor.off('selectionUpdate', this.handleSelectionUpdate);
-          this.contentDOMElement = null;
-      }
-  }
-  function ReactNodeViewRenderer(component, options) {
-      return (props) => {
-          // try to get the parent component
-          // this is important for vue devtools to show the component hierarchy correctly
-          // maybe it’s `undefined` because <editor-content> isn’t rendered yet
-          if (!props.editor.contentComponent) {
-              return {};
-          }
-          return new ReactNodeView(component, props, options);
-      };
+  class ReactNodeView 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 (React.createElement(React.Fragment, null,
+                  React.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
+                      React.createElement(Component, { ...componentProps }))));
+          };
+          ReactNodeViewProvider.displayName = 'ReactNodeView';
+          if (this.node.isLeaf) {
+              this.contentDOMElement = null;
+          }
+          else if (this.options.contentDOMElementTag) {
+              this.contentDOMElement = document.createElement(this.options.contentDOMElementTag);
+          }
+          else {
+              this.contentDOMElement = document.createElement(this.node.isInline ? 'span' : 'div');
+          }
+          if (this.contentDOMElement) {
+              // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
+              // With this fix it seems to work fine
+              // See: https://github.com/ueberdosis/tiptap/issues/1197
+              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.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
+          this.editor.on('selectionUpdate', this.handleSelectionUpdate);
+          this.renderer = new ReactRenderer(ReactNodeViewProvider, {
+              editor: this.editor,
+              props,
+              as,
+              className: `node-${this.node.type.name} ${className}`.trim(),
+              attrs: this.options.attrs,
+          });
+      }
+      get dom() {
+          var _a;
+          if (this.renderer.element.firstElementChild
+              && !((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? 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;
+      }
+      handleSelectionUpdate() {
+          const { from, to } = this.editor.state.selection;
+          if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+              if (this.renderer.props.selected) {
+                  return;
+              }
+              this.selectNode();
+          }
+          else {
+              if (!this.renderer.props.selected) {
+                  return;
+              }
+              this.deselectNode();
+          }
+      }
+      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,
+          });
+          this.renderer.element.classList.add('ProseMirror-selectednode');
+      }
+      deselectNode() {
+          this.renderer.updateProps({
+              selected: false,
+          });
+          this.renderer.element.classList.remove('ProseMirror-selectednode');
+      }
+      destroy() {
+          this.renderer.destroy();
+          this.editor.off('selectionUpdate', this.handleSelectionUpdate);
+          this.contentDOMElement = null;
+      }
+  }
+  function ReactNodeViewRenderer(component, options) {
+      return (props) => {
+          // try to get the parent component
+          // this is important for vue devtools to show the component hierarchy correctly
+          // maybe it’s `undefined` because <editor-content> isn’t rendered yet
+          if (!props.editor.contentComponent) {
+              return {};
+          }
+          return new ReactNodeView(component, props, options);
+      };
   }
 
   exports.BubbleMenu = BubbleMenu;
@@ -575,13 +570,11 @@
   exports.useEditor = useEditor;
   exports.useReactNodeView = useReactNodeView;
   Object.keys(core).forEach(function (k) {
-    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
       enumerable: true,
       get: function () { return core[k]; }
     });
   });
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=index.umd.js.map