@lobehub/ui 2.15.3 → 2.15.5

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -1,108 +1,31 @@
 'use client';
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-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."); }
-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); }
-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; }
-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; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { cva } from 'class-variance-authority';
-import { memo, useEffect, useMemo, useState } from 'react';
-import { useHighlight } from "../../hooks/useHighlight";
-import Line from "./Line";
+import { memo, useMemo } from 'react';
+import StaticRenderer from "./StaticRenderer";
+import StreamRenderer from "./StreamRenderer";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
-  var ref = _ref.ref,
+  var animated = _ref.animated,
     children = _ref.children,
-    language = _ref.language,
     className = _ref.className,
-    style = _ref.style,
     enableTransformer = _ref.enableTransformer,
-    variant = _ref.variant,
+    language = _ref.language,
+    style = _ref.style,
     theme = _ref.theme,
-    animated = _ref.animated;
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'borderless' : _ref$variant;
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var isDefaultTheme = theme === 'lobe-theme' || !theme;
   var showBackground = !isDefaultTheme && variant === 'filled';
-  var _useHighlight = useHighlight(children, {
-      enableTransformer: enableTransformer,
-      language: language,
-      theme: isDefaultTheme ? undefined : theme
-    }),
-    data = _useHighlight.data;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    contentLines = _useState2[0],
-    setContentLines = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    preStyle = _useState4[0],
-    setPreStyle = _useState4[1];
-  useEffect(function () {
-    if (data && typeof data === 'string') {
-      // Extract all lines from the HTML content
-      // We need to handle the structure from shiki which gives us HTML with a <pre><code> structure
-      var parser = new DOMParser();
-      var doc = parser.parseFromString(data, 'text/html');
-      var preElement = doc.querySelector('pre');
-      var _preStyle = preElement === null || preElement === void 0 ? void 0 : preElement.style;
-      if (_preStyle) {
-        setPreStyle({
-          backgroundColor: _preStyle === null || _preStyle === void 0 ? void 0 : _preStyle.backgroundColor,
-          color: _preStyle === null || _preStyle === void 0 ? void 0 : _preStyle.color
-        });
-      }
-      var codeElement = doc.querySelector('pre code');
-      if (codeElement) {
-        var spanLines = codeElement.querySelectorAll('.line');
-        var newLines = _toConsumableArray(spanLines).map(function (line) {
-          return line.outerHTML;
-        });
-
-        // Only update if the lines have changed
-        setContentLines(function (prevLines) {
-          if (prevLines.length !== newLines.length) return newLines;
-          var hasChanged = false;
-          var _iterator = _createForOfIteratorHelper(newLines.entries()),
-            _step;
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var _step$value = _slicedToArray(_step.value, 2),
-                i = _step$value[0],
-                newLine = _step$value[1];
-              if (prevLines[i] !== newLine) {
-                hasChanged = true;
-                break;
-              }
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
-          return hasChanged ? newLines : prevLines;
-        });
-      } else {
-        // Fallback if the structure is different
-        var htmlLines = data.split('\n').map(function (line) {
-          return "<span class=\"line\">".concat(line, "</span>");
-        });
-        setContentLines(htmlLines);
-      }
-    }
-  }, [data]);
+  var resolvedTheme = isDefaultTheme ? undefined : theme;
   var variants = useMemo(function () {
     return cva(styles.root, {
       defaultVariants: {
-        shiki: false,
+        shiki: true,
         showBackground: false,
         variant: 'borderless'
       },
@@ -125,61 +48,35 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
       /* eslint-enable sort-keys-fix/sort-keys-fix */
     });
   }, [styles]);
