@yuntijs/ui 1.1.0-beta.1 → 1.1.0-beta.11

package/es/MonacoEditor/base/style.js

@@ -34,7 +34,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     }
   };
   return {
-    base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        &:hover {\n          border-color: ", ";\n          ", "\n        }\n\n        &.ve-focused {\n          ", "\n          ", "\n        }\n\n        &.ve-outline {\n          border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n        }\n\n        & > .react-monaco-editor-container {\n          width: 100%;\n          height: 100%;\n          min-height: 100px;\n          background: transparent;\n\n          ", "\n\n          .monaco-editor,\n          .monaco-editor-background,\n          .monaco-editor .inputarea.ime-input,\n          .monaco-editor .margin {\n            ", "\n          }\n\n          & > .monaco-editor {\n            border-radius: ", "px;\n            outline: none;\n            .overflow-guard,\n            .margin {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            .monaco-scrollable-element {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n          .monaco-diff-editor {\n            border-radius: ", "px;\n            & > .original > .monaco-editor {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n              .overflow-guard,\n              .margin {\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              }\n            }\n            .diffViewport {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n\n        .syntaxTips {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n\n          box-sizing: border-box;\n          width: 100%;\n          max-height: 0;\n          margin: 0;\n          padding: 10px 30px;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: 0.2s ease max-height;\n        }\n\n        .syntaxTips:hover {\n          overflow: auto;\n          max-height: 50%;\n        }\n\n        .syntaxTips .infoIcon {\n          position: absolute;\n          top: 2px;\n          right: 5px;\n          transform: rotateY(180deg);\n\n          width: 20px;\n          height: 16px;\n        }\n      "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n          "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto !important;\n            height: auto !important;\n          "]))), !isFullScreen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n              background-color: transparent;\n            "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
+    base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        &:hover {\n          border-color: ", ";\n          ", "\n        }\n\n        &.ve-focused {\n          ", "\n          ", "\n        }\n\n        &.ve-outline {\n          border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n        }\n\n        & > .react-monaco-editor-container {\n          width: 100%;\n          height: 100%;\n          min-height: 100px;\n          background: transparent;\n\n          ", "\n\n          .monaco-editor,\n          .monaco-editor-background,\n          .monaco-editor .inputarea.ime-input,\n          .monaco-editor .margin {\n            ", "\n          }\n\n          & > .monaco-editor {\n            border-radius: ", "px;\n            outline: none;\n            .overflow-guard,\n            .margin {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            .monaco-scrollable-element {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n          .monaco-diff-editor {\n            border-radius: ", "px;\n            & > .gutter {\n              outline: none;\n            }\n            & > .original > .monaco-editor {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n              outline: none;\n              .overflow-guard,\n              .margin {\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              }\n            }\n            & > .modified > .monaco-editor {\n              outline: none;\n            }\n            .diffViewport {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n              outline: none;\n            }\n          }\n        }\n\n        .syntaxTips {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n\n          box-sizing: border-box;\n          width: 100%;\n          max-height: 0;\n          margin: 0;\n          padding: 10px 30px;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: 0.2s ease max-height;\n        }\n\n        .syntaxTips:hover {\n          overflow: auto;\n          max-height: 50%;\n        }\n\n        .syntaxTips .infoIcon {\n          position: absolute;\n          top: 2px;\n          right: 5px;\n          transform: rotateY(180deg);\n\n          width: 20px;\n          height: 16px;\n        }\n      "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n          "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto !important;\n            height: auto !important;\n          "]))), !isFullScreen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n              background-color: transparent;\n            "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
     fullScreenBtn: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        &.", "-btn {\n          position: absolute;\n          top: 20px;\n          color: ", ";\n          transition: none;\n          ", "\n        }\n      "])), prefixCls, token.colorTextSecondary, isFullScreen ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                z-index: 9999;\n                right: ", "px;\n              "])), diff ? 64 : 138) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n                right: ", "px;\n              "])), minimapEnabled || diff ? 64 : 20)),
     loading: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background-color: transparent;\n\n        &::after {\n          content: '';\n          width: 16px;\n          /* display: inline; */\n          animation: ", " steps(3) 1s infinite;\n        }\n      "])), token.fontSizeSM, token.colorTextTertiary, dots)
   };

package/es/SelectCard/index.js

@@ -107,7 +107,7 @@ export var SelectCard = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }), o.label && !selected && /*#__PURE__*/_jsx(Text, {
         ellipsis: true,
         children: o.label
-      }), !isImg && o.description && /*#__PURE__*/_jsx(Paragraph, {
+      }), o.description && /*#__PURE__*/_jsx(Paragraph, {
         ellipsis: {
           rows: 2
         },

package/es/hooks/useHighlight.d.ts

@@ -1,5 +1,3 @@
 export declare const FALLBACK_LANG = "txt";
-export declare const useHighlight: (text: string, lang: string, isDarkMode: boolean) => import("swr/dist/_internal").SWRResponse<string, any, {
-    revalidateOnFocus: false;
-}>;
+export declare const useHighlight: (text: string, lang: string, enableTransformer?: boolean) => import("swr/dist/_internal").SWRResponse<string, any, any>;
 export { languageMap } from './languageMap';

package/es/hooks/useHighlight.js

@@ -1,82 +1,80 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from '@shikijs/transformers';
-import { createHighlighter } from 'shiki';
+import { useTheme, useThemeMode } from 'antd-style';
+import { useMemo } from 'react';
+import { codeToHtml } from 'shiki';
 import useSWR from 'swr';
-import { themeConfig } from "../Highlighter/theme";
+import { Md5 } from 'ts-md5';
 import { languageMap } from "./languageMap";
 export var FALLBACK_LANG = 'txt';
-var FALLBACK_LANGS = [FALLBACK_LANG];
-var cacheHighlighter;
-var initHighlighter = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(lang) {
-    var highlighter, language;
+
+// @Todo: use worker to improve performance
+export var useHighlight = function useHighlight(text, lang, enableTransformer) {
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
+  var language = lang.toLowerCase();
+  var matchedLanguage = useMemo(function () {
+    return languageMap.includes(language) ? language : FALLBACK_LANG;
+  }, [language]);
+  var theme = useTheme();
+  var transformers = useMemo(function () {
+    if (!enableTransformer) return;
+    return [transformerNotationDiff(), transformerNotationHighlight(), transformerNotationWordHighlight(), transformerNotationFocus(), transformerNotationErrorLevel()];
+  }, [enableTransformer]);
+  var key = useMemo(function () {
+    return Md5.hashStr(text);
+  }, [text]);
+  var shikiTheme = useMemo(function () {
+    if (language === 'md') {
+      return isDarkMode ? 'catppuccin-mocha' : 'catppuccin-latte';
+    }
+    return isDarkMode ? 'slack-dark' : 'slack-ochin';
+  }, [isDarkMode, language]);
+  return useSWR([matchedLanguage, isDarkMode ? 'd' : 'l', key].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          highlighter = cacheHighlighter;
-          language = lang.toLowerCase();
-          if (!(highlighter && FALLBACK_LANGS.includes(language))) {
-            _context.next = 4;
-            break;
-          }
-          return _context.abrupt("return", highlighter);
+          _context.prev = 0;
+          return _context.abrupt("return", codeToHtml(text, {
+            colorReplacements: {
+              'slack-dark': {
+                '#4ec9b0': theme.yellow,
+                '#569cd6': theme.colorError,
+                '#6a9955': theme.gray,
+                '#9cdcfe': theme.colorText,
+                '#b5cea8': theme.purple10,
+                '#c586c0': theme.colorInfo,
+                '#ce9178': theme.colorSuccess,
+                '#dcdcaa': theme.colorWarning,
+                '#e6e6e6': theme.colorText
+              },
+              'slack-ochin': {
+                '#002339': theme.colorText,
+                '#0991b6': theme.colorError,
+                '#174781': theme.purple10,
+                '#2f86d2': theme.colorText,
+                '#357b42': theme.gray,
+                '#7b30d0': theme.colorInfo,
+                '#7eb233': theme.colorWarningTextActive,
+                '#a44185': theme.colorSuccess,
+                '#dc3eb7': theme.yellow11
+              }
+            },
+            lang: matchedLanguage,
+            theme: shikiTheme,
+            transformers: transformers
+          }));
         case 4:
-          if (languageMap.includes(language) && !FALLBACK_LANGS.includes(language)) {
-            FALLBACK_LANGS.push(language);
-          }
-          _context.next = 7;
-          return createHighlighter({
-            langs: FALLBACK_LANGS,
-            themes: [themeConfig(true), themeConfig(false), 'catppuccin-latte', 'catppuccin-mocha']
-          });
-        case 7:
-          highlighter = _context.sent;
-          cacheHighlighter = highlighter;
-          return _context.abrupt("return", highlighter);
-        case 10:
+          _context.prev = 4;
+          _context.t0 = _context["catch"](0);
+          console.warn('shiki Highlight error:', _context.t0);
+          return _context.abrupt("return", text);
+        case 8:
         case "end":
           return _context.stop();
       }
-    }, _callee);
-  }));
-  return function initHighlighter(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-export var useHighlight = function useHighlight(text, lang, isDarkMode) {
-  return useSWR([lang === null || lang === void 0 ? void 0 : lang.toLowerCase(), isDarkMode ? 'dark' : 'light', text].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var language, theme, highlighter, html;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _context2.prev = 0;
-          language = lang.toLowerCase();
-          theme = isDarkMode ? 'dark' : 'light';
-          if (language === 'md') {
-            theme = isDarkMode ? 'catppuccin-mocha' : 'catppuccin-latte';
-          }
-          _context2.next = 6;
-          return initHighlighter(language);
-        case 6:
-          highlighter = _context2.sent;
-          html = highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
-            lang: languageMap.includes(language) ? language : FALLBACK_LANG,
-            theme: theme,
-            transformers: [transformerNotationDiff(), transformerNotationHighlight(), transformerNotationWordHighlight(), transformerNotationFocus(), transformerNotationErrorLevel()]
-          });
-          return _context2.abrupt("return", html);
-        case 11:
-          _context2.prev = 11;
-          _context2.t0 = _context2["catch"](0);
-          return _context2.abrupt("return", '');
-        case 14:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2, null, [[0, 11]]);
-  })), {
-    revalidateOnFocus: false
-  });
+    }, _callee, null, [[0, 4]]);
+  })));
 };
 export { languageMap } from "./languageMap";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0-beta.11",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -80,7 +80,6 @@
     ]
   },
   "dependencies": {
-    "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.2",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@lexical/react": "^0.23.1",
@@ -91,7 +90,7 @@
     "@lobehub/ui": "^1.164.2",
     "@melloware/react-logviewer": "^5.2.0",
     "@monaco-editor/loader": "^1.4.0",
-    "@shikijs/transformers": "^1.10.3",
+    "@shikijs/transformers": "^3.2.1",
     "leva": "^0",
     "lexical": "^0.23.1",
     "lodash-es": "^4",
@@ -102,8 +101,9 @@
     "react-error-boundary": "^4",
     "react-layout-kit": "^1",
     "react18-json-view": "^0.2.8",
-    "shiki": "^1.10.3",
+    "shiki": "^3.2.1",
     "swr": "^2.2.5",
+    "ts-md5": "^1.3.1",
     "url-join": "^5.0.0",
     "use-merge-value": "^1.2.0"
   },