@lobehub/ui 1.168.17 → 1.168.19
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/Highlighter/SyntaxHighlighter/index.js +10 -9
- package/es/Highlighter/style.d.ts +1 -1
- package/es/Hotkey/index.d.ts +1 -0
- package/es/Hotkey/index.js +15 -7
- package/es/Hotkey/style.js +1 -1
- package/es/Hotkey/type.d.ts +1 -0
- package/es/Hotkey/type.js +1 -0
- package/es/Markdown/Typography.d.ts +5 -5
- package/es/Markdown/Typography.js +4 -3
- package/es/Markdown/index.d.ts +1 -1
- package/es/Markdown/index.js +166 -90
- package/es/Markdown/markdown.style.d.ts +1 -18
- package/es/Markdown/markdown.style.js +19 -19
- package/es/Markdown/style.d.ts +1 -6
- package/es/Markdown/style.js +4 -12
- package/es/Mermaid/{Controls.js → components/Controls.js} +1 -1
- package/es/Mermaid/components/MermaidContainer.d.ts +5 -0
- package/es/Mermaid/components/MermaidContainer.js +43 -0
- package/es/Mermaid/components/MermaidZoomableContainer.d.ts +5 -0
- package/es/Mermaid/components/MermaidZoomableContainer.js +21 -0
- package/es/Mermaid/components/style.d.ts +3 -0
- package/es/Mermaid/components/style.js +12 -0
- package/es/Mermaid/index.js +9 -7
- package/es/Mermaid/style.d.ts +1 -1
- package/es/Swatches/index.d.ts +2 -1
- package/es/Swatches/index.js +34 -22
- package/es/Swatches/style.js +2 -2
- package/es/chat/MessageInput/index.js +37 -20
- package/es/components.d.ts +1 -1
- package/es/components.js +1 -1
- package/es/hooks/useHighlight.d.ts +8 -1
- package/es/hooks/useHighlight.js +121 -41
- package/es/hooks/useMermaid.d.ts +9 -0
- package/es/{Mermaid → hooks}/useMermaid.js +137 -73
- package/es/mdx/Mdx/index.js +1 -1
- package/es/utils/genCdnUrl.d.ts +3 -0
- package/es/utils/genCdnUrl.js +3 -1
- package/package.json +6 -6
- package/es/Mermaid/useMermaid.d.ts +0 -3
- /package/es/Mermaid/{Controls.d.ts → components/Controls.d.ts} +0 -0
|
@@ -4,7 +4,8 @@ import { createStyles } from 'antd-style';
|
|
|
4
4
|
import { rgba } from 'polished';
|
|
5
5
|
var IGNORE_CLASSNAME = '.ignore-markdown-style';
|
|
6
6
|
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
7
|
-
var
|
|
7
|
+
var cx = _ref.cx,
|
|
8
|
+
token = _ref.token,
|
|
8
9
|
isDarkMode = _ref.isDarkMode,
|
|
9
10
|
css = _ref.css;
|
|
10
11
|
var _ref2$fontSize = _ref2.fontSize,
|
|
@@ -15,22 +16,21 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
15
16
|
marginMultiple = _ref2$marginMultiple === void 0 ? 1.5 : _ref2$marginMultiple,
|
|
16
17
|
_ref2$lineHeight = _ref2.lineHeight,
|
|
17
18
|
lineHeight = _ref2$lineHeight === void 0 ? 1.8 : _ref2$lineHeight;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
19
|
+
var __root = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --lobe-markdown-font-size: ", "px;\n --lobe-markdown-header-multiple: ", ";\n --lobe-markdown-margin-multiple: ", ";\n --lobe-markdown-line-height: ", ";\n --lobe-markdown-border-radius: ", ";\n --lobe-markdown-border-color: ", ";\n\n position: relative;\n\n width: 100%;\n max-width: 100%;\n padding-inline: 1px;\n\n font-size: var(--lobe-markdown-font-size);\n line-height: var(--lobe-markdown-line-height);\n word-break: break-word;\n\n ", " {\n font-size: 14px;\n line-height: 1.5;\n }\n "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, isDarkMode ? token.colorBorderSecondary : rgba(token.colorBorderSecondary, 0.5), IGNORE_CLASSNAME);
|
|
20
|
+
var a = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n a:not(", " a) {\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n }\n "])), IGNORE_CLASSNAME, token.colorInfoText, token.colorInfoHover);
|
|
21
|
+
var blockquote = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n blockquote:not(", " blockquote) {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n\n color: ", ";\n\n border-inline-start: solid 4px ", ";\n }\n "])), IGNORE_CLASSNAME, token.colorTextSecondary, token.colorBorder);
|
|
22
|
+
var code = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n code:not(", " code) {\n &:not(:has(span)) {\n display: inline;\n\n margin-inline: 0.25em;\n padding-block: 0.2em;\n padding-inline: 0.4em;\n\n font-family: ", ";\n font-size: 0.875em;\n line-height: 1;\n word-break: break-word;\n white-space: break-spaces;\n\n background: ", ";\n border: 1px solid var(--lobe-markdown-border-color);\n border-radius: 0.25em;\n }\n }\n "])), IGNORE_CLASSNAME, token.fontFamilyCode, token.colorFillSecondary);
|
|
23
|
+
var details = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n details:not(", " details) {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n padding-block: 0.75em;\n padding-inline: 1em;\n\n background: ", ";\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n summary {\n cursor: pointer;\n display: flex;\n align-items: center;\n list-style: none;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-inline-end: 1.25em;\n transform: rotateZ(-45deg);\n\n display: block;\n\n width: 0.4em;\n height: 0.4em;\n\n font-family: ", ";\n\n border-block-end: 1.5px solid ", ";\n border-inline-end: 1.5px solid ", ";\n\n transition: transform 200ms ", ";\n }\n }\n\n &[open] {\n summary {\n padding-block-end: 0.75em;\n border-block-end: 1px dashed ", ";\n\n &::before {\n transform: rotateZ(45deg);\n }\n }\n }\n }\n "])), IGNORE_CLASSNAME, token.colorFillTertiary, token.fontFamily, token.colorTextSecondary, token.colorTextSecondary, token.motionEaseOut, token.colorBorder);
|
|
24
|
+
var header = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n h1:not(", " h1),\n h2:not(", " h2),\n h3:not(", " h3),\n h4:not(", " h4),\n h5:not(", " h5),\n h6:not(", " h6) {\n margin-block: max(\n calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n var(--lobe-markdown-font-size)\n );\n font-weight: bold;\n line-height: 1.25;\n }\n\n h1:not(", " h1) {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h2:not(", " h2) {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple))\n );\n }\n\n h3:not(", " h3) {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h4:not(", " h4) {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h5:not(", " h5),\n h6:not(", " h6) {\n font-size: calc(var(--lobe-markdown-font-size) * 1);\n }\n "])), IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME);
|
|
25
|
+
var hr = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n hr:not(", " hr) {\n width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n\n border-color: ", ";\n border-style: dashed;\n border-width: 1px;\n border-block-start: none;\n border-inline-start: none;\n border-inline-end: none;\n }\n "])), IGNORE_CLASSNAME, token.colorBorder);
|
|
26
|
+
var img = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n img:not(", " img) {\n max-width: 100%;\n }\n\n > img,\n > p > img {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n "])), IGNORE_CLASSNAME);
|
|
27
|
+
var kbd = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n kbd:not(", " kbd) {\n cursor: default;\n\n display: inline-block;\n\n min-width: 1em;\n margin-inline: 0.25em;\n padding-block: 0.2em;\n padding-inline: 0.4em;\n\n font-family: ", ";\n font-size: 0.875em;\n font-weight: 500;\n line-height: 1;\n text-align: center;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0.25em;\n }\n "])), IGNORE_CLASSNAME, token.fontFamily, token.colorBgLayout, token.colorBorderSecondary);
|
|
28
|
+
var list = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n li:not(", " li) {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n p {\n display: inline;\n }\n }\n\n ul:not(", " ul),\n ol:not(", " ol) {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n margin-inline-start: 1em;\n padding-inline-start: 0;\n list-style-position: outside;\n\n > ul,\n > ol {\n margin-block: 0;\n }\n\n > li {\n margin-inline-start: 1em;\n }\n }\n\n ol:not(", " ol) {\n list-style: auto;\n }\n\n ul:not(", " ul) {\n list-style-type: none;\n\n > li {\n &::before {\n content: '-';\n display: inline-block;\n margin-inline: -1em 0.5em;\n opacity: 0.5;\n }\n }\n }\n "])), IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME);
|
|
29
|
+
var p = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n p:not(", " kbd) {\n margin-block: 4px;\n line-height: var(--lobe-markdown-line-height);\n letter-spacing: 0.02em;\n\n &:not(:first-child) {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n }\n\n &:not(:last-child) {\n margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 1em);\n }\n }\n "])), IGNORE_CLASSNAME);
|
|
30
|
+
var pre = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n pre:not(", " pre),\n [data-code-type='highlighter'] {\n white-space: break-spaces;\n border: none;\n\n > code {\n padding: 0 !important;\n\n font-family: ", ";\n font-size: 0.875em;\n line-height: 1.6;\n\n border: none !important;\n }\n }\n "])), IGNORE_CLASSNAME, token.fontFamilyCode);
|
|
31
|
+
var strong = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n strong:not(", " strong) {\n font-weight: 600;\n }\n "])), IGNORE_CLASSNAME);
|
|
32
|
+
var svg = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n svg:not(", " svg) {\n line-height: 1;\n }\n "])), IGNORE_CLASSNAME);
|
|
33
|
+
var table = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n table:not(", " table) {\n unicode-bidi: isolate;\n overflow: auto hidden;\n display: block;\n border-spacing: 0;\n border-collapse: collapse;\n\n box-sizing: border-box;\n width: max-content;\n max-width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n text-align: start;\n text-indent: initial;\n text-wrap: pretty;\n word-break: auto-phrase;\n overflow-wrap: break-word;\n\n background: ", ";\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n code {\n word-break: break-word;\n }\n\n thead {\n background: ", ";\n }\n\n tr {\n box-shadow: 0 1px 0 var(--lobe-markdown-border-color);\n }\n\n th,\n td {\n min-width: 120px;\n padding-block: 0.75em;\n padding-inline: 1em;\n text-align: start;\n }\n }\n "])), IGNORE_CLASSNAME, token.colorFillQuaternary, token.colorFillQuaternary);
|
|
34
|
+
var video = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n > video:not(", " video),\n > p:not(", " p) > video {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n\n video:not(", " video) {\n max-width: 100%;\n }\n "])), IGNORE_CLASSNAME, IGNORE_CLASSNAME, IGNORE_CLASSNAME);
|
|
35
|
+
return cx(__root, a, blockquote, code, details, header, hr, img, kbd, list, p, pre, strong, svg, table, video);
|
|
36
36
|
});
|
package/es/Markdown/style.d.ts
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
export declare const useStyles: (props?: {
|
|
2
|
-
fontSize?: number | undefined;
|
|
3
|
-
headerMultiple?: number | undefined;
|
|
4
|
-
lineHeight?: number | undefined;
|
|
5
|
-
marginMultiple?: number | undefined;
|
|
6
|
-
} | undefined) => import("antd-style").ReturnStyles<{
|
|
1
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
7
2
|
chat: import("antd-style").SerializedStyles;
|
|
8
3
|
latex: import("antd-style").SerializedStyles;
|
|
9
4
|
root: import("antd-style").SerializedStyles;
|
package/es/Markdown/style.js
CHANGED
|
@@ -1,22 +1,14 @@
|
|
|
1
1
|
var _templateObject, _templateObject2, _templateObject3;
|
|
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
|
import { createStyles } from 'antd-style';
|
|
4
|
-
export var useStyles = createStyles(function (_ref
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
5
|
var css = _ref.css,
|
|
6
6
|
token = _ref.token,
|
|
7
7
|
isDarkMode = _ref.isDarkMode;
|
|
8
|
-
var _ref2$fontSize = _ref2.fontSize,
|
|
9
|
-
fontSize = _ref2$fontSize === void 0 ? 14 : _ref2$fontSize,
|
|
10
|
-
_ref2$headerMultiple = _ref2.headerMultiple,
|
|
11
|
-
headerMultiple = _ref2$headerMultiple === void 0 ? 0.25 : _ref2$headerMultiple,
|
|
12
|
-
_ref2$marginMultiple = _ref2.marginMultiple,
|
|
13
|
-
marginMultiple = _ref2$marginMultiple === void 0 ? 1 : _ref2$marginMultiple,
|
|
14
|
-
_ref2$lineHeight = _ref2.lineHeight,
|
|
15
|
-
lineHeight = _ref2$lineHeight === void 0 ? 1.6 : _ref2$lineHeight;
|
|
16
8
|
var cyanColor = isDarkMode ? token.cyan9A : token.cyan11A;
|
|
17
9
|
return {
|
|
18
|
-
chat: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
19
|
-
latex: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
20
|
-
root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
10
|
+
chat: css(_templateObject || (_templateObject = _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),
|
|
11
|
+
latex: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 "]))),
|
|
12
|
+
root: css(_templateObject3 || (_templateObject3 = _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 "])))
|
|
21
13
|
};
|
|
22
14
|
});
|
|
@@ -2,7 +2,7 @@ import { AlignVerticalSpaceAroundIcon, MinusIcon, PlusIcon } from 'lucide-react'
|
|
|
2
2
|
import { memo } from 'react';
|
|
3
3
|
import { Flexbox } from 'react-layout-kit';
|
|
4
4
|
import { useControls } from 'react-zoom-pan-pinch';
|
|
5
|
-
import ActionIcon from "
|
|
5
|
+
import ActionIcon from "../../ActionIcon";
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
8
|
var Controls = /*#__PURE__*/memo(function () {
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { kebabCase } from 'lodash-es';
|
|
2
|
+
import { Loader2 } from 'lucide-react';
|
|
3
|
+
import { memo, useId } from 'react';
|
|
4
|
+
import { Center, Flexbox } from 'react-layout-kit';
|
|
5
|
+
import Icon from "../../Icon";
|
|
6
|
+
import { useMermaid, useMermaidInit } from "../../hooks/useMermaid";
|
|
7
|
+
import { useStyles } from "./style";
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
var MermaidContainer = /*#__PURE__*/memo(function (_ref) {
|
|
12
|
+
var _ref$children = _ref.children,
|
|
13
|
+
children = _ref$children === void 0 ? '' : _ref$children;
|
|
14
|
+
var _useStyles = useStyles(),
|
|
15
|
+
styles = _useStyles.styles;
|
|
16
|
+
var id = useId();
|
|
17
|
+
var mermaidId = kebabCase("mermaid-".concat(id));
|
|
18
|
+
useMermaidInit();
|
|
19
|
+
var _useMermaid = useMermaid(mermaidId, children),
|
|
20
|
+
data = _useMermaid.data,
|
|
21
|
+
isLoading = _useMermaid.isLoading;
|
|
22
|
+
if (!data) return null;
|
|
23
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
24
|
+
children: [/*#__PURE__*/_jsx(Center, {
|
|
25
|
+
as: 'pre',
|
|
26
|
+
dangerouslySetInnerHTML: {
|
|
27
|
+
__html: data
|
|
28
|
+
},
|
|
29
|
+
id: "mermaid-".concat(id)
|
|
30
|
+
}), isLoading && /*#__PURE__*/_jsx(Flexbox, {
|
|
31
|
+
align: 'center',
|
|
32
|
+
className: styles.loading,
|
|
33
|
+
gap: 8,
|
|
34
|
+
horizontal: true,
|
|
35
|
+
justify: 'center',
|
|
36
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
37
|
+
icon: Loader2,
|
|
38
|
+
spin: true
|
|
39
|
+
})
|
|
40
|
+
})]
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
export default MermaidContainer;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { memo } from 'react';
|
|
2
|
+
import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
|
|
3
|
+
import Controls from "./Controls";
|
|
4
|
+
import MermaidContainer from "./MermaidContainer";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
var MermaidZoomableContainer = /*#__PURE__*/memo(function (_ref) {
|
|
8
|
+
var children = _ref.children;
|
|
9
|
+
return /*#__PURE__*/_jsxs(TransformWrapper, {
|
|
10
|
+
children: [/*#__PURE__*/_jsx(Controls, {}), /*#__PURE__*/_jsx(TransformComponent, {
|
|
11
|
+
wrapperStyle: {
|
|
12
|
+
minHeight: 240,
|
|
13
|
+
width: '100%'
|
|
14
|
+
},
|
|
15
|
+
children: /*#__PURE__*/_jsx(MermaidContainer, {
|
|
16
|
+
children: children
|
|
17
|
+
})
|
|
18
|
+
})]
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
export default MermaidZoomableContainer;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
var _templateObject;
|
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css,
|
|
6
|
+
token = _ref.token,
|
|
7
|
+
cx = _ref.cx,
|
|
8
|
+
stylish = _ref.stylish;
|
|
9
|
+
return {
|
|
10
|
+
loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 10;\n inset-block-start: 0;\n inset-inline-end: 0;\n\n height: 34px;\n padding-block: 0;\n padding-inline: 8px;\n\n font-family: ", ";\n color: ", ";\n\n border-radius: ", ";\n "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius))
|
|
11
|
+
};
|
|
12
|
+
});
|
package/es/Mermaid/index.js
CHANGED
|
@@ -9,13 +9,15 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
9
9
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
10
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
11
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { isUndefined } from 'lodash-es';
|
|
12
13
|
import { memo } from 'react';
|
|
13
14
|
import { Flexbox } from 'react-layout-kit';
|
|
14
15
|
import CopyButton from "../CopyButton";
|
|
15
16
|
import Tag from "../Tag";
|
|
16
17
|
import FullFeatured from "./FullFeatured";
|
|
18
|
+
import MermaidContainer from "./components/MermaidContainer";
|
|
19
|
+
import MermaidZoomableContainer from "./components/MermaidZoomableContainer";
|
|
17
20
|
import { useStyles } from "./style";
|
|
18
|
-
import { useMermaid } from "./useMermaid";
|
|
19
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
22
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
23
|
var Mermaid = /*#__PURE__*/memo(function (_ref) {
|
|
@@ -39,11 +41,8 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
|
|
|
39
41
|
cx = _useStyles.cx,
|
|
40
42
|
styles = _useStyles.styles;
|
|
41
43
|
var tirmedChildren = children.trim();
|
|
42
|
-
var MermaidRender = useMermaid(tirmedChildren, {
|
|
43
|
-
enablePanZoom: fullFeatured ? true : enablePanZoom
|
|
44
|
-
});
|
|
45
44
|
var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
|
|
46
|
-
content:
|
|
45
|
+
content: tirmedChildren,
|
|
47
46
|
placement: "left",
|
|
48
47
|
size: copyButtonSize
|
|
49
48
|
});
|
|
@@ -52,7 +51,11 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
|
|
|
52
51
|
content: children,
|
|
53
52
|
originalNode: originalActions
|
|
54
53
|
}) : originalActions;
|
|
55
|
-
var defaultBody = /*#__PURE__*/_jsx(
|
|
54
|
+
var defaultBody = enablePanZoom || isUndefined(enablePanZoom) && fullFeatured ? /*#__PURE__*/_jsx(MermaidZoomableContainer, {
|
|
55
|
+
children: tirmedChildren
|
|
56
|
+
}) : /*#__PURE__*/_jsx(MermaidContainer, {
|
|
57
|
+
children: tirmedChildren
|
|
58
|
+
});
|
|
56
59
|
var body = bodyRender ? bodyRender({
|
|
57
60
|
content: tirmedChildren,
|
|
58
61
|
originalNode: defaultBody
|
|
@@ -63,7 +66,6 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
|
|
|
63
66
|
className: className,
|
|
64
67
|
content: tirmedChildren,
|
|
65
68
|
copyable: copyable,
|
|
66
|
-
enablePanZoom: enablePanZoom,
|
|
67
69
|
showLanguage: showLanguage,
|
|
68
70
|
style: style,
|
|
69
71
|
type: type
|
package/es/Mermaid/style.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const useStyles: (props?: "block" | "
|
|
1
|
+
export declare const useStyles: (props?: "block" | "pure" | "ghost" | undefined) => import("antd-style").ReturnStyles<{
|
|
2
2
|
button: string;
|
|
3
3
|
container: string;
|
|
4
4
|
header: import("antd-style").SerializedStyles;
|
package/es/Swatches/index.d.ts
CHANGED
package/es/Swatches/index.js
CHANGED
|
@@ -1,47 +1,59 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
var _excluded = ["style", "colors", "activeColor", "onSelect", "size"];
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
+
import { CheckIcon } from 'lucide-react';
|
|
13
|
+
import { darken } from 'polished';
|
|
4
14
|
import { memo } from 'react';
|
|
5
|
-
import { Flexbox } from 'react-layout-kit';
|
|
15
|
+
import { Center, Flexbox } from 'react-layout-kit';
|
|
16
|
+
import Icon from "../Icon";
|
|
6
17
|
import { useStyles } from "./style";
|
|
7
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
19
|
var Swatches = /*#__PURE__*/memo(function (_ref) {
|
|
10
|
-
var
|
|
20
|
+
var style = _ref.style,
|
|
21
|
+
colors = _ref.colors,
|
|
11
22
|
activeColor = _ref.activeColor,
|
|
12
23
|
onSelect = _ref.onSelect,
|
|
13
24
|
_ref$size = _ref.size,
|
|
14
|
-
size = _ref$size === void 0 ? 24 : _ref$size
|
|
15
|
-
|
|
25
|
+
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
26
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
16
27
|
var _useStyles = useStyles(size),
|
|
17
28
|
cx = _useStyles.cx,
|
|
18
29
|
styles = _useStyles.styles;
|
|
19
|
-
return /*#__PURE__*/
|
|
30
|
+
return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
|
|
20
31
|
gap: 8,
|
|
21
32
|
horizontal: true,
|
|
22
|
-
style: {
|
|
33
|
+
style: _objectSpread({
|
|
23
34
|
flexWrap: 'wrap'
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
onClick: function onClick() {
|
|
28
|
-
onSelect === null || onSelect === void 0 || onSelect();
|
|
29
|
-
},
|
|
30
|
-
style: {
|
|
31
|
-
background: theme.colorBgContainer
|
|
32
|
-
}
|
|
33
|
-
}), colors.map(function (c, index) {
|
|
35
|
+
}, style)
|
|
36
|
+
}, rest), {}, {
|
|
37
|
+
children: colors.map(function (c, index) {
|
|
34
38
|
var isActive = c === activeColor;
|
|
35
|
-
return /*#__PURE__*/_jsx(
|
|
39
|
+
return /*#__PURE__*/_jsx(Center, {
|
|
36
40
|
className: cx(styles.container, isActive && styles.active),
|
|
37
41
|
onClick: function onClick() {
|
|
38
42
|
onSelect === null || onSelect === void 0 || onSelect(c);
|
|
39
43
|
},
|
|
40
44
|
style: {
|
|
41
45
|
background: c
|
|
42
|
-
}
|
|
46
|
+
},
|
|
47
|
+
children: isActive && /*#__PURE__*/_jsx(Icon, {
|
|
48
|
+
color: darken(0.3, c),
|
|
49
|
+
icon: CheckIcon,
|
|
50
|
+
size: {
|
|
51
|
+
fontSize: 14,
|
|
52
|
+
strokeWidth: 4
|
|
53
|
+
}
|
|
54
|
+
})
|
|
43
55
|
}, "".concat(c, "_").concat(index));
|
|
44
|
-
})
|
|
45
|
-
});
|
|
56
|
+
})
|
|
57
|
+
}));
|
|
46
58
|
});
|
|
47
59
|
export default Swatches;
|
package/es/Swatches/style.js
CHANGED
|
@@ -5,7 +5,7 @@ export var useStyles = createStyles(function (_ref, size) {
|
|
|
5
5
|
var css = _ref.css,
|
|
6
6
|
token = _ref.token;
|
|
7
7
|
return {
|
|
8
|
-
active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n box-shadow
|
|
9
|
-
container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n cursor: pointer;\n\n width: ", "px;\n height: ", "px;\n\n background: ", ";\n border-radius: 50%;\n box-shadow: inset 0 0 0
|
|
8
|
+
active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n box-shadow:\n inset 0 0 0 1px rgba(0, 0, 0, 20%),\n 0 0 0 2px ", ";\n "])), token.colorTextTertiary),
|
|
9
|
+
container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n cursor: pointer;\n\n width: ", "px;\n height: ", "px;\n\n background: ", ";\n border-radius: 50%;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 5%);\n\n &:hover {\n box-shadow:\n inset 0 0 0 1px rgba(0, 0, 0, 5%),\n 0 0 0 2px ", ";\n }\n "])), size, size, token.colorBgContainer, token.colorText)
|
|
10
10
|
};
|
|
11
11
|
});
|
|
@@ -19,14 +19,14 @@ import { Button } from 'antd';
|
|
|
19
19
|
import { memo, useState } from 'react';
|
|
20
20
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
21
21
|
import { Flexbox } from 'react-layout-kit';
|
|
22
|
-
import Hotkey from "../../Hotkey";
|
|
23
22
|
import { KeyMapEnum } from "../../Hotkey/type";
|
|
24
23
|
import { combineKeys } from "../../Hotkey/utils";
|
|
25
24
|
import { TextArea } from "../../Input";
|
|
25
|
+
import Tooltip from "../../Tooltip";
|
|
26
26
|
import { useStyles } from "./style";
|
|
27
27
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
29
28
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
29
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
30
|
var MessageInput = /*#__PURE__*/memo(function (_ref) {
|
|
31
31
|
var text = _ref.text,
|
|
32
32
|
_ref$type = _ref.type,
|
|
@@ -53,15 +53,38 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
|
|
|
53
53
|
var _useStyles = useStyles(),
|
|
54
54
|
cx = _useStyles.cx,
|
|
55
55
|
styles = _useStyles.styles;
|
|
56
|
-
var
|
|
56
|
+
var confirmHotkey = combineKeys([KeyMapEnum.Mod, KeyMapEnum.Enter]);
|
|
57
|
+
var confirmText = (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm';
|
|
58
|
+
var cancelHotkey = combineKeys([KeyMapEnum.Esc]);
|
|
59
|
+
var cancelText = (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel';
|
|
57
60
|
var isAutoSize = height === 'auto';
|
|
58
|
-
|
|
61
|
+
var handleConfirm = function handleConfirm() {
|
|
59
62
|
return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(temporaryValue);
|
|
60
|
-
}
|
|
63
|
+
};
|
|
64
|
+
var handleCancel = function handleCancel() {
|
|
65
|
+
return onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
66
|
+
};
|
|
67
|
+
useHotkeys(confirmHotkey, handleConfirm, {
|
|
68
|
+
enableOnFormTags: true,
|
|
69
|
+
enabled: shortcut,
|
|
70
|
+
preventDefault: true
|
|
71
|
+
});
|
|
72
|
+
useHotkeys(cancelHotkey, handleCancel, {
|
|
61
73
|
enableOnFormTags: true,
|
|
62
74
|
enabled: shortcut,
|
|
63
75
|
preventDefault: true
|
|
64
76
|
});
|
|
77
|
+
var confirmButton = /*#__PURE__*/_jsx(Button, {
|
|
78
|
+
onClick: handleConfirm,
|
|
79
|
+
size: editButtonSize,
|
|
80
|
+
type: "primary",
|
|
81
|
+
children: confirmText
|
|
82
|
+
});
|
|
83
|
+
var cancllButton = /*#__PURE__*/_jsx(Button, {
|
|
84
|
+
onClick: handleCancel,
|
|
85
|
+
size: editButtonSize,
|
|
86
|
+
children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
|
|
87
|
+
});
|
|
65
88
|
return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
|
|
66
89
|
gap: 16,
|
|
67
90
|
style: _objectSpread({
|
|
@@ -92,21 +115,15 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
|
|
|
92
115
|
size: "small"
|
|
93
116
|
}, buttonProps), index);
|
|
94
117
|
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
95
|
-
children: [/*#__PURE__*/
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
})]
|
|
105
|
-
}), /*#__PURE__*/_jsx(Button, {
|
|
106
|
-
onClick: onCancel,
|
|
107
|
-
size: editButtonSize,
|
|
108
|
-
children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
|
|
109
|
-
})]
|
|
118
|
+
children: [shortcut ? /*#__PURE__*/_jsx(Tooltip, {
|
|
119
|
+
hotkey: confirmHotkey,
|
|
120
|
+
title: confirmText,
|
|
121
|
+
children: confirmButton
|
|
122
|
+
}) : confirmButton, shortcut ? /*#__PURE__*/_jsx(Tooltip, {
|
|
123
|
+
hotkey: cancelHotkey,
|
|
124
|
+
title: cancelText,
|
|
125
|
+
children: cancllButton
|
|
126
|
+
}) : cancllButton]
|
|
110
127
|
})
|
|
111
128
|
})]
|
|
112
129
|
}));
|
package/es/components.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ export { Input, type InputProps, TextArea, type TextAreaProps } from './Input';
|
|
|
41
41
|
export { default as Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, } from './Layout';
|
|
42
42
|
export { default as List, type ListItemProps } from './List';
|
|
43
43
|
export { default as Markdown, type MarkdownProps } from './Markdown';
|
|
44
|
-
export { Typography, type TypographyProps } from './Markdown/Typography';
|
|
44
|
+
export { default as Typography, type TypographyProps } from './Markdown/Typography';
|
|
45
45
|
export { default as MaterialFileTypeIcon, type MaterialFileTypeIconProps, } from './MaterialFileTypeIcon';
|
|
46
46
|
export { default as Mermaid, type MermaidProps } from './Mermaid';
|
|
47
47
|
export { default as Modal, type ModalProps } from './Modal';
|
package/es/components.js
CHANGED
|
@@ -41,7 +41,7 @@ export { Input, TextArea } from "./Input";
|
|
|
41
41
|
export { default as Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc } from "./Layout";
|
|
42
42
|
export { default as List } from "./List";
|
|
43
43
|
export { default as Markdown } from "./Markdown";
|
|
44
|
-
export { Typography } from "./Markdown/Typography";
|
|
44
|
+
export { default as Typography } from "./Markdown/Typography";
|
|
45
45
|
export { default as MaterialFileTypeIcon } from "./MaterialFileTypeIcon";
|
|
46
46
|
export { default as Mermaid } from "./Mermaid";
|
|
47
47
|
export { default as Modal } from "./Modal";
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
import { SWRResponse } from 'swr';
|
|
1
2
|
export declare const FALLBACK_LANG = "txt";
|
|
2
|
-
|
|
3
|
+
declare const highlightCache: Map<string, string>;
|
|
4
|
+
declare const MD5_LENGTH_THRESHOLD = 10000;
|
|
5
|
+
declare const loadShiki: () => Promise<(code: string, options: import("@shikijs/types").CodeToHastOptions<import("shiki/dist/langs.mjs").BundledLanguage, import("shiki/dist/themes.mjs").BundledTheme>) => Promise<string>>;
|
|
6
|
+
declare const shikiPromise: Promise<(code: string, options: import("@shikijs/types").CodeToHastOptions<import("shiki/dist/langs.mjs").BundledLanguage, import("shiki/dist/themes.mjs").BundledTheme>) => Promise<string>>;
|
|
7
|
+
declare const escapeHtml: (str: string) => string;
|
|
8
|
+
export declare const useHighlight: (text: string, lang: string, enableTransformer?: boolean) => SWRResponse<string, Error>;
|
|
3
9
|
export { default as languageMap } from './languageMap';
|
|
10
|
+
export { escapeHtml, highlightCache, loadShiki, MD5_LENGTH_THRESHOLD, shikiPromise };
|