-  if (contentLines.length === 0) return /*#__PURE__*/_jsx("div", {
-    className: cx(variants({
-      shiki: false,
-      showBackground: showBackground,
-      variant: variant
-    }), className),
-    dir: "ltr",
-    ref: ref,
-    style: style,
-    children: /*#__PURE__*/_jsx("pre", {
-      children: /*#__PURE__*/_jsx("code", {
-        children: children
-      })
-    })
-  });
-  if (!animated) {
-    return /*#__PURE__*/_jsx("div", {
-      className: cx(variants({
-        shiki: true,
-        showBackground: showBackground,
-        variant: variant
-      }), className),
-      dangerouslySetInnerHTML: {
-        __html: data || ''
-      },
-      dir: "ltr",
-      ref: ref,
-      style: style
+  var shikiClassName = cx(variants({
+    shiki: true,
+    showBackground: showBackground,
+    variant: variant
+  }), className);
+  var fallbackClassName = cx(variants({
+    shiki: false,
+    showBackground: showBackground,
+    variant: variant
+  }), className);
+  if (animated) {
+    return /*#__PURE__*/_jsx(StreamRenderer, {
+      className: shikiClassName,
+      enableTransformer: enableTransformer,
+      fallbackClassName: fallbackClassName,
+      language: language,
+      style: style,
+      theme: resolvedTheme,
+      children: children
     });
   }
-  return /*#__PURE__*/_jsx("div", {
-    className: cx(variants({
-      shiki: true,
-      showBackground: showBackground,
-      variant: variant
-    }), className),
-    dir: "ltr",
-    ref: ref,
+  return /*#__PURE__*/_jsx(StaticRenderer, {
+    className: shikiClassName,
+    enableTransformer: enableTransformer,
+    fallbackClassName: fallbackClassName,
+    language: language,
     style: style,
-    children: /*#__PURE__*/_jsx("pre", {
-      className: cx('shiki', isDefaultTheme ? undefined : theme),
-      style: preStyle,
-      tabIndex: 0,
-      children: /*#__PURE__*/_jsx("code", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column'
-        },
-        children: contentLines.map(function (line, index) {
-          return /*#__PURE__*/_jsx(Line, {
-            children: line
-          }, index);
-        })
-      })
-    })
+    theme: resolvedTheme,
+    children: children
   });
 }, function (prevProps, nextProps) {
   return prevProps.children === nextProps.children && prevProps.language === nextProps.language;

package/es/Highlighter/type.d.ts

@@ -17,6 +17,7 @@ export interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'
     actionsRender?: (props: {
         actionIconSize: ActionIconProps['size'];
         content: string;
+        getContent: () => string;
         language: string;
         originalNode: ReactNode;
     }) => ReactNode;

package/es/Mermaid/FullFeatured.js

@@ -17,7 +17,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 import { cva } from 'class-variance-authority';
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import CopyButton from "../CopyButton";
@@ -26,22 +26,49 @@ import MaterialFileTypeIcon from "../MaterialFileTypeIcon";
 import Text from "../Text";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
-  var showLanguage = _ref.showLanguage,
-    content = _ref.content,
-    children = _ref.children,
-    className = _ref.className,
-    copyable = _ref.copyable,
-    actionsRender = _ref.actionsRender,
-    style = _ref.style,
-    variant = _ref.variant,
-    shadow = _ref.shadow,
-    _ref$language = _ref.language,
-    language = _ref$language === void 0 ? 'mermaid' : _ref$language,
-    fileName = _ref.fileName,
-    _ref$defaultExpand = _ref.defaultExpand,
-    defaultExpand = _ref$defaultExpand === void 0 ? true : _ref$defaultExpand,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var MermaidHeaderLanguage = /*#__PURE__*/memo(function (_ref) {
+  var fileName = _ref.fileName,
+    language = _ref.language,
+    showLanguage = _ref.showLanguage;
+  if (!showLanguage) return null;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: 'languageTitle',
+    flex: 1,
+    gap: 4,
+    horizontal: true,
+    justify: 'center',
+    children: [/*#__PURE__*/_jsx(MaterialFileTypeIcon, {
+      fallbackUnknownType: false,
+      filename: fileName || language,
+      size: 18,
+      type: 'file',
+      variant: 'raw'
+    }), /*#__PURE__*/_jsx(Text, {
+      ellipsis: true,
+      fontSize: 13,
+      children: fileName || 'Mermaid'
+    })]
+  });
+}, function (prev, next) {
+  return prev.fileName === next.fileName && prev.language === next.language && prev.showLanguage === next.showLanguage;
+});
+export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref2) {
+  var showLanguage = _ref2.showLanguage,
+    content = _ref2.content,
+    children = _ref2.children,
+    className = _ref2.className,
+    copyable = _ref2.copyable,
+    actionsRender = _ref2.actionsRender,
+    style = _ref2.style,
+    variant = _ref2.variant,
+    shadow = _ref2.shadow,
+    _ref2$language = _ref2.language,
+    language = _ref2$language === void 0 ? 'mermaid' : _ref2$language,
+    fileName = _ref2.fileName,
+    _ref2$defaultExpand = _ref2.defaultExpand,
+    defaultExpand = _ref2$defaultExpand === void 0 ? true : _ref2$defaultExpand,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useState = useState(defaultExpand),
     _useState2 = _slicedToArray(_useState, 2),
     expand = _useState2[0],
@@ -49,6 +76,13 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles('block'),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
+  var contentRef = useRef(content);
+  useEffect(function () {
+    contentRef.current = content;
+  }, [content]);
+  var getContent = useCallback(function () {
+    return contentRef.current;
+  }, []);
   var variants = useMemo(function () {
     return cva(styles.root, {
       defaultVariants: {
@@ -99,15 +133,27 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
       }
     });
   }, [styles]);
-  var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
-    content: content,
-    size: 'small'
-  });
-  var actions = actionsRender ? actionsRender({
-    actionIconSize: 'small',
-    content: content,
-    originalNode: originalActions
-  }) : originalActions;
+  var originalActions = useMemo(function () {
+    if (!copyable) return null;
+    return /*#__PURE__*/_jsx(CopyButton, {
+      content: getContent,
+      size: 'small'
+    });
+  }, [copyable, getContent]);
+  var actions = useMemo(function () {
+    if (!actionsRender) return originalActions;
+    return actionsRender({
+      actionIconSize: 'small',
+      content: content,
+      getContent: getContent,
+      originalNode: originalActions
+    });
+  }, [actionsRender, content, getContent, originalActions]);
+  var handleToggleExpand = useCallback(function () {
+    setExpand(function (prev) {
+      return !prev;
+    });
+  }, []);
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: cx(variants({
       shadow: shadow,
@@ -125,26 +171,12 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
       justify: 'space-between',
       children: [/*#__PURE__*/_jsx(ActionIcon, {
         icon: expand ? ChevronDown : ChevronRight,
-        onClick: function onClick() {
-          return setExpand(!expand);
-        },
+        onClick: handleToggleExpand,
         size: 'small'
-      }), showLanguage && /*#__PURE__*/_jsxs(Flexbox, {
-        align: 'center',
-        className: 'languageTitle',
-        gap: 4,
-        horizontal: true,
-        children: [/*#__PURE__*/_jsx(MaterialFileTypeIcon, {
-          fallbackUnknownType: false,
-          filename: fileName || language,
-          size: 18,
-          type: 'file',
-          variant: 'raw'
-        }), /*#__PURE__*/_jsx(Text, {
-          ellipsis: true,
-          fontSize: 13,
-          children: fileName || 'Mermaid'
-        })]
+      }), /*#__PURE__*/_jsx(MermaidHeaderLanguage, {
+        fileName: fileName,
+        language: language,
+        showLanguage: showLanguage
       }), /*#__PURE__*/_jsx(Flexbox, {
         align: 'center',
         flex: 'none',

package/es/Mermaid/Mermaid.js

@@ -10,7 +10,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 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; }
 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; }
 import { cva } from 'class-variance-authority';
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import CopyButton from "../CopyButton";
 import { useStyles } from "../Highlighter/style";
@@ -73,25 +73,44 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     });
   }, [styles]);
   var tirmedChildren = children.trim();
