@lobehub/editor 1.8.3 → 1.8.5
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/es/plugins/link/react/components/LinkEdit.js +37 -73
- package/es/plugins/link/react/components/LinkToolbar.js +56 -72
- package/es/plugins/math/react/components/MathEditorContainer.js +24 -29
- package/es/plugins/math/react/style.js +1 -1
- package/es/plugins/table/react/TableActionMenu/ActionMenu.d.ts +1 -0
- package/es/plugins/table/react/TableActionMenu/ActionMenu.js +1 -25
- package/es/plugins/table/react/TableActionMenu/index.js +12 -10
- package/es/plugins/table/react/TableActionMenu/style.js +1 -1
- package/es/utils/updatePosition.d.ts +9 -0
- package/es/utils/updatePosition.js +27 -0
- package/package.json +1 -1
|
@@ -4,7 +4,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
4
4
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
5
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import { computePosition, flip, offset, shift } from '@floating-ui/dom';
|
|
8
7
|
import { mergeRegister } from '@lexical/utils';
|
|
9
8
|
import { Block, Button, Hotkey, Icon, Input, Text } from '@lobehub/ui';
|
|
10
9
|
import { COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, createCommand } from 'lexical';
|
|
@@ -13,6 +12,7 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
|
13
12
|
import { Flexbox } from 'react-layout-kit';
|
|
14
13
|
import { useLexicalEditor } from "../../../../editor-kernel/react";
|
|
15
14
|
import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
|
|
15
|
+
import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
|
|
16
16
|
import { UPDATE_LINK_TEXT_COMMAND } from "../../command";
|
|
17
17
|
import { useStyles } from "../style";
|
|
18
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -44,63 +44,17 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
|
|
|
44
44
|
// 取消编辑,不保存更改
|
|
45
45
|
var handleCancel = useCallback(function () {
|
|
46
46
|
if (!editor) return;
|
|
47
|
-
|
|
48
|
-
// 将焦点返回到编辑器
|
|
49
47
|
editor.focus();
|
|
50
|
-
|
|
51
|
-
// 隐藏编辑面板
|
|
52
|
-
if (divRef.current) {
|
|
53
|
-
divRef.current.style.left = '-9999px';
|
|
54
|
-
divRef.current.style.top = '-9999px';
|
|
55
|
-
}
|
|
48
|
+
cleanPosition(divRef.current);
|
|
56
49
|
linkNodeRef.current = null;
|
|
57
50
|
setLinkUrl('');
|
|
58
51
|
setLinkText('');
|
|
59
52
|
setLinkDom(null);
|
|
60
53
|
}, [editor]);
|
|
61
|
-
useEffect(function () {
|
|
62
|
-
if (!linkDom || !divRef.current) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
computePosition(linkDom, divRef.current, {
|
|
66
|
-
middleware: [offset(8), flip(), shift()],
|
|
67
|
-
placement: 'bottom-start'
|
|
68
|
-
}).then(function (_ref2) {
|
|
69
|
-
var x = _ref2.x,
|
|
70
|
-
y = _ref2.y;
|
|
71
|
-
if (divRef.current) {
|
|
72
|
-
divRef.current.style.left = "".concat(x, "px");
|
|
73
|
-
divRef.current.style.top = "".concat(y, "px");
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
}, [linkDom]);
|
|
77
|
-
|
|
78
|
-
// 点击编辑器外部时关闭面板
|
|
79
|
-
useEffect(function () {
|
|
80
|
-
var handlePointerDown = function handlePointerDown(event) {
|
|
81
|
-
if (!divRef.current) return;
|
|
82
|
-
var target = event.target;
|
|
83
|
-
if (!target) return;
|
|
84
|
-
// 点击面板内部忽略
|
|
85
|
-
if (divRef.current.contains(target)) return;
|
|
86
|
-
// 面板打开时(存在 linkDom)才触发关闭
|
|
87
|
-
if (linkDom) {
|
|
88
|
-
handleCancel();
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
document.addEventListener('mousedown', handlePointerDown);
|
|
92
|
-
document.addEventListener('touchstart', handlePointerDown);
|
|
93
|
-
return function () {
|
|
94
|
-
document.removeEventListener('mousedown', handlePointerDown);
|
|
95
|
-
document.removeEventListener('touchstart', handlePointerDown);
|
|
96
|
-
};
|
|
97
|
-
}, [handleCancel, linkDom]);
|
|
98
54
|
|
|
99
55
|
// 提取提交逻辑到独立函数
|
|
100
56
|
var handleSubmit = useCallback(function () {
|
|
101
|
-
if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor)
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
57
|
+
if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor) return;
|
|
104
58
|
var linkNode = linkNodeRef.current;
|
|
105
59
|
var input = linkInputRef.current;
|
|
106
60
|
var inputDOM = input.input;
|
|
@@ -132,15 +86,8 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
|
|
|
132
86
|
editor.focus();
|
|
133
87
|
|
|
134
88
|
// 隐藏编辑面板
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
divRef.current.style.top = '-9999px';
|
|
138
|
-
}
|
|
139
|
-
linkNodeRef.current = null;
|
|
140
|
-
setLinkUrl('');
|
|
141
|
-
setLinkText('');
|
|
142
|
-
setLinkDom(null);
|
|
143
|
-
}, [editor, linkNodeRef, linkInputRef, linkTextInputRef]);
|
|
89
|
+
handleCancel();
|
|
90
|
+
}, [editor, linkNodeRef, linkInputRef, linkTextInputRef, handleCancel]);
|
|
144
91
|
var handleKeyDown = useCallback(function (event) {
|
|
145
92
|
if (!linkNodeRef.current || !linkInputRef.current || !linkTextInputRef.current || !editor) {
|
|
146
93
|
return;
|
|
@@ -194,16 +141,39 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
|
|
|
194
141
|
// No default
|
|
195
142
|
}
|
|
196
143
|
}, [linkNodeRef, linkInputRef, handleSubmit, handleCancel]);
|
|
144
|
+
useEffect(function () {
|
|
145
|
+
if (linkDom) {
|
|
146
|
+
updatePosition({
|
|
147
|
+
floating: divRef.current,
|
|
148
|
+
reference: linkDom
|
|
149
|
+
});
|
|
150
|
+
} else {
|
|
151
|
+
cleanPosition(divRef.current);
|
|
152
|
+
}
|
|
153
|
+
}, [linkDom]);
|
|
154
|
+
|
|
155
|
+
// 点击编辑器外部时关闭面板
|
|
156
|
+
useEffect(function () {
|
|
157
|
+
var handlePointerDown = function handlePointerDown(event) {
|
|
158
|
+
if (!divRef.current) return;
|
|
159
|
+
var target = event.target;
|
|
160
|
+
if (!target) return;
|
|
161
|
+
// 点击面板内部忽略
|
|
162
|
+
if (divRef.current.contains(target)) return;
|
|
163
|
+
// 面板打开时(存在 linkDom)才触发关闭
|
|
164
|
+
if (linkDom) handleCancel();
|
|
165
|
+
};
|
|
166
|
+
document.addEventListener('mousedown', handlePointerDown);
|
|
167
|
+
document.addEventListener('touchstart', handlePointerDown);
|
|
168
|
+
return function () {
|
|
169
|
+
document.removeEventListener('mousedown', handlePointerDown);
|
|
170
|
+
document.removeEventListener('touchstart', handlePointerDown);
|
|
171
|
+
};
|
|
172
|
+
}, [linkDom]);
|
|
197
173
|
useLexicalEditor(function (editor) {
|
|
198
174
|
return mergeRegister(editor.registerCommand(EDIT_LINK_COMMAND, function (payload) {
|
|
199
175
|
if (!payload.linkNode || !payload.linkNodeDOM) {
|
|
200
|
-
|
|
201
|
-
setLinkUrl('');
|
|
202
|
-
setLinkText('');
|
|
203
|
-
if (divRef.current) {
|
|
204
|
-
divRef.current.style.left = '-9999px';
|
|
205
|
-
divRef.current.style.top = '-9999px';
|
|
206
|
-
}
|
|
176
|
+
handleCancel();
|
|
207
177
|
return false;
|
|
208
178
|
}
|
|
209
179
|
linkNodeRef.current = payload.linkNode;
|
|
@@ -212,14 +182,7 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
|
|
|
212
182
|
setLinkDom(payload.linkNodeDOM);
|
|
213
183
|
return true;
|
|
214
184
|
}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_ESCAPE_COMMAND, function () {
|
|
215
|
-
|
|
216
|
-
divRef.current.style.left = '-9999px';
|
|
217
|
-
divRef.current.style.top = '-9999px';
|
|
218
|
-
}
|
|
219
|
-
linkNodeRef.current = null;
|
|
220
|
-
setLinkUrl('');
|
|
221
|
-
setLinkText('');
|
|
222
|
-
setLinkDom(null);
|
|
185
|
+
handleCancel();
|
|
223
186
|
return true;
|
|
224
187
|
}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_TAB_COMMAND, function (payload) {
|
|
225
188
|
if (linkNodeRef.current && linkTextInputRef.current) {
|
|
@@ -231,6 +194,7 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
|
|
|
231
194
|
return false;
|
|
232
195
|
}, COMMAND_PRIORITY_NORMAL));
|
|
233
196
|
}, []);
|
|
197
|
+
if (!linkNodeRef.current) return null;
|
|
234
198
|
return /*#__PURE__*/_jsxs(Block, {
|
|
235
199
|
className: styles.linkEdit,
|
|
236
200
|
ref: divRef,
|
|
@@ -5,7 +5,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
5
5
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
6
6
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
7
7
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
-
import { computePosition, flip, offset, shift } from '@floating-ui/dom';
|
|
9
8
|
import { mergeRegister } from '@lexical/utils';
|
|
10
9
|
import { ActionIconGroup } from '@lobehub/ui';
|
|
11
10
|
import { $createRangeSelection, $getNodeByKey, $getSelection, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_NORMAL } from 'lexical';
|
|
@@ -14,6 +13,7 @@ import { memo, useCallback, useRef, useState } from 'react';
|
|
|
14
13
|
import { useLexicalEditor } from "../../../../editor-kernel/react";
|
|
15
14
|
import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
|
|
16
15
|
import { getSelectedNode } from "../../utils";
|
|
16
|
+
import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
|
|
17
17
|
import { $isLinkNode, HOVER_LINK_COMMAND, HOVER_OUT_LINK_COMMAND, TOGGLE_LINK_COMMAND } from "../../node/LinkNode";
|
|
18
18
|
import { useStyles } from "../style";
|
|
19
19
|
import { EDIT_LINK_COMMAND } from "./LinkEdit";
|
|
@@ -33,67 +33,6 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
|
|
|
33
33
|
});
|
|
34
34
|
var t = useTranslation();
|
|
35
35
|
var clearTimerRef = useRef(-1);
|
|
36
|
-
useLexicalEditor(function (editor) {
|
|
37
|
-
return mergeRegister(editor.registerUpdateListener(function () {
|
|
38
|
-
var selection = editor.read(function () {
|
|
39
|
-
return $getSelection();
|
|
40
|
-
});
|
|
41
|
-
if (!selection) return;
|
|
42
|
-
if ($isRangeSelection(selection)) {
|
|
43
|
-
// Update links for UI components
|
|
44
|
-
editor.read(function () {
|
|
45
|
-
var node = getSelectedNode(selection);
|
|
46
|
-
var parent = node.getParent();
|
|
47
|
-
var isLink = $isLinkNode(parent) || $isLinkNode(node);
|
|
48
|
-
state.current.isLink = isLink;
|
|
49
|
-
if (isLink) {
|
|
50
|
-
var _linkNode = $isLinkNode(parent) ? parent : node;
|
|
51
|
-
editor.dispatchCommand(EDIT_LINK_COMMAND, {
|
|
52
|
-
linkNode: _linkNode,
|
|
53
|
-
linkNodeDOM: editor.getElementByKey(_linkNode.getKey())
|
|
54
|
-
});
|
|
55
|
-
} else {
|
|
56
|
-
editor.dispatchCommand(EDIT_LINK_COMMAND, {
|
|
57
|
-
linkNode: null,
|
|
58
|
-
linkNodeDOM: null
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
} else {
|
|
63
|
-
state.current.isLink = false;
|
|
64
|
-
}
|
|
65
|
-
}), editor.registerCommand(HOVER_LINK_COMMAND, function (payload) {
|
|
66
|
-
if (!payload.event.target || divRef.current === null) {
|
|
67
|
-
return false;
|
|
68
|
-
}
|
|
69
|
-
// Cancel any pending hide timers when hovering a link again
|
|
70
|
-
clearTimeout(clearTimerRef.current);
|
|
71
|
-
setLinkNode(payload.linkNode);
|
|
72
|
-
computePosition(payload.event.target, divRef.current, {
|
|
73
|
-
middleware: [offset(5), flip(), shift()],
|
|
74
|
-
placement: 'top-start'
|
|
75
|
-
}).then(function (_ref2) {
|
|
76
|
-
var x = _ref2.x,
|
|
77
|
-
y = _ref2.y;
|
|
78
|
-
if (!payload.event.target || divRef.current === null) {
|
|
79
|
-
return false;
|
|
80
|
-
}
|
|
81
|
-
LinkRef.current = payload.event.target;
|
|
82
|
-
divRef.current.style.left = "".concat(x, "px");
|
|
83
|
-
divRef.current.style.top = "".concat(y, "px");
|
|
84
|
-
});
|
|
85
|
-
return false;
|
|
86
|
-
}, COMMAND_PRIORITY_NORMAL), editor.registerCommand(HOVER_OUT_LINK_COMMAND, function () {
|
|
87
|
-
clearTimeout(clearTimerRef.current);
|
|
88
|
-
clearTimerRef.current = setTimeout(function () {
|
|
89
|
-
if (divRef.current) {
|
|
90
|
-
divRef.current.style.left = '-9999px';
|
|
91
|
-
divRef.current.style.top = '-9999px';
|
|
92
|
-
}
|
|
93
|
-
}, 300);
|
|
94
|
-
return true;
|
|
95
|
-
}, COMMAND_PRIORITY_NORMAL));
|
|
96
|
-
}, []);
|
|
97
36
|
var handleEdit = useCallback(function () {
|
|
98
37
|
if (!linkNode) return;
|
|
99
38
|
editor.dispatchCommand(EDIT_LINK_COMMAND, {
|
|
@@ -101,6 +40,10 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
|
|
|
101
40
|
linkNodeDOM: editor.getElementByKey(linkNode.getKey())
|
|
102
41
|
});
|
|
103
42
|
}, [editor, linkNode]);
|
|
43
|
+
var handleCancel = useCallback(function () {
|
|
44
|
+
clearTimeout(clearTimerRef.current);
|
|
45
|
+
cleanPosition(divRef.current);
|
|
46
|
+
}, []);
|
|
104
47
|
var handleRemove = useCallback(function () {
|
|
105
48
|
if (!linkNode) return;
|
|
106
49
|
editor.update(function () {
|
|
@@ -146,6 +89,55 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
|
|
|
146
89
|
});
|
|
147
90
|
window.open(url, '_blank');
|
|
148
91
|
}, [editor, linkNode]);
|
|
92
|
+
useLexicalEditor(function (editor) {
|
|
93
|
+
return mergeRegister(editor.registerUpdateListener(function () {
|
|
94
|
+
var selection = editor.read(function () {
|
|
95
|
+
return $getSelection();
|
|
96
|
+
});
|
|
97
|
+
if (!selection) return;
|
|
98
|
+
if ($isRangeSelection(selection)) {
|
|
99
|
+
// Update links for UI components
|
|
100
|
+
editor.read(function () {
|
|
101
|
+
var node = getSelectedNode(selection);
|
|
102
|
+
var parent = node.getParent();
|
|
103
|
+
var isLink = $isLinkNode(parent) || $isLinkNode(node);
|
|
104
|
+
state.current.isLink = isLink;
|
|
105
|
+
if (isLink) {
|
|
106
|
+
var _linkNode = $isLinkNode(parent) ? parent : node;
|
|
107
|
+
editor.dispatchCommand(EDIT_LINK_COMMAND, {
|
|
108
|
+
linkNode: _linkNode,
|
|
109
|
+
linkNodeDOM: editor.getElementByKey(_linkNode.getKey())
|
|
110
|
+
});
|
|
111
|
+
} else {
|
|
112
|
+
editor.dispatchCommand(EDIT_LINK_COMMAND, {
|
|
113
|
+
linkNode: null,
|
|
114
|
+
linkNodeDOM: null
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
} else {
|
|
119
|
+
state.current.isLink = false;
|
|
120
|
+
}
|
|
121
|
+
}), editor.registerCommand(HOVER_LINK_COMMAND, function (payload) {
|
|
122
|
+
if (!payload.event.target || divRef.current === null) return false;
|
|
123
|
+
// Cancel any pending hide timers when hovering a link again
|
|
124
|
+
clearTimeout(clearTimerRef.current);
|
|
125
|
+
setLinkNode(payload.linkNode);
|
|
126
|
+
updatePosition({
|
|
127
|
+
callback: function callback() {
|
|
128
|
+
LinkRef.current = payload.event.target;
|
|
129
|
+
},
|
|
130
|
+
floating: divRef.current,
|
|
131
|
+
offset: 4,
|
|
132
|
+
placement: 'top-start',
|
|
133
|
+
reference: payload.event.target
|
|
134
|
+
});
|
|
135
|
+
return false;
|
|
136
|
+
}, COMMAND_PRIORITY_NORMAL), editor.registerCommand(HOVER_OUT_LINK_COMMAND, function () {
|
|
137
|
+
clearTimerRef.current = setTimeout(handleCancel, 300);
|
|
138
|
+
return true;
|
|
139
|
+
}, COMMAND_PRIORITY_NORMAL));
|
|
140
|
+
}, []);
|
|
149
141
|
return /*#__PURE__*/_jsx(ActionIconGroup, {
|
|
150
142
|
className: styles.linkToolbar,
|
|
151
143
|
items: [{
|
|
@@ -164,22 +156,14 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
|
|
|
164
156
|
label: t('link.unlink'),
|
|
165
157
|
onClick: function onClick() {
|
|
166
158
|
handleRemove();
|
|
167
|
-
|
|
168
|
-
if (divRef.current) {
|
|
169
|
-
divRef.current.style.left = '-9999px';
|
|
170
|
-
divRef.current.style.top = '-9999px';
|
|
171
|
-
}
|
|
159
|
+
handleCancel();
|
|
172
160
|
}
|
|
173
161
|
}],
|
|
174
162
|
onMouseEnter: function onMouseEnter() {
|
|
175
163
|
clearTimeout(clearTimerRef.current);
|
|
176
164
|
},
|
|
177
165
|
onMouseLeave: function onMouseLeave() {
|
|
178
|
-
|
|
179
|
-
if (divRef.current) {
|
|
180
|
-
divRef.current.style.left = '-9999px';
|
|
181
|
-
divRef.current.style.top = '-9999px';
|
|
182
|
-
}
|
|
166
|
+
handleCancel();
|
|
183
167
|
},
|
|
184
168
|
ref: divRef,
|
|
185
169
|
shadow: true,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { computePosition, flip, offset, shift } from '@floating-ui/dom';
|
|
2
1
|
import { Block } from '@lobehub/ui';
|
|
3
2
|
import { memo, useEffect, useRef } from 'react';
|
|
3
|
+
import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
|
|
4
4
|
import { useStyles } from "../style";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
|
|
@@ -12,34 +12,31 @@ var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
|
|
|
12
12
|
var divRef = useRef(null);
|
|
13
13
|
var _useStyles = useStyles(),
|
|
14
14
|
styles = _useStyles.styles;
|
|
15
|
+
var updateMathPosition = function updateMathPosition() {
|
|
16
|
+
return updatePosition({
|
|
17
|
+
callback: function callback() {
|
|
18
|
+
if (!divRef.current || !mathDOM) return;
|
|
19
|
+
if (!isBlockMode) {
|
|
20
|
+
divRef.current.style.width = '';
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
var editorContainer = mathDOM.closest('[contenteditable="true"]');
|
|
24
|
+
if (editorContainer) {
|
|
25
|
+
var containerRect = editorContainer.getBoundingClientRect();
|
|
26
|
+
divRef.current.style.width = "".concat(containerRect.width, "px");
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
floating: divRef.current,
|
|
30
|
+
reference: mathDOM
|
|
31
|
+
});
|
|
32
|
+
};
|
|
15
33
|
useEffect(function () {
|
|
16
34
|
if (!mathDOM || !divRef.current) return;
|
|
17
35
|
var floating = divRef.current;
|
|
18
|
-
var updatePosition = function updatePosition() {
|
|
19
|
-
if (!mathDOM || !floating) return;
|
|
20
|
-
computePosition(mathDOM, floating, {
|
|
21
|
-
middleware: [offset(8), flip(), shift()],
|
|
22
|
-
placement: 'bottom-start'
|
|
23
|
-
}).then(function (_ref2) {
|
|
24
|
-
var x = _ref2.x,
|
|
25
|
-
y = _ref2.y;
|
|
26
|
-
if (!floating) return;
|
|
27
|
-
floating.style.left = "".concat(x, "px");
|
|
28
|
-
floating.style.top = "".concat(y, "px");
|
|
29
|
-
floating.style.width = '';
|
|
30
|
-
if (isBlockMode) {
|
|
31
|
-
var _editorContainer = mathDOM.closest('[contenteditable="true"]');
|
|
32
|
-
if (_editorContainer) {
|
|
33
|
-
var containerRect = _editorContainer.getBoundingClientRect();
|
|
34
|
-
floating.style.width = "".concat(containerRect.width, "px");
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
36
|
|
|
40
37
|
// 监听尺寸变化,随内容变化重新定位
|
|
41
38
|
var resizeObserver = new ResizeObserver(function () {
|
|
42
|
-
return
|
|
39
|
+
return updateMathPosition();
|
|
43
40
|
});
|
|
44
41
|
resizeObserver.observe(mathDOM);
|
|
45
42
|
resizeObserver.observe(floating);
|
|
@@ -50,19 +47,17 @@ var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
|
|
|
50
47
|
}
|
|
51
48
|
|
|
52
49
|
// 窗口尺寸变化时也重新定位
|
|
53
|
-
window.addEventListener('resize',
|
|
50
|
+
window.addEventListener('resize', updateMathPosition);
|
|
54
51
|
return function () {
|
|
55
52
|
resizeObserver.disconnect();
|
|
56
|
-
window.removeEventListener('resize',
|
|
53
|
+
window.removeEventListener('resize', updateMathPosition);
|
|
57
54
|
};
|
|
58
55
|
}, [mathDOM, prev, isBlockMode, onFocus]);
|
|
59
56
|
|
|
60
57
|
// 当没有 mathDOM 时,隐藏容器
|
|
61
58
|
useEffect(function () {
|
|
62
|
-
if (
|
|
63
|
-
|
|
64
|
-
divRef.current.style.top = "-9999px";
|
|
65
|
-
}
|
|
59
|
+
if (mathDOM || !divRef.current) return;
|
|
60
|
+
cleanPosition(divRef.current);
|
|
66
61
|
}, [mathDOM]);
|
|
67
62
|
return /*#__PURE__*/_jsx(Block, {
|
|
68
63
|
className: styles.mathEditor,
|
|
@@ -10,7 +10,7 @@ export var useStyles = createStyles(function (_ref) {
|
|
|
10
10
|
return {
|
|
11
11
|
mathInline: cx(latex, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-block;\n border-radius: calc(var(--lobe-markdown-border-radius) * 0.5px);\n "])))),
|
|
12
12
|
mathBlock: cx(latex, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n overflow: auto hidden;\n display: block;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n white-space: nowrap;\n "])))),
|
|
13
|
-
mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 999;\n
|
|
13
|
+
mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 999;\n width: 320px;\n background: ", ";\n\n textarea {\n width: 100%;\n\n font-family: ", ";\n font-size: 13px;\n\n background: transparent !important;\n\n transition: none !important;\n }\n "])), token.colorBgElevated, token.fontFamilyCode),
|
|
14
14
|
mathEditorFooter: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-block-start: 1px solid ", ";\n background: ", ";\n "])), token.colorBorderSecondary, token.colorFillQuaternary)
|
|
15
15
|
};
|
|
16
16
|
});
|
|
@@ -200,31 +200,7 @@ var TableActionMenu = /*#__PURE__*/memo(function (_ref) {
|
|
|
200
200
|
|
|
201
201
|
// Create menu items array with useMemo for performance
|
|
202
202
|
var menuItems = useMemo(function () {
|
|
203
|
-
return [
|
|
204
|
-
// // Merge/Unmerge cells (conditional)
|
|
205
|
-
// ...(cellMerge && canMergeCells
|
|
206
|
-
// ? [
|
|
207
|
-
// {
|
|
208
|
-
// key: 'table-merge-cells',
|
|
209
|
-
// label: 'Merge cells',
|
|
210
|
-
// onClick: () => mergeTableCellsAtSelection(),
|
|
211
|
-
// },
|
|
212
|
-
// ]
|
|
213
|
-
// : []),
|
|
214
|
-
// ...(cellMerge && canUnmergeCell
|
|
215
|
-
// ? [
|
|
216
|
-
// {
|
|
217
|
-
// key: 'table-unmerge-cells',
|
|
218
|
-
// label: 'Unmerge cells',
|
|
219
|
-
// onClick: () => unmergeTableCellsAtSelection(),
|
|
220
|
-
// },
|
|
221
|
-
// ]
|
|
222
|
-
// : []),
|
|
223
|
-
// // Divider after merge operations (if any merge operations exist)
|
|
224
|
-
// ...(cellMerge && (canMergeCells || canUnmergeCell) ? [{ type: 'divider' as const }] : []),
|
|
225
|
-
//
|
|
226
|
-
// // Row operations
|
|
227
|
-
{
|
|
203
|
+
return [{
|
|
228
204
|
icon: PanelTopCloseIcon,
|
|
229
205
|
key: 'table-insert-row-above',
|
|
230
206
|
label: t("table.insertRowAbove", {
|
|
@@ -18,6 +18,7 @@ import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, SELECTION_
|
|
|
18
18
|
import { ChevronDown } from 'lucide-react';
|
|
19
19
|
import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
20
20
|
import { useAnchor } from "../../../../editor-kernel/react/useAnchor";
|
|
21
|
+
import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
|
|
21
22
|
import ActionMenu from "./ActionMenu";
|
|
22
23
|
import { useStyles } from "./style";
|
|
23
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -115,12 +116,15 @@ var TableActionMenu = /*#__PURE__*/memo(function (_ref) {
|
|
|
115
116
|
var enabled = !tableObserver || !tableObserver.isSelecting;
|
|
116
117
|
menu.classList.toggle('table-cell-action-button-container--active', enabled);
|
|
117
118
|
menu.classList.toggle('table-cell-action-button-container--inactive', !enabled);
|
|
118
|
-
if (enabled
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
119
|
+
if (enabled) {
|
|
120
|
+
updatePosition({
|
|
121
|
+
floating: menu,
|
|
122
|
+
offset: 0,
|
|
123
|
+
placement: 'top-end',
|
|
124
|
+
reference: tableCellParentNodeDOM
|
|
125
|
+
});
|
|
126
|
+
} else {
|
|
127
|
+
cleanPosition(menu);
|
|
124
128
|
}
|
|
125
129
|
}, [editor, anchorElem, checkTableCellOverflow]);
|
|
126
130
|
useEffect(function () {
|
|
@@ -165,11 +169,9 @@ var TableActionMenu = /*#__PURE__*/memo(function (_ref) {
|
|
|
165
169
|
children: /*#__PURE__*/_jsx(ActionIcon, {
|
|
166
170
|
glass: true,
|
|
167
171
|
icon: ChevronDown,
|
|
168
|
-
size:
|
|
172
|
+
size: 12,
|
|
169
173
|
style: {
|
|
170
|
-
|
|
171
|
-
right: 4,
|
|
172
|
-
top: 4
|
|
174
|
+
transform: 'postionX(2px)'
|
|
173
175
|
},
|
|
174
176
|
variant: 'filled'
|
|
175
177
|
})
|
|
@@ -3,5 +3,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
4
|
export var useStyles = createStyles(function (_ref) {
|
|
5
5
|
var css = _ref.css;
|
|
6
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n will-change: transform;\n\n position: absolute;\n z-index: 3;\n inset-block-start: 0;\n inset-inline-start: 0;\n\n
|
|
6
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n will-change: transform;\n\n position: absolute;\n z-index: 3;\n inset-block-start: 0;\n inset-inline-start: 0;\n transform: translateY(100%);\n\n padding: 2px;\n "])));
|
|
7
7
|
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ComputePositionReturn, FloatingElement, Placement, ReferenceElement, offset } from '@floating-ui/dom';
|
|
2
|
+
export declare const updatePosition: ({ floating, placement, reference, offset: offsetNumber, callback, }: {
|
|
3
|
+
callback?: ((props: ComputePositionReturn) => void) | undefined;
|
|
4
|
+
floating: FloatingElement | null;
|
|
5
|
+
offset?: number | undefined;
|
|
6
|
+
placement?: Placement | undefined;
|
|
7
|
+
reference: ReferenceElement | null;
|
|
8
|
+
}) => Promise<false | undefined> | undefined;
|
|
9
|
+
export declare const cleanPosition: (floating: FloatingElement | null) => false | undefined;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { computePosition, flip, offset, shift } from '@floating-ui/dom';
|
|
2
|
+
export var updatePosition = function updatePosition(_ref) {
|
|
3
|
+
var floating = _ref.floating,
|
|
4
|
+
_ref$placement = _ref.placement,
|
|
5
|
+
placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
|
|
6
|
+
reference = _ref.reference,
|
|
7
|
+
_ref$offset = _ref.offset,
|
|
8
|
+
offsetNumber = _ref$offset === void 0 ? 8 : _ref$offset,
|
|
9
|
+
callback = _ref.callback;
|
|
10
|
+
if (!reference || !floating) return;
|
|
11
|
+
return computePosition(reference, floating, {
|
|
12
|
+
middleware: [offset(offsetNumber), flip(), shift()],
|
|
13
|
+
placement: placement
|
|
14
|
+
}).then(function (props) {
|
|
15
|
+
if (!floating) return false;
|
|
16
|
+
var x = props.x,
|
|
17
|
+
y = props.y;
|
|
18
|
+
floating.style.left = "".concat(x, "px");
|
|
19
|
+
floating.style.top = "".concat(y, "px");
|
|
20
|
+
callback === null || callback === void 0 || callback(props);
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
export var cleanPosition = function cleanPosition(floating) {
|
|
24
|
+
if (!floating) return false;
|
|
25
|
+
floating.style.left = '-9999px';
|
|
26
|
+
floating.style.top = '-9999px';
|
|
27
|
+
};
|
package/package.json
CHANGED