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