-  var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
-    content: tirmedChildren,
-    size: actionIconSize
-  });
-  var actions = actionsRender ? actionsRender({
-    actionIconSize: actionIconSize,
-    content: children,
-    originalNode: originalActions
-  }) : originalActions;
-  var defaultBody = /*#__PURE__*/_jsx(SyntaxMermaid, {
-    enablePanZoom: enablePanZoom,
-    theme: theme,
-    variant: variant,
-    children: tirmedChildren
-  });
-  var body = bodyRender ? bodyRender({
-    content: tirmedChildren,
-    originalNode: defaultBody
-  }) : defaultBody;
+  var copyContentRef = useRef(tirmedChildren);
+  useEffect(function () {
+    copyContentRef.current = tirmedChildren;
+  }, [tirmedChildren]);
+  var getCopyContent = useCallback(function () {
+    return copyContentRef.current;
+  }, []);
+  var originalActions = useMemo(function () {
+    if (!copyable) return null;
+    return /*#__PURE__*/_jsx(CopyButton, {
+      content: getCopyContent,
+      size: actionIconSize
+    });
+  }, [actionIconSize, copyable, getCopyContent]);
+  var actions = useMemo(function () {
+    if (!actionsRender) return originalActions;
+    return actionsRender({
+      actionIconSize: actionIconSize,
+      content: tirmedChildren,
+      getContent: getCopyContent,
+      originalNode: originalActions
+    });
+  }, [actionIconSize, actionsRender, getCopyContent, originalActions, tirmedChildren]);
+  var defaultBody = useMemo(function () {
+    return /*#__PURE__*/_jsx(SyntaxMermaid, {
+      enablePanZoom: enablePanZoom,
+      theme: theme,
+      variant: variant,
+      children: tirmedChildren
+    });
+  }, [enablePanZoom, theme, tirmedChildren, variant]);
+  var body = useMemo(function () {
+    if (!bodyRender) return defaultBody;
+    return bodyRender({
+      content: tirmedChildren,
+      originalNode: defaultBody
+    });
+  }, [bodyRender, defaultBody, tirmedChildren]);
   if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
     actionsRender: actionsRender,
     className: className,

