@yuntijs/ui 1.1.0-beta.3 → 1.1.0-beta.5

package/es/Mentions/index.js

@@ -120,18 +120,6 @@ export var Mentions = function Mentions(_ref) {
       return document.fullscreenElement;
     }
   }, [getPopContainer]);
-  if (!isBrowser) {
-    return /*#__PURE__*/_jsxs("div", {
-      className: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
-      children: [/*#__PURE__*/_jsx("div", {
-        className: cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.root, true), styles.filled, variant === 'filled'), styles.borderless, variant === 'borderless'), styles.disabled, disabled), className),
-        style: style || {}
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.placeholder,
-        children: placeholder || "\u8F93\u5165 ".concat(triggers.join(' 或 '), " \u63D2\u5165\u5F15\u7528")
-      })]
-    });
-  }
   return /*#__PURE__*/_jsx(LexicalComposer, {
     initialConfig: _objectSpread(_objectSpread({}, initialConfig), {}, {
       editable: editable

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.3",
+  "version": "1.1.0-beta.5",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -104,6 +104,7 @@
     "react18-json-view": "^0.2.8",
     "shiki": "^3.2.1",
     "swr": "^2.2.5",
+    "ts-md5": "^1.3.1",
     "url-join": "^5.0.0",
     "use-merge-value": "^1.2.0"
   },