@lobehub/ui 1.7.2 → 1.8.0

package/es/Markdown/index.js

@@ -1,10 +1,11 @@
 import { Divider, Typography } from 'antd';
+import pangu from 'pangu';
 import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useStyles } from "./style";
 import Code from "./Code";
 import CodeBlock from "./CodeBlock";
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Markdown = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
@@ -23,7 +24,7 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
       className: cx(styles.container, className),
       components: components,
       remarkPlugins: [remarkGfm],
-      children: children
+      children: pangu.spacing(children)
     })
   });
 });

package/es/Markdown/style.js

@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 2;\n        color: ", ";\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 2;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius),
     code: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 2px 4px;\n      font-family: ", " !important;\n      color: ", ";\n      border-radius: 4px;\n    "])), token.fontFamilyCode, isDarkMode ? token.cyan8 : token.pink7)
   };
 });

package/es/ThemeProvider/GlobalStyle.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createGlobalStyle } from 'antd-style';
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\";\n    --font-variations: \"opsz\" auto;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n\n  * {\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    background-color: transparent;\n\n    &-thumb {\n      background-color: ", ";\n      border-radius: 4px;\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\";\n    --font-variations: \"opsz\" auto;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n\n  * {\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    background-color: transparent;\n\n    &-thumb {\n      background-color: ", ";\n      border-radius: 4px;\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {

package/es/ThemeProvider/index.js

@@ -4,6 +4,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { App } from 'antd';
 import { ThemeProvider as AntdThemeProvider, StyleProvider, setupStyled } from 'antd-style';
 import React, { useCallback } from 'react';
+// @ts-ignore
+import ReactFontLoader from 'react-font-loader';
 import { ThemeContext } from 'styled-components';
 import { createCustomToken, getAntdTheme, getCustomStylish } from "../styles";
 import GlobalStyle from "./GlobalStyle";
