@lobehub/ui 2.0.13 → 2.0.15
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.
|
@@ -16,24 +16,64 @@ import { memo, useEffect, useMemo, useState } from 'react';
|
|
|
16
16
|
import { useHighlight } from "../../hooks/useHighlight";
|
|
17
17
|
import { useStyles } from "./style";
|
|
18
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
return /*#__PURE__*/_jsx("
|
|
19
|
+
var Span = /*#__PURE__*/memo(function (_ref) {
|
|
20
|
+
var data = _ref.data;
|
|
21
|
+
return /*#__PURE__*/_jsx("span", {
|
|
22
22
|
dangerouslySetInnerHTML: {
|
|
23
|
-
__html:
|
|
23
|
+
__html: data
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
});
|
|
27
|
+
var Line = /*#__PURE__*/memo(function (_ref2) {
|
|
28
|
+
var data = _ref2.data;
|
|
29
|
+
var _useState = useState([]),
|
|
30
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
31
|
+
contents = _useState2[0],
|
|
32
|
+
setContents = _useState2[1];
|
|
33
|
+
useEffect(function () {
|
|
34
|
+
if (data && typeof data === 'string') {
|
|
35
|
+
// Extract all lines from the HTML content
|
|
36
|
+
// We need to handle the structure from shiki which gives us HTML with a <pre><code> structure
|
|
37
|
+
var parser = new DOMParser();
|
|
38
|
+
var doc = parser.parseFromString(data, 'text/html');
|
|
39
|
+
var codeElement = doc.querySelector('span.line');
|
|
40
|
+
if (codeElement) {
|
|
41
|
+
var spanLines = codeElement.querySelectorAll('span');
|
|
42
|
+
var newLines = _toConsumableArray(spanLines).map(function (line) {
|
|
43
|
+
return line.outerHTML;
|
|
44
|
+
});
|
|
45
|
+
setContents(newLines);
|
|
46
|
+
} else {
|
|
47
|
+
// Fallback if the structure is different
|
|
48
|
+
var htmlLines = data.split('\n').map(function (line) {
|
|
49
|
+
return "<span>".concat(line, "</span>");
|
|
50
|
+
});
|
|
51
|
+
setContents(htmlLines);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}, [data]);
|
|
55
|
+
return /*#__PURE__*/_jsx("span", {
|
|
56
|
+
className: 'line',
|
|
57
|
+
children: contents && contents.length > 0 ? contents.map(function (span, index) {
|
|
58
|
+
return /*#__PURE__*/_jsx(Span, {
|
|
59
|
+
data: span || ' '
|
|
60
|
+
}, index);
|
|
61
|
+
}) : /*#__PURE__*/_jsx("span", {
|
|
62
|
+
children: " "
|
|
63
|
+
})
|
|
64
|
+
});
|
|
65
|
+
});
|
|
27
66
|
Line.displayName = 'HighlighterLine';
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
67
|
+
Span.displayName = 'HighlighterSpan';
|
|
68
|
+
var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref3) {
|
|
69
|
+
var ref = _ref3.ref,
|
|
70
|
+
children = _ref3.children,
|
|
71
|
+
language = _ref3.language,
|
|
72
|
+
className = _ref3.className,
|
|
73
|
+
style = _ref3.style,
|
|
74
|
+
enableTransformer = _ref3.enableTransformer,
|
|
75
|
+
variant = _ref3.variant,
|
|
76
|
+
theme = _ref3.theme;
|
|
37
77
|
var _useStyles = useStyles(),
|
|
38
78
|
styles = _useStyles.styles,
|
|
39
79
|
cx = _useStyles.cx;
|
|
@@ -45,10 +85,10 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref2) {
|
|
|
45
85
|
theme: isDefaultTheme ? undefined : theme
|
|
46
86
|
}),
|
|
47
87
|
data = _useHighlight.data;
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
contentLines =
|
|
51
|
-
setContentLines =
|
|
88
|
+
var _useState3 = useState([]),
|
|
89
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
90
|
+
contentLines = _useState4[0],
|
|
91
|
+
setContentLines = _useState4[1];
|
|
52
92
|
useEffect(function () {
|
|
53
93
|
if (data && typeof data === 'string') {
|
|
54
94
|
// Extract all lines from the HTML content
|
|
@@ -149,7 +189,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref2) {
|
|
|
149
189
|
children: /*#__PURE__*/_jsx("code", {
|
|
150
190
|
children: contentLines.map(function (line, index) {
|
|
151
191
|
return /*#__PURE__*/_jsx(Line, {
|
|
152
|
-
|
|
192
|
+
data: line
|
|
153
193
|
}, index);
|
|
154
194
|
})
|
|
155
195
|
})
|
|
@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref) {
|
|
|
11
11
|
noPadding: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pre {\n padding: 0;\n }\n "]))),
|
|
12
12
|
padding: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n pre {\n padding: 16px;\n }\n "]))),
|
|
13
13
|
root: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n direction: ltr;\n margin: 0;\n padding: 0;\n text-align: start;\n\n pre {\n overflow-x: auto;\n margin: 0;\n padding: 0;\n }\n "]))),
|
|
14
|
-
shiki: cx("".concat(prefixCls, "-highlighter-shiki"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n pre {\n code {\n display: block;\n\n .line {\n display:
|
|
14
|
+
shiki: cx("".concat(prefixCls, "-highlighter-shiki"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n pre {\n code {\n display: block;\n\n .line {\n display: block;\n\n width: calc(100% + 32px);\n margin-block: 0;\n margin-inline: -16px;\n padding-block: 0;\n padding-inline: 16px;\n }\n }\n\n &.has-focused {\n .line:not(.focused) {\n opacity: 0.5;\n }\n }\n\n .highlighted {\n background: ", ";\n\n &.warning {\n background: ", ";\n }\n\n &.error {\n background: ", ";\n }\n }\n\n .highlighted-word {\n padding-block: 0.1em;\n padding-inline: 0.2em;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n .diff {\n &.remove {\n background: ", ";\n\n &::before {\n content: '-';\n\n position: absolute;\n inset-inline-start: 4px;\n\n display: inline-block;\n\n color: ", ";\n }\n }\n\n &.add {\n background: ", ";\n\n &::before {\n content: '+';\n\n position: absolute;\n inset-inline-start: 4px;\n\n display: inline-block;\n\n color: ", ";\n }\n }\n }\n }\n "])), token.colorFillTertiary, token.colorWarningBg, token.colorErrorBg, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadius, token.colorErrorBg, token.colorErrorText, token.colorSuccessBg, token.colorSuccessText)),
|
|
15
15
|
unshiki: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n "])), token.colorTextDescription)
|
|
16
16
|
};
|
|
17
17
|
});
|
package/es/Markdown/style.js
CHANGED
|
@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref) {
|
|
|
8
8
|
var cyanColor = isDarkMode ? token.cyan9A : token.cyan11A;
|
|
9
9
|
var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n "])));
|
|
10
10
|
return {
|
|
11
|
-
animated: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .animate-fade-in,\n .katex-html span,\n span.line,\n > * {\n animation: ", " 1s ease-in-out;\n }\n "])), fadeIn),
|
|
11
|
+
animated: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .animate-fade-in,\n .katex-html span,\n span.line > span,\n code:not(:has(span.line)),\n > * {\n animation: ", " 1s ease-in-out;\n }\n "])), fadeIn),
|
|
12
12
|
chat: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n --lobe-markdown-border-radius: ", ";\n\n ol,\n ul {\n > li {\n &::marker {\n color: ", " !important;\n }\n\n > li {\n &::marker {\n color: ", " !important;\n }\n }\n }\n }\n\n ul {\n list-style: unset;\n\n > li {\n &::before {\n content: unset;\n display: unset;\n }\n }\n }\n "])), token.borderRadius, cyanColor, token.colorTextSecondary),
|
|
13
13
|
latex: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .katex-error {\n color: ", " !important;\n }\n\n .katex-html {\n overflow: auto hidden;\n padding: 3px;\n\n .base {\n margin-block: 0;\n margin-inline: auto;\n }\n\n .tag {\n position: relative !important;\n display: inline-block;\n padding-inline-start: 0.5rem;\n }\n }\n "])), token.colorTextDescription),
|
|
14
14
|
root: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n max-width: 100%;\n\n #footnote-label {\n display: none;\n }\n\n sup:has(a[aria-describedby='footnote-label']) {\n vertical-align: super !important;\n }\n "])))
|