@edifice.io/react 2.6.8 → 2.6.9-chore-tiptap-v3.20261013175230
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/editor.js +2 -0
- package/dist/homepage.js +2 -1
- package/dist/modules/editor/components/BubbleMenuEditImage/BubbleMenuEditImage.js +97 -90
- package/dist/modules/editor/components/BubbleMenuEditInformationPane/BubbleMenuEditInformationPane.js +111 -95
- package/dist/modules/editor/components/EditorToolbar/EditorToolbar.Typography.js +3 -3
- package/dist/modules/editor/components/EditorToolbar/EditorToolbar.js +6 -4
- package/dist/modules/editor/components/Toolbar/LinkToolbar.FloatingOptions.js +12 -0
- package/dist/modules/editor/components/Toolbar/LinkToolbar.js +5 -4
- package/dist/modules/editor/components/Toolbar/TableToolbar.js +11 -5
- package/dist/modules/editor/hooks/index.d.ts +1 -0
- package/dist/modules/editor/hooks/useCommentEditor.d.ts +1 -1
- package/dist/modules/editor/hooks/useCommentEditor.js +12 -4
- package/dist/modules/editor/hooks/useEditorState.d.ts +20 -0
- package/dist/modules/editor/hooks/useEditorState.js +16 -0
- package/dist/modules/editor/hooks/useTipTapEditor.d.ts +1 -1
- package/dist/modules/editor/hooks/useTipTapEditor.js +64 -24
- package/dist/modules/homepage/components/Communities/Communities.d.ts +2 -1
- package/dist/modules/homepage/components/Communities/Communities.js +14 -13
- package/dist/modules/homepage/components/Communities/CommunitiesContainer.d.ts +1 -1
- package/dist/modules/homepage/components/Communities/CommunitiesContainer.js +9 -5
- package/dist/modules/homepage/components/Communities/CommunitiesSkeleton.js +4 -7
- package/dist/modules/homepage/components/Communities/useCommunities.d.ts +4 -1
- package/dist/modules/homepage/components/Communities/useCommunities.js +8 -3
- package/dist/modules/homepage/components/HomeCard/HomeCardHeader.js +2 -2
- package/dist/modules/multimedia/MediaLibrary/MediaLibrary.d.ts +2 -0
- package/dist/modules/multimedia/MediaLibrary/MediaLibrary.js +2 -0
- package/dist/modules/multimedia/MediaLibrary/MediaLibraryContext.d.ts +4 -0
- package/dist/modules/multimedia/MediaLibrary/innertabs/Upload.js +2 -1
- package/dist/modules/multimedia/MediaLibrary/innertabs/Workspace.js +3 -0
- package/dist/node_modules/.pnpm/@tiptap_extension-floating-menu@3.32.0_@floating-ui_dom@1.6.0_@tiptap_core@3.32.0_@tiptap_pm@3.32.0__@tiptap_pm@3.32.0/node_modules/@tiptap/extension-floating-menu/dist/index.js +159 -0
- package/dist/node_modules/.pnpm/@tiptap_react@3.32.0_@floating-ui_dom@1.6.0_@tiptap_core@3.32.0_@tiptap_pm@3.32.0__@tiptap_pm_6inmb43gajy4fnlwtngbwkv7um/node_modules/@tiptap/react/dist/menus/index.js +341 -0
- package/dist/node_modules/.pnpm/prosemirror-model@1.25.12/node_modules/prosemirror-model/dist/index.js +419 -0
- package/dist/node_modules/.pnpm/prosemirror-state@1.4.4/node_modules/prosemirror-state/dist/index.js +489 -0
- package/dist/node_modules/.pnpm/prosemirror-transform@1.12.2/node_modules/prosemirror-transform/dist/index.js +607 -0
- package/package.json +35 -43
- package/dist/modules/editor/components/Toolbar/LinkToolbar.TippyOptions.d.ts +0 -2
- package/dist/modules/editor/components/Toolbar/LinkToolbar.TippyOptions.js +0 -8
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { getText, getTextSerializersFromSchema, posToDOMRect, Extension } from "@tiptap/core";
|
|
2
|
+
import { flip, shift, offset, arrow, size, autoPlacement, hide, inline, computePosition } from "@floating-ui/dom";
|
|
3
|
+
import { Plugin, PluginKey } from "../../../../../prosemirror-state@1.4.4/node_modules/prosemirror-state/dist/index.js";
|
|
4
|
+
var FloatingMenuView = class {
|
|
5
|
+
getTextContent(node) {
|
|
6
|
+
return getText(node, { textSerializers: getTextSerializersFromSchema(this.editor.schema) });
|
|
7
|
+
}
|
|
8
|
+
get middlewares() {
|
|
9
|
+
const middlewares = [];
|
|
10
|
+
return this.floatingUIOptions.flip && middlewares.push(flip(typeof this.floatingUIOptions.flip != "boolean" ? this.floatingUIOptions.flip : void 0)), this.floatingUIOptions.shift && middlewares.push(shift(typeof this.floatingUIOptions.shift != "boolean" ? this.floatingUIOptions.shift : void 0)), this.floatingUIOptions.offset && middlewares.push(offset(typeof this.floatingUIOptions.offset != "boolean" ? this.floatingUIOptions.offset : void 0)), this.floatingUIOptions.arrow && middlewares.push(arrow(this.floatingUIOptions.arrow)), this.floatingUIOptions.size && middlewares.push(size(typeof this.floatingUIOptions.size != "boolean" ? this.floatingUIOptions.size : void 0)), this.floatingUIOptions.autoPlacement && middlewares.push(autoPlacement(typeof this.floatingUIOptions.autoPlacement != "boolean" ? this.floatingUIOptions.autoPlacement : void 0)), this.floatingUIOptions.hide && middlewares.push(hide(typeof this.floatingUIOptions.hide != "boolean" ? this.floatingUIOptions.hide : void 0)), this.floatingUIOptions.inline && middlewares.push(inline(typeof this.floatingUIOptions.inline != "boolean" ? this.floatingUIOptions.inline : void 0)), middlewares;
|
|
11
|
+
}
|
|
12
|
+
constructor({ editor, element, view, pluginKey = "floatingMenu", updateDelay = 250, resizeDelay = 60, options, appendTo, shouldShow }) {
|
|
13
|
+
var _options$scrollTarget;
|
|
14
|
+
this.preventHide = !1, this.isVisible = !1, this.scrollTarget = window, this.shouldShow = ({ view: view2, state }) => {
|
|
15
|
+
const { selection } = state, { $anchor, empty } = selection, isRootDepth = $anchor.depth === 1, isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent && $anchor.parent.childCount === 0 && !this.getTextContent($anchor.parent);
|
|
16
|
+
return !(!view2.hasFocus() || !empty || !isRootDepth || !isEmptyTextBlock || !this.editor.isEditable);
|
|
17
|
+
}, this.floatingUIOptions = {
|
|
18
|
+
strategy: "absolute",
|
|
19
|
+
placement: "right",
|
|
20
|
+
offset: 8,
|
|
21
|
+
flip: {},
|
|
22
|
+
shift: {},
|
|
23
|
+
arrow: !1,
|
|
24
|
+
size: !1,
|
|
25
|
+
autoPlacement: !1,
|
|
26
|
+
hide: !1,
|
|
27
|
+
inline: !1
|
|
28
|
+
}, this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
|
|
29
|
+
const { composing } = view2;
|
|
30
|
+
if (!(composing || !selectionChanged && !docChanged)) {
|
|
31
|
+
if (!this.getShouldShow(oldState)) {
|
|
32
|
+
this.hide();
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
this.updatePosition(), this.show();
|
|
36
|
+
}
|
|
37
|
+
}, this.mousedownHandler = () => {
|
|
38
|
+
this.preventHide = !0;
|
|
39
|
+
}, this.focusHandler = () => {
|
|
40
|
+
setTimeout(() => this.update(this.editor.view));
|
|
41
|
+
}, this.blurHandler = ({ event }) => {
|
|
42
|
+
var _this$element$parentN;
|
|
43
|
+
if (this.preventHide) {
|
|
44
|
+
this.preventHide = !1;
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
event != null && event.relatedTarget && (!((_this$element$parentN = this.element.parentNode) === null || _this$element$parentN === void 0) && _this$element$parentN.contains(event.relatedTarget)) || (event == null ? void 0 : event.relatedTarget) !== this.editor.view.dom && this.hide();
|
|
48
|
+
}, this.transactionHandler = ({ transaction: tr }) => {
|
|
49
|
+
const meta = tr.getMeta(this.pluginKey);
|
|
50
|
+
meta === "updatePosition" ? this.updatePosition() : meta && typeof meta == "object" && meta.type === "updateOptions" ? this.updateOptions(meta.options) : meta === "hide" ? this.hide() : meta === "show" && (this.updatePosition(), this.show());
|
|
51
|
+
}, this.resizeHandler = () => {
|
|
52
|
+
this.resizeDebounceTimer && clearTimeout(this.resizeDebounceTimer), this.resizeDebounceTimer = window.setTimeout(() => {
|
|
53
|
+
this.updatePosition();
|
|
54
|
+
}, this.resizeDelay);
|
|
55
|
+
}, this.editor = editor, this.element = element, this.view = view, this.pluginKey = pluginKey, this.updateDelay = updateDelay, this.resizeDelay = resizeDelay, this.appendTo = appendTo, this.scrollTarget = (_options$scrollTarget = options == null ? void 0 : options.scrollTarget) !== null && _options$scrollTarget !== void 0 ? _options$scrollTarget : window, this.floatingUIOptions = {
|
|
56
|
+
...this.floatingUIOptions,
|
|
57
|
+
...options
|
|
58
|
+
}, this.element.tabIndex = 0, shouldShow && (this.shouldShow = shouldShow), this.element.addEventListener("mousedown", this.mousedownHandler, { capture: !0 }), this.editor.on("focus", this.focusHandler), this.editor.on("blur", this.blurHandler), this.editor.on("transaction", this.transactionHandler), window.addEventListener("resize", this.resizeHandler), this.scrollTarget.addEventListener("scroll", this.resizeHandler), this.update(view, view.state), this.getShouldShow() && (this.show(), this.updatePosition());
|
|
59
|
+
}
|
|
60
|
+
getShouldShow(oldState) {
|
|
61
|
+
var _this$shouldShow;
|
|
62
|
+
const { state } = this.view, { selection } = state, { ranges } = selection, from = Math.min(...ranges.map((range) => range.$from.pos)), to = Math.max(...ranges.map((range) => range.$to.pos));
|
|
63
|
+
return (_this$shouldShow = this.shouldShow) === null || _this$shouldShow === void 0 ? void 0 : _this$shouldShow.call(this, {
|
|
64
|
+
editor: this.editor,
|
|
65
|
+
view: this.view,
|
|
66
|
+
state,
|
|
67
|
+
oldState,
|
|
68
|
+
from,
|
|
69
|
+
to
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
updateOptions(newProps) {
|
|
73
|
+
if (newProps.updateDelay !== void 0 && (this.updateDelay = newProps.updateDelay), newProps.resizeDelay !== void 0 && (this.resizeDelay = newProps.resizeDelay), newProps.appendTo !== void 0 && (this.appendTo = newProps.appendTo), newProps.shouldShow !== void 0 && newProps.shouldShow && (this.shouldShow = newProps.shouldShow), newProps.options !== void 0) {
|
|
74
|
+
var _newProps$options$scr;
|
|
75
|
+
const newScrollTarget = (_newProps$options$scr = newProps.options.scrollTarget) !== null && _newProps$options$scr !== void 0 ? _newProps$options$scr : window;
|
|
76
|
+
newScrollTarget !== this.scrollTarget && (this.scrollTarget.removeEventListener("scroll", this.resizeHandler), this.scrollTarget = newScrollTarget, this.scrollTarget.addEventListener("scroll", this.resizeHandler)), this.floatingUIOptions = {
|
|
77
|
+
...this.floatingUIOptions,
|
|
78
|
+
...newProps.options
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
updatePosition() {
|
|
83
|
+
var _this$view;
|
|
84
|
+
if (!(!((_this$view = this.view) === null || _this$view === void 0 || (_this$view = _this$view.dom) === null || _this$view === void 0) && _this$view.parentNode)) return;
|
|
85
|
+
const { selection } = this.editor.state, domRect = posToDOMRect(this.view, selection.from, selection.to);
|
|
86
|
+
computePosition({
|
|
87
|
+
getBoundingClientRect: () => domRect,
|
|
88
|
+
getClientRects: () => [domRect]
|
|
89
|
+
}, this.element, {
|
|
90
|
+
placement: this.floatingUIOptions.placement,
|
|
91
|
+
strategy: this.floatingUIOptions.strategy,
|
|
92
|
+
middleware: this.middlewares
|
|
93
|
+
}).then(({ x, y, strategy, middlewareData }) => {
|
|
94
|
+
var _middlewareData$hide, _middlewareData$hide2;
|
|
95
|
+
if (!((_middlewareData$hide = middlewareData.hide) === null || _middlewareData$hide === void 0) && _middlewareData$hide.referenceHidden || !((_middlewareData$hide2 = middlewareData.hide) === null || _middlewareData$hide2 === void 0) && _middlewareData$hide2.escaped) {
|
|
96
|
+
this.element.style.visibility = "hidden";
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
this.element.style.visibility = "visible", this.element.style.width = "max-content", this.element.style.position = strategy, this.element.style.left = `${x}px`, this.element.style.top = `${y}px`, this.isVisible && this.floatingUIOptions.onUpdate && this.floatingUIOptions.onUpdate();
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
update(view, oldState) {
|
|
103
|
+
const selectionChanged = !(oldState != null && oldState.selection.eq(view.state.selection)), docChanged = !(oldState != null && oldState.doc.eq(view.state.doc));
|
|
104
|
+
this.updateHandler(view, selectionChanged, docChanged, oldState);
|
|
105
|
+
}
|
|
106
|
+
show() {
|
|
107
|
+
var _ref;
|
|
108
|
+
if (this.isVisible) return;
|
|
109
|
+
this.element.style.visibility = "visible", this.element.style.opacity = "1";
|
|
110
|
+
const appendToElement = typeof this.appendTo == "function" ? this.appendTo() : this.appendTo;
|
|
111
|
+
(_ref = appendToElement ?? this.view.dom.parentElement) === null || _ref === void 0 || _ref.appendChild(this.element), this.floatingUIOptions.onShow && this.floatingUIOptions.onShow(), this.isVisible = !0;
|
|
112
|
+
}
|
|
113
|
+
hide() {
|
|
114
|
+
this.isVisible && (this.element.style.visibility = "hidden", this.element.style.opacity = "0", this.element.remove(), this.floatingUIOptions.onHide && this.floatingUIOptions.onHide(), this.isVisible = !1);
|
|
115
|
+
}
|
|
116
|
+
destroy() {
|
|
117
|
+
this.hide(), this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: !0 }), window.removeEventListener("resize", this.resizeHandler), this.scrollTarget.removeEventListener("scroll", this.resizeHandler), this.editor.off("focus", this.focusHandler), this.editor.off("blur", this.blurHandler), this.editor.off("transaction", this.transactionHandler), this.floatingUIOptions.onDestroy && this.floatingUIOptions.onDestroy();
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
const FloatingMenuPlugin = (options) => new Plugin({
|
|
121
|
+
key: typeof options.pluginKey == "string" ? new PluginKey(options.pluginKey) : options.pluginKey,
|
|
122
|
+
view: (view) => new FloatingMenuView({
|
|
123
|
+
view,
|
|
124
|
+
...options
|
|
125
|
+
})
|
|
126
|
+
});
|
|
127
|
+
Extension.create({
|
|
128
|
+
name: "floatingMenu",
|
|
129
|
+
addOptions() {
|
|
130
|
+
return {
|
|
131
|
+
element: null,
|
|
132
|
+
options: {},
|
|
133
|
+
pluginKey: "floatingMenu",
|
|
134
|
+
updateDelay: void 0,
|
|
135
|
+
resizeDelay: void 0,
|
|
136
|
+
appendTo: void 0,
|
|
137
|
+
shouldShow: null
|
|
138
|
+
};
|
|
139
|
+
},
|
|
140
|
+
addCommands() {
|
|
141
|
+
return { updateFloatingMenuPosition: () => ({ tr, dispatch }) => (dispatch && tr.setMeta(this.options.pluginKey, "updatePosition"), !0) };
|
|
142
|
+
},
|
|
143
|
+
addProseMirrorPlugins() {
|
|
144
|
+
return this.options.element ? [FloatingMenuPlugin({
|
|
145
|
+
pluginKey: this.options.pluginKey,
|
|
146
|
+
editor: this.editor,
|
|
147
|
+
element: this.options.element,
|
|
148
|
+
updateDelay: this.options.updateDelay,
|
|
149
|
+
resizeDelay: this.options.resizeDelay,
|
|
150
|
+
options: this.options.options,
|
|
151
|
+
appendTo: this.options.appendTo,
|
|
152
|
+
shouldShow: this.options.shouldShow
|
|
153
|
+
})] : [];
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
export {
|
|
157
|
+
FloatingMenuPlugin,
|
|
158
|
+
FloatingMenuView
|
|
159
|
+
};
|
|
@@ -0,0 +1,341 @@
|
|
|
1
|
+
import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
|
|
2
|
+
import { useCurrentEditor } from "@tiptap/react";
|
|
3
|
+
import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
5
|
+
import { PluginKey } from "../../../../../../prosemirror-state@1.4.4/node_modules/prosemirror-state/dist/index.js";
|
|
6
|
+
import { FloatingMenuPlugin } from "../../../../../../@tiptap_extension-floating-menu@3.32.0_@floating-ui_dom@1.6.0_@tiptap_core@3.32.0_@tiptap_pm@3.32.0__@tiptap_pm@3.32.0/node_modules/@tiptap/extension-floating-menu/dist/index.js";
|
|
7
|
+
function getAutoPluginKey(pluginKey, defaultName) {
|
|
8
|
+
return pluginKey ?? new PluginKey(defaultName);
|
|
9
|
+
}
|
|
10
|
+
const useIsomorphicLayoutEffect = typeof window < "u" ? useLayoutEffect : useEffect, PLUGIN_MANAGED_STYLE_PROPERTIES = /* @__PURE__ */ new Set([
|
|
11
|
+
"left",
|
|
12
|
+
"opacity",
|
|
13
|
+
"position",
|
|
14
|
+
"top",
|
|
15
|
+
"visibility",
|
|
16
|
+
"width"
|
|
17
|
+
]), UNITLESS_STYLE_PROPERTIES = /* @__PURE__ */ new Set([
|
|
18
|
+
"animationIterationCount",
|
|
19
|
+
"aspectRatio",
|
|
20
|
+
"borderImageOutset",
|
|
21
|
+
"borderImageSlice",
|
|
22
|
+
"borderImageWidth",
|
|
23
|
+
"columnCount",
|
|
24
|
+
"columns",
|
|
25
|
+
"fillOpacity",
|
|
26
|
+
"flex",
|
|
27
|
+
"flexGrow",
|
|
28
|
+
"flexShrink",
|
|
29
|
+
"fontWeight",
|
|
30
|
+
"gridArea",
|
|
31
|
+
"gridColumn",
|
|
32
|
+
"gridColumnEnd",
|
|
33
|
+
"gridColumnStart",
|
|
34
|
+
"gridRow",
|
|
35
|
+
"gridRowEnd",
|
|
36
|
+
"gridRowStart",
|
|
37
|
+
"lineClamp",
|
|
38
|
+
"lineHeight",
|
|
39
|
+
"opacity",
|
|
40
|
+
"order",
|
|
41
|
+
"orphans",
|
|
42
|
+
"scale",
|
|
43
|
+
"stopOpacity",
|
|
44
|
+
"strokeDasharray",
|
|
45
|
+
"strokeDashoffset",
|
|
46
|
+
"strokeMiterlimit",
|
|
47
|
+
"strokeOpacity",
|
|
48
|
+
"strokeWidth",
|
|
49
|
+
"tabSize",
|
|
50
|
+
"widows",
|
|
51
|
+
"zIndex",
|
|
52
|
+
"zoom"
|
|
53
|
+
]), ATTRIBUTE_EXCLUSIONS = /* @__PURE__ */ new Set([
|
|
54
|
+
"children",
|
|
55
|
+
"className",
|
|
56
|
+
"style"
|
|
57
|
+
]), DIRECT_PROPERTY_KEYS = /* @__PURE__ */ new Set(["tabIndex"]), FORWARDED_ATTRIBUTE_KEYS = /* @__PURE__ */ new Set([
|
|
58
|
+
"accessKey",
|
|
59
|
+
"autoCapitalize",
|
|
60
|
+
"contentEditable",
|
|
61
|
+
"contextMenu",
|
|
62
|
+
"dir",
|
|
63
|
+
"draggable",
|
|
64
|
+
"enterKeyHint",
|
|
65
|
+
"hidden",
|
|
66
|
+
"id",
|
|
67
|
+
"lang",
|
|
68
|
+
"nonce",
|
|
69
|
+
"role",
|
|
70
|
+
"slot",
|
|
71
|
+
"spellCheck",
|
|
72
|
+
"tabIndex",
|
|
73
|
+
"title",
|
|
74
|
+
"translate"
|
|
75
|
+
]), SPECIAL_EVENT_NAMES = {
|
|
76
|
+
Blur: "focusout",
|
|
77
|
+
DoubleClick: "dblclick",
|
|
78
|
+
Focus: "focusin",
|
|
79
|
+
MouseEnter: "mouseenter",
|
|
80
|
+
MouseLeave: "mouseleave"
|
|
81
|
+
};
|
|
82
|
+
function isEventProp(key, value) {
|
|
83
|
+
return /^on[A-Z]/.test(key) && typeof value == "function";
|
|
84
|
+
}
|
|
85
|
+
function toAttributeName(key) {
|
|
86
|
+
return key.startsWith("aria-") || key.startsWith("data-"), key;
|
|
87
|
+
}
|
|
88
|
+
function isForwardedAttributeKey(key) {
|
|
89
|
+
return key.startsWith("aria-") || key.startsWith("data-") || FORWARDED_ATTRIBUTE_KEYS.has(key);
|
|
90
|
+
}
|
|
91
|
+
function toStylePropertyName(key) {
|
|
92
|
+
return key.startsWith("--") ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
93
|
+
}
|
|
94
|
+
function toEventConfig(key) {
|
|
95
|
+
var _SPECIAL_EVENT_NAMES$;
|
|
96
|
+
const useCapture = key.endsWith("Capture"), reactEventName = (useCapture ? key.slice(0, -7) : key).slice(2);
|
|
97
|
+
return {
|
|
98
|
+
eventName: (_SPECIAL_EVENT_NAMES$ = SPECIAL_EVENT_NAMES[reactEventName]) !== null && _SPECIAL_EVENT_NAMES$ !== void 0 ? _SPECIAL_EVENT_NAMES$ : reactEventName.toLowerCase(),
|
|
99
|
+
options: useCapture ? { capture: !0 } : void 0
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
function createSyntheticEvent(element, nativeEvent) {
|
|
103
|
+
let defaultPrevented = nativeEvent.defaultPrevented, propagationStopped = !1;
|
|
104
|
+
const syntheticEvent = Object.create(nativeEvent);
|
|
105
|
+
return Object.defineProperties(syntheticEvent, {
|
|
106
|
+
nativeEvent: { value: nativeEvent },
|
|
107
|
+
currentTarget: { value: element },
|
|
108
|
+
target: { value: nativeEvent.target },
|
|
109
|
+
persist: { value: () => {
|
|
110
|
+
} },
|
|
111
|
+
isDefaultPrevented: { value: () => defaultPrevented },
|
|
112
|
+
isPropagationStopped: { value: () => propagationStopped },
|
|
113
|
+
preventDefault: { value: () => {
|
|
114
|
+
defaultPrevented = !0, nativeEvent.preventDefault();
|
|
115
|
+
} },
|
|
116
|
+
stopPropagation: { value: () => {
|
|
117
|
+
propagationStopped = !0, nativeEvent.stopPropagation();
|
|
118
|
+
} }
|
|
119
|
+
}), syntheticEvent;
|
|
120
|
+
}
|
|
121
|
+
function isDirectPropertyKey(key) {
|
|
122
|
+
return DIRECT_PROPERTY_KEYS.has(key);
|
|
123
|
+
}
|
|
124
|
+
function setDirectProperty(element, key, value) {
|
|
125
|
+
if (key === "tabIndex") {
|
|
126
|
+
element.tabIndex = Number(value);
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
element[key] = value;
|
|
130
|
+
}
|
|
131
|
+
function clearDirectProperty(element, key) {
|
|
132
|
+
if (key === "tabIndex") {
|
|
133
|
+
element.removeAttribute("tabindex");
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
const propertyValue = element[key];
|
|
137
|
+
if (typeof propertyValue == "boolean") {
|
|
138
|
+
element[key] = !1;
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
if (typeof propertyValue == "number") {
|
|
142
|
+
element[key] = 0;
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
element[key] = "";
|
|
146
|
+
}
|
|
147
|
+
function toStyleValue(styleName, value) {
|
|
148
|
+
return typeof value != "number" || value === 0 || styleName.startsWith("--") || UNITLESS_STYLE_PROPERTIES.has(styleName) ? String(value) : `${value}px`;
|
|
149
|
+
}
|
|
150
|
+
function removeStyleProperty(element, styleName) {
|
|
151
|
+
PLUGIN_MANAGED_STYLE_PROPERTIES.has(styleName) || element.style.removeProperty(toStylePropertyName(styleName));
|
|
152
|
+
}
|
|
153
|
+
function applyStyleProperty(element, styleName, value) {
|
|
154
|
+
PLUGIN_MANAGED_STYLE_PROPERTIES.has(styleName) || element.style.setProperty(toStylePropertyName(styleName), toStyleValue(styleName, value));
|
|
155
|
+
}
|
|
156
|
+
function syncAttributes(element, prevProps, nextProps) {
|
|
157
|
+
(/* @__PURE__ */ new Set([...Object.keys(prevProps), ...Object.keys(nextProps)])).forEach((key) => {
|
|
158
|
+
if (ATTRIBUTE_EXCLUSIONS.has(key) || !isForwardedAttributeKey(key) || isEventProp(key, prevProps[key]) || isEventProp(key, nextProps[key])) return;
|
|
159
|
+
const prevValue = prevProps[key], nextValue = nextProps[key];
|
|
160
|
+
if (prevValue === nextValue) return;
|
|
161
|
+
const attributeName = toAttributeName(key);
|
|
162
|
+
if (nextValue == null || nextValue === !1) {
|
|
163
|
+
isDirectPropertyKey(key) && clearDirectProperty(element, key), element.removeAttribute(attributeName);
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
if (nextValue === !0) {
|
|
167
|
+
isDirectPropertyKey(key) && setDirectProperty(element, key, !0), element.setAttribute(attributeName, "");
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
if (isDirectPropertyKey(key)) {
|
|
171
|
+
setDirectProperty(element, key, nextValue);
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
element.setAttribute(attributeName, String(nextValue));
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
function syncClassName(element, prevClassName, nextClassName) {
|
|
178
|
+
if (prevClassName !== nextClassName) {
|
|
179
|
+
if (nextClassName) {
|
|
180
|
+
element.className = nextClassName;
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
element.removeAttribute("class");
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
function syncStyles(element, prevStyle, nextStyle) {
|
|
187
|
+
const previousStyle = prevStyle ?? {}, currentStyle = nextStyle ?? {};
|
|
188
|
+
(/* @__PURE__ */ new Set([...Object.keys(previousStyle), ...Object.keys(currentStyle)])).forEach((styleName) => {
|
|
189
|
+
const prevValue = previousStyle[styleName], nextValue = currentStyle[styleName];
|
|
190
|
+
if (prevValue !== nextValue) {
|
|
191
|
+
if (nextValue == null) {
|
|
192
|
+
removeStyleProperty(element, styleName);
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
applyStyleProperty(element, styleName, nextValue);
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
function syncEventListeners(element, prevListeners, nextProps) {
|
|
200
|
+
prevListeners.forEach(({ eventName, listener, options }) => {
|
|
201
|
+
element.removeEventListener(eventName, listener, options);
|
|
202
|
+
});
|
|
203
|
+
const nextListeners = [];
|
|
204
|
+
return Object.entries(nextProps).forEach(([key, value]) => {
|
|
205
|
+
if (!isEventProp(key, value)) return;
|
|
206
|
+
const { eventName, options } = toEventConfig(key), listener = (event) => {
|
|
207
|
+
value(createSyntheticEvent(element, event));
|
|
208
|
+
};
|
|
209
|
+
element.addEventListener(eventName, listener, options), nextListeners.push({
|
|
210
|
+
eventName,
|
|
211
|
+
listener,
|
|
212
|
+
options
|
|
213
|
+
});
|
|
214
|
+
}), nextListeners;
|
|
215
|
+
}
|
|
216
|
+
function useMenuElementProps(element, props) {
|
|
217
|
+
const previousPropsRef = useRef({}), listenersRef = useRef([]);
|
|
218
|
+
useIsomorphicLayoutEffect(() => {
|
|
219
|
+
const previousProps = previousPropsRef.current;
|
|
220
|
+
return syncClassName(element, previousProps.className, props.className), syncStyles(element, previousProps.style, props.style), syncAttributes(element, previousProps, props), listenersRef.current = syncEventListeners(element, listenersRef.current, props), previousPropsRef.current = props, () => {
|
|
221
|
+
listenersRef.current.forEach(({ eventName, listener, options }) => {
|
|
222
|
+
element.removeEventListener(eventName, listener, options);
|
|
223
|
+
}), listenersRef.current = [];
|
|
224
|
+
};
|
|
225
|
+
}, [element, props]);
|
|
226
|
+
}
|
|
227
|
+
const BubbleMenu = React.forwardRef(({ pluginKey, editor, updateDelay, resizeDelay, appendTo, shouldShow = null, getReferencedVirtualElement, options, children, ...restProps }, ref) => {
|
|
228
|
+
const menuEl = useRef(document.createElement("div")), resolvedPluginKey = useRef(getAutoPluginKey(pluginKey, "bubbleMenu")).current;
|
|
229
|
+
useMenuElementProps(menuEl.current, restProps), typeof ref == "function" ? ref(menuEl.current) : ref && (ref.current = menuEl.current);
|
|
230
|
+
const { editor: currentEditor } = useCurrentEditor(), pluginEditor = editor || currentEditor, bubbleMenuPluginProps = {
|
|
231
|
+
updateDelay,
|
|
232
|
+
resizeDelay,
|
|
233
|
+
appendTo,
|
|
234
|
+
pluginKey: resolvedPluginKey,
|
|
235
|
+
shouldShow,
|
|
236
|
+
getReferencedVirtualElement,
|
|
237
|
+
options
|
|
238
|
+
}, bubbleMenuPluginPropsRef = useRef(bubbleMenuPluginProps);
|
|
239
|
+
bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps;
|
|
240
|
+
const [pluginInitialized, setPluginInitialized] = useState(!1), skipFirstUpdateRef = useRef(!0);
|
|
241
|
+
return useEffect(() => {
|
|
242
|
+
if (pluginEditor != null && pluginEditor.isDestroyed) return;
|
|
243
|
+
if (!pluginEditor) {
|
|
244
|
+
console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
const bubbleMenuElement = menuEl.current;
|
|
248
|
+
bubbleMenuElement.style.visibility = "hidden", bubbleMenuElement.style.position = "absolute";
|
|
249
|
+
const plugin = BubbleMenuPlugin({
|
|
250
|
+
...bubbleMenuPluginPropsRef.current,
|
|
251
|
+
editor: pluginEditor,
|
|
252
|
+
element: bubbleMenuElement
|
|
253
|
+
});
|
|
254
|
+
pluginEditor.registerPlugin(plugin);
|
|
255
|
+
const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey;
|
|
256
|
+
return skipFirstUpdateRef.current = !0, setPluginInitialized(!0), () => {
|
|
257
|
+
setPluginInitialized(!1), pluginEditor.unregisterPlugin(createdPluginKey), window.requestAnimationFrame(() => {
|
|
258
|
+
bubbleMenuElement.parentNode && bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
|
|
259
|
+
});
|
|
260
|
+
};
|
|
261
|
+
}, [pluginEditor]), useEffect(() => {
|
|
262
|
+
if (!(!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed)) {
|
|
263
|
+
if (skipFirstUpdateRef.current) {
|
|
264
|
+
skipFirstUpdateRef.current = !1;
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
267
|
+
pluginEditor.view.dispatch(pluginEditor.state.tr.setMeta(resolvedPluginKey, {
|
|
268
|
+
type: "updateOptions",
|
|
269
|
+
options: bubbleMenuPluginPropsRef.current
|
|
270
|
+
}));
|
|
271
|
+
}
|
|
272
|
+
}, [
|
|
273
|
+
pluginInitialized,
|
|
274
|
+
pluginEditor,
|
|
275
|
+
updateDelay,
|
|
276
|
+
resizeDelay,
|
|
277
|
+
shouldShow,
|
|
278
|
+
options,
|
|
279
|
+
appendTo,
|
|
280
|
+
getReferencedVirtualElement,
|
|
281
|
+
resolvedPluginKey
|
|
282
|
+
]), createPortal(children, menuEl.current);
|
|
283
|
+
}), FloatingMenu = React.forwardRef(({ pluginKey, editor, updateDelay, resizeDelay, appendTo, shouldShow = null, options, children, ...restProps }, ref) => {
|
|
284
|
+
const menuEl = useRef(document.createElement("div")), resolvedPluginKey = useRef(getAutoPluginKey(pluginKey, "floatingMenu")).current;
|
|
285
|
+
useMenuElementProps(menuEl.current, restProps), typeof ref == "function" ? ref(menuEl.current) : ref && (ref.current = menuEl.current);
|
|
286
|
+
const { editor: currentEditor } = useCurrentEditor(), pluginEditor = editor || currentEditor, floatingMenuPluginProps = {
|
|
287
|
+
updateDelay,
|
|
288
|
+
resizeDelay,
|
|
289
|
+
appendTo,
|
|
290
|
+
pluginKey: resolvedPluginKey,
|
|
291
|
+
shouldShow,
|
|
292
|
+
options
|
|
293
|
+
}, floatingMenuPluginPropsRef = useRef(floatingMenuPluginProps);
|
|
294
|
+
floatingMenuPluginPropsRef.current = floatingMenuPluginProps;
|
|
295
|
+
const [pluginInitialized, setPluginInitialized] = useState(!1), skipFirstUpdateRef = useRef(!0);
|
|
296
|
+
return useEffect(() => {
|
|
297
|
+
if (pluginEditor != null && pluginEditor.isDestroyed) return;
|
|
298
|
+
if (!pluginEditor) {
|
|
299
|
+
console.warn("FloatingMenu component is not rendered inside of an editor component or does not have editor prop.");
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
const floatingMenuElement = menuEl.current;
|
|
303
|
+
floatingMenuElement.style.visibility = "hidden", floatingMenuElement.style.position = "absolute";
|
|
304
|
+
const plugin = FloatingMenuPlugin({
|
|
305
|
+
...floatingMenuPluginPropsRef.current,
|
|
306
|
+
editor: pluginEditor,
|
|
307
|
+
element: floatingMenuElement
|
|
308
|
+
});
|
|
309
|
+
pluginEditor.registerPlugin(plugin);
|
|
310
|
+
const createdPluginKey = floatingMenuPluginPropsRef.current.pluginKey;
|
|
311
|
+
return skipFirstUpdateRef.current = !0, setPluginInitialized(!0), () => {
|
|
312
|
+
setPluginInitialized(!1), pluginEditor.unregisterPlugin(createdPluginKey), window.requestAnimationFrame(() => {
|
|
313
|
+
floatingMenuElement.parentNode && floatingMenuElement.parentNode.removeChild(floatingMenuElement);
|
|
314
|
+
});
|
|
315
|
+
};
|
|
316
|
+
}, [pluginEditor]), useEffect(() => {
|
|
317
|
+
if (!(!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed)) {
|
|
318
|
+
if (skipFirstUpdateRef.current) {
|
|
319
|
+
skipFirstUpdateRef.current = !1;
|
|
320
|
+
return;
|
|
321
|
+
}
|
|
322
|
+
pluginEditor.view.dispatch(pluginEditor.state.tr.setMeta(resolvedPluginKey, {
|
|
323
|
+
type: "updateOptions",
|
|
324
|
+
options: floatingMenuPluginPropsRef.current
|
|
325
|
+
}));
|
|
326
|
+
}
|
|
327
|
+
}, [
|
|
328
|
+
pluginInitialized,
|
|
329
|
+
pluginEditor,
|
|
330
|
+
updateDelay,
|
|
331
|
+
resizeDelay,
|
|
332
|
+
shouldShow,
|
|
333
|
+
options,
|
|
334
|
+
appendTo,
|
|
335
|
+
resolvedPluginKey
|
|
336
|
+
]), createPortal(children, menuEl.current);
|
|
337
|
+
});
|
|
338
|
+
export {
|
|
339
|
+
BubbleMenu,
|
|
340
|
+
FloatingMenu
|
|
341
|
+
};
|