@tiptap/vue-3 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 (188) hide show
  1. package/dist/index.cjs +541 -465
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +300 -0
  4. package/dist/index.d.ts +300 -0
  5. package/dist/index.js +543 -452
  6. package/dist/index.js.map +1 -1
  7. package/package.json +10 -12
  8. package/src/BubbleMenu.ts +25 -7
  9. package/src/FloatingMenu.ts +17 -5
  10. package/dist/index.umd.js +0 -508
  11. package/dist/index.umd.js.map +0 -1
  12. package/dist/packages/core/src/CommandManager.d.ts +0 -20
  13. package/dist/packages/core/src/Editor.d.ts +0 -163
  14. package/dist/packages/core/src/EventEmitter.d.ts +0 -11
  15. package/dist/packages/core/src/Extension.d.ts +0 -344
  16. package/dist/packages/core/src/ExtensionManager.d.ts +0 -55
  17. package/dist/packages/core/src/InputRule.d.ts +0 -42
  18. package/dist/packages/core/src/Mark.d.ts +0 -452
  19. package/dist/packages/core/src/Node.d.ts +0 -612
  20. package/dist/packages/core/src/NodePos.d.ts +0 -44
  21. package/dist/packages/core/src/NodeView.d.ts +0 -31
  22. package/dist/packages/core/src/PasteRule.d.ts +0 -50
  23. package/dist/packages/core/src/Tracker.d.ts +0 -11
  24. package/dist/packages/core/src/commands/blur.d.ts +0 -13
  25. package/dist/packages/core/src/commands/clearContent.d.ts +0 -14
  26. package/dist/packages/core/src/commands/clearNodes.d.ts +0 -13
  27. package/dist/packages/core/src/commands/command.d.ts +0 -18
  28. package/dist/packages/core/src/commands/createParagraphNear.d.ts +0 -13
  29. package/dist/packages/core/src/commands/cut.d.ts +0 -20
  30. package/dist/packages/core/src/commands/deleteCurrentNode.d.ts +0 -13
  31. package/dist/packages/core/src/commands/deleteNode.d.ts +0 -15
  32. package/dist/packages/core/src/commands/deleteRange.d.ts +0 -14
  33. package/dist/packages/core/src/commands/deleteSelection.d.ts +0 -13
  34. package/dist/packages/core/src/commands/enter.d.ts +0 -13
  35. package/dist/packages/core/src/commands/exitCode.d.ts +0 -13
  36. package/dist/packages/core/src/commands/extendMarkRange.d.ts +0 -25
  37. package/dist/packages/core/src/commands/first.d.ts +0 -14
  38. package/dist/packages/core/src/commands/focus.d.ts +0 -27
  39. package/dist/packages/core/src/commands/forEach.d.ts +0 -14
  40. package/dist/packages/core/src/commands/index.d.ts +0 -55
  41. package/dist/packages/core/src/commands/insertContent.d.ts +0 -34
  42. package/dist/packages/core/src/commands/insertContentAt.d.ts +0 -47
  43. package/dist/packages/core/src/commands/join.d.ts +0 -41
  44. package/dist/packages/core/src/commands/joinItemBackward.d.ts +0 -13
  45. package/dist/packages/core/src/commands/joinItemForward.d.ts +0 -13
  46. package/dist/packages/core/src/commands/joinTextblockBackward.d.ts +0 -12
  47. package/dist/packages/core/src/commands/joinTextblockForward.d.ts +0 -12
  48. package/dist/packages/core/src/commands/keyboardShortcut.d.ts +0 -14
  49. package/dist/packages/core/src/commands/lift.d.ts +0 -17
  50. package/dist/packages/core/src/commands/liftEmptyBlock.d.ts +0 -13
  51. package/dist/packages/core/src/commands/liftListItem.d.ts +0 -15
  52. package/dist/packages/core/src/commands/newlineInCode.d.ts +0 -13
  53. package/dist/packages/core/src/commands/resetAttributes.d.ts +0 -16
  54. package/dist/packages/core/src/commands/scrollIntoView.d.ts +0 -13
  55. package/dist/packages/core/src/commands/selectAll.d.ts +0 -13
  56. package/dist/packages/core/src/commands/selectNodeBackward.d.ts +0 -13
  57. package/dist/packages/core/src/commands/selectNodeForward.d.ts +0 -13
  58. package/dist/packages/core/src/commands/selectParentNode.d.ts +0 -13
  59. package/dist/packages/core/src/commands/selectTextblockEnd.d.ts +0 -13
  60. package/dist/packages/core/src/commands/selectTextblockStart.d.ts +0 -13
  61. package/dist/packages/core/src/commands/setContent.d.ts +0 -40
  62. package/dist/packages/core/src/commands/setMark.d.ts +0 -15
  63. package/dist/packages/core/src/commands/setMeta.d.ts +0 -16
  64. package/dist/packages/core/src/commands/setNode.d.ts +0 -16
  65. package/dist/packages/core/src/commands/setNodeSelection.d.ts +0 -14
  66. package/dist/packages/core/src/commands/setTextSelection.d.ts +0 -14
  67. package/dist/packages/core/src/commands/sinkListItem.d.ts +0 -15
  68. package/dist/packages/core/src/commands/splitBlock.d.ts +0 -17
  69. package/dist/packages/core/src/commands/splitListItem.d.ts +0 -16
  70. package/dist/packages/core/src/commands/toggleList.d.ts +0 -18
  71. package/dist/packages/core/src/commands/toggleMark.d.ts +0 -30
  72. package/dist/packages/core/src/commands/toggleNode.d.ts +0 -17
  73. package/dist/packages/core/src/commands/toggleWrap.d.ts +0 -16
  74. package/dist/packages/core/src/commands/undoInputRule.d.ts +0 -13
  75. package/dist/packages/core/src/commands/unsetAllMarks.d.ts +0 -13
  76. package/dist/packages/core/src/commands/unsetMark.d.ts +0 -25
  77. package/dist/packages/core/src/commands/updateAttributes.d.ts +0 -24
  78. package/dist/packages/core/src/commands/wrapIn.d.ts +0 -16
  79. package/dist/packages/core/src/commands/wrapInList.d.ts +0 -16
  80. package/dist/packages/core/src/extensions/clipboardTextSerializer.d.ts +0 -5
  81. package/dist/packages/core/src/extensions/commands.d.ts +0 -3
  82. package/dist/packages/core/src/extensions/editable.d.ts +0 -2
  83. package/dist/packages/core/src/extensions/focusEvents.d.ts +0 -2
  84. package/dist/packages/core/src/extensions/index.d.ts +0 -6
  85. package/dist/packages/core/src/extensions/keymap.d.ts +0 -2
  86. package/dist/packages/core/src/extensions/tabindex.d.ts +0 -2
  87. package/dist/packages/core/src/helpers/combineTransactionSteps.d.ts +0 -10
  88. package/dist/packages/core/src/helpers/createChainableState.d.ts +0 -10
  89. package/dist/packages/core/src/helpers/createDocument.d.ts +0 -12
  90. package/dist/packages/core/src/helpers/createNodeFromContent.d.ts +0 -15
  91. package/dist/packages/core/src/helpers/defaultBlockAt.d.ts +0 -7
  92. package/dist/packages/core/src/helpers/findChildren.d.ts +0 -9
  93. package/dist/packages/core/src/helpers/findChildrenInRange.d.ts +0 -10
  94. package/dist/packages/core/src/helpers/findParentNode.d.ts +0 -16
  95. package/dist/packages/core/src/helpers/findParentNodeClosestToPos.d.ts +0 -17
  96. package/dist/packages/core/src/helpers/generateHTML.d.ts +0 -8
  97. package/dist/packages/core/src/helpers/generateJSON.d.ts +0 -8
  98. package/dist/packages/core/src/helpers/generateText.d.ts +0 -12
  99. package/dist/packages/core/src/helpers/getAttributes.d.ts +0 -9
  100. package/dist/packages/core/src/helpers/getAttributesFromExtensions.d.ts +0 -6
  101. package/dist/packages/core/src/helpers/getChangedRanges.d.ts +0 -11
  102. package/dist/packages/core/src/helpers/getDebugJSON.d.ts +0 -8
  103. package/dist/packages/core/src/helpers/getExtensionField.d.ts +0 -9
  104. package/dist/packages/core/src/helpers/getHTMLFromFragment.d.ts +0 -2
  105. package/dist/packages/core/src/helpers/getMarkAttributes.d.ts +0 -3
  106. package/dist/packages/core/src/helpers/getMarkRange.d.ts +0 -3
  107. package/dist/packages/core/src/helpers/getMarkType.d.ts +0 -2
  108. package/dist/packages/core/src/helpers/getMarksBetween.d.ts +0 -3
  109. package/dist/packages/core/src/helpers/getNodeAtPosition.d.ts +0 -11
  110. package/dist/packages/core/src/helpers/getNodeAttributes.d.ts +0 -3
  111. package/dist/packages/core/src/helpers/getNodeType.d.ts +0 -2
  112. package/dist/packages/core/src/helpers/getRenderedAttributes.d.ts +0 -3
  113. package/dist/packages/core/src/helpers/getSchema.d.ts +0 -4
  114. package/dist/packages/core/src/helpers/getSchemaByResolvedExtensions.d.ts +0 -10
  115. package/dist/packages/core/src/helpers/getSchemaTypeByName.d.ts +0 -8
  116. package/dist/packages/core/src/helpers/getSchemaTypeNameByName.d.ts +0 -8
  117. package/dist/packages/core/src/helpers/getSplittedAttributes.d.ts +0 -9
  118. package/dist/packages/core/src/helpers/getText.d.ts +0 -15
  119. package/dist/packages/core/src/helpers/getTextBetween.d.ts +0 -14
  120. package/dist/packages/core/src/helpers/getTextContentFromNodes.d.ts +0 -8
  121. package/dist/packages/core/src/helpers/getTextSerializersFromSchema.d.ts +0 -8
  122. package/dist/packages/core/src/helpers/index.d.ts +0 -50
  123. package/dist/packages/core/src/helpers/injectExtensionAttributesToParseRule.d.ts +0 -9
  124. package/dist/packages/core/src/helpers/isActive.d.ts +0 -2
  125. package/dist/packages/core/src/helpers/isAtEndOfNode.d.ts +0 -2
  126. package/dist/packages/core/src/helpers/isAtStartOfNode.d.ts +0 -2
  127. package/dist/packages/core/src/helpers/isExtensionRulesEnabled.d.ts +0 -2
  128. package/dist/packages/core/src/helpers/isList.d.ts +0 -2
  129. package/dist/packages/core/src/helpers/isMarkActive.d.ts +0 -3
  130. package/dist/packages/core/src/helpers/isNodeActive.d.ts +0 -3
  131. package/dist/packages/core/src/helpers/isNodeEmpty.d.ts +0 -14
  132. package/dist/packages/core/src/helpers/isNodeSelection.d.ts +0 -2
  133. package/dist/packages/core/src/helpers/isTextSelection.d.ts +0 -2
  134. package/dist/packages/core/src/helpers/posToDOMRect.d.ts +0 -2
  135. package/dist/packages/core/src/helpers/resolveFocusPosition.d.ts +0 -4
  136. package/dist/packages/core/src/helpers/selectionToInsertionEnd.d.ts +0 -2
  137. package/dist/packages/core/src/helpers/splitExtensions.d.ts +0 -9
  138. package/dist/packages/core/src/index.d.ts +0 -24
  139. package/dist/packages/core/src/inputRules/index.d.ts +0 -5
  140. package/dist/packages/core/src/inputRules/markInputRule.d.ts +0 -13
  141. package/dist/packages/core/src/inputRules/nodeInputRule.d.ts +0 -23
  142. package/dist/packages/core/src/inputRules/textInputRule.d.ts +0 -10
  143. package/dist/packages/core/src/inputRules/textblockTypeInputRule.d.ts +0 -15
  144. package/dist/packages/core/src/inputRules/wrappingInputRule.d.ts +0 -28
  145. package/dist/packages/core/src/pasteRules/index.d.ts +0 -3
  146. package/dist/packages/core/src/pasteRules/markPasteRule.d.ts +0 -13
  147. package/dist/packages/core/src/pasteRules/nodePasteRule.d.ts +0 -14
  148. package/dist/packages/core/src/pasteRules/textPasteRule.d.ts +0 -10
  149. package/dist/packages/core/src/style.d.ts +0 -1
  150. package/dist/packages/core/src/types.d.ts +0 -253
  151. package/dist/packages/core/src/utilities/callOrReturn.d.ts +0 -9
  152. package/dist/packages/core/src/utilities/createStyleTag.d.ts +0 -1
  153. package/dist/packages/core/src/utilities/deleteProps.d.ts +0 -6
  154. package/dist/packages/core/src/utilities/elementFromString.d.ts +0 -1
  155. package/dist/packages/core/src/utilities/escapeForRegEx.d.ts +0 -1
  156. package/dist/packages/core/src/utilities/findDuplicates.d.ts +0 -1
  157. package/dist/packages/core/src/utilities/fromString.d.ts +0 -1
  158. package/dist/packages/core/src/utilities/index.d.ts +0 -20
  159. package/dist/packages/core/src/utilities/isAndroid.d.ts +0 -1
  160. package/dist/packages/core/src/utilities/isEmptyObject.d.ts +0 -1
  161. package/dist/packages/core/src/utilities/isFunction.d.ts +0 -1
  162. package/dist/packages/core/src/utilities/isMacOS.d.ts +0 -1
  163. package/dist/packages/core/src/utilities/isNumber.d.ts +0 -1
  164. package/dist/packages/core/src/utilities/isPlainObject.d.ts +0 -1
  165. package/dist/packages/core/src/utilities/isRegExp.d.ts +0 -1
  166. package/dist/packages/core/src/utilities/isString.d.ts +0 -1
  167. package/dist/packages/core/src/utilities/isiOS.d.ts +0 -1
  168. package/dist/packages/core/src/utilities/mergeAttributes.d.ts +0 -1
  169. package/dist/packages/core/src/utilities/mergeDeep.d.ts +0 -1
  170. package/dist/packages/core/src/utilities/minMax.d.ts +0 -1
  171. package/dist/packages/core/src/utilities/objectIncludes.d.ts +0 -8
  172. package/dist/packages/core/src/utilities/removeDuplicates.d.ts +0 -8
  173. package/dist/packages/extension-bubble-menu/src/bubble-menu-plugin.d.ts +0 -76
  174. package/dist/packages/extension-bubble-menu/src/bubble-menu.d.ts +0 -15
  175. package/dist/packages/extension-bubble-menu/src/index.d.ts +0 -4
  176. package/dist/packages/extension-floating-menu/src/floating-menu-plugin.d.ts +0 -66
  177. package/dist/packages/extension-floating-menu/src/floating-menu.d.ts +0 -15
  178. package/dist/packages/extension-floating-menu/src/index.d.ts +0 -4
  179. package/dist/packages/vue-3/src/BubbleMenu.d.ts +0 -59
  180. package/dist/packages/vue-3/src/Editor.d.ts +0 -23
  181. package/dist/packages/vue-3/src/EditorContent.d.ts +0 -17
  182. package/dist/packages/vue-3/src/FloatingMenu.d.ts +0 -48
  183. package/dist/packages/vue-3/src/NodeViewContent.d.ts +0 -13
  184. package/dist/packages/vue-3/src/NodeViewWrapper.d.ts +0 -13
  185. package/dist/packages/vue-3/src/VueNodeViewRenderer.d.ts +0 -48
  186. package/dist/packages/vue-3/src/VueRenderer.d.ts +0 -36
  187. package/dist/packages/vue-3/src/index.d.ts +0 -10
  188. package/dist/packages/vue-3/src/useEditor.d.ts +0 -3
