@lobehub/editor 3.13.0 → 3.13.2
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.
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
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
|
+
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
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { Flexbox, Popover } from '@lobehub/ui';
|
|
8
|
+
import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
3
9
|
import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
|
|
4
10
|
import { styles } from "../style";
|
|
5
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -9,66 +15,84 @@ var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
|
|
|
9
15
|
mathDOM = _ref.mathDOM,
|
|
10
16
|
onFocus = _ref.onFocus,
|
|
11
17
|
prev = _ref.prev;
|
|
12
|
-
var
|
|
13
|
-
var
|
|
18
|
+
var anchorRef = useRef(null);
|
|
19
|
+
var _useState = useState(undefined),
|
|
20
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
21
|
+
blockWidth = _useState2[0],
|
|
22
|
+
setBlockWidth = _useState2[1];
|
|
23
|
+
var updateBlockWidth = useCallback(function () {
|
|
24
|
+
if (!isBlockMode) {
|
|
25
|
+
setBlockWidth(undefined);
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
var editorContainer = mathDOM === null || mathDOM === void 0 ? void 0 : mathDOM.closest('[contenteditable="true"]');
|
|
29
|
+
if (editorContainer) {
|
|
30
|
+
setBlockWidth(editorContainer.getBoundingClientRect().width);
|
|
31
|
+
}
|
|
32
|
+
}, [isBlockMode, mathDOM]);
|
|
33
|
+
var updateAnchorPosition = useCallback(function () {
|
|
14
34
|
return updatePosition({
|
|
15
35
|
callback: function callback() {
|
|
16
|
-
if (!
|
|
36
|
+
if (!anchorRef.current || !mathDOM) return;
|
|
17
37
|
// 展示的时候聚焦
|
|
18
38
|
onFocus === null || onFocus === void 0 || onFocus();
|
|
19
|
-
|
|
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
|
-
}
|
|
39
|
+
updateBlockWidth();
|
|
28
40
|
},
|
|
29
|
-
floating:
|
|
41
|
+
floating: anchorRef.current,
|
|
42
|
+
placement: isBlockMode ? 'bottom-start' : 'bottom',
|
|
30
43
|
reference: mathDOM
|
|
31
44
|
});
|
|
32
|
-
};
|
|
45
|
+
}, [isBlockMode, mathDOM, onFocus, updateBlockWidth]);
|
|
33
46
|
useEffect(function () {
|
|
34
|
-
if (!mathDOM || !
|
|
35
|
-
var floating =
|
|
47
|
+
if (!mathDOM || !anchorRef.current) return;
|
|
48
|
+
var floating = anchorRef.current;
|
|
36
49
|
|
|
37
|
-
//
|
|
50
|
+
// 监听尺寸变化，仅更新宽度/位置（不跟随 trigger 尺寸变化）
|
|
38
51
|
var resizeObserver = new ResizeObserver(function () {
|
|
39
|
-
|
|
52
|
+
updateBlockWidth();
|
|
40
53
|
});
|
|
41
|
-
resizeObserver.observe(mathDOM);
|
|
42
54
|
resizeObserver.observe(floating);
|
|
43
55
|
var editorContainer = null;
|
|
44
56
|
if (isBlockMode) {
|
|
45
57
|
editorContainer = mathDOM.closest('[contenteditable="true"]');
|
|
46
58
|
if (editorContainer) resizeObserver.observe(editorContainer);
|
|
47
59
|
}
|
|
60
|
+
updateAnchorPosition();
|
|
48
61
|
|
|
49
62
|
// 窗口尺寸变化时也重新定位
|
|
50
|
-
window.addEventListener('resize',
|
|
63
|
+
window.addEventListener('resize', updateAnchorPosition);
|
|
51
64
|
return function () {
|
|
52
65
|
resizeObserver.disconnect();
|
|
53
|
-
window.removeEventListener('resize',
|
|
66
|
+
window.removeEventListener('resize', updateAnchorPosition);
|
|
54
67
|
};
|
|
55
|
-
}, [mathDOM, prev, isBlockMode,
|
|
68
|
+
}, [mathDOM, prev, isBlockMode, updateAnchorPosition]);
|
|
56
69
|
|
|
57
70
|
// 当没有 mathDOM 时，隐藏容器
|
|
58
71
|
useEffect(function () {
|
|
59
|
-
if (mathDOM || !
|
|
60
|
-
cleanPosition(
|
|
72
|
+
if (mathDOM || !anchorRef.current) return;
|
|
73
|
+
cleanPosition(anchorRef.current);
|
|
61
74
|
}, [mathDOM]);
|
|
62
|
-
return /*#__PURE__*/_jsx(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
75
|
+
return /*#__PURE__*/_jsx(Popover, {
|
|
76
|
+
arrow: false,
|
|
77
|
+
content: /*#__PURE__*/_jsx(Flexbox, {
|
|
78
|
+
className: styles.mathEditor,
|
|
79
|
+
"data-math-editor-container": true,
|
|
80
|
+
style: blockWidth ? {
|
|
81
|
+
width: blockWidth
|
|
82
|
+
} : undefined,
|
|
83
|
+
children: children
|
|
84
|
+
}),
|
|
85
|
+
open: !!mathDOM,
|
|
86
|
+
placement: isBlockMode ? 'bottomLeft' : 'bottom',
|
|
87
|
+
styles: {
|
|
88
|
+
content: {
|
|
89
|
+
padding: 0
|
|
90
|
+
}
|
|
67
91
|
},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
92
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
93
|
+
className: styles.mathEditorAnchor,
|
|
94
|
+
ref: anchorRef
|
|
95
|
+
})
|
|
72
96
|
});
|
|
73
97
|
});
|
|
74
98
|
MathEditorContainer.displayName = 'MathEditorContainer';
|
|
@@ -6,8 +6,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
7
|
import { addClassNamesToElement, removeClassNamesFromElement } from '@lexical/utils';
|
|
8
8
|
import Katex from 'katex';
|
|
9
|
-
import { $getSelection, $isNodeSelection
|
|
10
|
-
import { useEffect, useRef, useState } from 'react';
|
|
9
|
+
import { $getSelection, $isNodeSelection } from 'lexical';
|
|
10
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
11
11
|
import { useLexicalEditor } from "../../../../editor-kernel/react";
|
|
12
12
|
import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection";
|
|
13
13
|
import { createDebugLogger } from "../../../../utils/debug";
|
|
@@ -23,7 +23,7 @@ var MathInline = function MathInline(_ref) {
|
|
|
23
23
|
var _useLexicalNodeSelect = useLexicalNodeSelection(node.getKey()),
|
|
24
24
|
_useLexicalNodeSelect2 = _slicedToArray(_useLexicalNodeSelect, 2),
|
|
25
25
|
isSelected = _useLexicalNodeSelect2[0],
|
|
26
|
-
|
|
26
|
+
setIsSelected = _useLexicalNodeSelect2[1];
|
|
27
27
|
var _useState = useState(false),
|
|
28
28
|
_useState2 = _slicedToArray(_useState, 2),
|
|
29
29
|
isEditing = _useState2[0],
|
|
@@ -59,24 +59,35 @@ var MathInline = function MathInline(_ref) {
|
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
61
|
}, [isSelected, isEditing, editor, node]);
|
|
62
|
-
useLexicalEditor(function (editor) {
|
|
63
|
-
return editor.registerCommand(CLICK_COMMAND, function (payload) {
|
|
64
|
-
logger.debug('📊 Math click event:', payload.target === ref.current);
|
|
65
|
-
if (payload.target && payload.target instanceof Node) {
|
|
66
|
-
var _ref$current;
|
|
67
|
-
// 获取节点对应的 DOM 元素
|
|
68
|
-
var nodeElement = editor.getElementByKey(node.getKey());
|
|
69
62
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
63
|
+
// useLexicalEditor(
|
|
64
|
+
// (editor) => {
|
|
65
|
+
// return editor.registerCommand(
|
|
66
|
+
// CLICK_COMMAND,
|
|
67
|
+
// (payload) => {
|
|
68
|
+
// logger.debug('📊 Math click event:', payload.target === ref.current);
|
|
69
|
+
// if (payload.target && payload.target instanceof Node) {
|
|
70
|
+
// // 获取节点对应的 DOM 元素
|
|
71
|
+
// const nodeElement = editor.getElementByKey(node.getKey());
|
|
72
|
+
|
|
73
|
+
// // 对于 block 模式，检查是否点击在整个节点容器内
|
|
74
|
+
// // 对于 inline 模式，仍然检查是否点击在渲染内容内
|
|
75
|
+
// const isClickInNode =
|
|
76
|
+
// node instanceof MathBlockNode
|
|
77
|
+
// ? nodeElement?.contains(payload.target)
|
|
78
|
+
// : ref.current?.contains(payload.target);
|
|
79
|
+
|
|
80
|
+
// if (isClickInNode) {
|
|
81
|
+
// setSelected(true);
|
|
82
|
+
// }
|
|
83
|
+
// }
|
|
84
|
+
// return false;
|
|
85
|
+
// },
|
|
86
|
+
// COMMAND_PRIORITY_NORMAL,
|
|
87
|
+
// );
|
|
88
|
+
// },
|
|
89
|
+
// [node],
|
|
90
|
+
// );
|
|
80
91
|
|
|
81
92
|
// 监听编辑器状态变化来检测编辑状态
|
|
82
93
|
useLexicalEditor(function (editor) {
|
|
@@ -101,8 +112,15 @@ var MathInline = function MathInline(_ref) {
|
|
|
101
112
|
});
|
|
102
113
|
});
|
|
103
114
|
}, [node]);
|
|
115
|
+
var handleClick = useCallback(function (e) {
|
|
116
|
+
logger.debug('📊 Math click event:', e.target === ref.current);
|
|
117
|
+
e.preventDefault();
|
|
118
|
+
e.stopPropagation();
|
|
119
|
+
setIsSelected(true);
|
|
120
|
+
}, [editor, node]);
|
|
104
121
|
return /*#__PURE__*/_jsx("span", {
|
|
105
122
|
className: className,
|
|
123
|
+
onClick: handleClick,
|
|
106
124
|
ref: ref,
|
|
107
125
|
children: node.code ? node.code : /*#__PURE__*/_jsx(Placeholder, {
|
|
108
126
|
mathBlock: isMathBlock
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
/* eslint-disable sort-keys-fix/sort-keys-fix */
|
|
4
4
|
import { createStaticStyles, cx } from 'antd-style';
|
|
@@ -9,9 +9,10 @@ export var styles = createStaticStyles(function (_ref) {
|
|
|
9
9
|
return {
|
|
10
10
|
mathInline: cx(latex, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-block;\n border-radius: calc(var(--lobe-markdown-border-radius) * 0.5px);\n "])))),
|
|
11
11
|
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 "])))),
|
|
12
|
-
mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n
|
|
12
|
+
mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 "])), cssVar.colorBgElevated, cssVar.fontFamilyCode),
|
|
13
13
|
mathEditorFooter: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-block-start: 1px solid ", ";\n background: ", ";\n "])), cssVar.colorBorderSecondary, cssVar.colorFillQuaternary),
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
mathEditorAnchor: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n inset-block-start: -9999px;\n inset-inline-start: -9999px;\n\n width: 0;\n height: 0;\n "]))),
|
|
15
|
+
mathEditorTextArea: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-block: 4px;\n "]))),
|
|
16
|
+
mathPlaceholder: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding-inline: 0.2em;\n font-style: italic;\n "])))
|
|
16
17
|
};
|
|
17
18
|
});
|
package/package.json
CHANGED