@tiptap/react 3.0.0-next.3 → 3.0.0-next.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025, Tiptap GmbH
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,14 +1,18 @@
1
1
  # @tiptap/react
2
+
2
3
  [![Version](https://img.shields.io/npm/v/@tiptap/react.svg?label=version)](https://www.npmjs.com/package/@tiptap/react)
3
4
  [![Downloads](https://img.shields.io/npm/dm/@tiptap/react.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
4
5
  [![License](https://img.shields.io/npm/l/@tiptap/react.svg)](https://www.npmjs.com/package/@tiptap/react)
5
6
  [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
6
7
 
7
8
  ## Introduction
8
- 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*.
9
+
10
+ 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_.
9
11
 
10
12
  ## Official Documentation
13
+
11
14
  Documentation can be found on the [Tiptap website](https://tiptap.dev).
12
15
 
13
16
  ## License
17
+
14
18
  Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
package/dist/index.cjs CHANGED
@@ -29,18 +29,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
29
29
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
30
 
31
31
  // src/index.ts
32
- var src_exports = {};
33
- __export(src_exports, {
34
- BubbleMenu: () => BubbleMenu,
32
+ var index_exports = {};
33
+ __export(index_exports, {
35
34
  EditorConsumer: () => EditorConsumer,
36
35
  EditorContent: () => EditorContent,
37
36
  EditorContext: () => EditorContext,
38
37
  EditorProvider: () => EditorProvider,
39
- FloatingMenu: () => FloatingMenu,
38
+ MarkViewContent: () => MarkViewContent,
40
39
  NodeViewContent: () => NodeViewContent,
41
40
  NodeViewWrapper: () => NodeViewWrapper,
42
41
  PureEditorContent: () => PureEditorContent,
42
+ ReactMarkView: () => ReactMarkView,
43
+ ReactMarkViewContext: () => ReactMarkViewContext,
44
+ ReactMarkViewRenderer: () => ReactMarkViewRenderer,
43
45
  ReactNodeView: () => ReactNodeView,
46
+ ReactNodeViewContentProvider: () => ReactNodeViewContentProvider,
44
47
  ReactNodeViewContext: () => ReactNodeViewContext,
45
48
  ReactNodeViewRenderer: () => ReactNodeViewRenderer,
46
49
  ReactRenderer: () => ReactRenderer,
@@ -49,40 +52,35 @@ __export(src_exports, {
49
52
  useEditorState: () => useEditorState,
50
53
  useReactNodeView: () => useReactNodeView
51
54
  });
52
- module.exports = __toCommonJS(src_exports);
53
-
54
- // src/BubbleMenu.tsx
55
- var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
56
- var import_react6 = __toESM(require("react"), 1);
57
- var import_react_dom2 = require("react-dom");
55
+ module.exports = __toCommonJS(index_exports);
58
56
 
59
57
  // src/Context.tsx
60
- var import_react5 = __toESM(require("react"), 1);
58
+ var import_react5 = require("react");
61
59
 
62
60
  // src/EditorContent.tsx
63
61
  var import_react = __toESM(require("react"), 1);
64
62
  var import_react_dom = __toESM(require("react-dom"), 1);
65
63
  var import_shim = require("use-sync-external-store/shim");
64
+ var import_jsx_runtime = require("react/jsx-runtime");
66
65
  var mergeRefs = (...refs) => {
67
66
  return (node) => {
68
67
  refs.forEach((ref) => {
69
68
  if (typeof ref === "function") {
70
69
  ref(node);
71
70
  } else if (ref) {
71
+ ;
72
72
  ref.current = node;
73
73
  }
74
74
  });
75
75
  };
76
76
  };
77
- var Portals = ({
78
- contentComponent
79
- }) => {
77
+ var Portals = ({ contentComponent }) => {
80
78
  const renderers = (0, import_shim.useSyncExternalStore)(
81
79
  contentComponent.subscribe,
82
80
  contentComponent.getSnapshot,
83
81
  contentComponent.getServerSnapshot
84
82
  );
85
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, Object.values(renderers));
83
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: Object.values(renderers) });
86
84
  };
87
85
  function getInstance() {
88
86
  const subscribers = /* @__PURE__ */ new Set();
@@ -172,6 +170,7 @@ var PureEditorContent = class extends import_react.default.Component {
172
170
  }
173
171
  }
174
172
  componentWillUnmount() {
173
+ var _a;
175
174
  const editor = this.props.editor;
176
175
  if (!editor) {
177
176
  return;
@@ -186,7 +185,7 @@ var PureEditorContent = class extends import_react.default.Component {
186
185
  this.unsubscribeToContentComponent();
187
186
  }
188
187
  editor.contentComponent = null;
189
- if (!editor.options.element.firstChild) {
188
+ if (!((_a = editor.options.element) == null ? void 0 : _a.firstChild)) {
190
189
  return;
191
190
  }
192
191
  const newElement = document.createElement("div");
@@ -197,7 +196,10 @@ var PureEditorContent = class extends import_react.default.Component {
197
196
  }
198
197
  render() {
199
198
  const { editor, innerRef, ...rest } = this.props;
200
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }), (editor == null ? void 0 : editor.contentComponent) && /* @__PURE__ */ import_react.default.createElement(Portals, { contentComponent: editor.contentComponent }));
199
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
200
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
201
+ (editor == null ? void 0 : editor.contentComponent) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portals, { contentComponent: editor.contentComponent })
202
+ ] });
201
203
  }
202
204
  };
203
205
  var EditorContentWithKey = (0, import_react.forwardRef)(
@@ -302,7 +304,7 @@ function useEditorState(options) {
302
304
  var isDev = process.env.NODE_ENV !== "production";
303
305
  var isSSR = typeof window === "undefined";
304
306
  var isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
305
- var EditorInstanceManager = class {
307
+ var EditorInstanceManager = class _EditorInstanceManager {
306
308
  constructor(options) {
307
309
  /**
308
310
  * The current editor instance.
@@ -414,6 +416,10 @@ var EditorInstanceManager = class {
414
416
  onPaste: (...args) => {
415
417
  var _a, _b;
416
418
  return (_b = (_a = this.options.current).onPaste) == null ? void 0 : _b.call(_a, ...args);
419
+ },
420
+ onDelete: (...args) => {
421
+ var _a, _b;
422
+ return (_b = (_a = this.options.current).onDelete) == null ? void 0 : _b.call(_a, ...args);
417
423
  }
418
424
  };
419
425
  const editor = new import_core.Editor(optionsToApply);
@@ -440,6 +446,41 @@ var EditorInstanceManager = class {
440
446
  this.subscriptions.delete(onStoreChange);
441
447
  };
442
448
  }
449
+ static compareOptions(a, b) {
450
+ return Object.keys(a).every((key) => {
451
+ if ([
452
+ "onCreate",
453
+ "onBeforeCreate",
454
+ "onDestroy",
455
+ "onUpdate",
456
+ "onTransaction",
457
+ "onFocus",
458
+ "onBlur",
459
+ "onSelectionUpdate",
460
+ "onContentError",
461
+ "onDrop",
462
+ "onPaste"
463
+ ].includes(key)) {
464
+ return true;
465
+ }
466
+ if (key === "extensions" && a.extensions && b.extensions) {
467
+ if (a.extensions.length !== b.extensions.length) {
468
+ return false;
469
+ }
470
+ return a.extensions.every((extension, index) => {
471
+ var _a;
472
+ if (extension !== ((_a = b.extensions) == null ? void 0 : _a[index])) {
473
+ return false;
474
+ }
475
+ return true;
476
+ });
477
+ }
478
+ if (a[key] !== b[key]) {
479
+ return false;
480
+ }
481
+ return true;
482
+ });
483
+ }
443
484
  /**
444
485
  * On each render, we will create, update, or destroy the editor instance.
445
486
  * @param deps The dependencies to watch for changes
@@ -450,10 +491,12 @@ var EditorInstanceManager = class {
450
491
  this.isComponentMounted = true;
451
492
  clearTimeout(this.scheduledDestructionTimeout);
452
493
  if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
453
- this.editor.setOptions({
454
- ...this.options.current,
455
- editable: this.editor.isEditable
456
- });
494
+ if (!_EditorInstanceManager.compareOptions(this.options.current, this.editor.options)) {
495
+ this.editor.setOptions({
496
+ ...this.options.current,
497
+ editable: this.editor.isEditable
498
+ });
499
+ }
457
500
  } else {
458
501
  this.refreshEditorInstance(deps);
459
502
  }
@@ -534,6 +577,7 @@ function useEditor(options = {}, deps = []) {
534
577
  }
535
578
 
536
579
  // src/Context.tsx
580
+ var import_jsx_runtime2 = require("react/jsx-runtime");
537
581
  var EditorContext = (0, import_react5.createContext)({
538
582
  editor: null
539
583
  });
@@ -551,197 +595,84 @@ function EditorProvider({
551
595
  if (!editor) {
552
596
  return null;
553
597
  }
554
- return /* @__PURE__ */ import_react5.default.createElement(EditorContext.Provider, { value: contextValue }, slotBefore, /* @__PURE__ */ import_react5.default.createElement(EditorConsumer, null, ({ editor: currentEditor }) => /* @__PURE__ */ import_react5.default.createElement(EditorContent, { editor: currentEditor, ...editorContainerProps })), children, slotAfter);
555
- }
556
-
557
- // src/BubbleMenu.tsx
558
- var BubbleMenu = import_react6.default.forwardRef(
559
- ({
560
- pluginKey = "bubbleMenu",
561
- editor,
562
- updateDelay,
563
- resizeDelay,
564
- shouldShow = null,
565
- options,
598
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(EditorContext.Provider, { value: contextValue, children: [
599
+ slotBefore,
600
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditorConsumer, { children: ({ editor: currentEditor }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditorContent, { editor: currentEditor, ...editorContainerProps }) }),
566
601
  children,
567
- ...restProps
568
- }, ref) => {
569
- const menuEl = (0, import_react6.useRef)(document.createElement("div"));
570
- if (typeof ref === "function") {
571
- ref(menuEl.current);
572
- } else if (ref) {
573
- ref.current = menuEl.current;
574
- }
575
- const { editor: currentEditor } = useCurrentEditor();
576
- (0, import_react6.useEffect)(() => {
577
- const bubbleMenuElement = menuEl.current;
578
- bubbleMenuElement.style.visibility = "hidden";
579
- bubbleMenuElement.style.position = "absolute";
580
- if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
581
- return;
582
- }
583
- const attachToEditor = editor || currentEditor;
584
- if (!attachToEditor) {
585
- console.warn(
586
- "BubbleMenu component is not rendered inside of an editor component or does not have editor prop."
587
- );
588
- return;
589
- }
590
- const plugin = (0, import_extension_bubble_menu.BubbleMenuPlugin)({
591
- updateDelay,
592
- resizeDelay,
593
- editor: attachToEditor,
594
- element: bubbleMenuElement,
595
- pluginKey,
596
- shouldShow,
597
- options
598
- });
599
- attachToEditor.registerPlugin(plugin);
600
- return () => {
601
- attachToEditor.unregisterPlugin(pluginKey);
602
- window.requestAnimationFrame(() => {
603
- if (bubbleMenuElement.parentNode) {
604
- bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
605
- }
606
- });
607
- };
608
- }, [editor, currentEditor]);
609
- return (0, import_react_dom2.createPortal)(
610
- /* @__PURE__ */ import_react6.default.createElement(
611
- "div",
612
- {
613
- ...restProps
614
- },
615
- children
616
- ),
617
- menuEl.current
618
- );
619
- }
620
- );
621
-
622
- // src/FloatingMenu.tsx
623
- var import_extension_floating_menu = require("@tiptap/extension-floating-menu");
624
- var import_react7 = __toESM(require("react"), 1);
625
- var import_react_dom3 = require("react-dom");
626
- var FloatingMenu = import_react7.default.forwardRef(({
627
- pluginKey = "floatingMenu",
628
- editor,
629
- shouldShow = null,
630
- options,
631
- children,
632
- ...restProps
633
- }, ref) => {
634
- const menuEl = (0, import_react7.useRef)(document.createElement("div"));
635
- if (typeof ref === "function") {
636
- ref(menuEl.current);
637
- } else if (ref) {
638
- ref.current = menuEl.current;
639
- }
640
- const { editor: currentEditor } = useCurrentEditor();
641
- (0, import_react7.useEffect)(() => {
642
- const floatingMenuElement = menuEl.current;
643
- floatingMenuElement.style.visibility = "hidden";
644
- floatingMenuElement.style.position = "absolute";
645
- if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
646
- return;
647
- }
648
- const attachToEditor = editor || currentEditor;
649
- if (!attachToEditor) {
650
- console.warn(
651
- "FloatingMenu component is not rendered inside of an editor component or does not have editor prop."
652
- );
653
- return;
654
- }
655
- const plugin = (0, import_extension_floating_menu.FloatingMenuPlugin)({
656
- editor: attachToEditor,
657
- element: floatingMenuElement,
658
- pluginKey,
659
- shouldShow,
660
- options
661
- });
662
- attachToEditor.registerPlugin(plugin);
663
- return () => {
664
- attachToEditor.unregisterPlugin(pluginKey);
665
- window.requestAnimationFrame(() => {
666
- if (floatingMenuElement.parentNode) {
667
- floatingMenuElement.parentNode.removeChild(floatingMenuElement);
668
- }
669
- });
670
- };
671
- }, [editor, currentEditor]);
672
- return (0, import_react_dom3.createPortal)(
673
- /* @__PURE__ */ import_react7.default.createElement(
674
- "div",
675
- {
676
- ...restProps
677
- },
678
- children
679
- ),
680
- menuEl.current
681
- );
682
- });
683
-
684
- // src/NodeViewContent.tsx
685
- var import_react9 = __toESM(require("react"), 1);
602
+ slotAfter
603
+ ] });
604
+ }
686
605
 
687
606
  // src/useReactNodeView.ts
688
- var import_react8 = require("react");
689
- var ReactNodeViewContext = (0, import_react8.createContext)({
690
- onDragStart: void 0
607
+ var import_react6 = require("react");
608
+ var ReactNodeViewContext = (0, import_react6.createContext)({
609
+ onDragStart: () => {
610
+ },
611
+ nodeViewContentChildren: void 0,
612
+ nodeViewContentRef: () => {
613
+ }
691
614
  });
692
- var useReactNodeView = () => (0, import_react8.useContext)(ReactNodeViewContext);
615
+ var ReactNodeViewContentProvider = ({ children, content }) => {
616
+ return (0, import_react6.createElement)(ReactNodeViewContext.Provider, { value: { nodeViewContentChildren: content } }, children);
617
+ };
618
+ var useReactNodeView = () => (0, import_react6.useContext)(ReactNodeViewContext);
693
619
 
694
620
  // src/NodeViewContent.tsx
695
- var NodeViewContent = (props) => {
696
- const Tag = props.as || "div";
697
- const { nodeViewContentRef } = useReactNodeView();
698
- return (
699
- // @ts-ignore
700
- /* @__PURE__ */ import_react9.default.createElement(
701
- Tag,
702
- {
703
- ...props,
704
- ref: nodeViewContentRef,
705
- "data-node-view-content": "",
706
- style: {
707
- whiteSpace: "pre-wrap",
708
- ...props.style
709
- }
710
- }
711
- )
621
+ var import_jsx_runtime3 = (
622
+ // @ts-ignore
623
+ require("react/jsx-runtime")
624
+ );
625
+ function NodeViewContent({
626
+ as: Tag = "div",
627
+ ...props
628
+ }) {
629
+ const { nodeViewContentRef, nodeViewContentChildren } = useReactNodeView();
630
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
631
+ Tag,
632
+ {
633
+ ...props,
634
+ ref: nodeViewContentRef,
635
+ "data-node-view-content": "",
636
+ style: {
637
+ whiteSpace: "pre-wrap",
638
+ ...props.style
639
+ },
640
+ children: nodeViewContentChildren
641
+ }
712
642
  );
713
- };
643
+ }
714
644
 
715
645
  // src/NodeViewWrapper.tsx
716
- var import_react10 = __toESM(require("react"), 1);
717
- var NodeViewWrapper = import_react10.default.forwardRef((props, ref) => {
646
+ var import_react7 = __toESM(require("react"), 1);
647
+ var import_jsx_runtime4 = (
648
+ // @ts-ignore
649
+ require("react/jsx-runtime")
650
+ );
651
+ var NodeViewWrapper = import_react7.default.forwardRef((props, ref) => {
718
652
  const { onDragStart } = useReactNodeView();
719
653
  const Tag = props.as || "div";
720
- return (
721
- // @ts-ignore
722
- /* @__PURE__ */ import_react10.default.createElement(
723
- Tag,
724
- {
725
- ...props,
726
- ref,
727
- "data-node-view-wrapper": "",
728
- onDragStart,
729
- style: {
730
- whiteSpace: "normal",
731
- ...props.style
732
- }
654
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
655
+ Tag,
656
+ {
657
+ ...props,
658
+ ref,
659
+ "data-node-view-wrapper": "",
660
+ onDragStart,
661
+ style: {
662
+ whiteSpace: "normal",
663
+ ...props.style
733
664
  }
734
- )
665
+ }
735
666
  );
736
667
  });
737
668
 
738
- // src/ReactNodeViewRenderer.tsx
669
+ // src/ReactMarkViewRenderer.tsx
739
670
  var import_core2 = require("@tiptap/core");
740
- var import_react12 = __toESM(require("react"), 1);
671
+ var import_react8 = __toESM(require("react"), 1);
741
672
 
742
673
  // src/ReactRenderer.tsx
743
- var import_react11 = __toESM(require("react"), 1);
744
- var import_react_dom4 = require("react-dom");
674
+ var import_react_dom2 = require("react-dom");
675
+ var import_jsx_runtime5 = require("react/jsx-runtime");
745
676
  function isClassComponent(Component) {
746
677
  return !!(typeof Component === "function" && Component.prototype && Component.prototype.isReactComponent);
747
678
  }
@@ -753,12 +684,7 @@ var ReactRenderer = class {
753
684
  /**
754
685
  * Immediately creates element and renders the provided React component.
755
686
  */
756
- constructor(component, {
757
- editor,
758
- props = {},
759
- as = "div",
760
- className = ""
761
- }) {
687
+ constructor(component, { editor, props = {}, as = "div", className = "" }) {
762
688
  this.ref = null;
763
689
  this.id = Math.floor(Math.random() * 4294967295).toString();
764
690
  this.component = component;
@@ -770,7 +696,7 @@ var ReactRenderer = class {
770
696
  this.element.classList.add(...className.split(" "));
771
697
  }
772
698
  if (this.editor.isInitialized) {
773
- (0, import_react_dom4.flushSync)(() => {
699
+ (0, import_react_dom2.flushSync)(() => {
774
700
  this.render();
775
701
  });
776
702
  } else {
@@ -790,7 +716,7 @@ var ReactRenderer = class {
790
716
  this.ref = ref;
791
717
  };
792
718
  }
793
- this.reactElement = /* @__PURE__ */ import_react11.default.createElement(Component, { ...props });
719
+ this.reactElement = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ...props });
794
720
  (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.setRenderer(this.id, this);
795
721
  }
796
722
  /**
@@ -821,8 +747,69 @@ var ReactRenderer = class {
821
747
  }
822
748
  };
823
749
 
750
+ // src/ReactMarkViewRenderer.tsx
751
+ var import_jsx_runtime6 = (
752
+ // @ts-ignore
753
+ require("react/jsx-runtime")
754
+ );
755
+ var ReactMarkViewContext = import_react8.default.createContext({
756
+ markViewContentRef: () => {
757
+ }
758
+ });
759
+ var MarkViewContent = (props) => {
760
+ const Tag = props.as || "span";
761
+ const { markViewContentRef } = import_react8.default.useContext(ReactMarkViewContext);
762
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tag, { ...props, ref: markViewContentRef, "data-mark-view-content": "" });
763
+ };
764
+ var ReactMarkView = class extends import_core2.MarkView {
765
+ constructor(component, props, options) {
766
+ super(component, props, options);
767
+ this.didMountContentDomElement = false;
768
+ const { as = "span", attrs, className = "" } = options || {};
769
+ const componentProps = props;
770
+ this.contentDOMElement = document.createElement("span");
771
+ const markViewContentRef = (el) => {
772
+ if (el && this.contentDOMElement && el.firstChild !== this.contentDOMElement) {
773
+ el.appendChild(this.contentDOMElement);
774
+ this.didMountContentDomElement = true;
775
+ }
776
+ };
777
+ const context = {
778
+ markViewContentRef
779
+ };
780
+ const ReactMarkViewProvider = import_react8.default.memo((componentProps2) => {
781
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ReactMarkViewContext.Provider, { value: context, children: import_react8.default.createElement(component, componentProps2) });
782
+ });
783
+ ReactMarkViewProvider.displayName = "ReactNodeView";
784
+ this.renderer = new ReactRenderer(ReactMarkViewProvider, {
785
+ editor: props.editor,
786
+ props: componentProps,
787
+ as,
788
+ className: `mark-${props.mark.type.name} ${className}`.trim()
789
+ });
790
+ if (attrs) {
791
+ this.renderer.updateAttributes(attrs);
792
+ }
793
+ }
794
+ get dom() {
795
+ return this.renderer.element;
796
+ }
797
+ get contentDOM() {
798
+ if (!this.didMountContentDomElement) {
799
+ return null;
800
+ }
801
+ return this.contentDOMElement;
802
+ }
803
+ };
804
+ function ReactMarkViewRenderer(component, options = {}) {
805
+ return (props) => new ReactMarkView(component, props, options);
806
+ }
807
+
824
808
  // src/ReactNodeViewRenderer.tsx
825
- var ReactNodeView = class extends import_core2.NodeView {
809
+ var import_core3 = require("@tiptap/core");
810
+ var import_react9 = __toESM(require("react"), 1);
811
+ var import_jsx_runtime7 = require("react/jsx-runtime");
812
+ var ReactNodeView = class extends import_core3.NodeView {
826
813
  /**
827
814
  * Setup the React component.
828
815
  * Called on initialization.
@@ -855,11 +842,9 @@ var ReactNodeView = class extends import_core2.NodeView {
855
842
  };
856
843
  const context = { onDragStart, nodeViewContentRef };
857
844
  const Component = this.component;
858
- const ReactNodeViewProvider = import_react12.default.memo(
859
- (componentProps) => {
860
- return /* @__PURE__ */ import_react12.default.createElement(ReactNodeViewContext.Provider, { value: context }, import_react12.default.createElement(Component, componentProps));
861
- }
862
- );
845
+ const ReactNodeViewProvider = import_react9.default.memo((componentProps) => {
846
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ReactNodeViewContext.Provider, { value: context, children: import_react9.default.createElement(Component, componentProps) });
847
+ });
863
848
  ReactNodeViewProvider.displayName = "ReactNodeView";
864
849
  if (this.node.isLeaf) {
865
850
  this.contentDOMElement = null;
@@ -878,13 +863,13 @@ var ReactNodeView = class extends import_core2.NodeView {
878
863
  }
879
864
  const { className = "" } = this.options;
880
865
  this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
881
- this.editor.on("selectionUpdate", this.handleSelectionUpdate);
882
866
  this.renderer = new ReactRenderer(ReactNodeViewProvider, {
883
867
  editor: this.editor,
884
868
  props,
885
869
  as,
886
870
  className: `node-${this.node.type.name} ${className}`.trim()
887
871
  });
872
+ this.editor.on("selectionUpdate", this.handleSelectionUpdate);
888
873
  this.updateElementAttributes();
889
874
  }
890
875
  /**
@@ -1007,7 +992,7 @@ var ReactNodeView = class extends import_core2.NodeView {
1007
992
  let attrsObj = {};
1008
993
  if (typeof this.options.attrs === "function") {
1009
994
  const extensionAttributes = this.editor.extensionManager.attributes;
1010
- const HTMLAttributes2 = (0, import_core2.getRenderedAttributes)(this.node, extensionAttributes);
995
+ const HTMLAttributes2 = (0, import_core3.getRenderedAttributes)(this.node, extensionAttributes);
1011
996
  attrsObj = this.options.attrs({ node: this.node, HTMLAttributes: HTMLAttributes2 });
1012
997
  } else {
1013
998
  attrsObj = this.options.attrs;
@@ -1026,19 +1011,22 @@ function ReactNodeViewRenderer(component, options) {
1026
1011
  }
1027
1012
 
1028
1013
  // src/index.ts
1029
- __reExport(src_exports, require("@tiptap/core"), module.exports);
1014
+ __reExport(index_exports, require("@tiptap/core"), module.exports);
1030
1015
  // Annotate the CommonJS export names for ESM import in node:
1031
1016
  0 && (module.exports = {
1032
- BubbleMenu,
1033
1017
  EditorConsumer,
1034
1018
  EditorContent,
1035
1019
  EditorContext,
1036
1020
  EditorProvider,
1037
- FloatingMenu,
1021
+ MarkViewContent,
1038
1022
  NodeViewContent,
1039
1023
  NodeViewWrapper,
1040
1024
  PureEditorContent,
1025
+ ReactMarkView,
1026
+ ReactMarkViewContext,
1027
+ ReactMarkViewRenderer,
1041
1028
  ReactNodeView,
1029
+ ReactNodeViewContentProvider,
1042
1030
  ReactNodeViewContext,
1043
1031
  ReactNodeViewRenderer,
1044
1032
  ReactRenderer,