@tiptap/vue-2 3.10.7 → 3.11.0
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 +8 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +6 -4
- package/dist/index.js.map +1 -1
- package/dist/menus/index.cjs +35 -90
- package/dist/menus/index.cjs.map +1 -1
- package/dist/menus/index.d.cts +2 -2
- package/dist/menus/index.d.ts +2 -2
- package/dist/menus/index.js +29 -84
- package/dist/menus/index.js.map +1 -1
- package/package.json +7 -7
- package/src/Vue.ts +8 -0
- package/src/VueNodeViewRenderer.ts +2 -2
- package/src/VueRenderer.ts +3 -2
package/dist/menus/index.d.cts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Editor } from '@tiptap/core';
|
|
2
1
|
import { VirtualElement, offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
|
|
2
|
+
import { Editor } from '@tiptap/core';
|
|
3
3
|
import { PluginKey, EditorState } from '@tiptap/pm/state';
|
|
4
4
|
import { EditorView } from '@tiptap/pm/view';
|
|
5
|
-
import
|
|
5
|
+
import { VNode, Component } from 'vue';
|
|
6
6
|
|
|
7
7
|
interface BubbleMenuPluginProps {
|
|
8
8
|
/**
|
package/dist/menus/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Editor } from '@tiptap/core';
|
|
2
1
|
import { VirtualElement, offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
|
|
2
|
+
import { Editor } from '@tiptap/core';
|
|
3
3
|
import { PluginKey, EditorState } from '@tiptap/pm/state';
|
|
4
4
|
import { EditorView } from '@tiptap/pm/view';
|
|
5
|
-
import
|
|
5
|
+
import { VNode, Component } from 'vue';
|
|
6
6
|
|
|
7
7
|
interface BubbleMenuPluginProps {
|
|
8
8
|
/**
|
package/dist/menus/index.js
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
// ../extension-bubble-menu/dist/index.js
|
|
2
|
-
import { Extension } from "@tiptap/core";
|
|
3
|
-
|
|
4
1
|
// ../../node_modules/.pnpm/@floating-ui+utils@0.2.9/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
|
|
5
2
|
var sides = ["top", "right", "bottom", "left"];
|
|
6
3
|
var alignments = ["start", "end"];
|
|
@@ -1584,7 +1581,7 @@ var computePosition2 = (reference, floating, options) => {
|
|
|
1584
1581
|
});
|
|
1585
1582
|
};
|
|
1586
1583
|
|
|
1587
|
-
// ../extension-bubble-menu/
|
|
1584
|
+
// ../extension-bubble-menu/src/bubble-menu-plugin.ts
|
|
1588
1585
|
import { isTextSelection, posToDOMRect } from "@tiptap/core";
|
|
1589
1586
|
import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
|
|
1590
1587
|
import { CellSelection } from "@tiptap/pm/tables";
|
|
@@ -1630,12 +1627,12 @@ var BubbleMenuView = class {
|
|
|
1630
1627
|
onUpdate: void 0,
|
|
1631
1628
|
onDestroy: void 0
|
|
1632
1629
|
};
|
|
1633
|
-
this.shouldShow = ({ view
|
|
1630
|
+
this.shouldShow = ({ view, state, from, to }) => {
|
|
1634
1631
|
const { doc, selection } = state;
|
|
1635
1632
|
const { empty } = selection;
|
|
1636
1633
|
const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
|
|
1637
1634
|
const isChildOfMenu = this.element.contains(document.activeElement);
|
|
1638
|
-
const hasEditorFocus =
|
|
1635
|
+
const hasEditorFocus = view.hasFocus() || isChildOfMenu;
|
|
1639
1636
|
if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
|
|
1640
1637
|
return false;
|
|
1641
1638
|
}
|
|
@@ -1647,6 +1644,11 @@ var BubbleMenuView = class {
|
|
|
1647
1644
|
this.dragstartHandler = () => {
|
|
1648
1645
|
this.hide();
|
|
1649
1646
|
};
|
|
1647
|
+
/**
|
|
1648
|
+
* Handles the window resize event to update the position of the bubble menu.
|
|
1649
|
+
* It uses a debounce mechanism to prevent excessive updates.
|
|
1650
|
+
* The delay is defined by the `resizeDelay` property.
|
|
1651
|
+
*/
|
|
1650
1652
|
this.resizeHandler = () => {
|
|
1651
1653
|
if (this.resizeDebounceTimer) {
|
|
1652
1654
|
clearTimeout(this.resizeDebounceTimer);
|
|
@@ -1659,7 +1661,7 @@ var BubbleMenuView = class {
|
|
|
1659
1661
|
setTimeout(() => this.update(this.editor.view));
|
|
1660
1662
|
};
|
|
1661
1663
|
this.blurHandler = ({ event }) => {
|
|
1662
|
-
var
|
|
1664
|
+
var _a;
|
|
1663
1665
|
if (this.editor.isDestroyed) {
|
|
1664
1666
|
this.destroy();
|
|
1665
1667
|
return;
|
|
@@ -1668,7 +1670,7 @@ var BubbleMenuView = class {
|
|
|
1668
1670
|
this.preventHide = false;
|
|
1669
1671
|
return;
|
|
1670
1672
|
}
|
|
1671
|
-
if ((event == null ? void 0 : event.relatedTarget) && ((
|
|
1673
|
+
if ((event == null ? void 0 : event.relatedTarget) && ((_a = this.element.parentNode) == null ? void 0 : _a.contains(event.relatedTarget))) {
|
|
1672
1674
|
return;
|
|
1673
1675
|
}
|
|
1674
1676
|
if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
|
|
@@ -1676,9 +1678,9 @@ var BubbleMenuView = class {
|
|
|
1676
1678
|
}
|
|
1677
1679
|
this.hide();
|
|
1678
1680
|
};
|
|
1679
|
-
this.handleDebouncedUpdate = (
|
|
1680
|
-
const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(
|
|
1681
|
-
const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(
|
|
1681
|
+
this.handleDebouncedUpdate = (view, oldState) => {
|
|
1682
|
+
const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view.state.selection));
|
|
1683
|
+
const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view.state.doc));
|
|
1682
1684
|
if (!selectionChanged && !docChanged) {
|
|
1683
1685
|
return;
|
|
1684
1686
|
}
|
|
@@ -1686,17 +1688,17 @@ var BubbleMenuView = class {
|
|
|
1686
1688
|
clearTimeout(this.updateDebounceTimer);
|
|
1687
1689
|
}
|
|
1688
1690
|
this.updateDebounceTimer = window.setTimeout(() => {
|
|
1689
|
-
this.updateHandler(
|
|
1691
|
+
this.updateHandler(view, selectionChanged, docChanged, oldState);
|
|
1690
1692
|
}, this.updateDelay);
|
|
1691
1693
|
};
|
|
1692
|
-
this.updateHandler = (
|
|
1693
|
-
const { composing } =
|
|
1694
|
+
this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
|
|
1695
|
+
const { composing } = view;
|
|
1694
1696
|
const isSame = !selectionChanged && !docChanged;
|
|
1695
1697
|
if (composing || isSame) {
|
|
1696
1698
|
return;
|
|
1697
1699
|
}
|
|
1698
|
-
const
|
|
1699
|
-
if (!
|
|
1700
|
+
const shouldShow = this.getShouldShow(oldState);
|
|
1701
|
+
if (!shouldShow) {
|
|
1700
1702
|
this.hide();
|
|
1701
1703
|
return;
|
|
1702
1704
|
}
|
|
@@ -1916,38 +1918,9 @@ var BubbleMenuPlugin = (options) => {
|
|
|
1916
1918
|
view: (view) => new BubbleMenuView({ view, ...options })
|
|
1917
1919
|
});
|
|
1918
1920
|
};
|
|
1919
|
-
var BubbleMenu = Extension.create({
|
|
1920
|
-
name: "bubbleMenu",
|
|
1921
|
-
addOptions() {
|
|
1922
|
-
return {
|
|
1923
|
-
element: null,
|
|
1924
|
-
pluginKey: "bubbleMenu",
|
|
1925
|
-
updateDelay: void 0,
|
|
1926
|
-
appendTo: void 0,
|
|
1927
|
-
shouldShow: null
|
|
1928
|
-
};
|
|
1929
|
-
},
|
|
1930
|
-
addProseMirrorPlugins() {
|
|
1931
|
-
if (!this.options.element) {
|
|
1932
|
-
return [];
|
|
1933
|
-
}
|
|
1934
|
-
return [
|
|
1935
|
-
BubbleMenuPlugin({
|
|
1936
|
-
pluginKey: this.options.pluginKey,
|
|
1937
|
-
editor: this.editor,
|
|
1938
|
-
element: this.options.element,
|
|
1939
|
-
updateDelay: this.options.updateDelay,
|
|
1940
|
-
options: this.options.options,
|
|
1941
|
-
appendTo: this.options.appendTo,
|
|
1942
|
-
getReferencedVirtualElement: this.options.getReferencedVirtualElement,
|
|
1943
|
-
shouldShow: this.options.shouldShow
|
|
1944
|
-
})
|
|
1945
|
-
];
|
|
1946
|
-
}
|
|
1947
|
-
});
|
|
1948
1921
|
|
|
1949
1922
|
// src/menus/BubbleMenu.ts
|
|
1950
|
-
var
|
|
1923
|
+
var BubbleMenu = {
|
|
1951
1924
|
name: "BubbleMenu",
|
|
1952
1925
|
props: {
|
|
1953
1926
|
pluginKey: {
|
|
@@ -2010,20 +1983,19 @@ var BubbleMenu2 = {
|
|
|
2010
1983
|
}
|
|
2011
1984
|
};
|
|
2012
1985
|
|
|
2013
|
-
// ../extension-floating-menu/
|
|
2014
|
-
import { Extension as Extension2 } from "@tiptap/core";
|
|
1986
|
+
// ../extension-floating-menu/src/floating-menu-plugin.ts
|
|
2015
1987
|
import { getText, getTextSerializersFromSchema, posToDOMRect as posToDOMRect2 } from "@tiptap/core";
|
|
2016
1988
|
import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
|
|
2017
1989
|
var FloatingMenuView = class {
|
|
2018
1990
|
constructor({ editor, element, view, options, appendTo, shouldShow }) {
|
|
2019
1991
|
this.preventHide = false;
|
|
2020
1992
|
this.isVisible = false;
|
|
2021
|
-
this.shouldShow = ({ view
|
|
1993
|
+
this.shouldShow = ({ view, state }) => {
|
|
2022
1994
|
const { selection } = state;
|
|
2023
1995
|
const { $anchor, empty } = selection;
|
|
2024
1996
|
const isRootDepth = $anchor.depth === 1;
|
|
2025
1997
|
const isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent && $anchor.parent.childCount === 0 && !this.getTextContent($anchor.parent);
|
|
2026
|
-
if (!
|
|
1998
|
+
if (!view.hasFocus() || !empty || !isRootDepth || !isEmptyTextBlock || !this.editor.isEditable) {
|
|
2027
1999
|
return false;
|
|
2028
2000
|
}
|
|
2029
2001
|
return true;
|
|
@@ -2040,14 +2012,14 @@ var FloatingMenuView = class {
|
|
|
2040
2012
|
hide: false,
|
|
2041
2013
|
inline: false
|
|
2042
2014
|
};
|
|
2043
|
-
this.updateHandler = (
|
|
2044
|
-
const { composing } =
|
|
2015
|
+
this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
|
|
2016
|
+
const { composing } = view;
|
|
2045
2017
|
const isSame = !selectionChanged && !docChanged;
|
|
2046
2018
|
if (composing || isSame) {
|
|
2047
2019
|
return;
|
|
2048
2020
|
}
|
|
2049
|
-
const
|
|
2050
|
-
if (!
|
|
2021
|
+
const shouldShow = this.getShouldShow(oldState);
|
|
2022
|
+
if (!shouldShow) {
|
|
2051
2023
|
this.hide();
|
|
2052
2024
|
return;
|
|
2053
2025
|
}
|
|
@@ -2221,36 +2193,9 @@ var FloatingMenuPlugin = (options) => {
|
|
|
2221
2193
|
view: (view) => new FloatingMenuView({ view, ...options })
|
|
2222
2194
|
});
|
|
2223
2195
|
};
|
|
2224
|
-
var FloatingMenu = Extension2.create({
|
|
2225
|
-
name: "floatingMenu",
|
|
2226
|
-
addOptions() {
|
|
2227
|
-
return {
|
|
2228
|
-
element: null,
|
|
2229
|
-
options: {},
|
|
2230
|
-
pluginKey: "floatingMenu",
|
|
2231
|
-
appendTo: void 0,
|
|
2232
|
-
shouldShow: null
|
|
2233
|
-
};
|
|
2234
|
-
},
|
|
2235
|
-
addProseMirrorPlugins() {
|
|
2236
|
-
if (!this.options.element) {
|
|
2237
|
-
return [];
|
|
2238
|
-
}
|
|
2239
|
-
return [
|
|
2240
|
-
FloatingMenuPlugin({
|
|
2241
|
-
pluginKey: this.options.pluginKey,
|
|
2242
|
-
editor: this.editor,
|
|
2243
|
-
element: this.options.element,
|
|
2244
|
-
options: this.options.options,
|
|
2245
|
-
appendTo: this.options.appendTo,
|
|
2246
|
-
shouldShow: this.options.shouldShow
|
|
2247
|
-
})
|
|
2248
|
-
];
|
|
2249
|
-
}
|
|
2250
|
-
});
|
|
2251
2196
|
|
|
2252
2197
|
// src/menus/FloatingMenu.ts
|
|
2253
|
-
var
|
|
2198
|
+
var FloatingMenu = {
|
|
2254
2199
|
name: "FloatingMenu",
|
|
2255
2200
|
props: {
|
|
2256
2201
|
pluginKey: {
|
|
@@ -2311,7 +2256,7 @@ var FloatingMenu2 = {
|
|
|
2311
2256
|
}
|
|
2312
2257
|
};
|
|
2313
2258
|
export {
|
|
2314
|
-
|
|
2315
|
-
|
|
2259
|
+
BubbleMenu,
|
|
2260
|
+
FloatingMenu
|
|
2316
2261
|
};
|
|
2317
2262
|
//# sourceMappingURL=index.js.map
|