@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.
@@ -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
- if (divRef.current) {
136
- divRef.current.style.left = '-9999px';
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
- setLinkDom(null);
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
- if (divRef.current) {
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
- clearTimeout(clearTimerRef.current);
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
- clearTimeout(clearTimerRef.current);
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 updatePosition();
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', updatePosition);
50
+ window.addEventListener('resize', updateMathPosition);
54
51
  return function () {
55
52
  resizeObserver.disconnect();
56
- window.removeEventListener('resize', updatePosition);
53
+ window.removeEventListener('resize', updateMathPosition);
57
54
  };
58
55
  }, [mathDOM, prev, isBlockMode, onFocus]);
59
56
 
60
57
  // 当没有 mathDOM 时,隐藏容器
61
58
  useEffect(function () {
62
- if (!mathDOM && divRef.current) {
63
- divRef.current.style.left = "-9999px";
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 inset-block-start: -9999px;\n inset-inline-start: -9999px;\n\n width: 320px;\n\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),
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
  });
@@ -11,6 +11,7 @@ import { type ReactNode } from 'react';
11
11
  interface TableCellActionMenuProps {
12
12
  cellMerge?: boolean;
13
13
  children: ReactNode;
14
+ className?: string;
14
15
  editor: LexicalEditor;
15
16
  tableCellNode: TableCellNode;
16
17
  }
@@ -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 && anchorElem) {
119
- var tableCellRect = tableCellParentNodeDOM.getBoundingClientRect();
120
- var anchorRect = anchorElem.getBoundingClientRect();
121
- var top = tableCellRect.top - anchorRect.top;
122
- var left = tableCellRect.right - anchorRect.left;
123
- menu.style.transform = "translate(".concat(left, "px, ").concat(top, "px)");
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: 'small',
172
+ size: 12,
169
173
  style: {
170
- position: 'absolute',
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 background: red;\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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/editor",
3
- "version": "1.8.3",
3
+ "version": "1.8.5",
4
4
  "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
5
5
  "keywords": [
6
6
  "lobehub",