package/dist/index.js CHANGED
@@ -1,491 +1,582 @@
1
- import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
2
- import { defineComponent, ref, onMounted, onBeforeUnmount, h, markRaw, customRef, getCurrentInstance, watchEffect, nextTick, unref, shallowRef, reactive, render, provide } from 'vue';
3
- import { Editor as Editor$1, NodeView } from '@tiptap/core';
4
- export * from '@tiptap/core';
5
- import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
6
-
7
- const BubbleMenu = defineComponent({
8
- name: 'BubbleMenu',
9
- props: {
10
- pluginKey: {
11
- type: [String, Object],
12
- default: 'bubbleMenu',
13
- },
14
- editor: {
15
- type: Object,
16
- required: true,
17
- },
18
- updateDelay: {
19
- type: Number,
20
- default: undefined,
21
- },
22
- tippyOptions: {
23
- type: Object,
24
- default: () => ({}),
25
- },
26
- shouldShow: {
27
- type: Function,
28
- default: null,
29
- },
1
+ // src/BubbleMenu.ts
2
+ import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
3
+ import {
4
+ defineComponent,
5
+ h,
6
+ onBeforeUnmount,
7
+ onMounted,
8
+ ref,
9
+ Teleport
10
+ } from "vue";
11
+ var BubbleMenu = defineComponent({
12
+ name: "BubbleMenu",
13
+ props: {
14
+ pluginKey: {
15
+ type: [String, Object],
16
+ default: "bubbleMenu"
30
17
  },
31
- setup(props, { slots }) {
32
- const root = ref(null);
33
- onMounted(() => {
34
- const { updateDelay, editor, pluginKey, shouldShow, tippyOptions, } = props;
35
- editor.registerPlugin(BubbleMenuPlugin({
36
- updateDelay,
37
- editor,
38
- element: root.value,
39
- pluginKey,
40
- shouldShow,
41
- tippyOptions,
42
- }));
43
- });
44
- onBeforeUnmount(() => {
45
- const { pluginKey, editor } = props;
46
- editor.unregisterPlugin(pluginKey);
47
- });
48
- return () => { var _a; return h('div', { ref: root }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)); };
18
+ editor: {
19
+ type: Object,
20
+ required: true
21
+ },
22
+ updateDelay: {
23
+ type: Number,
24
+ default: void 0
25
+ },
26
+ resizeDelay: {
27
+ type: Number,
28
+ default: void 0
49
29
  },
30
+ options: {
31
+ type: Object,
32
+ default: () => ({})
33
+ },
34
+ shouldShow: {
35
+ type: Function,
36
+ default: null
37
+ }
38
+ },
39
+ setup(props, { slots }) {
40
+ const root = ref(null);
41
+ onMounted(() => {
42
+ const {
43
+ editor,
44
+ options,
45
+ pluginKey,
46
+ resizeDelay,
47
+ shouldShow,
48
+ updateDelay
49
+ } = props;
50
+ if (!root.value) {
51
+ return;
52
+ }
53
+ root.value.style.visibility = "hidden";
54
+ root.value.style.position = "absolute";
55
+ root.value.remove();
56
+ editor.registerPlugin(BubbleMenuPlugin({
57
+ editor,
58
+ element: root.value,
59
+ options,
60
+ pluginKey,
61
+ resizeDelay,
62
+ shouldShow,
63
+ updateDelay
64
+ }));
65
+ });
66
+ onBeforeUnmount(() => {
67
+ const { pluginKey, editor } = props;
68
+ editor.unregisterPlugin(pluginKey);
69
+ });
70
+ return () => {
71
+ var _a;
72
+ return h(Teleport, { to: "body" }, h("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
73
+ };
74
+ }
50
75
  });
51
76
 
52
- /* eslint-disable react-hooks/rules-of-hooks */
77
+ // src/Editor.ts
78
+ import { Editor as CoreEditor } from "@tiptap/core";
79
+ import {
80
+ customRef,
81
+ markRaw
82
+ } from "vue";
53
83
  function useDebouncedRef(value) {
54
- return customRef((track, trigger) => {
55
- return {
56
- get() {
57
- track();
58
- return value;
59
- },
60
- set(newValue) {
61
- // update state
62
- value = newValue;
63
- // update view as soon as possible
64
- requestAnimationFrame(() => {
65
- requestAnimationFrame(() => {
66
- trigger();
67
- });
68
- });
69
- },
70
- };
71
- });
72
- }
73
- class Editor extends Editor$1 {
74
- constructor(options = {}) {
75
- super(options);
76
- this.contentComponent = null;
77
- this.appContext = null;
78
- this.reactiveState = useDebouncedRef(this.view.state);
79
- this.reactiveExtensionStorage = useDebouncedRef(this.extensionStorage);
80
- this.on('beforeTransaction', ({ nextState }) => {
81
- this.reactiveState.value = nextState;
82
- this.reactiveExtensionStorage.value = this.extensionStorage;
84
+ return customRef((track, trigger) => {
85
+ return {
86
+ get() {
87
+ track();
88
+ return value;
89
+ },
90
+ set(newValue) {
91
+ value = newValue;
92
+ requestAnimationFrame(() => {
93
+ requestAnimationFrame(() => {
94
+ trigger();
95
+ });
83
96
  });
84
- return markRaw(this); // eslint-disable-line
85
- }
86
- get state() {
87
- return this.reactiveState ? this.reactiveState.value : this.view.state;
88
- }
89
- get storage() {
90
- return this.reactiveExtensionStorage ? this.reactiveExtensionStorage.value : super.storage;
91
- }
92
- /**
93
- * Register a ProseMirror plugin.
94
- */
95
- registerPlugin(plugin, handlePlugins) {
96
- super.registerPlugin(plugin, handlePlugins);
97
- this.reactiveState.value = this.view.state;
98
- }
99
- /**
100
- * Unregister a ProseMirror plugin.
101
- */
102
- unregisterPlugin(nameOrPluginKey) {
103
- super.unregisterPlugin(nameOrPluginKey);
104
- this.reactiveState.value = this.view.state;
105
- }
97
+ }
98
+ };
99
+ });
106
100
  }
101
+ var Editor = class extends CoreEditor {
102
+ constructor(options = {}) {
103
+ super(options);
104
+ this.contentComponent = null;
105
+ this.appContext = null;
106
+ this.reactiveState = useDebouncedRef(this.view.state);
107
+ this.reactiveExtensionStorage = useDebouncedRef(this.extensionStorage);
108
+ this.on("beforeTransaction", ({ nextState }) => {
109
+ this.reactiveState.value = nextState;
110
+ this.reactiveExtensionStorage.value = this.extensionStorage;
111
+ });
112
+ return markRaw(this);
113
+ }
114
+ get state() {
115
+ return this.reactiveState ? this.reactiveState.value : this.view.state;
116
+ }
117
+ get storage() {
118
+ return this.reactiveExtensionStorage ? this.reactiveExtensionStorage.value : super.storage;
119
+ }
120
+ /**
121
+ * Register a ProseMirror plugin.
122
+ */
123
+ registerPlugin(plugin, handlePlugins) {
124
+ super.registerPlugin(plugin, handlePlugins);
125
+ this.reactiveState.value = this.view.state;
126
+ }
127
+ /**
128
+ * Unregister a ProseMirror plugin.
129
+ */
130
+ unregisterPlugin(nameOrPluginKey) {
131
+ super.unregisterPlugin(nameOrPluginKey);
132
+ this.reactiveState.value = this.view.state;
133
+ }
134
+ };
107
135
 
108
- const EditorContent = defineComponent({
109
- name: 'EditorContent',
110
- props: {
111
- editor: {
112
- default: null,
113
- type: Object,
114
- },
115
- },
116
- setup(props) {
117
- const rootEl = ref();
118
- const instance = getCurrentInstance();
119
- watchEffect(() => {
120
- const editor = props.editor;
121
- if (editor && editor.options.element && rootEl.value) {
122
- nextTick(() => {
123
- if (!rootEl.value || !editor.options.element.firstChild) {
124
- return;
125
- }
126
- const element = unref(rootEl.value);
127
- rootEl.value.append(...editor.options.element.childNodes);
128
- // @ts-ignore
129
- editor.contentComponent = instance.ctx._;
130
- if (instance) {
131
- editor.appContext = {
132
- ...instance.appContext,
133
- // Vue internally uses prototype chain to forward/shadow injects across the entire component chain
134
- // so don't use object spread operator or 'Object.assign' and just set `provides` as is on editor's appContext
135
- // @ts-expect-error forward instance's 'provides' into appContext
136
- provides: instance.provides,
137
- };
138
- }
139
- editor.setOptions({
140
- element,
141
- });
142
- editor.createNodeViews();
143
- });
144
- }
145
- });
146
- onBeforeUnmount(() => {
147
- const editor = props.editor;
148
- if (!editor) {
149
- return;
150
- }
151
- // destroy nodeviews before vue removes dom element
152
- if (!editor.isDestroyed) {
153
- editor.view.setProps({
154
- nodeViews: {},
155
- });
156
- }
157
- editor.contentComponent = null;
158
- editor.appContext = null;
159
- if (!editor.options.element.firstChild) {
160
- return;
161
- }
162
- const newElement = document.createElement('div');
163
- newElement.append(...editor.options.element.childNodes);
164
- editor.setOptions({
165
- element: newElement,
166
- });
136
+ // src/EditorContent.ts
137
+ import {
138
+ defineComponent as defineComponent2,
139
+ getCurrentInstance,
140
+ h as h2,
141
+ nextTick,
142
+ onBeforeUnmount as onBeforeUnmount2,
143
+ ref as ref2,
144
+ unref,
145
+ watchEffect
146
+ } from "vue";
147
+ var EditorContent = defineComponent2({
148
+ name: "EditorContent",
149
+ props: {
150
+ editor: {
151
+ default: null,
152
+ type: Object
153
+ }
154
+ },
155
+ setup(props) {
156
+ const rootEl = ref2();
157
+ const instance = getCurrentInstance();
158
+ watchEffect(() => {
159
+ const editor = props.editor;
160
+ if (editor && editor.options.element && rootEl.value) {
161
+ nextTick(() => {
162
+ if (!rootEl.value || !editor.options.element.firstChild) {
163
+ return;
164
+ }
165
+ const element = unref(rootEl.value);
166
+ rootEl.value.append(...editor.options.element.childNodes);
167
+ editor.contentComponent = instance.ctx._;
168
+ if (instance) {
169
+ editor.appContext = {
170
+ ...instance.appContext,
171
+ // Vue internally uses prototype chain to forward/shadow injects across the entire component chain
172
+ // so don't use object spread operator or 'Object.assign' and just set `provides` as is on editor's appContext
173
+ // @ts-expect-error forward instance's 'provides' into appContext
174
+ provides: instance.provides
175
+ };
176
+ }
177
+ editor.setOptions({
178
+ element
179
+ });
180
+ editor.createNodeViews();
167
181
  });
168
- return { rootEl };
169
- },
170
- render() {
171
- return h('div', {
172
- ref: (el) => { this.rootEl = el; },
182
+ }
183
+ });
184
+ onBeforeUnmount2(() => {
185
+ const editor = props.editor;
186
+ if (!editor) {
187
+ return;
188
+ }
189
+ if (!editor.isDestroyed) {
190
+ editor.view.setProps({
191
+ nodeViews: {}
173
192
  });
174
- },
193
+ }
194
+ editor.contentComponent = null;
195
+ editor.appContext = null;
196
+ if (!editor.options.element.firstChild) {
197
+ return;
198
+ }
199
+ const newElement = document.createElement("div");
200
+ newElement.append(...editor.options.element.childNodes);
201
+ editor.setOptions({
202
+ element: newElement
203
+ });
204
+ });
205
+ return { rootEl };
206
+ },
207
+ render() {
208
+ return h2(
209
+ "div",
210
+ {
211
+ ref: (el) => {
212
+ this.rootEl = el;
213
+ }
214
+ }
215
+ );
216
+ }
175
217
  });
176
218
 
177
- const FloatingMenu = defineComponent({
178
- name: 'FloatingMenu',
179
- props: {
180
- pluginKey: {
181
- // TODO: TypeScript breaks :(
182
- // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
183
- type: null,
184
- default: 'floatingMenu',
185
- },
186
- editor: {
187
- type: Object,
188
- required: true,
189
- },
190
- tippyOptions: {
191
- type: Object,
192
- default: () => ({}),
193
- },
194
- shouldShow: {
195
- type: Function,
196
- default: null,
197
- },
219
+ // src/FloatingMenu.ts
220
+ import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
221
+ import {
222
+ defineComponent as defineComponent3,
223
+ h as h3,
224
+ onBeforeUnmount as onBeforeUnmount3,
225
+ onMounted as onMounted2,
226
+ ref as ref3,
227
+ Teleport as Teleport2
228
+ } from "vue";
229
+ var FloatingMenu = defineComponent3({
230
+ name: "FloatingMenu",
231
+ props: {
232
+ pluginKey: {
233
+ // TODO: TypeScript breaks :(
234
+ // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
235
+ type: null,
236
+ default: "floatingMenu"
198
237
  },
199
- setup(props, { slots }) {
200
- const root = ref(null);
201
- onMounted(() => {
202
- const { pluginKey, editor, tippyOptions, shouldShow, } = props;
203
- editor.registerPlugin(FloatingMenuPlugin({
204
- pluginKey,
205
- editor,
206
- element: root.value,
207
- tippyOptions,
208
- shouldShow,
209
- }));
210
- });
211
- onBeforeUnmount(() => {
212
- const { pluginKey, editor } = props;
213
- editor.unregisterPlugin(pluginKey);
214
- });
215
- return () => { var _a; return h('div', { ref: root }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)); };
238
+ editor: {
239
+ type: Object,
240
+ required: true
241
+ },
242
+ options: {
243
+ type: Object,
244
+ default: () => ({})
216
245
  },
246
+ shouldShow: {
247
+ type: Function,
248
+ default: null
249
+ }
250
+ },
251
+ setup(props, { slots }) {
252
+ const root = ref3(null);
253
+ onMounted2(() => {
254
+ const {
255
+ pluginKey,
256
+ editor,
257
+ options,
258
+ shouldShow
259
+ } = props;
260
+ if (!root.value) {
261
+ return;
262
+ }
263
+ root.value.style.visibility = "hidden";
264
+ root.value.style.position = "absolute";
265
+ root.value.remove();
266
+ editor.registerPlugin(FloatingMenuPlugin({
267
+ pluginKey,
268
+ editor,
269
+ element: root.value,
270
+ options,
271
+ shouldShow
272
+ }));
273
+ });
274
+ onBeforeUnmount3(() => {
275
+ const { pluginKey, editor } = props;
276
+ editor.unregisterPlugin(pluginKey);
277
+ });
278
+ return () => {
279
+ var _a;
280
+ return h3(Teleport2, { to: "body" }, h3("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
281
+ };
282
+ }
217
283
  });
218
284
 
219
- const NodeViewContent = defineComponent({
220
- name: 'NodeViewContent',
221
- props: {
222
- as: {
223
- type: String,
224
- default: 'div',
225
- },
226
- },
227
- render() {
228
- return h(this.as, {
229
- style: {
230
- whiteSpace: 'pre-wrap',
231
- },
232
- 'data-node-view-content': '',
233
- });
234
- },
285
+ // src/NodeViewContent.ts
286
+ import { defineComponent as defineComponent4, h as h4 } from "vue";
287
+ var NodeViewContent = defineComponent4({
288
+ name: "NodeViewContent",
289
+ props: {
290
+ as: {
291
+ type: String,
292
+ default: "div"
293
+ }
294
+ },
295
+ render() {
296
+ return h4(this.as, {
297
+ style: {
298
+ whiteSpace: "pre-wrap"
299
+ },
300
+ "data-node-view-content": ""
301
+ });
302
+ }
235
303
  });
236
304
 
237
- const NodeViewWrapper = defineComponent({
238
- name: 'NodeViewWrapper',
239
- props: {
240
- as: {
241
- type: String,
242
- default: 'div',
305
+ // src/NodeViewWrapper.ts
306
+ import { defineComponent as defineComponent5, h as h5 } from "vue";
307
+ var NodeViewWrapper = defineComponent5({
308
+ name: "NodeViewWrapper",
309
+ props: {
310
+ as: {
311
+ type: String,
312
+ default: "div"
313
+ }
314
+ },
315
+ inject: ["onDragStart", "decorationClasses"],
316
+ render() {
317
+ var _a, _b;
318
+ return h5(
319
+ this.as,
320
+ {
321
+ // @ts-ignore
322
+ class: this.decorationClasses,
323
+ style: {
324
+ whiteSpace: "normal"
243
325
  },
244
- },
245
- inject: ['onDragStart', 'decorationClasses'],
246
- render() {
247
- var _a, _b;
248
- return h(this.as, {
249
- // @ts-ignore
250
- class: this.decorationClasses,
251
- style: {
252
- whiteSpace: 'normal',
253
- },
254
- 'data-node-view-wrapper': '',
255
- // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
256
- onDragstart: this.onDragStart,
257
- }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a));
258
- },
326
+ "data-node-view-wrapper": "",
327
+ // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
328
+ onDragstart: this.onDragStart
329
+ },
330
+ (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)
331
+ );
332
+ }
259
333
  });
260
334
 
261
- const useEditor = (options = {}) => {
262
- const editor = shallowRef();
263
- onMounted(() => {
264
- editor.value = new Editor(options);
265
- });
266
- onBeforeUnmount(() => {
267
- var _a;
268
- (_a = editor.value) === null || _a === void 0 ? void 0 : _a.destroy();
269
- });
270
- return editor;
335
+ // src/useEditor.ts
336
+ import { onBeforeUnmount as onBeforeUnmount4, onMounted as onMounted3, shallowRef } from "vue";
337
+ var useEditor = (options = {}) => {
338
+ const editor = shallowRef();
339
+ onMounted3(() => {
340
+ editor.value = new Editor(options);
341
+ });
342
+ onBeforeUnmount4(() => {
343
+ var _a;
344
+ (_a = editor.value) == null ? void 0 : _a.destroy();
345
+ });
346
+ return editor;
271
347
  };
272
348
 
273
- /**
274
- * This class is used to render Vue components inside the editor.
275
- */
276
- class VueRenderer {
277
- constructor(component, { props = {}, editor }) {
278
- this.editor = editor;
279
- this.component = markRaw(component);
280
- this.el = document.createElement('div');
281
- this.props = reactive(props);
282
- this.renderedComponent = this.renderComponent();
283
- }
284
- get element() {
285
- return this.renderedComponent.el;
286
- }
287
- get ref() {
288
- var _a, _b, _c, _d;
289
- // Composition API
290
- if ((_b = (_a = this.renderedComponent.vNode) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.exposed) {
291
- return this.renderedComponent.vNode.component.exposed;
292
- }
293
- // Option API
294
- return (_d = (_c = this.renderedComponent.vNode) === null || _c === void 0 ? void 0 : _c.component) === null || _d === void 0 ? void 0 : _d.proxy;
295
- }
296
- renderComponent() {
297
- let vNode = h(this.component, this.props);
298
- if (this.editor.appContext) {
299
- vNode.appContext = this.editor.appContext;
300
- }
301
- if (typeof document !== 'undefined' && this.el) {
302
- render(vNode, this.el);
303
- }
304
- const destroy = () => {
305
- if (this.el) {
306
- render(null, this.el);
307
- }
308
- this.el = null;
309
- vNode = null;
310
- };
311
- return { vNode, destroy, el: this.el ? this.el.firstElementChild : null };
349
+ // src/VueNodeViewRenderer.ts
350
+ import {
351
+ NodeView
352
+ } from "@tiptap/core";
353
+ import {
354
+ defineComponent as defineComponent6,
355
+ provide,
356
+ ref as ref4
357
+ } from "vue";
358
+
359
+ // src/VueRenderer.ts
360
+ import {
361
+ h as h6,
362
+ markRaw as markRaw2,
363
+ reactive,
364
+ render
365
+ } from "vue";
366
+ var VueRenderer = class {
367
+ constructor(component, { props = {}, editor }) {
368
+ this.editor = editor;
369
+ this.component = markRaw2(component);
370
+ this.el = document.createElement("div");
371
+ this.props = reactive(props);
372
+ this.renderedComponent = this.renderComponent();
373
+ }
374
+ get element() {
375
+ return this.renderedComponent.el;
376
+ }
377
+ get ref() {
378
+ var _a, _b, _c, _d;
379
+ if ((_b = (_a = this.renderedComponent.vNode) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) {
380
+ return this.renderedComponent.vNode.component.exposed;
312
381
  }
313
- updateProps(props = {}) {
314
- Object.entries(props).forEach(([key, value]) => {
315
- this.props[key] = value;
316
- });
317
- this.renderComponent();
382
+ return (_d = (_c = this.renderedComponent.vNode) == null ? void 0 : _c.component) == null ? void 0 : _d.proxy;
383
+ }
384
+ renderComponent() {
385
+ let vNode = h6(this.component, this.props);
386
+ if (this.editor.appContext) {
387
+ vNode.appContext = this.editor.appContext;
318
388
  }
319
- destroy() {
320
- this.renderedComponent.destroy();
389
+ if (typeof document !== "undefined" && this.el) {
390
+ render(vNode, this.el);
321
391
  }
322
- }
392
+ const destroy = () => {
393
+ if (this.el) {
394
+ render(null, this.el);
395
+ }
396
+ this.el = null;
397
+ vNode = null;
398
+ };
399
+ return { vNode, destroy, el: this.el ? this.el.firstElementChild : null };
400
+ }
401
+ updateProps(props = {}) {
402
+ Object.entries(props).forEach(([key, value]) => {
403
+ this.props[key] = value;
404
+ });
405
+ this.renderComponent();
406
+ }
407
+ destroy() {
408
+ this.renderedComponent.destroy();
409
+ }
410
+ };
323
411
 
324
- const nodeViewProps = {
325
- editor: {
326
- type: Object,
327
- required: true,
328
- },
329
- node: {
330
- type: Object,
331
- required: true,
332
- },
333
- decorations: {
334
- type: Object,
335
- required: true,
336
- },
337
- selected: {
338
- type: Boolean,
339
- required: true,
340
- },
341
- extension: {
342
- type: Object,
343
- required: true,
344
- },
345
- getPos: {
346
- type: Function,
347
- required: true,
348
- },
349
- updateAttributes: {
350
- type: Function,
351
- required: true,
352
- },
353
- deleteNode: {
354
- type: Function,
355
- required: true,
356
- },
412
+ // src/VueNodeViewRenderer.ts
413
+ var nodeViewProps = {
414
+ editor: {
415
+ type: Object,
416
+ required: true
417
+ },
418
+ node: {
419
+ type: Object,
420
+ required: true
421
+ },
422
+ decorations: {
423
+ type: Object,
424
+ required: true
425
+ },
426
+ selected: {
427
+ type: Boolean,
428
+ required: true
429
+ },
430
+ extension: {
431
+ type: Object,
432
+ required: true
433
+ },
434
+ getPos: {
435
+ type: Function,
436
+ required: true
437
+ },
438
+ updateAttributes: {
439
+ type: Function,
440
+ required: true
441
+ },
442
+ deleteNode: {
443
+ type: Function,
444
+ required: true
445
+ }
357
446
  };
358
- class VueNodeView extends NodeView {
359
- mount() {
360
- const props = {
361
- editor: this.editor,
362
- node: this.node,
363
- decorations: this.decorations,
364
- selected: false,
365
- extension: this.extension,
366
- getPos: () => this.getPos(),
367
- updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
368
- deleteNode: () => this.deleteNode(),
369
- };
370
- const onDragStart = this.onDragStart.bind(this);
371
- this.decorationClasses = ref(this.getDecorationClasses());
372
- const extendedComponent = defineComponent({
373
- extends: { ...this.component },
374
- props: Object.keys(props),
375
- template: this.component.template,
376
- setup: reactiveProps => {
377
- var _a, _b;
378
- provide('onDragStart', onDragStart);
379
- provide('decorationClasses', this.decorationClasses);
380
- return (_b = (_a = this.component).setup) === null || _b === void 0 ? void 0 : _b.call(_a, reactiveProps, {
381
- expose: () => undefined,
382
- });
383
- },
384
- // add support for scoped styles
385
- // @ts-ignore
386
- // eslint-disable-next-line
387
- __scopeId: this.component.__scopeId,
388
- // add support for CSS Modules
389
- // @ts-ignore
390
- // eslint-disable-next-line
391
- __cssModules: this.component.__cssModules,
392
- // add support for vue devtools
393
- // @ts-ignore
394
- // eslint-disable-next-line
395
- __name: this.component.__name,
396
- // @ts-ignore
397
- // eslint-disable-next-line
398
- __file: this.component.__file,
399
- });
400
- this.renderer = new VueRenderer(extendedComponent, {
401
- editor: this.editor,
402
- props,
447
+ var VueNodeView = class extends NodeView {
448
+ mount() {
449
+ const props = {
450
+ editor: this.editor,
451
+ node: this.node,
452
+ decorations: this.decorations,
453
+ selected: false,
454
+ extension: this.extension,
455
+ getPos: () => this.getPos(),
456
+ updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
457
+ deleteNode: () => this.deleteNode()
458
+ };
459
+ const onDragStart = this.onDragStart.bind(this);
460
+ this.decorationClasses = ref4(this.getDecorationClasses());
461
+ const extendedComponent = defineComponent6({
462
+ extends: { ...this.component },
463
+ props: Object.keys(props),
464
+ template: this.component.template,
465
+ setup: (reactiveProps) => {
466
+ var _a, _b;
467
+ provide("onDragStart", onDragStart);
468
+ provide("decorationClasses", this.decorationClasses);
469
+ return (_b = (_a = this.component).setup) == null ? void 0 : _b.call(_a, reactiveProps, {
470
+ expose: () => void 0
403
471
  });
472
+ },
473
+ // add support for scoped styles
474
+ // @ts-ignore
475
+ // eslint-disable-next-line
476
+ __scopeId: this.component.__scopeId,
477
+ // add support for CSS Modules
478
+ // @ts-ignore
479
+ // eslint-disable-next-line
480
+ __cssModules: this.component.__cssModules,
481
+ // add support for vue devtools
482
+ // @ts-ignore
483
+ // eslint-disable-next-line
484
+ __name: this.component.__name,
485
+ // @ts-ignore
486
+ // eslint-disable-next-line
487
+ __file: this.component.__file
488
+ });
489
+ this.renderer = new VueRenderer(extendedComponent, {
490
+ editor: this.editor,
491
+ props
492
+ });
493
+ }
494
+ get dom() {
495
+ if (!this.renderer.element || !this.renderer.element.hasAttribute("data-node-view-wrapper")) {
496
+ throw Error("Please use the NodeViewWrapper component for your node view.");
404
497
  }
405
- get dom() {
406
- if (!this.renderer.element || !this.renderer.element.hasAttribute('data-node-view-wrapper')) {
407
- throw Error('Please use the NodeViewWrapper component for your node view.');
408
- }
409
- return this.renderer.element;
410
- }
411
- get contentDOM() {
412
- if (this.node.isLeaf) {
413
- return null;
414
- }
415
- return this.dom.querySelector('[data-node-view-content]');
498
+ return this.renderer.element;
499
+ }
500
+ get contentDOM() {
501
+ if (this.node.isLeaf) {
502
+ return null;
416
503
  }
417
- update(node, decorations) {
418
- const updateProps = (props) => {
419
- this.decorationClasses.value = this.getDecorationClasses();
420
- this.renderer.updateProps(props);
421
- };
422
- if (typeof this.options.update === 'function') {
423
- const oldNode = this.node;
424
- const oldDecorations = this.decorations;
425
- this.node = node;
426
- this.decorations = decorations;
427
- return this.options.update({
428
- oldNode,
429
- oldDecorations,
430
- newNode: node,
431
- newDecorations: decorations,
432
- updateProps: () => updateProps({ node, decorations }),
433
- });
434
- }
435
- if (node.type !== this.node.type) {
436
- return false;
437
- }
438
- if (node === this.node && this.decorations === decorations) {
439
- return true;
440
- }
441
- this.node = node;
442
- this.decorations = decorations;
443
- updateProps({ node, decorations });
444
- return true;
504
+ return this.dom.querySelector("[data-node-view-content]");
505
+ }
506
+ update(node, decorations) {
507
+ const updateProps = (props) => {
508
+ this.decorationClasses.value = this.getDecorationClasses();
509
+ this.renderer.updateProps(props);
510
+ };
511
+ if (typeof this.options.update === "function") {
512
+ const oldNode = this.node;
513
+ const oldDecorations = this.decorations;
514
+ this.node = node;
515
+ this.decorations = decorations;
516
+ return this.options.update({
517
+ oldNode,
518
+ oldDecorations,
519
+ newNode: node,
520
+ newDecorations: decorations,
521
+ updateProps: () => updateProps({ node, decorations })
522
+ });
445
523
  }
446
- selectNode() {
447
- this.renderer.updateProps({
448
- selected: true,
449
- });
450
- if (this.renderer.element) {
451
- this.renderer.element.classList.add('ProseMirror-selectednode');
452
- }
524
+ if (node.type !== this.node.type) {
525
+ return false;
453
526
  }
454
- deselectNode() {
455
- this.renderer.updateProps({
456
- selected: false,
457
- });
458
- if (this.renderer.element) {
459
- this.renderer.element.classList.remove('ProseMirror-selectednode');
460
- }
527
+ if (node === this.node && this.decorations === decorations) {
528
+ return true;
461
529
  }
462
- getDecorationClasses() {
463
- return (this.decorations
464
- // @ts-ignore
465
- .map(item => item.type.attrs.class)
466
- .flat()
467
- .join(' '));
530
+ this.node = node;
531
+ this.decorations = decorations;
532
+ updateProps({ node, decorations });
533
+ return true;
534
+ }
535
+ selectNode() {
536
+ this.renderer.updateProps({
537
+ selected: true
538
+ });
539
+ if (this.renderer.element) {
540
+ this.renderer.element.classList.add("ProseMirror-selectednode");
468
541
  }
469
- destroy() {
470
- this.renderer.destroy();
542
+ }
543
+ deselectNode() {
544
+ this.renderer.updateProps({
545
+ selected: false
546
+ });
547
+ if (this.renderer.element) {
548
+ this.renderer.element.classList.remove("ProseMirror-selectednode");
471
549
  }
472
- }
550
+ }
551
+ getDecorationClasses() {
552
+ return this.decorations.map((item) => item.type.attrs.class).flat().join(" ");
553
+ }
554
+ destroy() {
555
+ this.renderer.destroy();
556
+ }
557
+ };
473
558
  function VueNodeViewRenderer(component, options) {
474
- return (props) => {
475
- // try to get the parent component
476
- // this is important for vue devtools to show the component hierarchy correctly
477
- // maybe it’s `undefined` because <editor-content> isn’t rendered yet
478
- if (!props.editor.contentComponent) {
479
- return {};
480
- }
481
- // check for class-component and normalize if neccessary
482
- const normalizedComponent = typeof component === 'function' && '__vccOpts' in component
483
- // eslint-disable-next-line no-underscore-dangle
484
- ? component.__vccOpts
485
- : component;
486
- return new VueNodeView(normalizedComponent, props, options);
487
- };
559
+ return (props) => {
560
+ if (!props.editor.contentComponent) {
561
+ return {};
562
+ }
563
+ const normalizedComponent = typeof component === "function" && "__vccOpts" in component ? component.__vccOpts : component;
564
+ return new VueNodeView(normalizedComponent, props, options);
565
+ };
488
566
  }
489
567
 
490
- export { BubbleMenu, Editor, EditorContent, FloatingMenu, NodeViewContent, NodeViewWrapper, VueNodeViewRenderer, VueRenderer, nodeViewProps, useEditor };
491
- //# sourceMappingURL=index.js.map
568
+ // src/index.ts
569
+ export * from "@tiptap/core";
570
+ export {
571
+ BubbleMenu,
572
+ Editor,
573
+ EditorContent,
574
+ FloatingMenu,
575
+ NodeViewContent,
576
+ NodeViewWrapper,
577
+ VueNodeViewRenderer,
578
+ VueRenderer,
579
+ nodeViewProps,
580
+ useEditor
581
+ };
582
+ //# sourceMappingURL=index.js.map