package/es/Mermaid/type.d.ts

@@ -14,6 +14,7 @@ export interface MermaidProps extends DivProps {
     actionsRender?: (props: {
         actionIconSize: ActionIconProps['size'];
         content: string;
+        getContent: () => string;
         originalNode: ReactNode;
     }) => ReactNode;
     bodyRender?: (props: {

package/es/hooks/useHighlight.d.ts

@@ -1,13 +1,29 @@
-import type { BuiltinTheme, CodeToHastOptions } from 'shiki';
+import { CSSProperties } from 'react';
+import type { BuiltinTheme, CodeToHastOptions, ThemedToken } from 'shiki';
 import { SWRResponse } from 'swr';
 declare const MD5_LENGTH_THRESHOLD = 10000;
+type ColorReplacements = {
+    [themeName: string]: {
+        [color: string]: string;
+    };
+};
+type StreamingHighlightResult = {
+    colorReplacements?: Record<string, string>;
+    lines: ThemedToken[][];
+    preStyle?: CSSProperties;
+};
+type UseHighlightResponse = SWRResponse<string, Error> & {
+    colorReplacements?: ColorReplacements;
+    streaming?: StreamingHighlightResult;
+};
 type ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;
 declare const loadShiki: () => Promise<ICodeToHtml | null>;
 declare const shikiPromise: Promise<ICodeToHtml | null>;
 declare const escapeHtml: (str: string) => string;
-export declare const useHighlight: (text: string, { language, enableTransformer, theme: builtinTheme, }: {
+export declare const useHighlight: (text: string, { language, enableTransformer, theme: builtinTheme, streaming, }: {
     enableTransformer?: boolean | undefined;
     language: string;
+    streaming?: boolean | undefined;
     theme?: import("shiki/dist/themes.mjs").BundledTheme | undefined;
-}) => SWRResponse<string, Error>;
+}) => UseHighlightResponse;
 export { escapeHtml, loadShiki, MD5_LENGTH_THRESHOLD, shikiPromise };