@tiptap/react 2.6.2 → 3.0.0-next.1

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.
Files changed (192) hide show
  1. package/dist/index.cjs +868 -1272
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +221 -0
  4. package/dist/index.d.ts +221 -0
  5. package/dist/index.js +827 -1246
  6. package/dist/index.js.map +1 -1
  7. package/package.json +10 -12
  8. package/src/BubbleMenu.tsx +29 -12
  9. package/src/FloatingMenu.tsx +25 -12
  10. package/src/useEditor.ts +1 -2
  11. package/dist/index.umd.js +0 -1325
  12. package/dist/index.umd.js.map +0 -1
  13. package/dist/packages/core/src/CommandManager.d.ts +0 -20
  14. package/dist/packages/core/src/Editor.d.ts +0 -163
  15. package/dist/packages/core/src/EventEmitter.d.ts +0 -11
  16. package/dist/packages/core/src/Extension.d.ts +0 -344
  17. package/dist/packages/core/src/ExtensionManager.d.ts +0 -55
  18. package/dist/packages/core/src/InputRule.d.ts +0 -42
  19. package/dist/packages/core/src/Mark.d.ts +0 -452
  20. package/dist/packages/core/src/Node.d.ts +0 -612
  21. package/dist/packages/core/src/NodePos.d.ts +0 -44
  22. package/dist/packages/core/src/NodeView.d.ts +0 -31
  23. package/dist/packages/core/src/PasteRule.d.ts +0 -50
  24. package/dist/packages/core/src/Tracker.d.ts +0 -11
  25. package/dist/packages/core/src/commands/blur.d.ts +0 -13
  26. package/dist/packages/core/src/commands/clearContent.d.ts +0 -14
  27. package/dist/packages/core/src/commands/clearNodes.d.ts +0 -13
  28. package/dist/packages/core/src/commands/command.d.ts +0 -18
  29. package/dist/packages/core/src/commands/createParagraphNear.d.ts +0 -13
  30. package/dist/packages/core/src/commands/cut.d.ts +0 -20
  31. package/dist/packages/core/src/commands/deleteCurrentNode.d.ts +0 -13
  32. package/dist/packages/core/src/commands/deleteNode.d.ts +0 -15
  33. package/dist/packages/core/src/commands/deleteRange.d.ts +0 -14
  34. package/dist/packages/core/src/commands/deleteSelection.d.ts +0 -13
  35. package/dist/packages/core/src/commands/enter.d.ts +0 -13
  36. package/dist/packages/core/src/commands/exitCode.d.ts +0 -13
  37. package/dist/packages/core/src/commands/extendMarkRange.d.ts +0 -25
  38. package/dist/packages/core/src/commands/first.d.ts +0 -14
  39. package/dist/packages/core/src/commands/focus.d.ts +0 -27
  40. package/dist/packages/core/src/commands/forEach.d.ts +0 -14
  41. package/dist/packages/core/src/commands/index.d.ts +0 -55
  42. package/dist/packages/core/src/commands/insertContent.d.ts +0 -34
  43. package/dist/packages/core/src/commands/insertContentAt.d.ts +0 -47
  44. package/dist/packages/core/src/commands/join.d.ts +0 -41
  45. package/dist/packages/core/src/commands/joinItemBackward.d.ts +0 -13
  46. package/dist/packages/core/src/commands/joinItemForward.d.ts +0 -13
  47. package/dist/packages/core/src/commands/joinTextblockBackward.d.ts +0 -12
  48. package/dist/packages/core/src/commands/joinTextblockForward.d.ts +0 -12
  49. package/dist/packages/core/src/commands/keyboardShortcut.d.ts +0 -14
  50. package/dist/packages/core/src/commands/lift.d.ts +0 -17
  51. package/dist/packages/core/src/commands/liftEmptyBlock.d.ts +0 -13
  52. package/dist/packages/core/src/commands/liftListItem.d.ts +0 -15
  53. package/dist/packages/core/src/commands/newlineInCode.d.ts +0 -13
  54. package/dist/packages/core/src/commands/resetAttributes.d.ts +0 -16
  55. package/dist/packages/core/src/commands/scrollIntoView.d.ts +0 -13
  56. package/dist/packages/core/src/commands/selectAll.d.ts +0 -13
  57. package/dist/packages/core/src/commands/selectNodeBackward.d.ts +0 -13
  58. package/dist/packages/core/src/commands/selectNodeForward.d.ts +0 -13
  59. package/dist/packages/core/src/commands/selectParentNode.d.ts +0 -13
  60. package/dist/packages/core/src/commands/selectTextblockEnd.d.ts +0 -13
  61. package/dist/packages/core/src/commands/selectTextblockStart.d.ts +0 -13
  62. package/dist/packages/core/src/commands/setContent.d.ts +0 -40
  63. package/dist/packages/core/src/commands/setMark.d.ts +0 -15
  64. package/dist/packages/core/src/commands/setMeta.d.ts +0 -16
  65. package/dist/packages/core/src/commands/setNode.d.ts +0 -16
  66. package/dist/packages/core/src/commands/setNodeSelection.d.ts +0 -14
  67. package/dist/packages/core/src/commands/setTextSelection.d.ts +0 -14
  68. package/dist/packages/core/src/commands/sinkListItem.d.ts +0 -15
  69. package/dist/packages/core/src/commands/splitBlock.d.ts +0 -17
  70. package/dist/packages/core/src/commands/splitListItem.d.ts +0 -16
  71. package/dist/packages/core/src/commands/toggleList.d.ts +0 -18
  72. package/dist/packages/core/src/commands/toggleMark.d.ts +0 -30
  73. package/dist/packages/core/src/commands/toggleNode.d.ts +0 -17
  74. package/dist/packages/core/src/commands/toggleWrap.d.ts +0 -16
  75. package/dist/packages/core/src/commands/undoInputRule.d.ts +0 -13
  76. package/dist/packages/core/src/commands/unsetAllMarks.d.ts +0 -13
  77. package/dist/packages/core/src/commands/unsetMark.d.ts +0 -25
  78. package/dist/packages/core/src/commands/updateAttributes.d.ts +0 -24
  79. package/dist/packages/core/src/commands/wrapIn.d.ts +0 -16
  80. package/dist/packages/core/src/commands/wrapInList.d.ts +0 -16
  81. package/dist/packages/core/src/extensions/clipboardTextSerializer.d.ts +0 -5
  82. package/dist/packages/core/src/extensions/commands.d.ts +0 -3
  83. package/dist/packages/core/src/extensions/editable.d.ts +0 -2
  84. package/dist/packages/core/src/extensions/focusEvents.d.ts +0 -2
  85. package/dist/packages/core/src/extensions/index.d.ts +0 -6
  86. package/dist/packages/core/src/extensions/keymap.d.ts +0 -2
  87. package/dist/packages/core/src/extensions/tabindex.d.ts +0 -2
  88. package/dist/packages/core/src/helpers/combineTransactionSteps.d.ts +0 -10
  89. package/dist/packages/core/src/helpers/createChainableState.d.ts +0 -10
  90. package/dist/packages/core/src/helpers/createDocument.d.ts +0 -12
  91. package/dist/packages/core/src/helpers/createNodeFromContent.d.ts +0 -15
  92. package/dist/packages/core/src/helpers/defaultBlockAt.d.ts +0 -7
  93. package/dist/packages/core/src/helpers/findChildren.d.ts +0 -9
  94. package/dist/packages/core/src/helpers/findChildrenInRange.d.ts +0 -10
  95. package/dist/packages/core/src/helpers/findParentNode.d.ts +0 -16
  96. package/dist/packages/core/src/helpers/findParentNodeClosestToPos.d.ts +0 -17
  97. package/dist/packages/core/src/helpers/generateHTML.d.ts +0 -8
  98. package/dist/packages/core/src/helpers/generateJSON.d.ts +0 -8
  99. package/dist/packages/core/src/helpers/generateText.d.ts +0 -12
  100. package/dist/packages/core/src/helpers/getAttributes.d.ts +0 -9
  101. package/dist/packages/core/src/helpers/getAttributesFromExtensions.d.ts +0 -6
  102. package/dist/packages/core/src/helpers/getChangedRanges.d.ts +0 -11
  103. package/dist/packages/core/src/helpers/getDebugJSON.d.ts +0 -8
  104. package/dist/packages/core/src/helpers/getExtensionField.d.ts +0 -9
  105. package/dist/packages/core/src/helpers/getHTMLFromFragment.d.ts +0 -2
  106. package/dist/packages/core/src/helpers/getMarkAttributes.d.ts +0 -3
  107. package/dist/packages/core/src/helpers/getMarkRange.d.ts +0 -3
  108. package/dist/packages/core/src/helpers/getMarkType.d.ts +0 -2
  109. package/dist/packages/core/src/helpers/getMarksBetween.d.ts +0 -3
  110. package/dist/packages/core/src/helpers/getNodeAtPosition.d.ts +0 -11
  111. package/dist/packages/core/src/helpers/getNodeAttributes.d.ts +0 -3
  112. package/dist/packages/core/src/helpers/getNodeType.d.ts +0 -2
  113. package/dist/packages/core/src/helpers/getRenderedAttributes.d.ts +0 -3
  114. package/dist/packages/core/src/helpers/getSchema.d.ts +0 -4
  115. package/dist/packages/core/src/helpers/getSchemaByResolvedExtensions.d.ts +0 -10
  116. package/dist/packages/core/src/helpers/getSchemaTypeByName.d.ts +0 -8
  117. package/dist/packages/core/src/helpers/getSchemaTypeNameByName.d.ts +0 -8
  118. package/dist/packages/core/src/helpers/getSplittedAttributes.d.ts +0 -9
  119. package/dist/packages/core/src/helpers/getText.d.ts +0 -15
  120. package/dist/packages/core/src/helpers/getTextBetween.d.ts +0 -14
  121. package/dist/packages/core/src/helpers/getTextContentFromNodes.d.ts +0 -8
  122. package/dist/packages/core/src/helpers/getTextSerializersFromSchema.d.ts +0 -8
  123. package/dist/packages/core/src/helpers/index.d.ts +0 -50
  124. package/dist/packages/core/src/helpers/injectExtensionAttributesToParseRule.d.ts +0 -9
  125. package/dist/packages/core/src/helpers/isActive.d.ts +0 -2
  126. package/dist/packages/core/src/helpers/isAtEndOfNode.d.ts +0 -2
  127. package/dist/packages/core/src/helpers/isAtStartOfNode.d.ts +0 -2
  128. package/dist/packages/core/src/helpers/isExtensionRulesEnabled.d.ts +0 -2
  129. package/dist/packages/core/src/helpers/isList.d.ts +0 -2
  130. package/dist/packages/core/src/helpers/isMarkActive.d.ts +0 -3
  131. package/dist/packages/core/src/helpers/isNodeActive.d.ts +0 -3
  132. package/dist/packages/core/src/helpers/isNodeEmpty.d.ts +0 -14
  133. package/dist/packages/core/src/helpers/isNodeSelection.d.ts +0 -2
  134. package/dist/packages/core/src/helpers/isTextSelection.d.ts +0 -2
  135. package/dist/packages/core/src/helpers/posToDOMRect.d.ts +0 -2
  136. package/dist/packages/core/src/helpers/resolveFocusPosition.d.ts +0 -4
  137. package/dist/packages/core/src/helpers/selectionToInsertionEnd.d.ts +0 -2
  138. package/dist/packages/core/src/helpers/splitExtensions.d.ts +0 -9
  139. package/dist/packages/core/src/index.d.ts +0 -24
  140. package/dist/packages/core/src/inputRules/index.d.ts +0 -5
  141. package/dist/packages/core/src/inputRules/markInputRule.d.ts +0 -13
  142. package/dist/packages/core/src/inputRules/nodeInputRule.d.ts +0 -23
  143. package/dist/packages/core/src/inputRules/textInputRule.d.ts +0 -10
  144. package/dist/packages/core/src/inputRules/textblockTypeInputRule.d.ts +0 -15
  145. package/dist/packages/core/src/inputRules/wrappingInputRule.d.ts +0 -28
  146. package/dist/packages/core/src/pasteRules/index.d.ts +0 -3
  147. package/dist/packages/core/src/pasteRules/markPasteRule.d.ts +0 -13
  148. package/dist/packages/core/src/pasteRules/nodePasteRule.d.ts +0 -14
  149. package/dist/packages/core/src/pasteRules/textPasteRule.d.ts +0 -10
  150. package/dist/packages/core/src/style.d.ts +0 -1
  151. package/dist/packages/core/src/types.d.ts +0 -253
  152. package/dist/packages/core/src/utilities/callOrReturn.d.ts +0 -9
  153. package/dist/packages/core/src/utilities/createStyleTag.d.ts +0 -1
  154. package/dist/packages/core/src/utilities/deleteProps.d.ts +0 -6
  155. package/dist/packages/core/src/utilities/elementFromString.d.ts +0 -1
  156. package/dist/packages/core/src/utilities/escapeForRegEx.d.ts +0 -1
  157. package/dist/packages/core/src/utilities/findDuplicates.d.ts +0 -1
  158. package/dist/packages/core/src/utilities/fromString.d.ts +0 -1
  159. package/dist/packages/core/src/utilities/index.d.ts +0 -20
  160. package/dist/packages/core/src/utilities/isAndroid.d.ts +0 -1
  161. package/dist/packages/core/src/utilities/isEmptyObject.d.ts +0 -1
  162. package/dist/packages/core/src/utilities/isFunction.d.ts +0 -1
  163. package/dist/packages/core/src/utilities/isMacOS.d.ts +0 -1
  164. package/dist/packages/core/src/utilities/isNumber.d.ts +0 -1
  165. package/dist/packages/core/src/utilities/isPlainObject.d.ts +0 -1
  166. package/dist/packages/core/src/utilities/isRegExp.d.ts +0 -1
  167. package/dist/packages/core/src/utilities/isString.d.ts +0 -1
  168. package/dist/packages/core/src/utilities/isiOS.d.ts +0 -1
  169. package/dist/packages/core/src/utilities/mergeAttributes.d.ts +0 -1
  170. package/dist/packages/core/src/utilities/mergeDeep.d.ts +0 -1
  171. package/dist/packages/core/src/utilities/minMax.d.ts +0 -1
  172. package/dist/packages/core/src/utilities/objectIncludes.d.ts +0 -8
  173. package/dist/packages/core/src/utilities/removeDuplicates.d.ts +0 -8
  174. package/dist/packages/extension-bubble-menu/src/bubble-menu-plugin.d.ts +0 -76
  175. package/dist/packages/extension-bubble-menu/src/bubble-menu.d.ts +0 -15
  176. package/dist/packages/extension-bubble-menu/src/index.d.ts +0 -4
  177. package/dist/packages/extension-floating-menu/src/floating-menu-plugin.d.ts +0 -66
  178. package/dist/packages/extension-floating-menu/src/floating-menu.d.ts +0 -15
  179. package/dist/packages/extension-floating-menu/src/index.d.ts +0 -4
  180. package/dist/packages/react/src/BubbleMenu.d.ts +0 -11
  181. package/dist/packages/react/src/Context.d.ts +0 -23
  182. package/dist/packages/react/src/Editor.d.ts +0 -13
  183. package/dist/packages/react/src/EditorContent.d.ts +0 -20
  184. package/dist/packages/react/src/FloatingMenu.d.ts +0 -10
  185. package/dist/packages/react/src/NodeViewContent.d.ts +0 -6
  186. package/dist/packages/react/src/NodeViewWrapper.d.ts +0 -6
  187. package/dist/packages/react/src/ReactNodeViewRenderer.d.ts +0 -16
  188. package/dist/packages/react/src/ReactRenderer.d.ts +0 -61
  189. package/dist/packages/react/src/index.d.ts +0 -12
  190. package/dist/packages/react/src/useEditor.d.ts +0 -38
  191. package/dist/packages/react/src/useEditorState.d.ts +0 -22
  192. package/dist/packages/react/src/useReactNodeView.d.ts +0 -6
