@lobehub/ui 1.156.4 → 1.157.0

package/es/CodeEditor/index.d.ts

@@ -1,18 +1,19 @@
-import { type TextAreaRef } from 'antd/es/input/TextArea';
-import { type CSSProperties, type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler } from 'react';
-import { SyntaxHighlighterProps } from "../Highlighter/SyntaxHighlighter";
-export interface CodeEditorProps {
+import { CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+export interface CodeEditorProps extends Omit<FlexboxProps, 'onFocus' | 'onBlur' | 'onKeyUp' | 'onKeyDown' | 'onClick'> {
     autoFocus?: boolean;
-    className?: string;
+    classNames?: {
+        highlight?: string;
+        textarea?: string;
+    };
     disabled?: boolean;
     fontSize?: number | string;
     form?: string;
     ignoreTabKey?: boolean;
     insertSpaces?: boolean;
-    language: SyntaxHighlighterProps['language'];
+    language: string;
     maxLength?: number;
     minLength?: number;
-    name?: string;
     onBlur?: FocusEventHandler<HTMLTextAreaElement>;
     onClick?: MouseEventHandler<HTMLTextAreaElement>;
     onFocus?: FocusEventHandler<HTMLTextAreaElement>;
@@ -20,16 +21,32 @@ export interface CodeEditorProps {
     onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;
     onValueChange: (value: string) => void;
     placeholder?: string;
-    preClassName?: string;
     readOnly?: boolean;
     required?: boolean;
-    resize?: boolean;
     style?: CSSProperties;
+    styles?: {
+        highlight?: CSSProperties;
+        textarea?: CSSProperties;
+    };
     tabSize?: number;
-    textareaClassName?: string;
     textareaId?: string;
-    type?: 'ghost' | 'block' | 'pure';
     value: string;
+    variant?: 'ghost' | 'block' | 'pure';
 }
-declare const CodeEditor: import("react").ForwardRefExoticComponent<CodeEditorProps & import("react").RefAttributes<TextAreaRef>>;
-export default CodeEditor;
+type Record = {
+    selectionEnd: number;
+    selectionStart: number;
+    value: string;
+};
+type History = {
+    offset: number;
+    stack: (Record & {
+        timestamp: number;
+    })[];
+};
+declare const Editor: import("react").ForwardRefExoticComponent<CodeEditorProps & import("react").RefAttributes<Ref<{
+    session: {
+        history: History;
+    };
+} | null>>>;
+export default Editor;

package/es/CodeEditor/index.js

@@ -1,51 +1,414 @@
-'use client';
-
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "language", "value", "onValueChange", "resize", "className", "textareaClassName", "type", "fontSize"];
-import { forwardRef } from 'react';
-import Editor from 'react-simple-code-editor';
-import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
+var _excluded = ["autoFocus", "disabled", "form", "classNames", "styles", "ignoreTabKey", "insertSpaces", "maxLength", "minLength", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onValueChange", "placeholder", "readOnly", "required", "style", "className", "tabSize", "textareaId", "value", "language", "fontSize", "variant"];
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
+import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
 import { jsx as _jsx } from "react/jsx-runtime";
-var CodeEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var style = _ref.style,
-    language = _ref.language,
-    value = _ref.value,
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var KEYCODE_Y = 89;
+var KEYCODE_Z = 90;
+var KEYCODE_M = 77;
+var KEYCODE_PARENS = 57;
+var KEYCODE_BRACKETS = 219;
+var KEYCODE_QUOTE = 222;
+var KEYCODE_BACK_QUOTE = 192;
+var HISTORY_LIMIT = 100;
+var HISTORY_TIME_GAP = 3000;
+var isWindows = typeof window !== 'undefined' && 'navigator' in window && /win/i.test(navigator.platform);
+var isMacLike = typeof window !== 'undefined' && 'navigator' in window && /(mac|iphone|ipod|ipad)/i.test(navigator.platform);
+var getLines = function getLines(text, position) {
+  return text.slice(0, Math.max(0, position)).split('\n');
+};
+var Editor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var autoFocus = _ref.autoFocus,
+    disabled = _ref.disabled,
+    form = _ref.form,
+    _ref$classNames = _ref.classNames,
+    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    _ref$styles = _ref.styles,
+    s = _ref$styles === void 0 ? {} : _ref$styles,
+    _ref$ignoreTabKey = _ref.ignoreTabKey,
+    ignoreTabKey = _ref$ignoreTabKey === void 0 ? false : _ref$ignoreTabKey,
+    _ref$insertSpaces = _ref.insertSpaces,
+    insertSpaces = _ref$insertSpaces === void 0 ? true : _ref$insertSpaces,
+    maxLength = _ref.maxLength,
+    minLength = _ref.minLength,
+    onBlur = _ref.onBlur,
+    onClick = _ref.onClick,
+    onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    onKeyUp = _ref.onKeyUp,
     onValueChange = _ref.onValueChange,
-    _ref$resize = _ref.resize,
-    resize = _ref$resize === void 0 ? true : _ref$resize,
+    placeholder = _ref.placeholder,
+    readOnly = _ref.readOnly,
+    required = _ref.required,
+    style = _ref.style,
     className = _ref.className,
-    textareaClassName = _ref.textareaClassName,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'ghost' : _ref$type,
+    _ref$tabSize = _ref.tabSize,
+    tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
+    textareaId = _ref.textareaId,
+    value = _ref.value,
+    language = _ref.language,
     _ref$fontSize = _ref.fontSize,
     fontSize = _ref$fontSize === void 0 ? 12 : _ref$fontSize,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'ghost' : _ref$variant,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       fontSize: fontSize,
-      resize: resize,
-      type: type
+      variant: variant
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx("div", {
-    className: cx(styles.container, className),
-    style: style,
-    children: /*#__PURE__*/_jsx(Editor, _objectSpread({
-      className: styles.editor,
-      highlight: function highlight(code) {
-        return /*#__PURE__*/_jsx(SyntaxHighlighter, {
-          language: language,
-          children: code
+  var historyRef = useRef({
+    offset: -1,
+    stack: []
+  });
+  var inputRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    capture = _useState2[0],
+    setCapture = _useState2[1];
+  var recordChange = useCallback(function (record) {
+    var overwrite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var _historyRef$current = historyRef.current,
+      stack = _historyRef$current.stack,
+      offset = _historyRef$current.offset;
+    if (stack.length > 0 && offset > -1) {
+      // When something updates, drop the redo operations
+      historyRef.current.stack = stack.slice(0, offset + 1);
+
+      // Limit the number of operations to 100
+      var count = historyRef.current.stack.length;
+      if (count > HISTORY_LIMIT) {
+        var extras = count - HISTORY_LIMIT;
+        historyRef.current.stack = stack.slice(extras, count);
+        historyRef.current.offset = Math.max(historyRef.current.offset - extras, 0);
+      }
+    }
+    var timestamp = Date.now();
+    if (overwrite) {
+      var last = historyRef.current.stack[historyRef.current.offset];
+      if (last && timestamp - last.timestamp < HISTORY_TIME_GAP) {
+        var _getLines$pop, _getLines$pop2, _current$;
+        // A previous entry exists and was in short interval
+
+        // Match the last word in the line
+        var re = /[^\da-z]([\da-z]+)$/i;
+
+        // Get the previous line
+        var previous = (_getLines$pop = getLines(last.value, last.selectionStart).pop()) === null || _getLines$pop === void 0 ? void 0 : _getLines$pop.match(re);
+
+        // Get the current line
+        var current = (_getLines$pop2 = getLines(record.value, record.selectionStart).pop()) === null || _getLines$pop2 === void 0 ? void 0 : _getLines$pop2.match(re);
+        if (previous !== null && previous !== void 0 && previous[1] && current !== null && current !== void 0 && (_current$ = current[1]) !== null && _current$ !== void 0 && _current$.startsWith(previous[1])) {
+          // The last word of the previous line and current line match
+          // Overwrite previous entry so that undo will remove whole word
+          historyRef.current.stack[historyRef.current.offset] = _objectSpread(_objectSpread({}, record), {}, {
+            timestamp: timestamp
+          });
+          return;
+        }
+      }
+    }
+
+    // Add the new operation to the stack
+    historyRef.current.stack.push(_objectSpread(_objectSpread({}, record), {}, {
+      timestamp: timestamp
+    }));
+    historyRef.current.offset++;
+  }, []);
+  var recordCurrentState = useCallback(function () {
+    var input = inputRef.current;
+    if (!input) return;
+
+    // Save current state of the input
+    var value = input.value,
+      selectionStart = input.selectionStart,
+      selectionEnd = input.selectionEnd;
+    recordChange({
+      selectionEnd: selectionEnd,
+      selectionStart: selectionStart,
+      value: value
+    });
+  }, [recordChange]);
+  var updateInput = function updateInput(record) {
+    var input = inputRef.current;
+    if (!input) return;
+
+    // Update values and selection state
+    input.value = record.value;
+    input.selectionStart = record.selectionStart;
+    input.selectionEnd = record.selectionEnd;
+    onValueChange === null || onValueChange === void 0 || onValueChange(record.value);
+  };
+  var applyEdits = function applyEdits(record) {
+    // Save last selection state
+    var input = inputRef.current;
+    var last = historyRef.current.stack[historyRef.current.offset];
+    if (last && input) {
+      historyRef.current.stack[historyRef.current.offset] = _objectSpread(_objectSpread({}, last), {}, {
+        selectionEnd: input.selectionEnd,
+        selectionStart: input.selectionStart
+      });
+    }
+
+    // Save the changes
+    recordChange(record);
+    updateInput(record);
+  };
+  var undoEdit = function undoEdit() {
+    var _historyRef$current2 = historyRef.current,
+      stack = _historyRef$current2.stack,
+      offset = _historyRef$current2.offset;
+
+    // Get the previous edit
+    var record = stack[offset - 1];
+    if (record) {
+      // Apply the changes and update the offset
+      updateInput(record);
+      historyRef.current.offset = Math.max(offset - 1, 0);
+    }
+  };
+  var redoEdit = function redoEdit() {
+    var _historyRef$current3 = historyRef.current,
+      stack = _historyRef$current3.stack,
+      offset = _historyRef$current3.offset;
+
+    // Get the next edit
+    var record = stack[offset + 1];
+    if (record) {
+      // Apply the changes and update the offset
+      updateInput(record);
+      historyRef.current.offset = Math.min(offset + 1, stack.length - 1);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (onKeyDown) {
+      onKeyDown(e);
+      if (e.defaultPrevented) {
+        return;
+      }
+    }
+    if (e.key === 'Escape') {
+      e.currentTarget.blur();
+    }
+    var _e$currentTarget = e.currentTarget,
+      value = _e$currentTarget.value,
+      selectionStart = _e$currentTarget.selectionStart,
+      selectionEnd = _e$currentTarget.selectionEnd;
+    var tabCharacter = (insertSpaces ? ' ' : '\t').repeat(tabSize);
+    if (e.key === 'Tab' && !ignoreTabKey && capture) {
+      // Prevent focus change
+      e.preventDefault();
+      if (e.shiftKey) {
+        // Unindent selected lines
+        var linesBeforeCaret = getLines(value, selectionStart);
+        var startLine = linesBeforeCaret.length - 1;
+        var endLine = getLines(value, selectionEnd).length - 1;
+        var nextValue = value.split('\n').map(function (line, i) {
+          if (i >= startLine && i <= endLine && line.startsWith(tabCharacter)) {
+            return line.slice(tabCharacter.length);
+          }
+          return line;
+        }).join('\n');
+        if (value !== nextValue) {
+          var startLineText = linesBeforeCaret[startLine];
+          applyEdits({
+            // Move the end cursor by total number of characters removed
+            selectionEnd: selectionEnd - (value.length - nextValue.length),
+            // Move the start cursor if first line in selection was modified
+            // It was modified only if it started with a tab
+            selectionStart: startLineText !== null && startLineText !== void 0 && startLineText.startsWith(tabCharacter) ? selectionStart - tabCharacter.length : selectionStart,
+            value: nextValue
+          });
+        }
+      } else if (selectionStart === selectionEnd) {
+        var updatedSelection = selectionStart + tabCharacter.length;
+        applyEdits({
+          selectionEnd: updatedSelection,
+          // Update caret position
+          selectionStart: updatedSelection,
+          // Insert tab character at caret
+          value: value.slice(0, Math.max(0, selectionStart)) + tabCharacter + value.slice(Math.max(0, selectionEnd))
         });
-      },
-      onValueChange: onValueChange,
-      padding: 0,
-      ref: ref,
-      textareaClassName: cx(styles.textarea, textareaClassName),
+      } else {
+        // Indent selected lines
+        var _linesBeforeCaret = getLines(value, selectionStart);
+        var _startLine = _linesBeforeCaret.length - 1;
+        var _endLine = getLines(value, selectionEnd).length - 1;
+        var _startLineText = _linesBeforeCaret[_startLine];
+        applyEdits({
+          // Move the end cursor by total number of characters added
+          selectionEnd: selectionEnd + tabCharacter.length * (_endLine - _startLine + 1),
+          // Move the start cursor by number of characters added in first line of selection
+          // Don't move it if it there was no text before cursor
+          selectionStart: _startLineText && /\S/.test(_startLineText) ? selectionStart + tabCharacter.length : selectionStart,
+          value: value.split('\n').map(function (line, i) {
+            if (i >= _startLine && i <= _endLine) {
+              return tabCharacter + line;
+            }
+            return line;
+          }).join('\n')
+        });
+      }
+    } else if (e.key === 'Backspace') {
+      var hasSelection = selectionStart !== selectionEnd;
+      var textBeforeCaret = value.slice(0, Math.max(0, selectionStart));
+      if (textBeforeCaret.endsWith(tabCharacter) && !hasSelection) {
+        // Prevent default delete behaviour
+        e.preventDefault();
+        var _updatedSelection = selectionStart - tabCharacter.length;
+        applyEdits({
+          selectionEnd: _updatedSelection,
+          // Update caret position
+          selectionStart: _updatedSelection,
+          // Remove tab character at caret
+          value: value.slice(0, Math.max(0, selectionStart - tabCharacter.length)) + value.slice(Math.max(0, selectionEnd))
+        });
+      }
+    } else if (e.key === 'Enter') {
+      // Ignore selections
+      if (selectionStart === selectionEnd) {
+        // Get the current line
+        var line = getLines(value, selectionStart).pop();
+        var matches = line === null || line === void 0 ? void 0 : line.match(/^\s+/);
+        if (matches !== null && matches !== void 0 && matches[0]) {
+          e.preventDefault();
+
+          // Preserve indentation on inserting a new line
+          var indent = '\n' + matches[0];
+          var _updatedSelection2 = selectionStart + indent.length;
+          applyEdits({
+            selectionEnd: _updatedSelection2,
+            // Update caret position
+            selectionStart: _updatedSelection2,
+            // Insert indentation character at caret
+            value: value.slice(0, Math.max(0, selectionStart)) + indent + value.slice(Math.max(0, selectionEnd))
+          });
+        }
+      }
+    } else if (e.keyCode === KEYCODE_PARENS || e.keyCode === KEYCODE_BRACKETS || e.keyCode === KEYCODE_QUOTE || e.keyCode === KEYCODE_BACK_QUOTE) {
+      var chars;
+      if (e.keyCode === KEYCODE_PARENS && e.shiftKey) {
+        chars = ['(', ')'];
+      } else if (e.keyCode === KEYCODE_BRACKETS) {
+        chars = e.shiftKey ? ['{', '}'] : ['[', ']'];
+      } else if (e.keyCode === KEYCODE_QUOTE) {
+        chars = e.shiftKey ? ['"', '"'] : ["'", "'"];
+      } else if (e.keyCode === KEYCODE_BACK_QUOTE && !e.shiftKey) {
+        chars = ['`', '`'];
+      }
+
+      // If text is selected, wrap them in the characters
+      if (selectionStart !== selectionEnd && chars) {
+        e.preventDefault();
+        applyEdits({
+          selectionEnd: selectionEnd + 2,
+          // Update caret position
+          selectionStart: selectionStart,
+          value: value.slice(0, Math.max(0, selectionStart)) + chars[0] +
+          // eslint-disable-next-line unicorn/prefer-string-slice
+          value.substring(selectionStart, selectionEnd) + chars[1] + value.slice(Math.max(0, selectionEnd))
+        });
+      }
+    } else if ((isMacLike ?
+    // Trigger undo with ⌘+Z on Mac
+    e.metaKey && e.keyCode === KEYCODE_Z :
+    // Trigger undo with Ctrl+Z on other platforms
+    e.ctrlKey && e.keyCode === KEYCODE_Z) && !e.shiftKey && !e.altKey) {
+      e.preventDefault();
+      undoEdit();
+    } else if ((isMacLike ?
+    // Trigger redo with ⌘+Shift+Z on Mac
+    e.metaKey && e.keyCode === KEYCODE_Z && e.shiftKey : isWindows ?
+    // Trigger redo with Ctrl+Y on Windows
+    e.ctrlKey && e.keyCode === KEYCODE_Y :
+    // Trigger redo with Ctrl+Shift+Z on other platforms
+    e.ctrlKey && e.keyCode === KEYCODE_Z && e.shiftKey) && !e.altKey) {
+      e.preventDefault();
+      redoEdit();
+    } else if (e.keyCode === KEYCODE_M && e.ctrlKey && (isMacLike ? e.shiftKey : true)) {
+      e.preventDefault();
+
+      // Toggle capturing tab key so users can focus away
+      setCapture(function (prev) {
+        return !prev;
+      });
+    }
+  };
+  var handleChange = function handleChange(e) {
+    var _e$currentTarget2 = e.currentTarget,
+      value = _e$currentTarget2.value,
+      selectionStart = _e$currentTarget2.selectionStart,
+      selectionEnd = _e$currentTarget2.selectionEnd;
+    recordChange({
+      selectionEnd: selectionEnd,
+      selectionStart: selectionStart,
       value: value
-    }, rest))
-  });
+    }, true);
+    onValueChange(value);
+  };
+  useEffect(function () {
+    recordCurrentState();
+  }, [recordCurrentState]);
+
+  // @ts-ignore
+  useImperativeHandle(ref, function () {
+    return {
+      get session() {
+        return {
+          history: historyRef.current
+        };
+      },
+      set session(session) {
+        historyRef.current = session.history;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    style: style
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.editor,
+      children: [/*#__PURE__*/_jsx(SyntaxHighlighter, {
+        className: cx(styles.highlight, classNames === null || classNames === void 0 ? void 0 : classNames.highlight),
+        language: language,
+        style: s.highlight,
+        children: value
+      }), /*#__PURE__*/_jsx("textarea", {
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoFocus: autoFocus,
+        className: cx(styles.textarea, classNames === null || classNames === void 0 ? void 0 : classNames.textarea),
+        "data-gramm": false,
+        disabled: disabled,
+        form: form,
+        id: textareaId,
+        maxLength: maxLength,
+        minLength: minLength,
+        onBlur: onBlur,
+        onChange: handleChange,
+        onClick: onClick,
+        onFocus: onFocus,
+        onKeyDown: handleKeyDown,
+        onKeyUp: onKeyUp,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        ref: function ref(c) {
+          return inputRef.current = c;
+        },
+        required: required,
+        spellCheck: false,
+        style: _objectSpread({}, s === null || s === void 0 ? void 0 : s.textarea),
+        value: value
+      })]
+    })
+  }));
 });
-export default CodeEditor;
+export default Editor;

package/es/CodeEditor/style.d.ts

@@ -1,9 +1,9 @@
 export declare const useStyles: (props?: {
     fontSize: string | number;
-    resize: boolean;
-    type: 'ghost' | 'block' | 'pure';
+    variant: 'ghost' | 'block' | 'pure';
 } | undefined) => import("antd-style").ReturnStyles<{
     container: string;
     editor: import("antd-style").SerializedStyles;
+    highlight: import("antd-style").SerializedStyles;
     textarea: import("antd-style").SerializedStyles;
 }>;

package/es/CodeEditor/style.js

@@ -1,19 +1,19 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { createStyles } from 'antd-style';
 import { isNumber } from 'lodash-es';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
     token = _ref.token;
-  var type = _ref2.type,
-    resize = _ref2.resize,
+  var variant = _ref2.variant,
     fontSize = _ref2.fontSize;
   var size = isNumber(fontSize) ? "".concat(fontSize, "px") : fontSize;
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-block: 8px;\n      padding-inline: 12px;\n\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      transition:\n        background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorderSecondary, token.borderRadius, token.motionEaseOut, token.motionEaseOut, type === 'block' ? token.colorFillSecondary : token.colorFillQuaternary, token.colorBorder);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-block: 8px;\n      padding-inline: 12px;\n\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n    "])), variant === 'block' ? token.colorFillTertiary : 'transparent', variant === 'block' ? 'transparent' : token.colorBorderSecondary, token.borderRadius);
   return {
-    container: cx(type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          overflow: hidden auto;\n          width: 100%;\n          height: fit-content;\n\n          * {\n            font-size: ", " !important;\n            line-height: 1.5 !important;\n          }\n        "])), size)),
-    editor: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        resize: ", ";\n        height: fit-content;\n        min-height: 100%;\n        font-family: ", " !important;\n\n        textarea {\n          min-height: 36px !important;\n        }\n\n        pre {\n          min-height: 36px !important;\n          word-break: break-all;\n          word-wrap: break-word;\n          white-space: pre-wrap;\n\n          &.shiki {\n            margin: 0;\n          }\n        }\n      "])), resize ? 'vertical' : 'none', token.fontFamilyCode),
-    textarea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden auto;\n\n        height: 100% !important;\n\n        color: transparent !important;\n        word-break: break-all !important;\n        word-wrap: break-word !important;\n\n        caret-color: ", ";\n\n        -webkit-text-fill-color: unset !important;\n\n        &::placeholder {\n          color: ", ";\n        }\n\n        &:focus {\n          border: none !important;\n          outline: none !important;\n          box-shadow: none !important;\n        }\n      "])), token.colorText, token.colorTextQuaternary)
+    container: cx(variant !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden auto;\n          width: 100%;\n        "])))),
+    editor: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: relative;\n        width: 100%;\n        height: fit-content;\n\n        * {\n          font-family: ", " !important;\n          font-size: ", " !important;\n          line-height: 1.5 !important;\n          word-break: break-all !important;\n          word-wrap: break-word !important;\n          white-space: pre-wrap !important;\n        }\n      "])), token.fontFamilyCode, size),
+    highlight: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        pointer-events: none;\n\n        pre,\n        code {\n          overflow: hidden;\n        }\n      "]))),
+    textarea: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        resize: none;\n\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        overflow: hidden;\n\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        padding: 0;\n\n        color: transparent !important;\n        text-align: start;\n\n        background: transparent;\n        border: none;\n        outline: none;\n        caret-color: ", ";\n\n        &::placeholder {\n          color: ", ";\n        }\n\n        &:focus {\n          border: none !important;\n          outline: none !important;\n          box-shadow: none !important;\n        }\n      "])), token.colorText, token.colorTextQuaternary)
   };
 });

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -18,7 +18,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
-  var _useHighlight = useHighlight(children.trim(), language, isDarkMode),
+  var _useHighlight = useHighlight(children, language, isDarkMode),
     data = _useHighlight.data,
     isLoading = _useHighlight.isLoading;
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -27,7 +27,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
       style: style,
       children: /*#__PURE__*/_jsx("pre", {
         children: /*#__PURE__*/_jsx("code", {
-          children: children.trim()
+          children: children
         })
       })
     }) : /*#__PURE__*/_jsx("div", {

package/es/chat/ChatItem/components/MessageContent.js

@@ -42,7 +42,7 @@ var MessageContent = /*#__PURE__*/memo(function (_ref) {
     onEditingChange: onEditingChange,
     openModal: mobile ? editing : undefined,
     text: text,
-    value: message ? String(message).trim() : ''
+    value: message ? String(message) : ''
   });
   var messageContent = renderMessage ? renderMessage(content) : content;
   return /*#__PURE__*/_jsxs(Flexbox, {

package/es/mdx/Mdx/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import type { Pluggable } from 'unified';
+import { type TypographyProps } from "../../Markdown/Typography";
+export interface MdxProps extends Omit<TypographyProps, 'children'> {
+    children: string;
+    components?: any[];
+    enableImageGallery?: boolean;
+    enableLatex?: boolean;
+    enableMermaid?: boolean;
+    fallback?: ReactNode;
+    fullFeaturedCodeBlock?: boolean;
+    onDoubleClick?: () => void;
+    rehypePlugins?: Pluggable[];
+    remarkPlugins?: Pluggable[];
+}
+declare const Mdx: import("react").NamedExoticComponent<MdxProps>;
+export default Mdx;

package/es/mdx/Mdx/index.js

@@ -0,0 +1,135 @@
+'use client';
+
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "style", "fullFeaturedCodeBlock", "enableLatex", "enableMermaid", "rehypePlugins", "remarkPlugins", "components", "fallback"];
+import { evaluate } from '@mdx-js/mdx';
+import { memo, useEffect, useMemo, useState } from 'react';
+import jsxDevRuntime from 'react/jsx-dev-runtime';
+import jsxRuntime from 'react/jsx-runtime';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import Alert from "../../Alert";
+import { Typography } from "../../Markdown/Typography";
+import { escapeBrackets, escapeMhchem, fixMarkdownBold } from "../../Markdown/utils";
+import mdxComponents from "../mdxComponents";
+import CodeBlock from "../mdxComponents/CodeBlock";
+import { jsx as _jsx } from "react/jsx-runtime";
+var runtime = process.env.NODE_ENV === 'production' ? jsxRuntime : jsxDevRuntime;
+var Mdx = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$fullFeaturedCode = _ref.fullFeaturedCodeBlock,
+    fullFeaturedCodeBlock = _ref$fullFeaturedCode === void 0 ? true : _ref$fullFeaturedCode,
+    _ref$enableLatex = _ref.enableLatex,
+    enableLatex = _ref$enableLatex === void 0 ? true : _ref$enableLatex,
+    _ref$enableMermaid = _ref.enableMermaid,
+    enableMermaid = _ref$enableMermaid === void 0 ? true : _ref$enableMermaid,
+    rehypePlugins = _ref.rehypePlugins,
+    remarkPlugins = _ref.remarkPlugins,
+    _ref$components = _ref.components,
+    components = _ref$components === void 0 ? {} : _ref$components,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? null : _ref$fallback,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(function () {
+      return function () {
+        return null;
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    MDXContent = _useState2[0],
+    setMDXContent = _useState2[1];
+  var escapedContent = useMemo(function () {
+    if (!enableLatex) return fixMarkdownBold(children);
+    return fixMarkdownBold(escapeMhchem(escapeBrackets(children)));
+  }, [children, enableLatex]);
+  var innerRehypePlugins = Array.isArray(rehypePlugins) ? rehypePlugins : [rehypePlugins];
+  var memoRehypePlugins = useMemo(function () {
+    return [enableLatex && rehypeKatex].concat(_toConsumableArray(innerRehypePlugins)).filter(Boolean);
+  }, [enableLatex].concat(_toConsumableArray(innerRehypePlugins)));
+  var innerRemarkPlugins = Array.isArray(remarkPlugins) ? remarkPlugins : [remarkPlugins];
+  var memoRemarkPlugins = useMemo(function () {
+    return [remarkGfm, enableLatex && remarkMath].concat(_toConsumableArray(innerRemarkPlugins)).filter(Boolean);
+  }, [enableLatex].concat(_toConsumableArray(innerRemarkPlugins)));
+  var memoComponents = useMemo(function () {
+    var list = {};
+    Object.entries(_objectSpread(_objectSpread({}, mdxComponents), {}, {
+      pre: function pre(props) {
+        return /*#__PURE__*/_jsx(CodeBlock, _objectSpread(_objectSpread({}, props), {}, {
+          enableMermaid: enableMermaid,
+          fullFeatured: fullFeaturedCodeBlock
+        }));
+      }
+    }, components)).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        Render = _ref3[1];
+      list[key] = function (props) {
+        return /*#__PURE__*/_jsx(Render, _objectSpread({}, props));
+      };
+    });
+    return list;
+  }, [components, enableMermaid, fullFeaturedCodeBlock]);
+  useEffect(function () {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _yield$evaluate, Content;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return evaluate(escapedContent, _objectSpread(_objectSpread({}, runtime), {}, {
+              development: process.env.NODE_ENV !== 'production',
+              rehypePlugins: memoRehypePlugins,
+              remarkPlugins: memoRemarkPlugins
+            }));
+          case 3:
+            _yield$evaluate = _context.sent;
+            Content = _yield$evaluate.default;
+            setMDXContent(function () {
+              return Content;
+            });
+            _context.next = 12;
+            break;
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](0);
+            // @ts-ignore
+            setMDXContent(function () {
+              return function () {
+                return /*#__PURE__*/_jsx(Alert, {
+                  description: String(_context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message),
+                  message: 'Error compiling MDX',
+                  style: {
+                    width: '100%'
+                  },
+                  type: "error"
+                });
+              };
+            });
+            console.error('Error compiling MDX:', _context.t0);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 8]]);
+    }))();
+  }, [escapedContent, memoRehypePlugins, memoRemarkPlugins]);
+  if (!MDXContent) return fallback;
+  return /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({
+    className: className,
+    style: style
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(MDXContent, {
+      components: memoComponents
+    })
+  }));
+});
+export default Mdx;