@@ -31,7 +33,13 @@ var ThemeProvider = function ThemeProvider(_ref) {
       theme: getAntdTheme,
       customStylish: getCustomStylish,
       customToken: getCustomToken,
-      children: [/*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
+      children: [/*#__PURE__*/_jsx(ReactFontLoader, {
+        url: "https://raw.githubusercontent.com/divspace/hack/master/css/hack.css"
+      }), /*#__PURE__*/_jsx(ReactFontLoader, {
+        url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans.css"
+      }), /*#__PURE__*/_jsx(ReactFontLoader, {
+        url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans_sc.css"
+      }), /*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
         style: {
           minHeight: 'inherit',
           width: 'inherit'

package/es/styles/theme/base.js

@@ -1,7 +1,7 @@
-var fontEmoji = "\"\"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Segoe UI\", Apple Color Emoji\", \"Twemoji Mozilla\", \"Noto Color Emoji\", \"Android Emoji\"";
-var fontEn = "\"Segoe UI\", \"SF Pro Display\",-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif";
-var fontCn = "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft Yahei UI\", \"Microsoft Yahei\", \"Source Han Sans CN\", sans-serif";
-var fontCode = "\"Hack Nerd Font Mono\", Hack, \"SFMono Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace";
+var FONT_EMOJI = "\"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Apple Color Emoji\", \"Twemoji Mozilla\", \"Noto Color Emoji\", \"Android Emoji\"";
+var FONT_EN = "\"HarmonyOS Sans\", \"Segoe UI\", \"SF Pro Display\",-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif";
+var FONT_CN = "\"HarmonyOS Sans SC\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft Yahei UI\", \"Microsoft Yahei\", \"Source Han Sans CN\", sans-serif";
+var FONT_CODE = "Hack, \"SFMono Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace";
 export var baseTheme = {
   token: {
     colorInfo: '#0070f3',
@@ -13,7 +13,7 @@ export var baseTheme = {
     borderRadiusSM: 3,
     borderRadiusLG: 8,
     controlHeight: 36,
-    fontFamily: [fontEn, fontCn, fontEmoji].join(','),
-    fontFamilyCode: fontCode
+    fontFamily: [FONT_EN, FONT_CN, FONT_EMOJI].join(','),
+    fontFamilyCode: [FONT_CODE, FONT_CN, FONT_EMOJI].join(',')
   }
 };

package/lib/Markdown/index.js

@@ -33,12 +33,13 @@ __export(Markdown_exports, {
 });
 module.exports = __toCommonJS(Markdown_exports);
 var import_antd = require("antd");
+var import_pangu = __toESM(require("pangu"));
 var import_react = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
-var import_style = require("./style");
 var import_Code = __toESM(require("./Code"));
 var import_CodeBlock = __toESM(require("./CodeBlock"));
+var import_style = require("./style");
 var Markdown = (0, import_react.memo)(({ children, className }) => {
   const { styles, cx } = (0, import_style.useStyles)();
   const components = { pre: import_CodeBlock.default, code: import_Code.default, hr: import_antd.Divider, a: import_antd.Typography.Link };
@@ -49,7 +50,7 @@ var Markdown = (0, import_react.memo)(({ children, className }) => {
       components,
       remarkPlugins: [import_remark_gfm.default]
     },
-    children
+    import_pangu.default.spacing(children)
   ));
 });
 var Markdown_default = Markdown;

package/lib/Markdown/style.js

@@ -34,6 +34,7 @@ var useStyles = (0, import_antd_style.createStyles)(({ css, token, isDarkMode })
         font-size: 14px;
         line-height: 2;
         color: ${token.colorText};
+        text-align: justify;
         word-wrap: break-word;
       }
 

package/lib/ThemeProvider/GlobalStyle.js

@@ -76,6 +76,11 @@ var GlobalStyle = import_antd_style.createGlobalStyle`
       display: none;
     }
   }
+
+  p {
+    text-align: justify;
+    word-wrap: break-word;
+  }
 `;
 var GlobalStyle_default = GlobalStyle;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/ThemeProvider/index.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(ThemeProvider_exports);
 var import_antd = require("antd");
 var import_antd_style = require("antd-style");
 var import_react = __toESM(require("react"));
+var import_react_font_loader = __toESM(require("react-font-loader"));
 var import_styled_components = require("styled-components");
 var import_styles = require("../styles");
 var import_GlobalStyle = __toESM(require("./GlobalStyle"));
@@ -59,6 +60,9 @@ var ThemeProvider = ({ token, children, themeMode }) => {
       customStylish: import_styles.getCustomStylish,
       customToken: getCustomToken
     },
+    /* @__PURE__ */ import_react.default.createElement(import_react_font_loader.default, { url: "https://raw.githubusercontent.com/divspace/hack/master/css/hack.css" }),
+    /* @__PURE__ */ import_react.default.createElement(import_react_font_loader.default, { url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans.css" }),
+    /* @__PURE__ */ import_react.default.createElement(import_react_font_loader.default, { url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans_sc.css" }),
     /* @__PURE__ */ import_react.default.createElement(import_GlobalStyle.default, null),
     /* @__PURE__ */ import_react.default.createElement(import_antd.App, { style: { minHeight: "inherit", width: "inherit" } }, children)
   ));

package/lib/styles/theme/base.js

@@ -22,10 +22,10 @@ __export(base_exports, {
   baseTheme: () => baseTheme
 });
 module.exports = __toCommonJS(base_exports);
-var fontEmoji = `""Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"`;
-var fontEn = `"Segoe UI", "SF Pro Display",-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`;
-var fontCn = `"PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif`;
-var fontCode = `"Hack Nerd Font Mono", Hack, "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`;
+var FONT_EMOJI = `"Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"`;
+var FONT_EN = `"HarmonyOS Sans", "Segoe UI", "SF Pro Display",-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`;
+var FONT_CN = `"HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif`;
+var FONT_CODE = `Hack, "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`;
 var baseTheme = {
   token: {
     colorInfo: "#0070f3",
@@ -37,8 +37,8 @@ var baseTheme = {
     borderRadiusSM: 3,
     borderRadiusLG: 8,
     controlHeight: 36,
-    fontFamily: [fontEn, fontCn, fontEmoji].join(","),
-    fontFamilyCode: fontCode
+    fontFamily: [FONT_EN, FONT_CN, FONT_EMOJI].join(","),
+    fontFamilyCode: [FONT_CODE, FONT_CN, FONT_EMOJI].join(",")
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -78,16 +78,18 @@
     "dayjs": "^1",
     "fast-deep-equal": "^3",
     "immer": "^10",
-    "leva": "^0.9.34",
+    "leva": "^0.9",
     "lodash": "^4",
     "lucide-react": "latest",
+    "pangu": "^4",
     "polished": "^4",
     "prism-react-renderer": "^2",
     "re-resizable": "^6",
+    "react-font-loader": "^2.0.0",
     "react-layout-kit": "^1",
     "react-markdown": "^8",
     "react-rnd": "^10",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^3",
     "shiki-es": "^0.2",
     "styled-components": "^6.0.0-rc.1",
     "ts-md5": "^1",
@@ -101,6 +103,7 @@
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
     "@types/lodash": "^4",
+    "@types/pangu": "^4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@umijs/lint": "^4",