package/dist/index.cjs CHANGED
@@ -1,1330 +1,926 @@
1
- 'use strict';
2
-
3
- var extensionBubbleMenu = require('@tiptap/extension-bubble-menu');
4
- var React = require('react');
5
- var ReactDOM = require('react-dom');
6
- var core = require('@tiptap/core');
7
- var extensionFloatingMenu = require('@tiptap/extension-floating-menu');
8
-
9
- function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
10
-
11
- var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
- var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
13
-
14
- var shim = {exports: {}};
15
-
16
- var useSyncExternalStoreShim_production_min = {};
17
-
18
- /**
19
- * @license React
20
- * use-sync-external-store-shim.production.min.js
21
- *
22
- * Copyright (c) Facebook, Inc. and its affiliates.
23
- *
24
- * This source code is licensed under the MIT license found in the
25
- * LICENSE file in the root directory of this source tree.
26
- */
27
-
28
- var hasRequiredUseSyncExternalStoreShim_production_min;
29
-
30
- function requireUseSyncExternalStoreShim_production_min () {
31
- if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
32
- hasRequiredUseSyncExternalStoreShim_production_min = 1;
33
- var e=React__default.default;function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
34
- function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;useSyncExternalStoreShim_production_min.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
35
- return useSyncExternalStoreShim_production_min;
36
- }
37
-
38
- var useSyncExternalStoreShim_development = {};
39
-
40
- /**
41
- * @license React
42
- * use-sync-external-store-shim.development.js
43
- *
44
- * Copyright (c) Facebook, Inc. and its affiliates.
45
- *
46
- * This source code is licensed under the MIT license found in the
47
- * LICENSE file in the root directory of this source tree.
48
- */
49
-
50
- var hasRequiredUseSyncExternalStoreShim_development;
51
-
52
- function requireUseSyncExternalStoreShim_development () {
53
- if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
54
- hasRequiredUseSyncExternalStoreShim_development = 1;
55
-
56
- if (process.env.NODE_ENV !== "production") {
57
- (function() {
58
-
59
- /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
60
- if (
61
- typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
62
- typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
63
- 'function'
64
- ) {
65
- __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
66
- }
67
- var React = React__default.default;
68
-
69
- var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
70
-
71
- function error(format) {
72
- {
73
- {
74
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
75
- args[_key2 - 1] = arguments[_key2];
76
- }
77
-
78
- printWarning('error', format, args);
79
- }
80
- }
81
- }
82
-
83
- function printWarning(level, format, args) {
84
- // When changing this logic, you might want to also
85
- // update consoleWithStackDev.www.js as well.
86
- {
87
- var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
88
- var stack = ReactDebugCurrentFrame.getStackAddendum();
89
-
90
- if (stack !== '') {
91
- format += '%s';
92
- args = args.concat([stack]);
93
- } // eslint-disable-next-line react-internal/safe-string-coercion
94
-
95
-
96
- var argsWithFormat = args.map(function (item) {
97
- return String(item);
98
- }); // Careful: RN currently depends on this prefix
99
-
100
- argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
101
- // breaks IE9: https://github.com/facebook/react/issues/13610
102
- // eslint-disable-next-line react-internal/no-production-logging
103
-
104
- Function.prototype.apply.call(console[level], console, argsWithFormat);
105
- }
106
- }
107
-
108
- /**
109
- * inlined Object.is polyfill to avoid requiring consumers ship their own
110
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
111
- */
112
- function is(x, y) {
113
- return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
114
- ;
115
- }
116
-
117
- var objectIs = typeof Object.is === 'function' ? Object.is : is;
118
-
119
- // dispatch for CommonJS interop named imports.
120
-
121
- var useState = React.useState,
122
- useEffect = React.useEffect,
123
- useLayoutEffect = React.useLayoutEffect,
124
- useDebugValue = React.useDebugValue;
125
- var didWarnOld18Alpha = false;
126
- var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
127
- // because of a very particular set of implementation details and assumptions
128
- // -- change any one of them and it will break. The most important assumption
129
- // is that updates are always synchronous, because concurrent rendering is
130
- // only available in versions of React that also have a built-in
131
- // useSyncExternalStore API. And we only use this shim when the built-in API
132
- // does not exist.
133
- //
134
- // Do not assume that the clever hacks used by this hook also work in general.
135
- // The point of this shim is to replace the need for hacks by other libraries.
136
-
137
- function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
138
- // React do not expose a way to check if we're hydrating. So users of the shim
139
- // will need to track that themselves and return the correct value
140
- // from `getSnapshot`.
141
- getServerSnapshot) {
142
- {
143
- if (!didWarnOld18Alpha) {
144
- if (React.startTransition !== undefined) {
145
- didWarnOld18Alpha = true;
146
-
147
- error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
148
- }
149
- }
150
- } // Read the current snapshot from the store on every render. Again, this
151
- // breaks the rules of React, and only works here because of specific
152
- // implementation details, most importantly that updates are
153
- // always synchronous.
154
-
155
-
156
- var value = getSnapshot();
157
-
158
- {
159
- if (!didWarnUncachedGetSnapshot) {
160
- var cachedValue = getSnapshot();
161
-
162
- if (!objectIs(value, cachedValue)) {
163
- error('The result of getSnapshot should be cached to avoid an infinite loop');
164
-
165
- didWarnUncachedGetSnapshot = true;
166
- }
167
- }
168
- } // Because updates are synchronous, we don't queue them. Instead we force a
169
- // re-render whenever the subscribed state changes by updating an some
170
- // arbitrary useState hook. Then, during render, we call getSnapshot to read
171
- // the current value.
172
- //
173
- // Because we don't actually use the state returned by the useState hook, we
174
- // can save a bit of memory by storing other stuff in that slot.
175
- //
176
- // To implement the early bailout, we need to track some things on a mutable
177
- // object. Usually, we would put that in a useRef hook, but we can stash it in
178
- // our useState hook instead.
179
- //
180
- // To force a re-render, we call forceUpdate({inst}). That works because the
181
- // new object always fails an equality check.
182
-
183
-
184
- var _useState = useState({
185
- inst: {
186
- value: value,
187
- getSnapshot: getSnapshot
188
- }
189
- }),
190
- inst = _useState[0].inst,
191
- forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
192
- // in the layout phase so we can access it during the tearing check that
193
- // happens on subscribe.
194
-
195
-
196
- useLayoutEffect(function () {
197
- inst.value = value;
198
- inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
199
- // commit phase if there was an interleaved mutation. In concurrent mode
200
- // this can happen all the time, but even in synchronous mode, an earlier
201
- // effect may have mutated the store.
202
-
203
- if (checkIfSnapshotChanged(inst)) {
204
- // Force a re-render.
205
- forceUpdate({
206
- inst: inst
207
- });
208
- }
209
- }, [subscribe, value, getSnapshot]);
210
- useEffect(function () {
211
- // Check for changes right before subscribing. Subsequent changes will be
212
- // detected in the subscription handler.
213
- if (checkIfSnapshotChanged(inst)) {
214
- // Force a re-render.
215
- forceUpdate({
216
- inst: inst
217
- });
218
- }
219
-
220
- var handleStoreChange = function () {
221
- // TODO: Because there is no cross-renderer API for batching updates, it's
222
- // up to the consumer of this library to wrap their subscription event
223
- // with unstable_batchedUpdates. Should we try to detect when this isn't
224
- // the case and print a warning in development?
225
- // The store changed. Check if the snapshot changed since the last time we
226
- // read from the store.
227
- if (checkIfSnapshotChanged(inst)) {
228
- // Force a re-render.
229
- forceUpdate({
230
- inst: inst
231
- });
232
- }
233
- }; // Subscribe to the store and return a clean-up function.
234
-
235
-
236
- return subscribe(handleStoreChange);
237
- }, [subscribe]);
238
- useDebugValue(value);
239
- return value;
240
- }
241
-
242
- function checkIfSnapshotChanged(inst) {
243
- var latestGetSnapshot = inst.getSnapshot;
244
- var prevValue = inst.value;
245
-
246
- try {
247
- var nextValue = latestGetSnapshot();
248
- return !objectIs(prevValue, nextValue);
249
- } catch (error) {
250
- return true;
251
- }
252
- }
253
-
254
- function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
255
- // Note: The shim does not use getServerSnapshot, because pre-18 versions of
256
- // React do not expose a way to check if we're hydrating. So users of the shim
257
- // will need to track that themselves and return the correct value
258
- // from `getSnapshot`.
259
- return getSnapshot();
260
- }
261
-
262
- var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
263
-
264
- var isServerEnvironment = !canUseDOM;
265
-
266
- var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
267
- var useSyncExternalStore$2 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
268
-
269
- useSyncExternalStoreShim_development.useSyncExternalStore = useSyncExternalStore$2;
270
- /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
271
- if (
272
- typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
273
- typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
274
- 'function'
275
- ) {
276
- __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
277
- }
278
-
279
- })();
280
- }
281
- return useSyncExternalStoreShim_development;
282
- }
283
-
284
- if (process.env.NODE_ENV === 'production') {
285
- shim.exports = requireUseSyncExternalStoreShim_production_min();
286
- } else {
287
- shim.exports = requireUseSyncExternalStoreShim_development();
288
- }
289
-
290
- var shimExports = shim.exports;
291
-
292
- const mergeRefs = (...refs) => {
293
- return (node) => {
294
- refs.forEach(ref => {
295
- if (typeof ref === 'function') {
296
- ref(node);
297
- }
298
- else if (ref) {
299
- ref.current = node;
300
- }
301
- });
302
- };
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
303
11
  };
