@lobehub/editor 4.0.1 → 4.1.0

package/es/plugins/math/plugin/index.js

@@ -27,6 +27,7 @@ import { IMarkdownShortCutService } from "../../markdown/service/shortcut";
 import { createDebugLogger } from "../../../utils/debug";
 import { registerMathCommand } from "../command";
 import { $createMathBlockNode, $createMathInlineNode, MathBlockNode, MathInlineNode } from "../node";
+import { isLikelyMathContent } from "../utils";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -103,10 +104,11 @@ export var MathPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       var _this2 = this;
       var markdownService = this.kernel.requireService(IMarkdownShortCutService);
       markdownService === null || markdownService === void 0 || markdownService.registerMarkdownShortCut({
-        regExp: /\$([^$]+)\$\s?$/,
+        regExp: /\$([^\s$](?:[^$]*[^\s$])?)\$\s?$/,
         replace: function replace(textNode, match) {
           var _match = _slicedToArray(match, 2),
             code = _match[1];
+          if (!isLikelyMathContent(code)) return;
           var mathNode = $createMathInlineNode(code);
           _this2.logger.debug('Math node inserted:', mathNode);
           // textNode.replace(mathNode);

package/es/plugins/math/utils/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Heuristic: does the content between `$...$` look like a math formula?
+ *
+ * Positive signals (any one → math):
+ *  - LaTeX commands        \alpha  \frac  …
+ *  - Structural chars      ^ _ { } ( )
+ *  - Operators / relations  + - * / = < > | ! ,
+ *  - Digits                0-9
+ *  - Single ASCII letter   x  y  n  (common math variable)
+ *
+ * Everything else (multi-char words, CJK, spaced plain text) → not math.
+ */
+export declare function isLikelyMathContent(content: string): boolean;

package/es/plugins/math/utils/index.js

@@ -0,0 +1,26 @@
+/**
+ * Heuristic: does the content between `$...$` look like a math formula?
+ *
+ * Positive signals (any one → math):
+ *  - LaTeX commands        \alpha  \frac  …
+ *  - Structural chars      ^ _ { } ( )
+ *  - Operators / relations  + - * / = < > | ! ,
+ *  - Digits                0-9
+ *  - Single ASCII letter   x  y  n  (common math variable)
+ *
+ * Everything else (multi-char words, CJK, spaced plain text) → not math.
+ */
+export function isLikelyMathContent(content) {
+  var trimmed = content.trim();
+  if (!trimmed) return false;
+
+  // LaTeX commands
+  if (/\\[A-Za-z]/.test(trimmed)) return true;
+
+  // Math structural chars, operators, or digits
+  if (/[\d!()*+,/<=>^_{|}-]/.test(trimmed)) return true;
+
+  // Single ASCII letter → likely a variable (x, y, n, …)
+  if (/^[A-Za-z]$/.test(trimmed)) return true;
+  return false;
+}

package/es/plugins/slash/react/ReactSlashPlugin.js

@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { mergeRegister } from '@lexical/utils';
 import { COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
-import { Children, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { Children, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { noop } from "../../../editor-kernel";
 import { useLexicalEditor } from "../../../editor-kernel/react";
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
@@ -20,7 +20,9 @@ import { setCancelablePromise } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ReactSlashPlugin = function ReactSlashPlugin(_ref) {
   var children = _ref.children,
-    anchorClassName = _ref.anchorClassName;
+    anchorClassName = _ref.anchorClassName,
+    getPopupContainer = _ref.getPopupContainer,
+    placement = _ref.placement;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -61,6 +63,11 @@ var ReactSlashPlugin = function ReactSlashPlugin(_ref) {
     setResolution(null);
     setActiveKey(null);
   }, []);
+
+  // Close menu on unmount to prevent orphaned portal at (0,0)
+  useEffect(function () {
+    return close;
+  }, [close]);
   var handleActiveKeyChange = useCallback(function (key) {
     setActiveKey(key);
   }, []);
@@ -113,6 +120,8 @@ var ReactSlashPlugin = function ReactSlashPlugin(_ref) {
         }
         var rect = ctx.getRect();
         setDropdownPosition({
+          getRect: ctx.getRect,
+          rect: rect,
           x: rect.left,
           y: rect.bottom
         });
@@ -234,12 +243,14 @@ var ReactSlashPlugin = function ReactSlashPlugin(_ref) {
     activeKey: activeKey,
     anchorClassName: anchorClassName,
     customRender: CustomRender,
+    getPopupContainer: getPopupContainer,
     loading: loading,
     onActiveKeyChange: handleActiveKeyChange,
     onClose: close,
     onSelect: handleMenuSelect,
     open: isOpen,
     options: options,
+    placement: placement,
     position: dropdownPosition
   });
 };

package/es/plugins/slash/react/components/DefaultSlashMenu.js

@@ -1,26 +1,107 @@
 'use client';
 
-var _templateObject;
+var _templateObject, _templateObject2;
+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 _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 _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 _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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { Dropdown } from '@lobehub/ui';
+import { flip, offset, shift, useFloating } from '@floating-ui/react';
+import { Menu } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { jsx as _jsx } from "react/jsx-runtime";
+var LOBE_THEME_APP_ID = 'lobe-ui-theme-app';
 var styles = createStaticStyles(function (_ref) {
-  var css = _ref.css;
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
   return {
-    menu: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: fixed;\n    z-index: 9999;\n  "])))
+    menu: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    z-index: 9999;\n    width: max-content;\n  "]))),
+    popup: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    scrollbar-width: none;\n\n    overflow-y: auto;\n\n    min-width: 120px;\n    max-height: min(50vh, 400px);\n    padding: 4px;\n    border-radius: ", ";\n\n    background: ", ";\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014,\n      0 0 0 1px ", " inset;\n\n    .ant-menu {\n      min-width: 200px;\n      padding: 0 !important;\n      border-inline-end: none !important;\n\n      color: ", " !important;\n\n      background: transparent !important;\n      background-color: transparent !important;\n    }\n\n    .ant-menu-item {\n      overflow: hidden;\n      display: flex !important;\n      align-items: center;\n\n      width: 100% !important;\n      min-height: 36px;\n      margin: 0 !important;\n      padding-block: 8px !important;\n      padding-inline: 12px !important;\n      border-radius: ", " !important;\n\n      font-size: 14px;\n      line-height: 20px;\n      color: ", " !important;\n\n      background: transparent !important;\n\n      transition: all 150ms ", ";\n\n      &:hover,\n      &.ant-menu-item-active {\n        background: ", " !important;\n      }\n\n      &:active {\n        background: ", " !important;\n      }\n    }\n\n    .ant-menu-item-divider {\n      height: 1px;\n      margin-block: 4px !important;\n      margin-inline: 0 !important;\n      background: ", " !important;\n    }\n\n    .ant-menu-title-content,\n    .ant-menu-title-content-with-extra {\n      overflow: visible;\n      display: inline-flex;\n      gap: 24px;\n      justify-content: space-between;\n\n      width: 100%;\n\n      text-overflow: unset;\n    }\n  "])), cssVar.borderRadius, cssVar.colorBgElevated, cssVar.colorBorder, cssVar.colorText, cssVar.borderRadiusSM, cssVar.colorText, cssVar.motionEaseOut, cssVar.colorFillTertiary, cssVar.colorFillSecondary, cssVar.colorBorder)
   };
 });
 var DefaultSlashMenu = function DefaultSlashMenu(_ref2) {
   var activeKey = _ref2.activeKey,
-    anchorClassName = _ref2.anchorClassName,
+    getPopupContainer = _ref2.getPopupContainer,
     loading = _ref2.loading,
     onSelect = _ref2.onSelect,
     open = _ref2.open,
     options = _ref2.options,
-    position = _ref2.position,
-    _onClose = _ref2.onClose;
+    forcePlacement = _ref2.placement,
+    position = _ref2.position;
+  var resolvedPlacement = forcePlacement ? "".concat(forcePlacement, "-start") : 'top-start';
+  var middleware = useMemo(function () {
+    return [offset(8)].concat(_toConsumableArray(!forcePlacement ? [flip()] : []), [shift({
+      padding: 8
+    })]);
+  }, [forcePlacement]);
+
+  // Keep getRect in a ref so the virtual reference always calls the latest version
+  var getRectRef = useRef(position.getRect);
+  getRectRef.current = position.getRect;
+  var _useFloating = useFloating({
+      middleware: middleware,
+      open: open,
+      placement: resolvedPlacement,
+      strategy: 'fixed'
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    update = _useFloating.update;
+  useLayoutEffect(function () {
+    if (!position.rect) return;
+    refs.setPositionReference({
+      getBoundingClientRect: function getBoundingClientRect() {
+        var _getRectRef$current, _getRectRef$current2;
+        return (_getRectRef$current = (_getRectRef$current2 = getRectRef.current) === null || _getRectRef$current2 === void 0 ? void 0 : _getRectRef$current2.call(getRectRef)) !== null && _getRectRef$current !== void 0 ? _getRectRef$current : position.rect;
+      }
+    });
+  }, [position.rect, refs]);
+
+  // Force position recalculation after reference is set.
+  // useFloating computes before useLayoutEffect sets the reference,
+  // so the first frame has wrong position. rAF ensures a correct update.
+  useEffect(function () {
+    if (!open || !position.rect) return;
+    var frame = requestAnimationFrame(function () {
+      return update();
+    });
+    return function () {
+      return cancelAnimationFrame(frame);
+    };
+  }, [open, position.rect, update]);
+
+  // Listen to scroll events to update floating position.
+  // capture phase on window catches scroll from any ancestor (scroll events don't bubble,
+  // but do propagate during capture). Also listen on getPopupContainer for edge cases
+  // like shadow DOM where capture on window may not reach.
+  useEffect(function () {
+    if (!open) return;
+    var onScroll = function onScroll() {
+      return update();
+    };
+    var container = getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer();
+    window.addEventListener('scroll', onScroll, {
+      capture: true,
+      passive: true
+    });
+    if (container) {
+      container.addEventListener('scroll', onScroll, {
+        passive: true
+      });
+    }
+    return function () {
+      window.removeEventListener('scroll', onScroll, {
+        capture: true
+      });
+      if (container) {
+        container.removeEventListener('scroll', onScroll);
+      }
+    };
+  }, [open, getPopupContainer, update]);
   var handleMenuClick = useCallback(function (_ref3) {
     var key = _ref3.key;
     var option = options.find(function (item) {
@@ -28,29 +109,33 @@ var DefaultSlashMenu = function DefaultSlashMenu(_ref2) {
     });
     if (option) onSelect(option);
   }, [options, onSelect]);
-  return /*#__PURE__*/_jsx("div", {
+  var hasVisibleItems = options === null || options === void 0 ? void 0 : options.some(function (item) {
+    return !('type' in item && item.type === 'divider');
+  });
+  if (!open || !hasVisibleItems) return null;
+  var portalContainer = (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer()) || document.getElementById(LOBE_THEME_APP_ID) || document.body;
+  var node = /*#__PURE__*/_jsx("div", {
     className: styles.menu,
-    style: {
-      left: position.x,
-      top: position.y
-    },
-    children: /*#__PURE__*/_jsx(Dropdown, {
-      menu: {
-        // @ts-ignore
+    "data-resloved-placement": resolvedPlacement,
+    ref: refs.setFloating,
+    style: floatingStyles,
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.popup,
+      children: /*#__PURE__*/_jsx(Menu
+      // @ts-ignore - activeKey is a valid antd Menu prop passed via ...rest
+      , {
         activeKey: activeKey,
         items: loading ? [{
           disabled: true,
           key: 'loading',
           label: 'Loading...'
         }] : options,
-        onClick: handleMenuClick
-      },
-      open: open,
-      children: /*#__PURE__*/_jsx("span", {
-        className: anchorClassName
+        onClick: handleMenuClick,
+        selectable: false
       })
     })
   });
+  return /*#__PURE__*/createPortal(node, portalContainer);
 };
 DefaultSlashMenu.displayName = 'DefaultSlashMenu';
 export default DefaultSlashMenu;

package/es/plugins/slash/react/components/SlashMenu.js

@@ -12,11 +12,13 @@ var SlashMenu = function SlashMenu(_ref) {
   var activeKey = _ref.activeKey,
     anchorClassName = _ref.anchorClassName,
     CustomRender = _ref.customRender,
+    getPopupContainer = _ref.getPopupContainer,
     loading = _ref.loading,
     onActiveKeyChange = _ref.onActiveKeyChange,
     onSelect = _ref.onSelect,
     open = _ref.open,
     options = _ref.options,
+    placement = _ref.placement,
     position = _ref.position,
     onClose = _ref.onClose;
   // Adapter for custom render component onSelect
@@ -40,11 +42,13 @@ var SlashMenu = function SlashMenu(_ref) {
   return /*#__PURE__*/_jsx(DefaultSlashMenu, {
     activeKey: activeKey,
     anchorClassName: anchorClassName,
+    getPopupContainer: getPopupContainer,
     loading: loading,
     onClose: onClose,
     onSelect: onSelect,
     open: open,
     options: options,
+    placement: placement,
     position: position
   });
 };

package/es/plugins/slash/react/type.d.ts

@@ -77,6 +77,8 @@ export interface SlashMenuProps {
     anchorClassName?: string;
     /** Custom render component if provided */
     customRender?: FC<MenuRenderProps>;
+    /** Custom popup container for portal rendering and scroll tracking */
+    getPopupContainer?: () => HTMLElement | null;
     /** Loading state */
     loading: boolean;
     /** Callback to set active key */
@@ -89,8 +91,12 @@ export interface SlashMenuProps {
     open: boolean;
     /** Available options to display */
     options: Array<ISlashOption>;
+    /** Force menu placement direction, skipping auto-flip detection */
+    placement?: 'bottom' | 'top';
     /** Menu position */
     position: {
+        getRect?: () => DOMRect;
+        rect?: DOMRect;
         x: number;
         y: number;
     };
@@ -98,4 +104,8 @@ export interface SlashMenuProps {
 export interface ReactSlashPluginProps {
     anchorClassName?: string;
     children?: (ReactElement<ReactSlashOptionProps> | undefined) | (ReactElement<ReactSlashOptionProps> | undefined)[];
+    /** Custom popup container for portal rendering and scroll tracking */
+    getPopupContainer?: () => HTMLElement | null;
+    /** Force menu placement direction, skipping auto-flip detection */
+    placement?: 'bottom' | 'top';
 }

package/es/react/Editor/Editor.js

@@ -42,6 +42,8 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     plugins = _ref$plugins === void 0 ? [] : _ref$plugins,
     _ref$slashOption = _ref.slashOption,
     slashOption = _ref$slashOption === void 0 ? {} : _ref$slashOption,
+    slashPlacement = _ref.slashPlacement,
+    getPopupContainer = _ref.getPopupContainer,
     _ref$mentionOption = _ref.mentionOption,
     mentionOption = _ref$mentionOption === void 0 ? {} : _ref$mentionOption,
     variant = _ref.variant,
@@ -100,6 +102,8 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
   var memoSlash = useMemo(function () {
     if (!enableSlash && !enableMention) return null;
     return /*#__PURE__*/_jsxs(ReactSlashPlugin, {
+      getPopupContainer: getPopupContainer,
+      placement: slashPlacement,
       children: [enableSlash ? /*#__PURE__*/_jsx(ReactSlashOption, _objectSpread({
         maxLength: 8,
         trigger: "/"
@@ -108,7 +112,7 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
         trigger: "@"
       }, restMentionOption)) : undefined]
     });
-  }, [enableSlash, enableMention, slashOption, restMentionOption]);
+  }, [enableSlash, enableMention, slashOption, slashPlacement, getPopupContainer, restMentionOption]);
   return /*#__PURE__*/_jsxs(ReactEditor, {
     config: config,
     editor: editor,

package/es/react/Editor/type.d.ts

@@ -23,6 +23,8 @@ export interface EditorProps extends Partial<ReactEditorContentProps>, Omit<Reac
      * @default true
      */
     enablePasteMarkdown?: boolean;
+    /** Custom popup container for slash menu portal rendering and scroll tracking */
+    getPopupContainer?: () => HTMLElement | null;
     markdownOption?: boolean | {
         bold?: boolean;
         code?: boolean;
@@ -42,6 +44,8 @@ export interface EditorProps extends Partial<ReactEditorContentProps>, Omit<Reac
     onTextChange?: (editor: IEditor) => void;
     plugins?: EditorPlugin[];
     slashOption?: Partial<ReactSlashOptionProps>;
+    /** Force slash menu placement direction, skipping auto-flip detection */
+    slashPlacement?: 'bottom' | 'top';
     style?: CSSProperties;
 }
 export {};

package/es/react/FloatMenu/FloatMenu.js

@@ -19,13 +19,16 @@ var FloatMenu = function FloatMenu(_ref) {
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? 'min(50vh, 640px)' : _ref$maxHeight,
     open = _ref.open,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
     customStyles = _ref.styles,
     classNames = _ref.classNames;
   var parent = getPopupContainer();
   if (!parent) return;
   if (!open) return;
+  var rootClassName = placement === 'bottom' ? styles.rootBottom : styles.rootTop;
   var node = /*#__PURE__*/_jsx(Flexbox, {
-    className: cx(styles.root, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    className: cx(rootClassName, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     paddingInline: 8,
     style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.root,
     width: '100%',

package/es/react/FloatMenu/style.d.ts

@@ -1,5 +1,6 @@
 export declare const styles: {
     container: string;
     containerWithMaxHeight: string;
-    root: string;
+    rootBottom: string;
+    rootTop: string;
 };

package/es/react/FloatMenu/style.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStaticStyles } from 'antd-style';
 export var styles = createStaticStyles(function (_ref) {
@@ -7,6 +7,7 @@ export var styles = createStaticStyles(function (_ref) {
   return {
     container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden auto;\n    background: ", ";\n  "])), cssVar.colorBgElevated),
     containerWithMaxHeight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    /* maxHeight is set via inline style as it's dynamic */\n  "]))),
-    root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    inset-block-start: -8px;\n    inset-inline-start: 0;\n    transform: translateY(-100%);\n  "])))
+    rootBottom: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 9999;\n    inset-block-start: 100%;\n    inset-inline-start: 0;\n\n    padding-block-start: 8px;\n  "]))),
+    rootTop: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    inset-block-start: -8px;\n    inset-inline-start: 0;\n    transform: translateY(-100%);\n  "])))
   };
 });

package/es/react/FloatMenu/type.d.ts

@@ -11,6 +11,8 @@ export interface FloatMenuProps {
     getPopupContainer: () => HTMLDivElement | null;
     maxHeight?: string | number;
     open?: boolean;
+    /** Menu placement direction: 'top' (default) or 'bottom' */
+    placement?: 'bottom' | 'top';
     style?: CSSProperties;
     styles?: {
         container?: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",