package/es/mdx/index.d.ts

@@ -4,7 +4,9 @@ export { default as Card, type CardProps } from './Cards/Card';
 export { default as FileTree, type FileTreeProps } from './FileTree';
 export { default as File, type FileProps } from './FileTree/File';
 export { default as Folder, type FolderProps } from './FileTree/Folder';
+export { default as Mdx, type MdxProps } from './Mdx';
 export { default as mdxComponents } from './mdxComponents';
+export { default as CodeBlock } from './mdxComponents/CodeBlock';
 export { default as Image, type ImageProps } from './mdxComponents/Image';
 export { default as Link, type LinkProps } from './mdxComponents/Link';
 export { default as Pre, type PreProps, PreSingleLine } from './mdxComponents/Pre';

package/es/mdx/index.js

@@ -4,7 +4,9 @@ export { default as Card } from "./Cards/Card";
 export { default as FileTree } from "./FileTree";
 export { default as File } from "./FileTree/File";
 export { default as Folder } from "./FileTree/Folder";
+export { default as Mdx } from "./Mdx";
 export { default as mdxComponents } from "./mdxComponents";
+export { default as CodeBlock } from "./mdxComponents/CodeBlock";
 export { default as Image } from "./mdxComponents/Image";
 export { default as Link } from "./mdxComponents/Link";
 export { default as Pre, PreSingleLine } from "./mdxComponents/Pre";