304
- /**
305
- * This component renders all of the editor's node views.
306
- */
307
- const Portals = ({ contentComponent, }) => {
308
- // For performance reasons, we render the node view portals on state changes only
309
- const renderers = shimExports.useSyncExternalStore(contentComponent.subscribe, contentComponent.getSnapshot, contentComponent.getServerSnapshot);
310
- // This allows us to directly render the portals without any additional wrapper
311
- return (React__default.default.createElement(React__default.default.Fragment, null, Object.values(renderers)));
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
312
19
  };
313
- function getInstance() {
314
- const subscribers = new Set();
315
- let renderers = {};
316
- return {
317
- /**
318
- * Subscribe to the editor instance's changes.
319
- */
320
- subscribe(callback) {
321
- subscribers.add(callback);
322
- return () => {
323
- subscribers.delete(callback);
324
- };
325
- },
326
- getSnapshot() {
327
- return renderers;
328
- },
329
- getServerSnapshot() {
330
- return renderers;
331
- },
332
- /**
333
- * Adds a new NodeView Renderer to the editor.
334
- */
335
- setRenderer(id, renderer) {
336
- renderers = {
337
- ...renderers,
338
- [id]: ReactDOM__default.default.createPortal(renderer.reactElement, renderer.element, id),
339
- };
340
- subscribers.forEach(subscriber => subscriber());
341
- },
342
- /**
343
- * Removes a NodeView Renderer from the editor.
344
- */
345
- removeRenderer(id) {
346
- const nextRenderers = { ...renderers };
347
- delete nextRenderers[id];
348
- renderers = nextRenderers;
349
- subscribers.forEach(subscriber => subscriber());
350
- },
351
- };
352
- }
353
- class PureEditorContent extends React__default.default.Component {
354
- constructor(props) {
355
- var _a;
356
- super(props);
357
- this.editorContentRef = React__default.default.createRef();
358
- this.initialized = false;
359
- this.state = {
360
- hasContentComponentInitialized: Boolean((_a = props.editor) === null || _a === void 0 ? void 0 : _a.contentComponent),
361
- };
362
- }
363
- componentDidMount() {
364
- this.init();
365
- }
366
- componentDidUpdate() {
367
- this.init();
368
- }
369
- init() {
370
- const editor = this.props.editor;
371
- if (editor && !editor.isDestroyed && editor.options.element) {
372
- if (editor.contentComponent) {
373
- return;
374
- }
375
- const element = this.editorContentRef.current;
376
- element.append(...editor.options.element.childNodes);
377
- editor.setOptions({
378
- element,
379
- });
380
- editor.contentComponent = getInstance();
381
- // Has the content component been initialized?
382
- if (!this.state.hasContentComponentInitialized) {
383
- // Subscribe to the content component
384
- this.unsubscribeToContentComponent = editor.contentComponent.subscribe(() => {
385
- this.setState(prevState => {
386
- if (!prevState.hasContentComponentInitialized) {
387
- return {
388
- hasContentComponentInitialized: true,
389
- };
390
- }
391
- return prevState;
392
- });
393
- // Unsubscribe to previous content component
394
- if (this.unsubscribeToContentComponent) {
395
- this.unsubscribeToContentComponent();
396
- }
397
- });
398
- }
399
- editor.createNodeViews();
400
- this.initialized = true;
401
- }
402
- }
403
- componentWillUnmount() {
404
- const editor = this.props.editor;
405
- if (!editor) {
406
- return;
407
- }
408
- this.initialized = false;
409
- if (!editor.isDestroyed) {
410
- editor.view.setProps({
411
- nodeViews: {},
412
- });
413
- }
414
- if (this.unsubscribeToContentComponent) {
415
- this.unsubscribeToContentComponent();
416
- }
417
- editor.contentComponent = null;
418
- if (!editor.options.element.firstChild) {
419
- return;
420
- }
421
- const newElement = document.createElement('div');
422
- newElement.append(...editor.options.element.childNodes);
423
- editor.setOptions({
424
- element: newElement,
425
- });
426
- }
427
- render() {
428
- const { editor, innerRef, ...rest } = this.props;
429
- return (React__default.default.createElement(React__default.default.Fragment, null,
430
- React__default.default.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
431
- (editor === null || editor === void 0 ? void 0 : editor.contentComponent) && React__default.default.createElement(Portals, { contentComponent: editor.contentComponent })));
432
- }
433
- }
434
- // EditorContent should be re-created whenever the Editor instance changes
435
- const EditorContentWithKey = React.forwardRef((props, ref) => {
436
- const key = React__default.default.useMemo(() => {
437
- return Math.floor(Math.random() * 0xffffffff).toString();
438
- // eslint-disable-next-line react-hooks/exhaustive-deps
439
- }, [props.editor]);
440
- // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
441
- return React__default.default.createElement(PureEditorContent, {
442
- key,
443
- innerRef: ref,
444
- ...props,
445
- });
20
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+
31
+ // src/index.ts
32
+ var src_exports = {};
33
+ __export(src_exports, {
34
+ BubbleMenu: () => BubbleMenu,
35
+ EditorConsumer: () => EditorConsumer,
36
+ EditorContent: () => EditorContent,
37
+ EditorContext: () => EditorContext,
38
+ EditorProvider: () => EditorProvider,
39
+ FloatingMenu: () => FloatingMenu,
40
+ NodeViewContent: () => NodeViewContent,
41
+ NodeViewWrapper: () => NodeViewWrapper,
42
+ PureEditorContent: () => PureEditorContent,
43
+ ReactNodeViewContext: () => ReactNodeViewContext,
44
+ ReactNodeViewRenderer: () => ReactNodeViewRenderer,
45
+ ReactRenderer: () => ReactRenderer,
46
+ useCurrentEditor: () => useCurrentEditor,
47
+ useEditor: () => useEditor,
48
+ useEditorState: () => useEditorState,
49
+ useReactNodeView: () => useReactNodeView
446
50
  });
447
- const EditorContent = React__default.default.memo(EditorContentWithKey);
448
-
449
- var withSelector = {exports: {}};
450
-
451
- var withSelector_production_min = {};
452
-
453
- /**
454
- * @license React
455
- * use-sync-external-store-shim/with-selector.production.min.js
456
- *
457
- * Copyright (c) Facebook, Inc. and its affiliates.
458
- *
459
- * This source code is licensed under the MIT license found in the
460
- * LICENSE file in the root directory of this source tree.
461
- */
462
-
463
- var hasRequiredWithSelector_production_min;
464
-
465
- function requireWithSelector_production_min () {
466
- if (hasRequiredWithSelector_production_min) return withSelector_production_min;
467
- hasRequiredWithSelector_production_min = 1;
468
- var h=React__default.default,n=shimExports;function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
469
- withSelector_production_min.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f;}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return [function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
470
- u(function(){f.hasValue=!0;f.value=d;},[d]);w(d);return d};
471
- return withSelector_production_min;
472
- }
473
-
474
- var withSelector_development = {};
475
-
476
- /**
477
- * @license React
478
- * use-sync-external-store-shim/with-selector.development.js
479
- *
480
- * Copyright (c) Facebook, Inc. and its affiliates.
481
- *
482
- * This source code is licensed under the MIT license found in the
483
- * LICENSE file in the root directory of this source tree.
484
- */
485
-
486
- var hasRequiredWithSelector_development;
487
-
488
- function requireWithSelector_development () {
489
- if (hasRequiredWithSelector_development) return withSelector_development;
490
- hasRequiredWithSelector_development = 1;
491
-
492
- if (process.env.NODE_ENV !== "production") {
493
- (function() {
494
-
495
- /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
496
- if (
497
- typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
498
- typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
499
- 'function'
500
- ) {
501
- __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
502
- }
503
- var React = React__default.default;
504
- var shim = shimExports;
505
-
506
- /**
507
- * inlined Object.is polyfill to avoid requiring consumers ship their own
508
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
509
- */
510
- function is(x, y) {
511
- return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
512
- ;
513
- }
514
-
515
- var objectIs = typeof Object.is === 'function' ? Object.is : is;
516
-
517
- var useSyncExternalStore = shim.useSyncExternalStore;
518
-
519
- // for CommonJS interop.
520
-
521
- var useRef = React.useRef,
522
- useEffect = React.useEffect,
523
- useMemo = React.useMemo,
524
- useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
525
-
526
- function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
527
- // Use this to track the rendered snapshot.
528
- var instRef = useRef(null);
529
- var inst;
530
-
531
- if (instRef.current === null) {
532
- inst = {
533
- hasValue: false,
534
- value: null
535
- };
536
- instRef.current = inst;
537
- } else {
538
- inst = instRef.current;
539
- }
540
-
541
- var _useMemo = useMemo(function () {
542
- // Track the memoized state using closure variables that are local to this
543
- // memoized instance of a getSnapshot function. Intentionally not using a
544
- // useRef hook, because that state would be shared across all concurrent
545
- // copies of the hook/component.
546
- var hasMemo = false;
547
- var memoizedSnapshot;
548
- var memoizedSelection;
549
-
550
- var memoizedSelector = function (nextSnapshot) {
551
- if (!hasMemo) {
552
- // The first time the hook is called, there is no memoized result.
553
- hasMemo = true;
554
- memoizedSnapshot = nextSnapshot;
555
-
556
- var _nextSelection = selector(nextSnapshot);
557
-
558
- if (isEqual !== undefined) {
559
- // Even if the selector has changed, the currently rendered selection
560
- // may be equal to the new selection. We should attempt to reuse the
561
- // current value if possible, to preserve downstream memoizations.
562
- if (inst.hasValue) {
563
- var currentSelection = inst.value;
564
-
565
- if (isEqual(currentSelection, _nextSelection)) {
566
- memoizedSelection = currentSelection;
567
- return currentSelection;
568
- }
569
- }
570
- }
571
-
572
- memoizedSelection = _nextSelection;
573
- return _nextSelection;
574
- } // We may be able to reuse the previous invocation's result.
575
-
576
-
577
- // We may be able to reuse the previous invocation's result.
578
- var prevSnapshot = memoizedSnapshot;
579
- var prevSelection = memoizedSelection;
580
-
581
- if (objectIs(prevSnapshot, nextSnapshot)) {
582
- // The snapshot is the same as last time. Reuse the previous selection.
583
- return prevSelection;
584
- } // The snapshot has changed, so we need to compute a new selection.
585
-
586
-
587
- // The snapshot has changed, so we need to compute a new selection.
588
- var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
589
- // has changed. If it hasn't, return the previous selection. That signals
590
- // to React that the selections are conceptually equal, and we can bail
591
- // out of rendering.
592
-
593
- // If a custom isEqual function is provided, use that to check if the data
594
- // has changed. If it hasn't, return the previous selection. That signals
595
- // to React that the selections are conceptually equal, and we can bail
596
- // out of rendering.
597
- if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
598
- return prevSelection;
599
- }
600
-
601
- memoizedSnapshot = nextSnapshot;
602
- memoizedSelection = nextSelection;
603
- return nextSelection;
604
- }; // Assigning this to a constant so that Flow knows it can't change.
605
-
606
-
607
- // Assigning this to a constant so that Flow knows it can't change.
608
- var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
609
-
610
- var getSnapshotWithSelector = function () {
611
- return memoizedSelector(getSnapshot());
612
- };
613
-
614
- var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
615
- return memoizedSelector(maybeGetServerSnapshot());
616
- };
617
- return [getSnapshotWithSelector, getServerSnapshotWithSelector];
618
- }, [getSnapshot, getServerSnapshot, selector, isEqual]),
619
- getSelection = _useMemo[0],
620
- getServerSelection = _useMemo[1];
621
-
622
- var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
623
- useEffect(function () {
624
- inst.hasValue = true;
625
- inst.value = value;
626
- }, [value]);
627
- useDebugValue(value);
628
- return value;
629
- }
630
-
631
- withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
632
- /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
633
- if (
634
- typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
635
- typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
636
- 'function'
637
- ) {
638
- __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
639
- }
640
-
641
- })();
642
- }
643
- return withSelector_development;
644
- }
645
-
646
- if (process.env.NODE_ENV === 'production') {
647
- withSelector.exports = requireWithSelector_production_min();
648
- } else {
649
- withSelector.exports = requireWithSelector_development();
650
- }
651
-
652
- var withSelectorExports = withSelector.exports;
653
-
654
- /**
655
- * To synchronize the editor instance with the component state,
656
- * we need to create a separate instance that is not affected by the component re-renders.
657
- */
658
- class EditorStateManager {
659
- constructor(initialEditor) {
660
- this.transactionNumber = 0;
661
- this.lastTransactionNumber = 0;
662
- this.subscribers = new Set();
663
- this.editor = initialEditor;
664
- this.lastSnapshot = { editor: initialEditor, transactionNumber: 0 };
665
- this.getSnapshot = this.getSnapshot.bind(this);
666
- this.getServerSnapshot = this.getServerSnapshot.bind(this);
667
- this.watch = this.watch.bind(this);
668
- this.subscribe = this.subscribe.bind(this);
669
- }
51
+ module.exports = __toCommonJS(src_exports);
52
+
53
+ // src/BubbleMenu.tsx
54
+ var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
55
+ var import_react5 = __toESM(require("react"), 1);
56
+ var import_react_dom2 = require("react-dom");
57
+
58
+ // src/Context.tsx
59
+ var import_react4 = __toESM(require("react"), 1);
60
+
61
+ // src/EditorContent.tsx
62
+ var import_react = __toESM(require("react"), 1);
63
+ var import_react_dom = __toESM(require("react-dom"), 1);
64
+ var import_shim = require("use-sync-external-store/shim");
65
+ var mergeRefs = (...refs) => {
66
+ return (node) => {
67
+ refs.forEach((ref) => {
68
+ if (typeof ref === "function") {
69
+ ref(node);
70
+ } else if (ref) {
71
+ ref.current = node;
72
+ }
73
+ });
74
+ };
75
+ };
76
+ var Portals = ({
77
+ contentComponent
78
+ }) => {
79
+ const renderers = (0, import_shim.useSyncExternalStore)(
80
+ contentComponent.subscribe,
81
+ contentComponent.getSnapshot,
82
+ contentComponent.getServerSnapshot
83
+ );
84
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, Object.values(renderers));
85
+ };
86
+ function getInstance() {
87
+ const subscribers = /* @__PURE__ */ new Set();
88
+ let renderers = {};
89
+ return {
670
90
  /**
671
- * Get the current editor instance.
91
+ * Subscribe to the editor instance's changes.
672
92
  */
93
+ subscribe(callback) {
94
+ subscribers.add(callback);
95
+ return () => {
96
+ subscribers.delete(callback);
97
+ };
98
+ },
673
99
  getSnapshot() {
674
- if (this.transactionNumber === this.lastTransactionNumber) {
675
- return this.lastSnapshot;
676
- }
677
- this.lastTransactionNumber = this.transactionNumber;
678
- this.lastSnapshot = { editor: this.editor, transactionNumber: this.transactionNumber };
679
- return this.lastSnapshot;
680
- }
681
- /**
682
- * Always disable the editor on the server-side.
683
- */
100
+ return renderers;
101
+ },
684
102
  getServerSnapshot() {
685
- return { editor: null, transactionNumber: 0 };
686
- }
103
+ return renderers;
104
+ },
687
105
  /**
688
- * Subscribe to the editor instance's changes.
106
+ * Adds a new NodeView Renderer to the editor.
689
107
  */
