@lobehub/ui 2.11.6 → 2.11.8
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.
|
@@ -30,7 +30,7 @@ var Typography = /*#__PURE__*/memo(function (_ref) {
|
|
|
30
30
|
cx = _useStyles.cx,
|
|
31
31
|
styles = _useStyles.styles;
|
|
32
32
|
return /*#__PURE__*/_jsx("article", _objectSpread(_objectSpread({
|
|
33
|
-
className: cx(styles.root,
|
|
33
|
+
className: cx(styles.root, className),
|
|
34
34
|
ref: ref,
|
|
35
35
|
style: _objectSpread({
|
|
36
36
|
// @ts-ignore
|
|
@@ -1,31 +1,29 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
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
4
|
var IGNORE_CLASSNAME = '.ignore-markdown-style';
|
|
5
5
|
export var useStyles = createStyles(function (_ref) {
|
|
6
|
-
var
|
|
7
|
-
token = _ref.token,
|
|
6
|
+
var token = _ref.token,
|
|
8
7
|
css = _ref.css;
|
|
9
|
-
var __root = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
10
|
-
var a = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n a
|
|
11
|
-
var blockquote = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n blockquote
|
|
12
|
-
var code = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n code
|
|
13
|
-
var del = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n del
|
|
14
|
-
var details = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n details
|
|
15
|
-
var header = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n h1
|
|
16
|
-
var hr = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n hr
|
|
17
|
-
var img = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n img
|
|
18
|
-
var kbd = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n kbd
|
|
19
|
-
var list = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n li
|
|
20
|
-
var p = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n p
|
|
8
|
+
var __root = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --lobe-markdown-font-size: 16px;\n --lobe-markdown-header-multiple: 1;\n --lobe-markdown-margin-multiple: 2;\n --lobe-markdown-line-height: 1.8;\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 "])), token.borderRadiusLG, token.colorFillQuaternary);
|
|
9
|
+
var a = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n a {\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n }\n "])), token.colorInfoText, token.colorInfoHover);
|
|
10
|
+
var blockquote = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n blockquote {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n border-inline-start: solid 4px ", ";\n\n color: ", ";\n }\n "])), token.colorBorder, token.colorTextSecondary);
|
|
11
|
+
var code = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n 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 border: 1px solid var(--lobe-markdown-border-color);\n border-radius: 0.25em;\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 }\n }\n "])), token.fontFamilyCode, token.colorFillSecondary);
|
|
12
|
+
var del = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n del {\n color: ", ";\n text-decoration: line-through;\n }\n "])), token.colorTextDescription);
|
|
13
|
+
var details = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n details {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n padding-block: 0.75em;\n padding-inline: 1em;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n background: ", ";\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 border-block-end: 1.5px solid ", ";\n border-inline-end: 1.5px solid ", ";\n\n font-family: ", ";\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 "])), token.colorFillTertiary, token.colorTextSecondary, token.colorTextSecondary, token.fontFamily, token.motionEaseOut, token.colorBorder);
|
|
14
|
+
var header = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n h1,\n h2,\n h3,\n h4,\n h5,\n 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 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h2 {\n font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n }\n\n h3 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h4 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h5,\n h6 {\n font-size: calc(var(--lobe-markdown-font-size) * 1);\n }\n "])));
|
|
15
|
+
var hr = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n hr {\n width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\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 "])), token.colorBorder);
|
|
16
|
+
var img = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n img {\n max-width: 100%;\n }\n\n > img,\n > p > img {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n "])));
|
|
17
|
+
var kbd = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n 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 border: 1px solid ", ";\n border-radius: 0.25em;\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 }\n "])), token.colorBorderSecondary, token.fontFamily, token.colorBgLayout);
|
|
18
|
+
var list = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n li {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n p:first-child {\n display: inline;\n }\n }\n\n ul,\n ol {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\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 {\n list-style: auto;\n }\n\n ul {\n list-style-type: none;\n\n > li {\n &::before {\n content: '-';\n\n position: absolute;\n\n display: inline-block;\n\n margin-inline: -1em 0.5em;\n\n opacity: 0.5;\n }\n }\n }\n "])));
|
|
19
|
+
var p = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n p {\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) * 0.5em);\n }\n\n &:not(:last-child) {\n margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n }\n "])));
|
|
21
20
|
var pre = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n pre {\n font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n }\n "])));
|
|
22
|
-
var strong = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n strong
|
|
23
|
-
var svg = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n svg
|
|
24
|
-
var table = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n table
|
|
25
|
-
var video = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n > video
|
|
21
|
+
var strong = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n strong {\n font-weight: 600;\n }\n "])));
|
|
22
|
+
var svg = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n svg {\n line-height: 1;\n }\n "])));
|
|
23
|
+
var table = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n 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) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\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 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 "])), token.colorFillQuaternary, token.colorFillQuaternary);
|
|
24
|
+
var video = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n > video,\n > p > video {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\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 {\n max-width: 100%;\n }\n "])));
|
|
26
25
|
var gfm = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n .markdown-alert {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n padding-inline-start: 1em;\n border-inline-start: solid 4px ", ";\n\n > p {\n margin-block-start: 0 !important;\n }\n }\n\n .markdown-alert > :first-child {\n margin-block-start: 0;\n }\n\n .markdown-alert > :last-child {\n margin-block-end: 0;\n }\n\n .markdown-alert-note {\n border-inline-start-color: ", ";\n }\n\n .markdown-alert-tip {\n border-inline-start-color: ", ";\n }\n\n .markdown-alert-important {\n border-inline-start-color: ", ";\n }\n\n .markdown-alert-warning {\n border-inline-start-color: ", ";\n }\n\n .markdown-alert-caution {\n border-inline-start-color: ", ";\n }\n\n .markdown-alert-title {\n display: flex;\n align-items: center;\n margin-block-end: 0.5em !important;\n font-weight: 500;\n }\n\n .markdown-alert-note .markdown-alert-title {\n color: ", ";\n fill: ", ";\n }\n\n .markdown-alert-tip .markdown-alert-title {\n color: ", ";\n fill: ", ";\n }\n\n .markdown-alert-important .markdown-alert-title {\n color: ", ";\n fill: ", ";\n }\n\n .markdown-alert-warning .markdown-alert-title {\n color: ", ";\n fill: ", ";\n }\n\n .markdown-alert-caution .markdown-alert-title {\n color: ", ";\n fill: ", ";\n }\n\n .octicon {\n overflow: visible !important;\n display: inline-block;\n margin-inline-end: 0.5em;\n vertical-align: text-bottom;\n }\n\n .task-list-item {\n &::before {\n display: none !important;\n }\n\n input[type='checkbox'] {\n margin-block: 0 0.25em;\n margin-inline: -1.6em 0.2em;\n vertical-align: middle;\n }\n\n input[type='checkbox']:dir(rtl) {\n margin: 0 -1.6em 0.25em 0.2em;\n }\n }\n\n /* Style the footnotes section. */\n\n .footnotes {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n font-size: smaller;\n color: #8b949e;\n\n #footnote-label {\n display: none;\n }\n\n > ol {\n margin: 0 !important;\n }\n }\n\n .sr-only {\n position: absolute;\n\n overflow: hidden;\n\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n\n word-wrap: normal;\n\n clip: rect(0, 0, 0, 0);\n }\n\n sup {\n line-height: var(--lobe-markdown-line-height);\n }\n\n sup:has(a[aria-describedby='footnote-label']) {\n margin-inline: 2px;\n vertical-align: super !important;\n\n [data-footnote-ref] {\n display: inline-block;\n\n width: 16px;\n height: 16px;\n border-radius: 4px;\n\n font-family: ", ";\n font-size: 10px;\n color: ", " !important;\n text-align: center;\n\n background: ", ";\n }\n }\n "])), token.colorBorder, token.colorInfo, token.colorSuccess, token.purple, token.colorWarning, token.colorError, token.colorInfo, token.colorInfo, token.colorSuccess, token.colorSuccess, token.purple, token.purple, token.colorWarning, token.colorWarning, token.colorError, token.colorError, token.fontFamilyCode, token.colorTextSecondary, token.colorFillSecondary);
|
|
27
26
|
return {
|
|
28
|
-
root: __root,
|
|
29
|
-
variant: cx(a, blockquote, code, del, details, header, hr, img, kbd, list, p, pre, strong, svg, table, video, gfm)
|
|
27
|
+
root: css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n :not(:has(", ")),\n .markdown {\n ", "\n }\n "])), IGNORE_CLASSNAME, [__root, a, blockquote, code, del, details, header, hr, img, kbd, list, p, pre, strong, svg, table, video, gfm])
|
|
30
28
|
};
|
|
31
29
|
});
|
|
@@ -45,9 +45,11 @@ export var useMarkdownComponents = function useMarkdownComponents() {
|
|
|
45
45
|
}, []);
|
|
46
46
|
var memeP = useCallback(function (_ref) {
|
|
47
47
|
var _children$props;
|
|
48
|
-
var children = _ref.children
|
|
48
|
+
var children = _ref.children,
|
|
49
|
+
className = _ref.className;
|
|
49
50
|
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';
|
|
50
51
|
return hasImage ? children : /*#__PURE__*/_jsx("p", {
|
|
52
|
+
className: className,
|
|
51
53
|
children: children
|
|
52
54
|
});
|
|
53
55
|
}, []);
|