@lobehub/ui 2.11.4 → 2.11.6
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/Markdown/Markdown.js +10 -26
- package/es/Markdown/SyntaxMarkdown/MarkdownRender.js +2 -2
- package/es/Markdown/SyntaxMarkdown/StreamdownRender.js +6 -2
- package/es/Markdown/SyntaxMarkdown/style.d.ts +3 -0
- package/es/Markdown/SyntaxMarkdown/style.js +10 -0
- package/es/Markdown/style.d.ts +0 -1
- package/es/Markdown/style.js +5 -7
- package/es/Markdown/type.d.ts +2 -1
- package/es/hooks/useMarkdown/useMarkdownComponents.js +3 -7
- package/package.json +1 -1
package/es/Markdown/Markdown.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
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 = ["ref", "children", "className", "style", "fullFeaturedCodeBlock", "onDoubleClick", "animated", "enableLatex", "enableMermaid", "enableImageGallery", "enableCustomFootnotes", "enableGithubAlert", "enableStream", "componentProps", "allowHtml", "fontSize", "headerMultiple", "marginMultiple", "showFootnotes", "variant", "reactMarkdownProps", "lineHeight", "rehypePlugins", "remarkPlugins", "remarkPluginsAhead", "components", "customRender", "citations"]
|
|
5
|
-
_excluded2 = ["children"];
|
|
4
|
+
var _excluded = ["ref", "children", "className", "style", "fullFeaturedCodeBlock", "onDoubleClick", "animated", "enableLatex", "enableMermaid", "enableImageGallery", "enableCustomFootnotes", "enableGithubAlert", "enableStream", "componentProps", "allowHtml", "fontSize", "headerMultiple", "marginMultiple", "showFootnotes", "variant", "reactMarkdownProps", "lineHeight", "rehypePlugins", "remarkPlugins", "remarkPluginsAhead", "components", "customRender", "citations"];
|
|
6
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; }
|
|
7
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; }
|
|
8
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; }
|
|
@@ -17,7 +16,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
17
16
|
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; }
|
|
18
17
|
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; }
|
|
19
18
|
import { cva } from 'class-variance-authority';
|
|
20
|
-
import { memo,
|
|
19
|
+
import { memo, useEffect, useMemo, useState } from 'react';
|
|
21
20
|
import { PreviewGroup } from "../Image";
|
|
22
21
|
import { MarkdownProvider } from "./components/MarkdownProvider";
|
|
23
22
|
import { MarkdownRender, StreamdownRender } from "./SyntaxMarkdown";
|
|
@@ -33,12 +32,15 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
|
|
|
33
32
|
fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock,
|
|
34
33
|
onDoubleClick = _ref.onDoubleClick,
|
|
35
34
|
animated = _ref.animated,
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
_ref$enableLatex = _ref.enableLatex,
|
|
36
|
+
enableLatex = _ref$enableLatex === void 0 ? true : _ref$enableLatex,
|
|
37
|
+
_ref$enableMermaid = _ref.enableMermaid,
|
|
38
|
+
enableMermaid = _ref$enableMermaid === void 0 ? true : _ref$enableMermaid,
|
|
38
39
|
enableImageGallery = _ref.enableImageGallery,
|
|
39
40
|
enableCustomFootnotes = _ref.enableCustomFootnotes,
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
enableGithubAlert = _ref.enableGithubAlert,
|
|
42
|
+
_ref$enableStream = _ref.enableStream,
|
|
43
|
+
enableStream = _ref$enableStream === void 0 ? true : _ref$enableStream,
|
|
42
44
|
componentProps = _ref.componentProps,
|
|
43
45
|
allowHtml = _ref.allowHtml,
|
|
44
46
|
_ref$fontSize = _ref.fontSize,
|
|
@@ -67,10 +69,6 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
|
|
|
67
69
|
_useState2 = _slicedToArray(_useState, 2),
|
|
68
70
|
delayedAnimated = _useState2[0],
|
|
69
71
|
setDelayedAnimated = _useState2[1];
|
|
70
|
-
var enableLatex = Boolean(typeof eLatex === 'boolean' && eLatex) || children.includes('$');
|
|
71
|
-
var enableMermaid = Boolean(typeof eMermaid === 'boolean' && eMermaid) || children.includes('```mermaid');
|
|
72
|
-
var enableGithubAlert = Boolean(typeof eGithubAlert === 'boolean' && eGithubAlert) || children.includes('> [!');
|
|
73
|
-
var enableStream = Boolean(typeof eStream === 'boolean' && eStream) || delayedAnimated || !children.includes('[^');
|
|
74
72
|
|
|
75
73
|
// Watch for changes in animated prop
|
|
76
74
|
useEffect(function () {
|
|
@@ -92,7 +90,6 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
|
|
|
92
90
|
var variants = useMemo(function () {
|
|
93
91
|
return cva(styles.root, {
|
|
94
92
|
defaultVariants: {
|
|
95
|
-
animated: false,
|
|
96
93
|
enableLatex: true,
|
|
97
94
|
variant: 'default'
|
|
98
95
|
},
|
|
@@ -105,24 +102,12 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
|
|
|
105
102
|
enableLatex: {
|
|
106
103
|
true: styles.latex,
|
|
107
104
|
false: null
|
|
108
|
-
},
|
|
109
|
-
animated: {
|
|
110
|
-
true: styles.animated,
|
|
111
|
-
false: null
|
|
112
105
|
}
|
|
113
106
|
}
|
|
114
107
|
/* eslint-enable sort-keys-fix/sort-keys-fix */
|
|
115
108
|
});
|
|
116
109
|
}, [styles]);
|
|
117
|
-
var DefaultRender =
|
|
118
|
-
var children = _ref2.children,
|
|
119
|
-
reactMarkdownProps = _objectWithoutProperties(_ref2, _excluded2);
|
|
120
|
-
return enableStream ? /*#__PURE__*/_jsx(StreamdownRender, _objectSpread(_objectSpread({}, reactMarkdownProps), {}, {
|
|
121
|
-
children: children
|
|
122
|
-
})) : /*#__PURE__*/_jsx(MarkdownRender, _objectSpread(_objectSpread({}, reactMarkdownProps), {}, {
|
|
123
|
-
children: children
|
|
124
|
-
}));
|
|
125
|
-
}, [enableStream]);
|
|
110
|
+
var DefaultRender = enableStream && delayedAnimated ? StreamdownRender : MarkdownRender;
|
|
126
111
|
var defaultDOM = /*#__PURE__*/_jsx(DefaultRender, _objectSpread(_objectSpread({}, reactMarkdownProps), {}, {
|
|
127
112
|
children: children
|
|
128
113
|
}));
|
|
@@ -130,7 +115,6 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
|
|
|
130
115
|
enable: enableImageGallery,
|
|
131
116
|
children: /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({
|
|
132
117
|
className: cx(variants({
|
|
133
|
-
animated: delayedAnimated,
|
|
134
118
|
enableLatex: enableLatex,
|
|
135
119
|
variant: variant
|
|
136
120
|
}), className),
|
|
@@ -10,7 +10,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
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
12
|
import { memo } from 'react';
|
|
13
|
-
import
|
|
13
|
+
import Markdown from 'react-markdown';
|
|
14
14
|
import { useMarkdownComponents, useMarkdownContent, useMarkdownRehypePlugins, useMarkdownRemarkPlugins } from "../../hooks/useMarkdown";
|
|
15
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
16
|
var MarkdownRenderer = /*#__PURE__*/memo(function (_ref) {
|
|
@@ -20,7 +20,7 @@ var MarkdownRenderer = /*#__PURE__*/memo(function (_ref) {
|
|
|
20
20
|
var components = useMarkdownComponents();
|
|
21
21
|
var rehypePluginsList = useMarkdownRehypePlugins();
|
|
22
22
|
var remarkPluginsList = useMarkdownRemarkPlugins();
|
|
23
|
-
return /*#__PURE__*/_jsx(
|
|
23
|
+
return /*#__PURE__*/_jsx(Markdown, _objectSpread(_objectSpread({}, rest), {}, {
|
|
24
24
|
components: components,
|
|
25
25
|
rehypePlugins: rehypePluginsList,
|
|
26
26
|
remarkPlugins: remarkPluginsList,
|
|
@@ -12,8 +12,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
12
12
|
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; }
|
|
13
13
|
import { marked } from 'marked';
|
|
14
14
|
import { memo, useId, useMemo } from 'react';
|
|
15
|
-
import
|
|
15
|
+
import Markdown from 'react-markdown';
|
|
16
16
|
import { useMarkdownComponents, useMarkdownContent, useMarkdownRehypePlugins, useMarkdownRemarkPlugins } from "../../hooks/useMarkdown";
|
|
17
|
+
import { useStyles } from "./style";
|
|
17
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
19
|
import { createElement as _createElement } from "react";
|
|
19
20
|
var parseMarkdownIntoBlocks = function parseMarkdownIntoBlocks(markdown) {
|
|
@@ -25,7 +26,7 @@ var parseMarkdownIntoBlocks = function parseMarkdownIntoBlocks(markdown) {
|
|
|
25
26
|
var StreamdownBlock = /*#__PURE__*/memo(function (_ref) {
|
|
26
27
|
var children = _ref.children,
|
|
27
28
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
28
|
-
return /*#__PURE__*/_jsx(
|
|
29
|
+
return /*#__PURE__*/_jsx(Markdown, _objectSpread(_objectSpread({}, rest), {}, {
|
|
29
30
|
children: children
|
|
30
31
|
}));
|
|
31
32
|
}, function (prevProps, nextProps) {
|
|
@@ -35,6 +36,8 @@ StreamdownBlock.displayName = 'StreamdownBlock';
|
|
|
35
36
|
export var StreamdownRender = /*#__PURE__*/memo(function (_ref2) {
|
|
36
37
|
var children = _ref2.children,
|
|
37
38
|
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
39
|
+
var _useStyles = useStyles(),
|
|
40
|
+
styles = _useStyles.styles;
|
|
38
41
|
var escapedContent = useMarkdownContent(children || '');
|
|
39
42
|
var components = useMarkdownComponents();
|
|
40
43
|
var rehypePluginsList = useMarkdownRehypePlugins();
|
|
@@ -44,6 +47,7 @@ export var StreamdownRender = /*#__PURE__*/memo(function (_ref2) {
|
|
|
44
47
|
return parseMarkdownIntoBlocks(typeof escapedContent === 'string' ? escapedContent : '');
|
|
45
48
|
}, [escapedContent]);
|
|
46
49
|
return /*#__PURE__*/_jsx("div", {
|
|
50
|
+
className: styles.animated,
|
|
47
51
|
children: blocks.map(function (block, index) {
|
|
48
52
|
return /*#__PURE__*/_createElement(StreamdownBlock, _objectSpread(_objectSpread({}, rest), {}, {
|
|
49
53
|
components: components,
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
var _templateObject, _templateObject2;
|
|
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, keyframes } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css;
|
|
6
|
+
var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n "])));
|
|
7
|
+
return {
|
|
8
|
+
animated: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .animate-fade-in,\n .katex-html span,\n span.line > span,\n code:not(:has(span.line)) {\n opacity: 1;\n animation: ", " 1s ease-in-out;\n }\n "])), fadeIn)
|
|
9
|
+
};
|
|
10
|
+
});
|
package/es/Markdown/style.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
2
|
-
animated: import("antd-style").SerializedStyles;
|
|
3
2
|
chat: import("antd-style").SerializedStyles;
|
|
4
3
|
latex: import("antd-style").SerializedStyles;
|
|
5
4
|
root: import("antd-style").SerializedStyles;
|
package/es/Markdown/style.js
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3
|
|
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
|
-
import { createStyles
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
4
|
export var useStyles = createStyles(function (_ref) {
|
|
5
5
|
var css = _ref.css,
|
|
6
6
|
token = _ref.token,
|
|
7
7
|
isDarkMode = _ref.isDarkMode;
|
|
8
8
|
var cyanColor = isDarkMode ? token.cyan9A : token.cyan11A;
|
|
9
|
-
var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n "])));
|
|
10
9
|
return {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
root: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n max-width: 100%;\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-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),
|
|
12
|
+
root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n max-width: 100%;\n "])))
|
|
15
13
|
};
|
|
16
14
|
});
|
package/es/Markdown/type.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { AnchorProps } from 'antd';
|
|
2
|
-
import
|
|
2
|
+
import { CSSProperties, ElementType, FC, ReactNode, Ref } from 'react';
|
|
3
3
|
import type { Options as ReactMarkdownOptions } from 'react-markdown';
|
|
4
4
|
import type { Components } from 'react-markdown/lib';
|
|
5
5
|
import type { Pluggable } from 'unified';
|
|
@@ -17,6 +17,7 @@ export interface TypographyProps extends DivProps {
|
|
|
17
17
|
}
|
|
18
18
|
export interface SyntaxMarkdownProps {
|
|
19
19
|
allowHtml?: boolean;
|
|
20
|
+
allowHtmlList?: ElementType[];
|
|
20
21
|
animated?: boolean;
|
|
21
22
|
children: string;
|
|
22
23
|
citations?: CitationItem[];
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
var _excluded = ["children"];
|
|
4
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); }
|
|
5
|
-
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; }
|
|
6
|
-
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; }
|
|
7
4
|
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; }
|
|
8
5
|
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; }
|
|
9
6
|
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; }
|
|
@@ -48,12 +45,11 @@ export var useMarkdownComponents = function useMarkdownComponents() {
|
|
|
48
45
|
}, []);
|
|
49
46
|
var memeP = useCallback(function (_ref) {
|
|
50
47
|
var _children$props;
|
|
51
|
-
var children = _ref.children
|
|
52
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
48
|
+
var children = _ref.children;
|
|
53
49
|
var hasImage = _typeof(children) === 'object' && (children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 || (_children$props = _children$props.node) === null || _children$props === void 0 ? void 0 : _children$props.tagName) === 'img';
|
|
54
|
-
return hasImage ? children : /*#__PURE__*/_jsx("p",
|
|
50
|
+
return hasImage ? children : /*#__PURE__*/_jsx("p", {
|
|
55
51
|
children: children
|
|
56
|
-
})
|
|
52
|
+
});
|
|
57
53
|
}, []);
|
|
58
54
|
|
|
59
55
|
// Stable references for theme objects to prevent unnecessary re-renders
|