690
- subscribe(callback) {
691
- this.subscribers.add(callback);
692
- return () => {
693
- this.subscribers.delete(callback);
694
- };
695
- }
108
+ setRenderer(id, renderer) {
109
+ renderers = {
110
+ ...renderers,
111
+ [id]: import_react_dom.default.createPortal(renderer.reactElement, renderer.element, id)
112
+ };
113
+ subscribers.forEach((subscriber) => subscriber());
114
+ },
696
115
  /**
697
- * Watch the editor instance for changes.
116
+ * Removes a NodeView Renderer from the editor.
698
117
  */
699
- watch(nextEditor) {
700
- this.editor = nextEditor;
701
- if (this.editor) {
702
- /**
703
- * This will force a re-render when the editor state changes.
704
- * This is to support things like `editor.can().toggleBold()` in components that `useEditor`.
705
- * This could be more efficient, but it's a good trade-off for now.
706
- */
707
- const fn = () => {
708
- this.transactionNumber += 1;
709
- this.subscribers.forEach(callback => callback());
710
- };
711
- const currentEditor = this.editor;
712
- currentEditor.on('transaction', fn);
713
- return () => {
714
- currentEditor.off('transaction', fn);
715
- };
716
- }
717
- return undefined;
118
+ removeRenderer(id) {
119
+ const nextRenderers = { ...renderers };
120
+ delete nextRenderers[id];
121
+ renderers = nextRenderers;
122
+ subscribers.forEach((subscriber) => subscriber());
718
123
  }
124
+ };
719
125
  }