package/es/mdx/mdxComponents/CodeBlock.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import type { MermaidProps } from "../../Mermaid";
+interface CodeBlockProps {
+    children: any;
+    enableMermaid?: boolean;
+    fullFeatured?: boolean;
+    mermaid?: MermaidProps;
+}
+declare const CodeBlock: FC<CodeBlockProps>;
+export default CodeBlock;

package/es/mdx/mdxComponents/CodeBlock.js

@@ -0,0 +1,49 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Pre, PreMermaid, PreSingleLine } from "../mdxComponents/Pre";
+import { jsx as _jsx } from "react/jsx-runtime";
+var countLines = function countLines(str) {
+  var regex = /\n/g;
+  var matches = str.match(regex);
+  return matches ? matches.length : 1;
+};
+var useCode = function useCode(raw) {
+  if (!raw) return;
+  var _raw$props = raw.props,
+    children = _raw$props.children,
+    className = _raw$props.className;
+  if (!children) return;
+  var content = Array.isArray(children) ? children[0] : children;
+  var lang = (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'txt';
+  var isSingleLine = countLines(content) <= 1 && content.length <= 32;
+  return {
+    content: content,
+    isSingleLine: isSingleLine,
+    lang: lang
+  };
+};
+var CodeBlock = function CodeBlock(_ref) {
+  var children = _ref.children,
+    fullFeatured = _ref.fullFeatured,
+    enableMermaid = _ref.enableMermaid,
+    mermaid = _ref.mermaid;
+  var code = useCode(children);
+  if (!code) return;
+  if (enableMermaid && code.lang === 'mermaid') return /*#__PURE__*/_jsx(PreMermaid, _objectSpread(_objectSpread({
+    fullFeatured: fullFeatured
+  }, mermaid), {}, {
+    children: code.content
+  }));
+  if (code.isSingleLine) return /*#__PURE__*/_jsx(PreSingleLine, {
+    language: code.lang,
+    children: code.content
+  });
+  return /*#__PURE__*/_jsx(Pre, {
+    allowChangeLanguage: false,
+    fullFeatured: fullFeatured,
+    language: code.lang,
+    children: code.content
+  });
+};
+export default CodeBlock;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.156.4",
+  "version": "1.157.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -97,6 +97,8 @@
     "@floating-ui/react": "^0.26.28",
     "@giscus/react": "^3.0.0",
     "@lobehub/fluent-emoji": "^1.0.1",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@react-spring/web": "^9.7.5",
     "@shikijs/transformers": "^1.24.0",