@lobehub/ui 1.166.2 → 1.167.0
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/HotKeys/index.d.ts +19 -0
- package/es/HotKeys/index.js +98 -0
- package/es/HotKeys/style.d.ts +4 -0
- package/es/HotKeys/style.js +12 -0
- package/es/HotKeys/utils.d.ts +2 -0
- package/es/HotKeys/utils.js +13 -0
- package/es/Markdown/Typography.js +1 -1
- package/es/Markdown/index.js +1 -1
- package/es/Markdown/markdown.style.d.ts +1 -0
- package/es/Markdown/markdown.style.js +18 -16
- package/es/SearchBar/index.js +18 -30
- package/es/SearchBar/style.js +1 -1
- package/es/components.d.ts +1 -0
- package/es/components.js +1 -0
- package/package.json +3 -2
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type CSSProperties } from 'react';
|
|
2
|
+
import { type FlexboxProps } from 'react-layout-kit';
|
|
3
|
+
export interface HotKeysProps extends Omit<FlexboxProps, 'children'> {
|
|
4
|
+
classNames?: {
|
|
5
|
+
descClassName?: string;
|
|
6
|
+
kbdClassName?: string;
|
|
7
|
+
};
|
|
8
|
+
compact?: boolean;
|
|
9
|
+
desc?: string;
|
|
10
|
+
inverseTheme?: boolean;
|
|
11
|
+
isApple?: boolean;
|
|
12
|
+
keys: string;
|
|
13
|
+
styles?: {
|
|
14
|
+
descStyle?: CSSProperties;
|
|
15
|
+
kbdStyle?: CSSProperties;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
declare const HotKeys: import("react").NamedExoticComponent<HotKeysProps>;
|
|
19
|
+
export default HotKeys;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
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 = ["classNames", "styles", "keys", "desc", "inverseTheme", "isApple", "compact", "className", "style"];
|
|
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
11
|
+
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."); }
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
14
|
+
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; } }
|
|
15
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
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; }
|
|
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; }
|
|
18
|
+
import { isString } from 'lodash-es';
|
|
19
|
+
import { Command, Delete, Option } from 'lucide-react';
|
|
20
|
+
import { memo, useEffect, useState } from 'react';
|
|
21
|
+
import { Flexbox } from 'react-layout-kit';
|
|
22
|
+
import Icon from "../Icon";
|
|
23
|
+
import { ALT_KEY, BACKSPACE_KEY, META_KEY, useStyles } from "./style";
|
|
24
|
+
import { splitKeysByPlus, startCase } from "./utils";
|
|
25
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
26
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
|
+
var HotKeys = /*#__PURE__*/memo(function (_ref) {
|
|
28
|
+
var classNames = _ref.classNames,
|
|
29
|
+
styles = _ref.styles,
|
|
30
|
+
keys = _ref.keys,
|
|
31
|
+
desc = _ref.desc,
|
|
32
|
+
inverseTheme = _ref.inverseTheme,
|
|
33
|
+
isApple = _ref.isApple,
|
|
34
|
+
compact = _ref.compact,
|
|
35
|
+
className = _ref.className,
|
|
36
|
+
style = _ref.style,
|
|
37
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
+
var _useStyles = useStyles(inverseTheme),
|
|
39
|
+
cx = _useStyles.cx,
|
|
40
|
+
s = _useStyles.styles;
|
|
41
|
+
var _useState = useState(splitKeysByPlus(keys)),
|
|
42
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
43
|
+
keysGroup = _useState2[0],
|
|
44
|
+
setKeysGroup = _useState2[1];
|
|
45
|
+
var visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
|
|
46
|
+
useEffect(function () {
|
|
47
|
+
var _navigator;
|
|
48
|
+
var isAppleDevice = isApple === undefined ? /(mac|iphone|ipod|ipad)/i.test(typeof navigator === 'undefined' ? '' : (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform) : isApple;
|
|
49
|
+
var mapping = _defineProperty(_defineProperty(_defineProperty({}, ALT_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
|
|
50
|
+
icon: Option
|
|
51
|
+
}) : 'alt'), BACKSPACE_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
|
|
52
|
+
icon: Delete
|
|
53
|
+
}) : 'backspace'), META_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
|
|
54
|
+
icon: Command
|
|
55
|
+
}) : 'ctrl');
|
|
56
|
+
var newValue = splitKeysByPlus(keys).map(function (k) {
|
|
57
|
+
var _mapping$k;
|
|
58
|
+
return (_mapping$k = mapping[k]) !== null && _mapping$k !== void 0 ? _mapping$k : k;
|
|
59
|
+
});
|
|
60
|
+
setKeysGroup(newValue);
|
|
61
|
+
}, [keys, isApple]);
|
|
62
|
+
return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
|
|
63
|
+
align: 'center',
|
|
64
|
+
className: cx(s, className),
|
|
65
|
+
gap: 2,
|
|
66
|
+
horizontal: true,
|
|
67
|
+
style: _objectSpread({
|
|
68
|
+
visibility: visibility
|
|
69
|
+
}, style)
|
|
70
|
+
}, rest), {}, {
|
|
71
|
+
children: [desc && /*#__PURE__*/_jsx("span", {
|
|
72
|
+
className: classNames === null || classNames === void 0 ? void 0 : classNames.descClassName,
|
|
73
|
+
style: _objectSpread({
|
|
74
|
+
marginRight: 10
|
|
75
|
+
}, styles === null || styles === void 0 ? void 0 : styles.descStyle),
|
|
76
|
+
children: desc
|
|
77
|
+
}), compact ? /*#__PURE__*/_jsx(Flexbox, {
|
|
78
|
+
align: 'center',
|
|
79
|
+
as: 'kbd',
|
|
80
|
+
className: classNames === null || classNames === void 0 ? void 0 : classNames.descClassName,
|
|
81
|
+
gap: 4,
|
|
82
|
+
horizontal: true,
|
|
83
|
+
style: styles === null || styles === void 0 ? void 0 : styles.kbdStyle,
|
|
84
|
+
children: keysGroup.map(function (key, index) {
|
|
85
|
+
return /*#__PURE__*/_jsx("div", {
|
|
86
|
+
children: isString(key) ? startCase(key) : key
|
|
87
|
+
}, index);
|
|
88
|
+
})
|
|
89
|
+
}) : keysGroup.map(function (key, index) {
|
|
90
|
+
return /*#__PURE__*/_jsx("kbd", {
|
|
91
|
+
className: classNames === null || classNames === void 0 ? void 0 : classNames.descClassName,
|
|
92
|
+
style: styles === null || styles === void 0 ? void 0 : styles.kbdStyle,
|
|
93
|
+
children: isString(key) ? startCase(key) : key
|
|
94
|
+
}, index);
|
|
95
|
+
})]
|
|
96
|
+
}));
|
|
97
|
+
});
|
|
98
|
+
export default HotKeys;
|
|
@@ -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
|
+
import { rgba } from 'polished';
|
|
5
|
+
export var ALT_KEY = 'alt';
|
|
6
|
+
export var META_KEY = 'mod';
|
|
7
|
+
export var BACKSPACE_KEY = 'backspace';
|
|
8
|
+
export var useStyles = createStyles(function (_ref, inverseTheme) {
|
|
9
|
+
var css = _ref.css,
|
|
10
|
+
token = _ref.token;
|
|
11
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n kbd {\n overflow: hidden;\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n\n min-width: 16px;\n height: 22px;\n padding-block: 0;\n padding-inline: 8px;\n\n font-family: ", ";\n font-size: 12px;\n line-height: 1.1;\n color: ", ";\n text-align: center;\n white-space: nowrap;\n\n background: ", ";\n border: none;\n border-radius: ", "px;\n }\n "])), token.fontFamily, inverseTheme ? token.colorTextTertiary : token.colorTextSecondary, inverseTheme ? rgba(token.colorTextTertiary, 0.15) : token.colorFillTertiary, token.borderRadiusSM);
|
|
12
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export var splitKeysByPlus = function splitKeysByPlus(keys) {
|
|
2
|
+
var placeholder = 'PLACEHOLDER';
|
|
3
|
+
var parts = keys.replaceAll('++', "+".concat(placeholder)).split('+');
|
|
4
|
+
return parts.filter(Boolean).map(function (part) {
|
|
5
|
+
if (part === placeholder) return '+';
|
|
6
|
+
return part;
|
|
7
|
+
});
|
|
8
|
+
};
|
|
9
|
+
export var startCase = function startCase(str) {
|
|
10
|
+
return str.replaceAll(/([A-Z])/g, ' $1').replace(/^./, function (s) {
|
|
11
|
+
return s.toUpperCase();
|
|
12
|
+
}).trim();
|
|
13
|
+
};
|
|
@@ -28,7 +28,7 @@ export var Typography = function Typography(_ref) {
|
|
|
28
28
|
cx = _useStyles.cx,
|
|
29
29
|
styles = _useStyles.styles;
|
|
30
30
|
return /*#__PURE__*/_jsx("article", _objectSpread(_objectSpread({
|
|
31
|
-
className: cx(styles.__root, styles.a, styles.blockquote, styles.code, styles.details, styles.header, styles.hr, styles.img, styles.kbd, styles.list, styles.p, styles.pre, styles.strong, styles.table, styles.video, className)
|
|
31
|
+
className: cx(styles.__root, styles.a, styles.blockquote, styles.code, styles.details, styles.header, styles.hr, styles.img, styles.kbd, styles.list, styles.p, styles.pre, styles.strong, styles.table, styles.video, styles.svg, className)
|
|
32
32
|
}, rest), {}, {
|
|
33
33
|
children: children
|
|
34
34
|
}));
|
package/es/Markdown/index.js
CHANGED
|
@@ -134,7 +134,7 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
|
|
|
134
134
|
var defaultDOM = /*#__PURE__*/_jsx(ImageGallery, {
|
|
135
135
|
enable: enableImageGallery,
|
|
136
136
|
children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
|
|
137
|
-
className: cx(mdStyles.__root, mdStyles.a, mdStyles.blockquote, mdStyles.code, mdStyles.details, mdStyles.header, mdStyles.hr, mdStyles.img, mdStyles.kbd, mdStyles.list, mdStyles.p, mdStyles.pre, mdStyles.strong, mdStyles.table, mdStyles.video, enableLatex && styles.latex, isChatMode && styles.chat),
|
|
137
|
+
className: cx(mdStyles.__root, mdStyles.a, mdStyles.blockquote, mdStyles.code, mdStyles.details, mdStyles.header, mdStyles.hr, mdStyles.img, mdStyles.kbd, mdStyles.list, mdStyles.p, mdStyles.pre, mdStyles.strong, mdStyles.table, mdStyles.video, mdStyles.svg, enableLatex && styles.latex, isChatMode && styles.chat),
|
|
138
138
|
components: memoComponents,
|
|
139
139
|
rehypePlugins: memoRehypePlugins,
|
|
140
140
|
remarkPlugins: memoRemarkPlugins
|
|
@@ -17,6 +17,7 @@ export declare const useStyles: (props?: {
|
|
|
17
17
|
p: import("antd-style").SerializedStyles;
|
|
18
18
|
pre: import("antd-style").SerializedStyles;
|
|
19
19
|
strong: import("antd-style").SerializedStyles;
|
|
20
|
+
svg: import("antd-style").SerializedStyles;
|
|
20
21
|
table: import("antd-style").SerializedStyles;
|
|
21
22
|
video: import("antd-style").SerializedStyles;
|
|
22
23
|
}>;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
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
|
import { rgba } from 'polished';
|
|
5
|
+
var IGNORE_CLASSNAME = '.ignore-markdown-style';
|
|
5
6
|
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
6
7
|
var token = _ref.token,
|
|
7
8
|
isDarkMode = _ref.isDarkMode,
|
|
@@ -15,20 +16,21 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
15
16
|
_ref2$lineHeight = _ref2.lineHeight,
|
|
16
17
|
lineHeight = _ref2$lineHeight === void 0 ? 1.8 : _ref2$lineHeight;
|
|
17
18
|
return {
|
|
18
|
-
__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
|
|
19
|
-
a: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n a {\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n }\n "])), token.colorInfoText, token.colorInfoHover),
|
|
20
|
-
blockquote: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n blockquote {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n
|
|
21
|
-
code: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n code:not(:has(span)) {\n
|
|
22
|
-
details: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n details {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n padding-block: 0.75em;\n padding-inline: 1em;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n
|
|
23
|
-
header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block: max(\n calc(\n var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em\n ),\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(\n var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple))\n );\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 "]))),
|
|
24
|
-
hr: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n hr {\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.colorBorderSecondary),
|
|
25
|
-
img: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n 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 "]))),
|
|
26
|
-
kbd: css(_templateObject9 || (_templateObject9 = _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
|
|
27
|
-
list: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n li {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n p {\n display: inline;\n }\n }\n\n ul,\n 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 {\n list-style: auto;\n }\n\n 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 "]))),
|
|
28
|
-
p: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n p {\n margin-block: 4px;\n line-height: var(--lobe-markdown-line-height);\n letter-spacing: 0.02em;\n
|
|
29
|
-
pre: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n pre,\n [data-code-type='highlighter'] {\n
|
|
30
|
-
strong: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n strong {\n font-weight: 600;\n }\n "]))),
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
__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: ", ";\n line-height: ", ";\n }\n "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, isDarkMode ? token.colorBorderSecondary : rgba(token.colorBorderSecondary, 0.5), IGNORE_CLASSNAME, token.fontSize, token.lineHeight),
|
|
20
|
+
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
|
+
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
|
+
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
|
+
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
|
+
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(\n var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em\n ),\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
|
+
hr: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n hr:not(", " hr) {\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.colorBorderSecondary),
|
|
26
|
+
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
|
+
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
|
+
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
|
+
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
|
+
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
|
+
strong: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n strong:not(", " strong) {\n font-weight: 600;\n }\n "])), IGNORE_CLASSNAME),
|
|
32
|
+
svg: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n svg:not(", " svg) {\n line-height: 1;\n }\n "])), IGNORE_CLASSNAME),
|
|
33
|
+
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
|
+
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)
|
|
33
35
|
};
|
|
34
36
|
});
|
package/es/SearchBar/index.js
CHANGED
|
@@ -16,11 +16,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
16
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; }
|
|
17
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; }
|
|
18
18
|
import { LucideLoader2, Search } from 'lucide-react';
|
|
19
|
-
import { memo,
|
|
19
|
+
import { memo, useRef, useState } from 'react';
|
|
20
|
+
import { useHotkeys } from 'react-hotkeys-hook';
|
|
20
21
|
import useControlledState from 'use-merge-value';
|
|
22
|
+
import HotKeys from "../HotKeys";
|
|
21
23
|
import Icon from "../Icon";
|
|
22
24
|
import { Input } from "../Input";
|
|
23
|
-
import Tag from "../Tag";
|
|
24
25
|
import Spotlight from "../awesome/Spotlight";
|
|
25
26
|
import { useStyles } from "./style";
|
|
26
27
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -59,37 +60,23 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
|
|
|
59
60
|
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
60
61
|
inputValue = _useControlledState2[0],
|
|
61
62
|
setInputValue = _useControlledState2[1];
|
|
62
|
-
var _useState = useState(
|
|
63
|
+
var _useState = useState(true),
|
|
63
64
|
_useState2 = _slicedToArray(_useState, 2),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
var _useState3 = useState(true),
|
|
67
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
68
|
-
showTag = _useState4[0],
|
|
69
|
-
setShowTag = _useState4[1];
|
|
65
|
+
showTag = _useState2[0],
|
|
66
|
+
setShowTag = _useState2[1];
|
|
70
67
|
var _useStyles = useStyles(),
|
|
71
68
|
styles = _useStyles.styles,
|
|
72
69
|
cx = _useStyles.cx;
|
|
73
70
|
var inputReference = useRef(null);
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
var hotKey = ['mod', shortKey.toLowerCase()].join('+');
|
|
72
|
+
useHotkeys(hotKey, function () {
|
|
73
|
+
var _inputReference$curre;
|
|
76
74
|
if (!enableShortKey) return;
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
if ((isAppleDevice ? event_.metaKey : event_.ctrlKey) && event_.key === shortKey) {
|
|
83
|
-
var _inputReference$curre;
|
|
84
|
-
event_.preventDefault();
|
|
85
|
-
(_inputReference$curre = inputReference.current) === null || _inputReference$curre === void 0 || _inputReference$curre.focus();
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
document.addEventListener('keydown', handler);
|
|
89
|
-
return function () {
|
|
90
|
-
return document.removeEventListener('keydown', handler);
|
|
91
|
-
};
|
|
92
|
-
}, []);
|
|
75
|
+
(_inputReference$curre = inputReference.current) === null || _inputReference$curre === void 0 || _inputReference$curre.focus();
|
|
76
|
+
}, {
|
|
77
|
+
enableOnFormTags: true,
|
|
78
|
+
preventDefault: true
|
|
79
|
+
});
|
|
93
80
|
return /*#__PURE__*/_jsxs("div", {
|
|
94
81
|
className: cx(styles.search, className),
|
|
95
82
|
style: style,
|
|
@@ -134,10 +121,11 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
|
|
|
134
121
|
ref: inputReference,
|
|
135
122
|
style: inputStyle,
|
|
136
123
|
value: value
|
|
137
|
-
}, rest)), enableShortKey && showTag && !inputValue && /*#__PURE__*/
|
|
124
|
+
}, rest)), enableShortKey && showTag && !inputValue && /*#__PURE__*/_jsx(HotKeys, {
|
|
138
125
|
className: cx(styles.tag, shortKeyClassName),
|
|
139
|
-
|
|
140
|
-
|
|
126
|
+
compact: true,
|
|
127
|
+
keys: hotKey,
|
|
128
|
+
style: shortKeyStyle
|
|
141
129
|
})]
|
|
142
130
|
});
|
|
143
131
|
});
|
package/es/SearchBar/style.js
CHANGED
|
@@ -10,6 +10,6 @@ export var useStyles = createStyles(function (_ref) {
|
|
|
10
10
|
icon: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n "])), token.colorTextPlaceholder),
|
|
11
11
|
input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n padding-block: 0;\n padding-inline: 12px 8px;\n "]))),
|
|
12
12
|
search: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n max-width: 100%;\n "]))),
|
|
13
|
-
tag: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n z-index: 5;\n inset-block-start: 50%;\n inset-inline-end:
|
|
13
|
+
tag: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n z-index: 5;\n inset-block-start: 50%;\n inset-inline-end: 6px;\n transform: translateY(-50%);\n\n kbd {\n color: ", ";\n }\n "])), token.colorTextDescription))
|
|
14
14
|
};
|
|
15
15
|
});
|
package/es/components.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export { default as Grid, type GridProps } from './Grid';
|
|
|
31
31
|
export { default as Header, type HeaderProps } from './Header';
|
|
32
32
|
export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';
|
|
33
33
|
export { useChatListActionsBar } from './hooks/useChatListActionsBar';
|
|
34
|
+
export { default as HotKeys, type HotKeysProps } from './HotKeys';
|
|
34
35
|
export { default as Icon, type IconProps, type IconSize } from './Icon';
|
|
35
36
|
export * from './Icon/icons';
|
|
36
37
|
export { default as Image, type ImageProps } from './Image';
|
package/es/components.js
CHANGED
|
@@ -31,6 +31,7 @@ export { default as Grid } from "./Grid";
|
|
|
31
31
|
export { default as Header } from "./Header";
|
|
32
32
|
export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
|
|
33
33
|
export { useChatListActionsBar } from "./hooks/useChatListActionsBar";
|
|
34
|
+
export { default as HotKeys } from "./HotKeys";
|
|
34
35
|
export { default as Icon } from "./Icon";
|
|
35
36
|
export * from "./Icon/icons";
|
|
36
37
|
export { default as Image } from "./Image";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobehub/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.167.0",
|
|
4
4
|
"description": "Lobe UI is an open-source UI component library for building AIGC web apps",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lobehub",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@floating-ui/react": "^0.27.5",
|
|
56
56
|
"@giscus/react": "^3.1.0",
|
|
57
57
|
"@lobehub/fluent-emoji": "^1.2.0",
|
|
58
|
-
"@lobehub/icons": "^1.
|
|
58
|
+
"@lobehub/icons": "^1.93.0",
|
|
59
59
|
"@mdx-js/mdx": "^3.1.0",
|
|
60
60
|
"@mdx-js/react": "^3.1.0",
|
|
61
61
|
"@radix-ui/react-slot": "^1.1.2",
|
|
@@ -80,6 +80,7 @@
|
|
|
80
80
|
"re-resizable": "^6.11.2",
|
|
81
81
|
"react-avatar-editor": "^13.0.2",
|
|
82
82
|
"react-error-boundary": "^5.0.0",
|
|
83
|
+
"react-hotkeys-hook": "^4.6.1",
|
|
83
84
|
"react-layout-kit": "^1.9.1",
|
|
84
85
|
"react-markdown": "^9.1.0",
|
|
85
86
|
"react-merge-refs": "^2.1.1",
|