720
- function useEditorState(options) {
721
- const [editorInstance] = React.useState(() => new EditorStateManager(options.editor));
722
- // Using the `useSyncExternalStore` hook to sync the editor instance with the component state
723
- const selectedState = withSelectorExports.useSyncExternalStoreWithSelector(editorInstance.subscribe, editorInstance.getSnapshot, editorInstance.getServerSnapshot, options.selector, options.equalityFn);
724
- React.useEffect(() => {
725
- return editorInstance.watch(options.editor);
726
- }, [options.editor, editorInstance]);
727
- React.useDebugValue(selectedState);
728
- return selectedState;
729
- }
730
-
731
- const isDev = process.env.NODE_ENV !== 'production';
732
- const isSSR = typeof window === 'undefined';
733
- const isNext = isSSR || Boolean(typeof window !== 'undefined' && window.next);
734
- /**
735
- * This class handles the creation, destruction, and re-creation of the editor instance.
736
- */
737
- class EditorInstanceManager {
738
- constructor(options) {
739
- /**
740
- * The current editor instance.
741
- */
742
- this.editor = null;
743
- /**
744
- * The subscriptions to notify when the editor instance
745
- * has been created or destroyed.
746
- */
747
- this.subscriptions = new Set();
748
- /**
749
- * Whether the editor has been mounted.
750
- */
751
- this.isComponentMounted = false;
752
- /**
753
- * The most recent dependencies array.
754
- */
755
- this.previousDeps = null;
756
- /**
757
- * The unique instance ID. This is used to identify the editor instance. And will be re-generated for each new instance.
758
- */
759
- this.instanceId = '';
760
- this.options = options;
761
- this.subscriptions = new Set();
762
- this.setEditor(this.getInitialEditor());
763
- this.getEditor = this.getEditor.bind(this);
764
- this.getServerSnapshot = this.getServerSnapshot.bind(this);
765
- this.subscribe = this.subscribe.bind(this);
766
- this.refreshEditorInstance = this.refreshEditorInstance.bind(this);
767
- this.scheduleDestroy = this.scheduleDestroy.bind(this);
768
- this.onRender = this.onRender.bind(this);
769
- this.createEditor = this.createEditor.bind(this);
126
+ var PureEditorContent = class extends import_react.default.Component {
127
+ constructor(props) {
128
+ var _a;
129
+ super(props);
130
+ this.editorContentRef = import_react.default.createRef();
131
+ this.initialized = false;
132
+ this.state = {
133
+ hasContentComponentInitialized: Boolean((_a = props.editor) == null ? void 0 : _a.contentComponent)
134
+ };
135
+ }
136
+ componentDidMount() {
137
+ this.init();
138
+ }
139
+ componentDidUpdate() {
140
+ this.init();
141
+ }
142
+ init() {
143
+ const editor = this.props.editor;
144
+ if (editor && !editor.isDestroyed && editor.options.element) {
145
+ if (editor.contentComponent) {
146
+ return;
147
+ }
148
+ const element = this.editorContentRef.current;
149
+ element.append(...editor.options.element.childNodes);
150
+ editor.setOptions({
151
+ element
152
+ });
153
+ editor.contentComponent = getInstance();
154
+ if (!this.state.hasContentComponentInitialized) {
155
+ this.unsubscribeToContentComponent = editor.contentComponent.subscribe(() => {
156
+ this.setState((prevState) => {
157
+ if (!prevState.hasContentComponentInitialized) {
158
+ return {
159
+ hasContentComponentInitialized: true
160
+ };
161
+ }
162
+ return prevState;
163
+ });
164
+ if (this.unsubscribeToContentComponent) {
165
+ this.unsubscribeToContentComponent();
166
+ }
167
+ });
168
+ }
169
+ editor.createNodeViews();
170
+ this.initialized = true;
770
171
  }
771
- setEditor(editor) {
772
- this.editor = editor;
773
- this.instanceId = Math.random().toString(36).slice(2, 9);
774
- // Notify all subscribers that the editor instance has been created
775
- this.subscriptions.forEach(cb => cb());
172
+ }
173
+ componentWillUnmount() {
174
+ const editor = this.props.editor;
175
+ if (!editor) {
176
+ return;
776
177
  }
777
- getInitialEditor() {
778
- if (this.options.current.immediatelyRender === undefined) {
779
- if (isSSR || isNext) {
780
- // TODO in the next major release, we should throw an error here
781
- if (isDev) {
782
- /**
783
- * Throw an error in development, to make sure the developer is aware that tiptap cannot be SSR'd
784
- * and that they need to set `immediatelyRender` to `false` to avoid hydration mismatches.
785
- */
786
- console.warn('Tiptap Error: SSR has been detected, please set `immediatelyRender` explicitly to `false` to avoid hydration mismatches.');
787
- }
788
- // Best faith effort in production, run the code in the legacy mode to avoid hydration mismatches and errors in production
789
- return null;
790
- }
791
- // Default to immediately rendering when client-side rendering
792
- return this.createEditor();
793
- }
794
- if (this.options.current.immediatelyRender && isSSR && isDev) {
795
- // Warn in development, to make sure the developer is aware that tiptap cannot be SSR'd, set `immediatelyRender` to `false` to avoid hydration mismatches.
796
- throw new Error('Tiptap Error: SSR has been detected, and `immediatelyRender` has been set to `true` this is an unsupported configuration that may result in errors, explicitly set `immediatelyRender` to `false` to avoid hydration mismatches.');
797
- }
798
- if (this.options.current.immediatelyRender) {
799
- return this.createEditor();
800
- }
801
- return null;
178
+ this.initialized = false;
179
+ if (!editor.isDestroyed) {
180
+ editor.view.setProps({
181
+ nodeViews: {}
182
+ });
802
183
  }
803
- /**
804
- * Create a new editor instance. And attach event listeners.
805
- */
806
- createEditor() {
807
- const optionsToApply = {
808
- ...this.options.current,
809
- // Always call the most recent version of the callback function by default
810
- onBeforeCreate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBeforeCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
811
- onBlur: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
812
- onCreate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
813
- onDestroy: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onDestroy) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
814
- onFocus: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
815
- onSelectionUpdate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onSelectionUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
816
- onTransaction: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
817
- onUpdate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
818
- onContentError: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onContentError) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
819
- };
820
- const editor = new core.Editor(optionsToApply);
821
- // no need to keep track of the event listeners, they will be removed when the editor is destroyed
822
- return editor;
184
+ if (this.unsubscribeToContentComponent) {
185
+ this.unsubscribeToContentComponent();
823
186
  }
187
+ editor.contentComponent = null;
188
+ if (!editor.options.element.firstChild) {
189
+ return;
190
+ }
191
+ const newElement = document.createElement("div");
192
+ newElement.append(...editor.options.element.childNodes);
193
+ editor.setOptions({
194
+ element: newElement
195
+ });
196
+ }
197
+ render() {
198
+ const { editor, innerRef, ...rest } = this.props;
199
+ 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 }));
200
+ }
201
+ };
202
+ var EditorContentWithKey = (0, import_react.forwardRef)(
203
+ (props, ref) => {
204
+ const key = import_react.default.useMemo(() => {
205
+ return Math.floor(Math.random() * 4294967295).toString();
206
+ }, [props.editor]);
207
+ return import_react.default.createElement(PureEditorContent, {
208
+ key,
209
+ innerRef: ref,
210
+ ...props
211
+ });
212
+ }
213
+ );
214
+ var EditorContent = import_react.default.memo(EditorContentWithKey);
215
+
216
+ // src/useEditor.ts
217
+ var import_core = require("@tiptap/core");
218
+ var import_react3 = require("react");
219
+ var import_shim2 = require("use-sync-external-store/shim");
220
+
221
+ // src/useEditorState.ts
222
+ var import_react2 = require("react");
223
+ var import_with_selector = require("use-sync-external-store/shim/with-selector");
224
+ var EditorStateManager = class {
225
+ constructor(initialEditor) {
226
+ this.transactionNumber = 0;
227
+ this.lastTransactionNumber = 0;
228
+ this.subscribers = /* @__PURE__ */ new Set();
229
+ this.editor = initialEditor;
230
+ this.lastSnapshot = { editor: initialEditor, transactionNumber: 0 };
231
+ this.getSnapshot = this.getSnapshot.bind(this);
232
+ this.getServerSnapshot = this.getServerSnapshot.bind(this);
233
+ this.watch = this.watch.bind(this);
234
+ this.subscribe = this.subscribe.bind(this);
235
+ }
236
+ /**
237
+ * Get the current editor instance.
238
+ */
239
+ getSnapshot() {
240
+ if (this.transactionNumber === this.lastTransactionNumber) {
241
+ return this.lastSnapshot;
242
+ }
243
+ this.lastTransactionNumber = this.transactionNumber;
244
+ this.lastSnapshot = { editor: this.editor, transactionNumber: this.transactionNumber };
245
+ return this.lastSnapshot;
246
+ }
247
+ /**
248
+ * Always disable the editor on the server-side.
249
+ */
250
+ getServerSnapshot() {
251
+ return { editor: null, transactionNumber: 0 };
252
+ }
253
+ /**
254
+ * Subscribe to the editor instance's changes.
255
+ */
256
+ subscribe(callback) {
257
+ this.subscribers.add(callback);
258
+ return () => {
259
+ this.subscribers.delete(callback);
260
+ };
261
+ }
262
+ /**
263
+ * Watch the editor instance for changes.
264
+ */
265
+ watch(nextEditor) {
266
+ this.editor = nextEditor;
267
+ if (this.editor) {
268
+ const fn = () => {
269
+ this.transactionNumber += 1;
270
+ this.subscribers.forEach((callback) => callback());
271
+ };
272
+ const currentEditor = this.editor;
273
+ currentEditor.on("transaction", fn);
274
+ return () => {
275
+ currentEditor.off("transaction", fn);
276
+ };
277
+ }
278
+ return void 0;
279
+ }
280
+ };
281
+ function useEditorState(options) {
282
+ const [editorInstance] = (0, import_react2.useState)(() => new EditorStateManager(options.editor));
283
+ const selectedState = (0, import_with_selector.useSyncExternalStoreWithSelector)(
284
+ editorInstance.subscribe,
285
+ editorInstance.getSnapshot,
286
+ editorInstance.getServerSnapshot,
287
+ options.selector,
288
+ options.equalityFn
289
+ );
290
+ (0, import_react2.useEffect)(() => {
291
+ return editorInstance.watch(options.editor);
292
+ }, [options.editor, editorInstance]);
293
+ (0, import_react2.useDebugValue)(selectedState);
294
+ return selectedState;
295
+ }
296
+
297
+ // src/useEditor.ts
298
+ var isDev = process.env.NODE_ENV !== "production";
299
+ var isSSR = typeof window === "undefined";
300
+ var isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
301
+ var EditorInstanceManager = class {
302
+ constructor(options) {
824
303
  /**
825
- * Get the current editor instance.
304
+ * The current editor instance.
826
305
  */
827
- getEditor() {
828
- return this.editor;
829
- }
306
+ this.editor = null;
830
307
  /**
831
- * Always disable the editor on the server-side.
308
+ * The subscriptions to notify when the editor instance
309
+ * has been created or destroyed.
832
310
  */
833
- getServerSnapshot() {
834
- return null;
835
- }
311
+ this.subscriptions = /* @__PURE__ */ new Set();
836
312
  /**
837
- * Subscribe to the editor instance's changes.
313
+ * Whether the editor has been mounted.
838
314
  */
839
- subscribe(onStoreChange) {
840
- this.subscriptions.add(onStoreChange);
841
- return () => {
842
- this.subscriptions.delete(onStoreChange);
843
- };
844
- }
315
+ this.isComponentMounted = false;
845
316
  /**
846
- * On each render, we will create, update, or destroy the editor instance.
847
- * @param deps The dependencies to watch for changes
848
- * @returns A cleanup function
317
+ * The most recent dependencies array.
849
318
  */
850
- onRender(deps) {
851
- // The returned callback will run on each render
852
- return () => {
853
- this.isComponentMounted = true;
854
- // Cleanup any scheduled destructions, since we are currently rendering
855
- clearTimeout(this.scheduledDestructionTimeout);
856
- if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
857
- // if the editor does exist & deps are empty, we don't need to re-initialize the editor
858
- // we can fast-path to update the editor options on the existing instance
859
- this.editor.setOptions(this.options.current);
860
- }
861
- else {
862
- // When the editor:
863
- // - does not yet exist
864
- // - is destroyed
865
- // - the deps array changes
866
- // We need to destroy the editor instance and re-initialize it
867
- this.refreshEditorInstance(deps);
868
- }
869
- return () => {
870
- this.isComponentMounted = false;
871
- this.scheduleDestroy();
872
- };
873
- };
874
- }
319
+ this.previousDeps = null;
875
320
  /**
876
- * Recreate the editor instance if the dependencies have changed.
321
+ * The unique instance ID. This is used to identify the editor instance. And will be re-generated for each new instance.
877
322
  */
878
- refreshEditorInstance(deps) {
879
- if (this.editor && !this.editor.isDestroyed) {
880
- // Editor instance already exists
881
- if (this.previousDeps === null) {
882
- // If lastDeps has not yet been initialized, reuse the current editor instance
883
- this.previousDeps = deps;
884
- return;
885
- }
886
- const depsAreEqual = this.previousDeps.length === deps.length
887
- && this.previousDeps.every((dep, index) => dep === deps[index]);
888
- if (depsAreEqual) {
889
- // deps exist and are equal, no need to recreate
890
- return;
891
- }
892
- }
893
- if (this.editor && !this.editor.isDestroyed) {
894
- // Destroy the editor instance if it exists
895
- this.editor.destroy();
323
+ this.instanceId = "";
324
+ this.options = options;
325
+ this.subscriptions = /* @__PURE__ */ new Set();
326
+ this.setEditor(this.getInitialEditor());
327
+ this.getEditor = this.getEditor.bind(this);
328
+ this.getServerSnapshot = this.getServerSnapshot.bind(this);
329
+ this.subscribe = this.subscribe.bind(this);
330
+ this.refreshEditorInstance = this.refreshEditorInstance.bind(this);
331
+ this.scheduleDestroy = this.scheduleDestroy.bind(this);
332
+ this.onRender = this.onRender.bind(this);
333
+ this.createEditor = this.createEditor.bind(this);
334
+ }
335
+ setEditor(editor) {
336
+ this.editor = editor;
337
+ this.instanceId = Math.random().toString(36).slice(2, 9);
338
+ this.subscriptions.forEach((cb) => cb());
339
+ }
340
+ getInitialEditor() {
341
+ if (this.options.current.immediatelyRender === void 0) {
342
+ if (isSSR || isNext) {
343
+ if (isDev) {
344
+ throw new Error(
345
+ "Tiptap Error: SSR has been detected, please set `immediatelyRender` explicitly to `false` to avoid hydration mismatches."
346
+ );
896
347
  }
897
- this.setEditor(this.createEditor());
898
- // Update the lastDeps to the current deps
348
+ return null;
349
+ }
350
+ return this.createEditor();
351
+ }
352
+ if (this.options.current.immediatelyRender && isSSR && isDev) {
353
+ throw new Error(
354
+ "Tiptap Error: SSR has been detected, and `immediatelyRender` has been set to `true` this is an unsupported configuration that may result in errors, explicitly set `immediatelyRender` to `false` to avoid hydration mismatches."
355
+ );
356
+ }
357
+ if (this.options.current.immediatelyRender) {
358
+ return this.createEditor();
359
+ }
360
+ return null;
361
+ }
362
+ /**
363
+ * Create a new editor instance. And attach event listeners.
364
+ */
365
+ createEditor() {
366
+ const optionsToApply = {
367
+ ...this.options.current,
368
+ // Always call the most recent version of the callback function by default
369
+ onBeforeCreate: (...args) => {
370
+ var _a, _b;
371
+ return (_b = (_a = this.options.current).onBeforeCreate) == null ? void 0 : _b.call(_a, ...args);
372
+ },
373
+ onBlur: (...args) => {
374
+ var _a, _b;
375
+ return (_b = (_a = this.options.current).onBlur) == null ? void 0 : _b.call(_a, ...args);
376
+ },
377
+ onCreate: (...args) => {
378
+ var _a, _b;
379
+ return (_b = (_a = this.options.current).onCreate) == null ? void 0 : _b.call(_a, ...args);
380
+ },
381
+ onDestroy: (...args) => {
382
+ var _a, _b;
383
+ return (_b = (_a = this.options.current).onDestroy) == null ? void 0 : _b.call(_a, ...args);
384
+ },
385
+ onFocus: (...args) => {
386
+ var _a, _b;
387
+ return (_b = (_a = this.options.current).onFocus) == null ? void 0 : _b.call(_a, ...args);
388
+ },
389
+ onSelectionUpdate: (...args) => {
390
+ var _a, _b;
391
+ return (_b = (_a = this.options.current).onSelectionUpdate) == null ? void 0 : _b.call(_a, ...args);
392
+ },
393
+ onTransaction: (...args) => {
394
+ var _a, _b;
395
+ return (_b = (_a = this.options.current).onTransaction) == null ? void 0 : _b.call(_a, ...args);
396
+ },
397
+ onUpdate: (...args) => {
398
+ var _a, _b;
399
+ return (_b = (_a = this.options.current).onUpdate) == null ? void 0 : _b.call(_a, ...args);
400
+ },
401
+ onContentError: (...args) => {
402
+ var _a, _b;
403
+ return (_b = (_a = this.options.current).onContentError) == null ? void 0 : _b.call(_a, ...args);
404
+ }
405
+ };
406
+ const editor = new import_core.Editor(optionsToApply);
407
+ return editor;
408
+ }
409
+ /**
410
+ * Get the current editor instance.
411
+ */
412
+ getEditor() {
413
+ return this.editor;
414
+ }
415
+ /**
416
+ * Always disable the editor on the server-side.
417
+ */
418
+ getServerSnapshot() {
419
+ return null;
420
+ }
421
+ /**
422
+ * Subscribe to the editor instance's changes.
423
+ */
424
+ subscribe(onStoreChange) {
425
+ this.subscriptions.add(onStoreChange);
426
+ return () => {
427
+ this.subscriptions.delete(onStoreChange);
428
+ };
429
+ }
430
+ /**
431
+ * On each render, we will create, update, or destroy the editor instance.
432
+ * @param deps The dependencies to watch for changes
433
+ * @returns A cleanup function
434
+ */
435
+ onRender(deps) {
436
+ return () => {
437
+ this.isComponentMounted = true;
438
+ clearTimeout(this.scheduledDestructionTimeout);
439
+ if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
440
+ this.editor.setOptions(this.options.current);
441
+ } else {
442
+ this.refreshEditorInstance(deps);
443
+ }
444
+ return () => {
445
+ this.isComponentMounted = false;
446
+ this.scheduleDestroy();
447
+ };
448
+ };
449
+ }
450
+ /**
451
+ * Recreate the editor instance if the dependencies have changed.
452
+ */
453
+ refreshEditorInstance(deps) {
454
+ if (this.editor && !this.editor.isDestroyed) {
455
+ if (this.previousDeps === null) {
899
456
  this.previousDeps = deps;
900
- }
901
- /**
902
- * Schedule the destruction of the editor instance.
903
- * This will only destroy the editor if it was not mounted on the next tick.
904
- * This is to avoid destroying the editor instance when it's actually still mounted.
905
- */
906
- scheduleDestroy() {
907
- const currentInstanceId = this.instanceId;
908
- const currentEditor = this.editor;
909
- // Wait a tick to see if the component is still mounted
910
- this.scheduledDestructionTimeout = setTimeout(() => {
911
- if (this.isComponentMounted && this.instanceId === currentInstanceId) {
912
- // If still mounted on the next tick, with the same instanceId, do not destroy the editor
913
- if (currentEditor) {
914
- // just re-apply options as they might have changed
915
- currentEditor.setOptions(this.options.current);
916
- }
917
- return;
918
- }
919
- if (currentEditor && !currentEditor.isDestroyed) {
920
- currentEditor.destroy();
921
- if (this.instanceId === currentInstanceId) {
922
- this.setEditor(null);
923
- }
924
- }
925
- }, 0);
926
- }
927
- }
457
+ return;
458
+ }
459
+ const depsAreEqual = this.previousDeps.length === deps.length && this.previousDeps.every((dep, index) => dep === deps[index]);
460
+ if (depsAreEqual) {
461
+ return;
462
+ }
463
+ }
464
+ if (this.editor && !this.editor.isDestroyed) {
465
+ this.editor.destroy();
466
+ }
467
+ this.setEditor(this.createEditor());
468
+ this.previousDeps = deps;
469
+ }
470
+ /**
471
+ * Schedule the destruction of the editor instance.
472
+ * This will only destroy the editor if it was not mounted on the next tick.
473
+ * This is to avoid destroying the editor instance when it's actually still mounted.
474
+ */
475
+ scheduleDestroy() {
476
+ const currentInstanceId = this.instanceId;
477
+ const currentEditor = this.editor;
478
+ this.scheduledDestructionTimeout = setTimeout(() => {
479
+ if (this.isComponentMounted && this.instanceId === currentInstanceId) {
480
+ if (currentEditor) {
481
+ currentEditor.setOptions(this.options.current);
482
+ }
483
+ return;
484
+ }
485
+ if (currentEditor && !currentEditor.isDestroyed) {
486
+ currentEditor.destroy();
487
+ if (this.instanceId === currentInstanceId) {
488
+ this.setEditor(null);
489
+ }
490
+ }
491
+ }, 0);
492
+ }
493
+ };
928
494
  function useEditor(options = {}, deps = []) {
929
- const mostRecentOptions = React.useRef(options);
930
- mostRecentOptions.current = options;
931
- const [instanceManager] = React.useState(() => new EditorInstanceManager(mostRecentOptions));
932
- const editor = shimExports.useSyncExternalStore(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
933
- React.useDebugValue(editor);
934
- // This effect will handle creating/updating the editor instance
935
- // eslint-disable-next-line react-hooks/exhaustive-deps
936
- React.useEffect(instanceManager.onRender(deps));
937
- // The default behavior is to re-render on each transaction
938
- // This is legacy behavior that will be removed in future versions
939
- useEditorState({
940
- editor,
941
- selector: ({ transactionNumber }) => {
942
- if (options.shouldRerenderOnTransaction === false) {
943
- // This will prevent the editor from re-rendering on each transaction
944
- return null;
945
- }
946
- // This will avoid re-rendering on the first transaction when `immediatelyRender` is set to `true`
947
- if (options.immediatelyRender && transactionNumber === 0) {
948
- return 0;
949
- }
950
- return transactionNumber + 1;
951
- },
952
- });
953
- return editor;
495
+ const mostRecentOptions = (0, import_react3.useRef)(options);
496
+ mostRecentOptions.current = options;
497
+ const [instanceManager] = (0, import_react3.useState)(() => new EditorInstanceManager(mostRecentOptions));
498
+ const editor = (0, import_shim2.useSyncExternalStore)(
499
+ instanceManager.subscribe,
500
+ instanceManager.getEditor,
501
+ instanceManager.getServerSnapshot
502
+ );
503
+ (0, import_react3.useDebugValue)(editor);
504
+ (0, import_react3.useEffect)(instanceManager.onRender(deps));
505
+ useEditorState({
506
+ editor,
507
+ selector: ({ transactionNumber }) => {
508
+ if (options.shouldRerenderOnTransaction === false) {
509
+ return null;
510
+ }
511
+ if (options.immediatelyRender && transactionNumber === 0) {
512
+ return 0;
513
+ }
514
+ return transactionNumber + 1;
515
+ }
516
+ });
517
+ return editor;
954
518
  }
955
519
 
956
- const EditorContext = React.createContext({
957
- editor: null,
520
+ // src/Context.tsx
521
+ var EditorContext = (0, import_react4.createContext)({
522
+ editor: null
958
523
  });
959
- const EditorConsumer = EditorContext.Consumer;
960
- /**
961
- * A hook to get the current editor instance.
962
- */
963
- const useCurrentEditor = () => React.useContext(EditorContext);
964
- /**
965
- * This is the provider component for the editor.
966
- * It allows the editor to be accessible across the entire component tree
967
- * with `useCurrentEditor`.
968
- */
969
- function EditorProvider({ children, slotAfter, slotBefore, ...editorOptions }) {
970
- const editor = useEditor(editorOptions);
971
- if (!editor) {
972
- return null;
973
- }
974
- return (React__default.default.createElement(EditorContext.Provider, { value: { editor } },
975
- slotBefore,
976
- React__default.default.createElement(EditorConsumer, null, ({ editor: currentEditor }) => (React__default.default.createElement(EditorContent, { editor: currentEditor }))),
977
- children,
978
- slotAfter));
524
+ var EditorConsumer = EditorContext.Consumer;
525
+ var useCurrentEditor = () => (0, import_react4.useContext)(EditorContext);
526
+ function EditorProvider({
527
+ children,
528
+ slotAfter,
529
+ slotBefore,
530
+ ...editorOptions
531
+ }) {
532
+ const editor = useEditor(editorOptions);
533
+ if (!editor) {
534
+ return null;
535
+ }
536
+ return /* @__PURE__ */ import_react4.default.createElement(EditorContext.Provider, { value: { editor } }, slotBefore, /* @__PURE__ */ import_react4.default.createElement(EditorConsumer, null, ({ editor: currentEditor }) => /* @__PURE__ */ import_react4.default.createElement(EditorContent, { editor: currentEditor })), children, slotAfter);
979
537
  }
980
538
 
981
- const BubbleMenu = (props) => {
982
- const [element, setElement] = React.useState(null);
983
- const { editor: currentEditor } = useCurrentEditor();
984
- React.useEffect(() => {
985
- var _a;
986
- if (!element) {
987
- return;
988
- }
989
- if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
990
- return;
991
- }
992
- const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null, } = props;
993
- const menuEditor = editor || currentEditor;
994
- if (!menuEditor) {
995
- console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.');
996
- return;
997
- }
998
- const plugin = extensionBubbleMenu.BubbleMenuPlugin({
999
- updateDelay,
1000
- editor: menuEditor,
1001
- element,
1002
- pluginKey,
1003
- shouldShow,
1004
- tippyOptions,
1005
- });
1006
- menuEditor.registerPlugin(plugin);
1007
- return () => menuEditor.unregisterPlugin(pluginKey);
1008
- }, [props.editor, currentEditor, element]);
1009
- return (React__default.default.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
539
+ // src/BubbleMenu.tsx
540
+ var BubbleMenu = (props) => {
541
+ const menuEl = (0, import_react5.useRef)(document.createElement("div"));
542
+ const { editor: currentEditor } = useCurrentEditor();
543
+ (0, import_react5.useEffect)(() => {
544
+ var _a;
545
+ menuEl.current.style.visibility = "hidden";
546
+ menuEl.current.style.position = "absolute";
547
+ if (((_a = props.editor) == null ? void 0 : _a.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
548
+ return;
549
+ }
550
+ const {
551
+ pluginKey = "bubbleMenu",
552
+ editor,
553
+ updateDelay,
554
+ resizeDelay,
555
+ shouldShow = null
556
+ } = props;
557
+ const menuEditor = editor || currentEditor;
558
+ if (!menuEditor) {
559
+ console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
560
+ return;
561
+ }
562
+ const plugin = (0, import_extension_bubble_menu.BubbleMenuPlugin)({
563
+ updateDelay,
564
+ resizeDelay,
565
+ editor: menuEditor,
566
+ element: menuEl.current,
567
+ pluginKey,
568
+ shouldShow,
569
+ options: props.options
570
+ });
571
+ menuEditor.registerPlugin(plugin);
572
+ return () => {
573
+ menuEditor.unregisterPlugin(pluginKey);
574
+ window.requestAnimationFrame(() => {
575
+ if (menuEl.current.parentNode) {
576
+ menuEl.current.parentNode.removeChild(menuEl.current);
577
+ }
578
+ });
579
+ };
580
+ }, [props.editor, currentEditor]);
581
+ const portal = (0, import_react_dom2.createPortal)(
582
+ /* @__PURE__ */ import_react5.default.createElement("div", { className: props.className }, props.children),
583
+ menuEl.current
584
+ );
585
+ return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, portal);
1010
586
  };
1011
587
 
1012
- const FloatingMenu = (props) => {
1013
- const [element, setElement] = React.useState(null);
1014
- const { editor: currentEditor } = useCurrentEditor();
1015
- React.useEffect(() => {
1016
- var _a;
1017
- if (!element) {
1018
- return;
1019
- }
1020
- if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
1021
- return;
1022
- }
1023
- const { pluginKey = 'floatingMenu', editor, tippyOptions = {}, shouldShow = null, } = props;
1024
- const menuEditor = editor || currentEditor;
1025
- if (!menuEditor) {
1026
- console.warn('FloatingMenu component is not rendered inside of an editor component or does not have editor prop.');
1027
- return;
1028
- }
1029
- const plugin = extensionFloatingMenu.FloatingMenuPlugin({
1030
- pluginKey,
1031
- editor: menuEditor,
1032
- element,
1033
- tippyOptions,
1034
- shouldShow,
1035
- });
1036
- menuEditor.registerPlugin(plugin);
1037
- return () => menuEditor.unregisterPlugin(pluginKey);
1038
- }, [
1039
- props.editor,
1040
- currentEditor,
1041
- element,
1042
- ]);
1043
- return (React__default.default.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
588
+ // src/FloatingMenu.tsx
589
+ var import_extension_floating_menu = require("@tiptap/extension-floating-menu");
590
+ var import_react6 = __toESM(require("react"), 1);
591
+ var import_react_dom3 = require("react-dom");
592
+ var FloatingMenu = (props) => {
593
+ const menuEl = (0, import_react6.useRef)(document.createElement("div"));
594
+ const { editor: currentEditor } = useCurrentEditor();
595
+ (0, import_react6.useEffect)(() => {
596
+ var _a;
597
+ menuEl.current.style.visibility = "hidden";
598
+ menuEl.current.style.position = "absolute";
599
+ if (((_a = props.editor) == null ? void 0 : _a.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
600
+ return;
601
+ }
602
+ const {
603
+ pluginKey = "floatingMenu",
604
+ editor,
605
+ options,
606
+ shouldShow = null
607
+ } = props;
608
+ const menuEditor = editor || currentEditor;
609
+ if (!menuEditor) {
610
+ console.warn("FloatingMenu component is not rendered inside of an editor component or does not have editor prop.");
611
+ return;
612
+ }
613
+ const plugin = (0, import_extension_floating_menu.FloatingMenuPlugin)({
614
+ pluginKey,
615
+ editor: menuEditor,
616
+ element: menuEl.current,
617
+ options,
618
+ shouldShow
619
+ });
620
+ menuEditor.registerPlugin(plugin);
621
+ return () => {
622
+ menuEditor.unregisterPlugin(pluginKey);
623
+ window.requestAnimationFrame(() => {
624
+ if (menuEl.current.parentNode) {
625
+ menuEl.current.parentNode.removeChild(menuEl.current);
626
+ }
627
+ });
628
+ };
629
+ }, [
630
+ props.editor,
631
+ currentEditor
632
+ ]);
633
+ const portal = (0, import_react_dom3.createPortal)(
634
+ /* @__PURE__ */ import_react6.default.createElement("div", { className: props.className }, props.children),
635
+ menuEl.current
636
+ );
637
+ return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, portal);
1044
638
  };
1045
639
 
1046
- const ReactNodeViewContext = React.createContext({
1047
- onDragStart: undefined,
640
+ // src/NodeViewContent.tsx
641
+ var import_react8 = __toESM(require("react"), 1);
642
+
643
+ // src/useReactNodeView.ts
644
+ var import_react7 = require("react");
645
+ var ReactNodeViewContext = (0, import_react7.createContext)({
646
+ onDragStart: void 0
1048
647
  });
1049
- const useReactNodeView = () => React.useContext(ReactNodeViewContext);
648
+ var useReactNodeView = () => (0, import_react7.useContext)(ReactNodeViewContext);
1050
649
 
1051
- const NodeViewContent = props => {
1052
- const Tag = props.as || 'div';
1053
- const { nodeViewContentRef } = useReactNodeView();
1054
- return (
650
+ // src/NodeViewContent.tsx
651
+ var NodeViewContent = (props) => {
652
+ const Tag = props.as || "div";
653
+ const { nodeViewContentRef } = useReactNodeView();
654
+ return (
1055
655
  // @ts-ignore
1056
- React__default.default.createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
1057
- whiteSpace: 'pre-wrap',
1058
- ...props.style,
1059
- } }));
656
+ /* @__PURE__ */ import_react8.default.createElement(
657
+ Tag,
658
+ {
659
+ ...props,
660
+ ref: nodeViewContentRef,
661
+ "data-node-view-content": "",
662
+ style: {
663
+ whiteSpace: "pre-wrap",
664
+ ...props.style
665
+ }
666
+ }
667
+ )
668
+ );
1060
669
  };
1061
670
 
1062
- const NodeViewWrapper = React__default.default.forwardRef((props, ref) => {
1063
- const { onDragStart } = useReactNodeView();
1064
- const Tag = props.as || 'div';
1065
- return (
671
+ // src/NodeViewWrapper.tsx
672
+ var import_react9 = __toESM(require("react"), 1);
673
+ var NodeViewWrapper = import_react9.default.forwardRef((props, ref) => {
674
+ const { onDragStart } = useReactNodeView();
675
+ const Tag = props.as || "div";
676
+ return (
1066
677
  // @ts-ignore
1067
- React__default.default.createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
1068
- whiteSpace: 'normal',
1069
- ...props.style,
1070
- } }));
678
+ /* @__PURE__ */ import_react9.default.createElement(
679
+ Tag,
680
+ {
681
+ ...props,
682
+ ref,
683
+ "data-node-view-wrapper": "",
684
+ onDragStart,
685
+ style: {
686
+ whiteSpace: "normal",
687
+ ...props.style
688
+ }
689
+ }
690
+ )
691
+ );
1071
692
  });
1072
693
 
1073
- /**
1074
- * Check if a component is a class component.
1075
- * @param Component
1076
- * @returns {boolean}
1077
- */
694
+ // src/ReactNodeViewRenderer.tsx
695
+ var import_core2 = require("@tiptap/core");
696
+ var import_react11 = __toESM(require("react"), 1);
697
+
698
+ // src/ReactRenderer.tsx
699
+ var import_react10 = __toESM(require("react"), 1);
700
+ var import_react_dom4 = require("react-dom");
1078
701
  function isClassComponent(Component) {
1079
- return !!(typeof Component === 'function'
1080
- && Component.prototype
1081
- && Component.prototype.isReactComponent);
702
+ return !!(typeof Component === "function" && Component.prototype && Component.prototype.isReactComponent);
1082
703
  }
1083
- /**
1084
- * Check if a component is a forward ref component.
1085
- * @param Component
1086
- * @returns {boolean}
1087
- */
1088
704
  function isForwardRefComponent(Component) {
1089
- var _a;
1090
- return !!(typeof Component === 'object'
1091
- && ((_a = Component.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === 'Symbol(react.forward_ref)');
705
+ var _a;
706
+ return !!(typeof Component === "object" && ((_a = Component.$$typeof) == null ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
1092
707
  }
1093
- /**
1094
- * The ReactRenderer class. It's responsible for rendering React components inside the editor.
1095
- * @example
1096
- * new ReactRenderer(MyComponent, {
1097
- * editor,
1098
- * props: {
1099
- * foo: 'bar',
1100
- * },
1101
- * as: 'span',
1102
- * })
1103
- */
1104
- class ReactRenderer {
1105
- constructor(component, { editor, props = {}, as = 'div', className = '', attrs, }) {
1106
- this.ref = null;
1107
- this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString();
1108
- this.component = component;
1109
- this.editor = editor;
1110
- this.props = props;
1111
- this.element = document.createElement(as);
1112
- this.element.classList.add('react-renderer');
1113
- if (className) {
1114
- this.element.classList.add(...className.split(' '));
1115
- }
1116
- if (attrs) {
1117
- Object.keys(attrs).forEach(key => {
1118
- this.element.setAttribute(key, attrs[key]);
1119
- });
1120
- }
1121
- if (this.editor.isInitialized) {
1122
- // On first render, we need to flush the render synchronously
1123
- // Renders afterwards can be async, but this fixes a cursor positioning issue
1124
- ReactDOM.flushSync(() => {
1125
- this.render();
1126
- });
1127
- }
1128
- else {
1129
- this.render();
1130
- }
1131
- }
1132
- render() {
1133
- var _a;
1134
- const Component = this.component;
1135
- const props = this.props;
1136
- const editor = this.editor;
1137
- if (isClassComponent(Component) || isForwardRefComponent(Component)) {
1138
- props.ref = (ref) => {
1139
- this.ref = ref;
1140
- };
1141
- }
1142
- this.reactElement = React__default.default.createElement(Component, props);
1143
- (_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? void 0 : _a.setRenderer(this.id, this);
1144
- }
1145
- updateProps(props = {}) {
1146
- this.props = {
1147
- ...this.props,
1148
- ...props,
1149
- };
708
+ var ReactRenderer = class {
709
+ constructor(component, {
710
+ editor,
711
+ props = {},
712
+ as = "div",
713
+ className = "",
714
+ attrs
715
+ }) {
716
+ this.ref = null;
717
+ this.id = Math.floor(Math.random() * 4294967295).toString();
718
+ this.component = component;
719
+ this.editor = editor;
720
+ this.props = props;
721
+ this.element = document.createElement(as);
722
+ this.element.classList.add("react-renderer");
723
+ if (className) {
724
+ this.element.classList.add(...className.split(" "));
725
+ }
726
+ if (attrs) {
727
+ Object.keys(attrs).forEach((key) => {
728
+ this.element.setAttribute(key, attrs[key]);
729
+ });
730
+ }
731
+ if (this.editor.isInitialized) {
732
+ (0, import_react_dom4.flushSync)(() => {
1150
733
  this.render();
734
+ });
735
+ } else {
736
+ this.render();
1151
737
  }
1152
- destroy() {
1153
- var _a;
1154
- const editor = this.editor;
1155
- (_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? void 0 : _a.removeRenderer(this.id);
1156
- }
1157
- }
738
+ }
739
+ render() {
740
+ var _a;
741
+ const Component = this.component;
742
+ const props = this.props;
743
+ const editor = this.editor;
744
+ if (isClassComponent(Component) || isForwardRefComponent(Component)) {
745
+ props.ref = (ref) => {
746
+ this.ref = ref;
747
+ };
748
+ }
749
+ this.reactElement = import_react10.default.createElement(Component, props);
750
+ (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.setRenderer(this.id, this);
751
+ }
752
+ updateProps(props = {}) {
753
+ this.props = {
754
+ ...this.props,
755
+ ...props
756
+ };
757
+ this.render();
758
+ }
759
+ destroy() {
760
+ var _a;
761
+ const editor = this.editor;
762
+ (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.removeRenderer(this.id);
763
+ }
764
+ };
1158
765
 
1159
- class ReactNodeView extends core.NodeView {
1160
- mount() {
1161
- const props = {
1162
- editor: this.editor,
1163
- node: this.node,
1164
- decorations: this.decorations,
1165
- selected: false,
1166
- extension: this.extension,
1167
- getPos: () => this.getPos(),
1168
- updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
1169
- deleteNode: () => this.deleteNode(),
1170
- };
1171
- if (!this.component.displayName) {
1172
- const capitalizeFirstChar = (string) => {
1173
- return string.charAt(0).toUpperCase() + string.substring(1);
1174
- };
1175
- this.component.displayName = capitalizeFirstChar(this.extension.name);
1176
- }
1177
- const onDragStart = this.onDragStart.bind(this);
1178
- const nodeViewContentRef = element => {
1179
- if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
1180
- element.appendChild(this.contentDOMElement);
1181
- }
1182
- };
1183
- const context = { onDragStart, nodeViewContentRef };
1184
- const Component = this.component;
1185
- // For performance reasons, we memoize the provider component
1186
- // And all of the things it requires are declared outside of the component, so it doesn't need to re-render
1187
- const ReactNodeViewProvider = React__default.default.memo(componentProps => {
1188
- return (React__default.default.createElement(ReactNodeViewContext.Provider, { value: context }, React__default.default.createElement(Component, componentProps)));
1189
- });
1190
- ReactNodeViewProvider.displayName = 'ReactNodeView';
1191
- if (this.node.isLeaf) {
1192
- this.contentDOMElement = null;
1193
- }
1194
- else if (this.options.contentDOMElementTag) {
1195
- this.contentDOMElement = document.createElement(this.options.contentDOMElementTag);
1196
- }
1197
- else {
1198
- this.contentDOMElement = document.createElement(this.node.isInline ? 'span' : 'div');
1199
- }
1200
- if (this.contentDOMElement) {
1201
- // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
1202
- // With this fix it seems to work fine
1203
- // See: https://github.com/ueberdosis/tiptap/issues/1197
1204
- this.contentDOMElement.style.whiteSpace = 'inherit';
1205
- }
1206
- let as = this.node.isInline ? 'span' : 'div';
1207
- if (this.options.as) {
1208
- as = this.options.as;
1209
- }
1210
- const { className = '' } = this.options;
1211
- this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
1212
- this.editor.on('selectionUpdate', this.handleSelectionUpdate);
1213
- this.renderer = new ReactRenderer(ReactNodeViewProvider, {
1214
- editor: this.editor,
1215
- props,
1216
- as,
1217
- className: `node-${this.node.type.name} ${className}`.trim(),
1218
- attrs: this.options.attrs,
1219
- });
1220
- }
1221
- get dom() {
1222
- var _a;
1223
- if (this.renderer.element.firstElementChild
1224
- && !((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-node-view-wrapper'))) {
1225
- throw Error('Please use the NodeViewWrapper component for your node view.');
1226
- }
1227
- return this.renderer.element;
1228
- }
1229
- get contentDOM() {
1230
- if (this.node.isLeaf) {
1231
- return null;
1232
- }
1233
- return this.contentDOMElement;
1234
- }
1235
- handleSelectionUpdate() {
1236
- const { from, to } = this.editor.state.selection;
1237
- if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
1238
- if (this.renderer.props.selected) {
1239
- return;
1240
- }
1241
- this.selectNode();
1242
- }
1243
- else {
1244
- if (!this.renderer.props.selected) {
1245
- return;
1246
- }
1247
- this.deselectNode();
1248
- }
1249
- }
1250
- update(node, decorations) {
1251
- const updateProps = (props) => {
1252
- this.renderer.updateProps(props);
1253
- };
1254
- if (node.type !== this.node.type) {
1255
- return false;
1256
- }
1257
- if (typeof this.options.update === 'function') {
1258
- const oldNode = this.node;
1259
- const oldDecorations = this.decorations;
1260
- this.node = node;
1261
- this.decorations = decorations;
1262
- return this.options.update({
1263
- oldNode,
1264
- oldDecorations,
1265
- newNode: node,
1266
- newDecorations: decorations,
1267
- updateProps: () => updateProps({ node, decorations }),
1268
- });
1269
- }
1270
- if (node === this.node && this.decorations === decorations) {
1271
- return true;
1272
- }
1273
- this.node = node;
1274
- this.decorations = decorations;
1275
- updateProps({ node, decorations });
1276
- return true;
1277
- }
1278
- selectNode() {
1279
- this.renderer.updateProps({
1280
- selected: true,
1281
- });
1282
- this.renderer.element.classList.add('ProseMirror-selectednode');
1283
- }
1284
- deselectNode() {
1285
- this.renderer.updateProps({
1286
- selected: false,
1287
- });
1288
- this.renderer.element.classList.remove('ProseMirror-selectednode');
1289
- }
1290
- destroy() {
1291
- this.renderer.destroy();
1292
- this.editor.off('selectionUpdate', this.handleSelectionUpdate);
1293
- this.contentDOMElement = null;
1294
- }
1295
- }
1296
- function ReactNodeViewRenderer(component, options) {
1297
- return (props) => {
1298
- // try to get the parent component
1299
- // this is important for vue devtools to show the component hierarchy correctly
1300
- // maybe it’s `undefined` because <editor-content> isn’t rendered yet
1301
- if (!props.editor.contentComponent) {
1302
- return {};
1303
- }
1304
- return new ReactNodeView(component, props, options);
766
+ // src/ReactNodeViewRenderer.tsx
767
+ var ReactNodeView = class extends import_core2.NodeView {
768
+ mount() {
769
+ const props = {
770
+ editor: this.editor,
771
+ node: this.node,
772
+ decorations: this.decorations,
773
+ selected: false,
774
+ extension: this.extension,
775
+ getPos: () => this.getPos(),
776
+ updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
777
+ deleteNode: () => this.deleteNode()
778
+ };
779
+ if (!this.component.displayName) {
780
+ const capitalizeFirstChar = (string) => {
781
+ return string.charAt(0).toUpperCase() + string.substring(1);
782
+ };
783
+ this.component.displayName = capitalizeFirstChar(this.extension.name);
784
+ }
785
+ const onDragStart = this.onDragStart.bind(this);
786
+ const nodeViewContentRef = (element) => {
787
+ if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
788
+ element.appendChild(this.contentDOMElement);
789
+ }
1305
790
  };
791
+ const context = { onDragStart, nodeViewContentRef };
792
+ const Component = this.component;
793
+ const ReactNodeViewProvider = import_react11.default.memo((componentProps) => {
794
+ return /* @__PURE__ */ import_react11.default.createElement(ReactNodeViewContext.Provider, { value: context }, import_react11.default.createElement(Component, componentProps));
795
+ });
796
+ ReactNodeViewProvider.displayName = "ReactNodeView";
797
+ if (this.node.isLeaf) {
798
+ this.contentDOMElement = null;
799
+ } else if (this.options.contentDOMElementTag) {
800
+ this.contentDOMElement = document.createElement(this.options.contentDOMElementTag);
801
+ } else {
802
+ this.contentDOMElement = document.createElement(this.node.isInline ? "span" : "div");
803
+ }
804
+ if (this.contentDOMElement) {
805
+ this.contentDOMElement.style.whiteSpace = "inherit";
806
+ }
807
+ let as = this.node.isInline ? "span" : "div";
808
+ if (this.options.as) {
809
+ as = this.options.as;
810
+ }
811
+ const { className = "" } = this.options;
812
+ this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
813
+ this.editor.on("selectionUpdate", this.handleSelectionUpdate);
814
+ this.renderer = new ReactRenderer(ReactNodeViewProvider, {
815
+ editor: this.editor,
816
+ props,
817
+ as,
818
+ className: `node-${this.node.type.name} ${className}`.trim(),
819
+ attrs: this.options.attrs
820
+ });
821
+ }
822
+ get dom() {
823
+ var _a;
824
+ if (this.renderer.element.firstElementChild && !((_a = this.renderer.element.firstElementChild) == null ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) {
825
+ throw Error("Please use the NodeViewWrapper component for your node view.");
826
+ }
827
+ return this.renderer.element;
828
+ }
829
+ get contentDOM() {
830
+ if (this.node.isLeaf) {
831
+ return null;
832
+ }
833
+ return this.contentDOMElement;
834
+ }
835
+ handleSelectionUpdate() {
836
+ const { from, to } = this.editor.state.selection;
837
+ if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
838
+ if (this.renderer.props.selected) {
839
+ return;
840
+ }
841
+ this.selectNode();
842
+ } else {
843
+ if (!this.renderer.props.selected) {
844
+ return;
845
+ }
846
+ this.deselectNode();
847
+ }
848
+ }
849
+ update(node, decorations) {
850
+ const updateProps = (props) => {
851
+ this.renderer.updateProps(props);
852
+ };
853
+ if (node.type !== this.node.type) {
854
+ return false;
855
+ }
856
+ if (typeof this.options.update === "function") {
857
+ const oldNode = this.node;
858
+ const oldDecorations = this.decorations;
859
+ this.node = node;
860
+ this.decorations = decorations;
861
+ return this.options.update({
862
+ oldNode,
863
+ oldDecorations,
864
+ newNode: node,
865
+ newDecorations: decorations,
866
+ updateProps: () => updateProps({ node, decorations })
867
+ });
868
+ }
869
+ if (node === this.node && this.decorations === decorations) {
870
+ return true;
871
+ }
872
+ this.node = node;
873
+ this.decorations = decorations;
874
+ updateProps({ node, decorations });
875
+ return true;
876
+ }
877
+ selectNode() {
878
+ this.renderer.updateProps({
879
+ selected: true
880
+ });
881
+ this.renderer.element.classList.add("ProseMirror-selectednode");
882
+ }
883
+ deselectNode() {
884
+ this.renderer.updateProps({
885
+ selected: false
886
+ });
887
+ this.renderer.element.classList.remove("ProseMirror-selectednode");
888
+ }
889
+ destroy() {
890
+ this.renderer.destroy();
891
+ this.editor.off("selectionUpdate", this.handleSelectionUpdate);
892
+ this.contentDOMElement = null;
893
+ }
894
+ };
895
+ function ReactNodeViewRenderer(component, options) {
896
+ return (props) => {
897
+ if (!props.editor.contentComponent) {
898
+ return {};
899
+ }
900
+ return new ReactNodeView(component, props, options);
901
+ };
1306
902
  }
1307
903
 
1308
- exports.BubbleMenu = BubbleMenu;
1309
- exports.EditorConsumer = EditorConsumer;
1310
- exports.EditorContent = EditorContent;
1311
- exports.EditorContext = EditorContext;
1312
- exports.EditorProvider = EditorProvider;
1313
- exports.FloatingMenu = FloatingMenu;
1314
- exports.NodeViewContent = NodeViewContent;
1315
- exports.NodeViewWrapper = NodeViewWrapper;
1316
- exports.PureEditorContent = PureEditorContent;
1317
- exports.ReactNodeViewContext = ReactNodeViewContext;
1318
- exports.ReactNodeViewRenderer = ReactNodeViewRenderer;
1319
- exports.ReactRenderer = ReactRenderer;
1320
- exports.useCurrentEditor = useCurrentEditor;
1321
- exports.useEditor = useEditor;
1322
- exports.useEditorState = useEditorState;
1323
- exports.useReactNodeView = useReactNodeView;
1324
- Object.keys(core).forEach(function (k) {
1325
- if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
1326
- enumerable: true,
1327
- get: function () { return core[k]; }
1328
- });
904
+ // src/index.ts
905
+ __reExport(src_exports, require("@tiptap/core"), module.exports);
906
+ // Annotate the CommonJS export names for ESM import in node:
907
+ 0 && (module.exports = {
908
+ BubbleMenu,
909
+ EditorConsumer,
910
+ EditorContent,
911
+ EditorContext,
912
+ EditorProvider,
913
+ FloatingMenu,
914
+ NodeViewContent,
915
+ NodeViewWrapper,
916
+ PureEditorContent,
917
+ ReactNodeViewContext,
918
+ ReactNodeViewRenderer,
919
+ ReactRenderer,
920
+ useCurrentEditor,
921
+ useEditor,
922
+ useEditorState,
923
+ useReactNodeView,
924
+ ...require("@tiptap/core")
1329
925
  });
1330
- //# sourceMappingURL=index.cjs.map
926
+ //# sourceMappingURL=index.cjs.map