@lobehub/editor 4.18.0 → 4.18.1

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

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createStaticStyles } from "antd-style";
 import { createPortal } from "react-dom";
-import { flip, offset, shift, useFloating } from "@floating-ui/react";
+import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
 //#region src/plugins/slash/react/components/DefaultSlashMenu.tsx
 const LOBE_THEME_APP_ID$1 = "lobe-ui-theme-app";
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -13,7 +13,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     overflow-y: auto;
 
-    min-width: 200px;
     max-height: min(50vh, 400px);
     padding: 4px;
     border-radius: ${cssVar.borderRadius};
@@ -24,14 +23,92 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       0 0 15px 0 #00000008,
       0 2px 30px 0 #00000014,
       0 0 0 1px ${cssVar.colorBorder} inset;
+  `,
+	popupCaret: css`
+    width: max-content;
+    min-width: 200px;
   `,
 	root: css`
     z-index: 1100;
-    width: max-content;
   `
 }));
 const isDividerOption = (option) => "type" in option && option.type === "divider";
-const DefaultSlashMenu = ({ activeKey, getPopupContainer, loading, onSelect, open, options, placement: forcePlacement, position }) => {
+const renderItems = (options, activeKey, loading, onSelect) => {
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: menuSharedStyles.empty,
+		children: "Loading..."
+	});
+	return options.map((opt, index) => {
+		if (isDividerOption(opt)) return /* @__PURE__ */ jsx("div", { className: menuSharedStyles.separator }, `__divider_${index}`);
+		const item = opt;
+		const isHighlighted = item.key === activeKey;
+		const isDisabled = Boolean(item.disabled);
+		return /* @__PURE__ */ jsxs("div", {
+			"aria-disabled": isDisabled || void 0,
+			className: menuSharedStyles.item,
+			"data-disabled": isDisabled ? "" : void 0,
+			"data-highlighted": isHighlighted ? "" : void 0,
+			onClick: () => {
+				if (isDisabled) return;
+				onSelect(item);
+			},
+			onMouseDown: (event) => event.preventDefault(),
+			role: "menuitem",
+			children: [
+				item.icon ? /* @__PURE__ */ jsx("span", {
+					className: menuSharedStyles.icon,
+					children: /* @__PURE__ */ jsx(Icon, { icon: item.icon })
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: menuSharedStyles.label,
+					children: item.label
+				}),
+				item.extra ? /* @__PURE__ */ jsx("span", {
+					className: menuSharedStyles.extra,
+					children: item.extra
+				}) : null
+			]
+		}, String(item.key));
+	});
+};
+const resolvePortalContainer = () => {
+	if (typeof document === "undefined") return null;
+	return document.getElementById(LOBE_THEME_APP_ID$1) ?? document.body;
+};
+const FullWidthSlashMenu = ({ activeKey, anchor, loading, onSelect, open, options, placement }) => {
+	const resolvedPlacement = placement === "bottom" ? "bottom-start" : "top-start";
+	const { refs, floatingStyles, isPositioned } = useFloating({
+		elements: { reference: anchor },
+		middleware: [
+			offset(8),
+			size({ apply({ rects, elements }) {
+				elements.floating.style.width = `${rects.reference.width}px`;
+			} }),
+			flip({ fallbackPlacements: placement === "bottom" ? ["top-start"] : ["bottom-start"] }),
+			shift({ padding: 8 })
+		],
+		open,
+		placement: resolvedPlacement,
+		strategy: "fixed",
+		whileElementsMounted: autoUpdate
+	});
+	const portalContainer = resolvePortalContainer();
+	if (!portalContainer) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: styles.root,
+		"data-resolved-placement": resolvedPlacement,
+		ref: refs.setFloating,
+		style: {
+			...floatingStyles,
+			visibility: isPositioned ? "visible" : "hidden"
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles.popup,
+			children: renderItems(options, activeKey, loading, onSelect)
+		})
+	}), portalContainer);
+};
+const CaretSlashMenu = ({ activeKey, loading, onSelect, open, options, placement: forcePlacement, position }) => {
 	const resolvedPlacement = forcePlacement ? `${forcePlacement}-start` : "top-start";
 	const middleware = useMemo(() => [
 		offset(8),
@@ -62,62 +139,19 @@ const DefaultSlashMenu = ({ activeKey, getPopupContainer, loading, onSelect, ope
 	useEffect(() => {
 		if (!open) return;
 		const onScroll = () => update();
-		const container = getPopupContainer?.();
 		window.addEventListener("scroll", onScroll, {
 			capture: true,
 			passive: true
 		});
-		if (container) container.addEventListener("scroll", onScroll, { passive: true });
 		return () => {
 			window.removeEventListener("scroll", onScroll, { capture: true });
-			if (container) container.removeEventListener("scroll", onScroll);
 		};
-	}, [
-		open,
-		getPopupContainer,
-		update
-	]);
-	const hasVisibleItems = options?.some((item) => !isDividerOption(item));
-	if (!open || !hasVisibleItems) return null;
-	const portalContainer = getPopupContainer?.() || document.getElementById(LOBE_THEME_APP_ID$1) || document.body;
-	const renderedItems = loading ? /* @__PURE__ */ jsx("div", {
-		className: menuSharedStyles.empty,
-		children: "Loading..."
-	}) : options.map((opt, index) => {
-		if (isDividerOption(opt)) return /* @__PURE__ */ jsx("div", { className: menuSharedStyles.separator }, `__divider_${index}`);
-		const item = opt;
-		const isHighlighted = item.key === activeKey;
-		const isDisabled = Boolean(item.disabled);
-		return /* @__PURE__ */ jsxs("div", {
-			"aria-disabled": isDisabled || void 0,
-			className: menuSharedStyles.item,
-			"data-disabled": isDisabled ? "" : void 0,
-			"data-highlighted": isHighlighted ? "" : void 0,
-			onClick: () => {
-				if (isDisabled) return;
-				onSelect(item);
-			},
-			onMouseDown: (event) => event.preventDefault(),
-			role: "menuitem",
-			children: [
-				item.icon ? /* @__PURE__ */ jsx("span", {
-					className: menuSharedStyles.icon,
-					children: /* @__PURE__ */ jsx(Icon, { icon: item.icon })
-				}) : null,
-				/* @__PURE__ */ jsx("span", {
-					className: menuSharedStyles.label,
-					children: item.label
-				}),
-				item.extra ? /* @__PURE__ */ jsx("span", {
-					className: menuSharedStyles.extra,
-					children: item.extra
-				}) : null
-			]
-		}, String(item.key));
-	});
+	}, [open, update]);
+	const portalContainer = resolvePortalContainer();
+	if (!portalContainer) return null;
 	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: styles.root,
-		"data-resloved-placement": resolvedPlacement,
+		className: `${styles.root} ${styles.popupCaret}`,
+		"data-resolved-placement": resolvedPlacement,
 		ref: refs.setFloating,
 		style: {
 			...floatingStyles,
@@ -125,10 +159,34 @@ const DefaultSlashMenu = ({ activeKey, getPopupContainer, loading, onSelect, ope
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			className: styles.popup,
-			children: renderedItems
+			children: renderItems(options, activeKey, loading, onSelect)
 		})
 	}), portalContainer);
 };
+const DefaultSlashMenu = ({ activeKey, getPopupContainer, loading, onSelect, open, options, placement, position }) => {
+	const hasVisibleItems = options?.some((item) => !isDividerOption(item));
+	if (!open || !hasVisibleItems) return null;
+	const anchor = getPopupContainer?.() ?? null;
+	if (anchor) return /* @__PURE__ */ jsx(FullWidthSlashMenu, {
+		activeKey,
+		anchor,
+		loading,
+		onSelect,
+		open,
+		options,
+		placement: placement ?? "top"
+	});
+	if (!position) return null;
+	return /* @__PURE__ */ jsx(CaretSlashMenu, {
+		activeKey,
+		loading,
+		onSelect,
+		open,
+		options,
+		placement,
+		position
+	});
+};
 DefaultSlashMenu.displayName = "DefaultSlashMenu";
 //#endregion
 export { DefaultSlashMenu as default };

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

@@ -94,8 +94,11 @@ interface SlashMenuProps {
   options: Array<ISlashOption>;
   /** Force menu placement direction, skipping auto-flip detection */
   placement?: 'bottom' | 'top';
-  /** Menu position */
-  position: {
+  /**
+   * Caret position used by the floating fallback when no getPopupContainer
+   * is provided. Ignored in full-width mode.
+   */
+  position?: {
     getRect?: () => DOMRect;
     rect?: DOMRect;
     x: number;

package/es/react/ChatInput/ChatInput.js

@@ -38,11 +38,11 @@ const ChatInput = (props) => {
 	return /* @__PURE__ */ jsxs(Flexbox, {
 		className: cx(isDarkMode ? styles.containerDark : styles.containerLight, styles.root, className),
 		height: fullscreen ? "100%" : void 0,
+		ref: slashMenuRef,
 		style,
 		width: "100%",
 		...rest,
 		children: [
-			slashMenuRef && /* @__PURE__ */ jsx("div", { ref: slashMenuRef }),
 			/* @__PURE__ */ jsx("div", {
 				className: cx(styles.header, classNames?.header),
 				ref: headerRef,

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

@@ -21,6 +21,11 @@ interface ChatInputProps extends Omit<FlexboxProps, 'height'> {
   resize?: boolean;
   resizeMaxHeightOffset?: number;
   showResizeHandle?: boolean;
+  /**
+   * Ref attached to the ChatInput root element. Pass the same ref to
+   * `<Editor getPopupContainer={() => ref.current}>` to anchor the slash /
+   * mention menu to the ChatInput's outer edges (full-width).
+   */
   slashMenuRef?: Ref<HTMLDivElement>;
   styles?: {
     body?: CSSProperties;

package/es/react.d.ts

@@ -15,10 +15,6 @@ import { Editor } from "./react/Editor/index.js";
 import { EditorProvider, EditorProviderConfig, EditorProviderProps, useEditorContent } from "./react/EditorProvider/index.js";
 import { FloatActionsProps } from "./react/FloatActions/type.js";
 import { FloatActions } from "./react/FloatActions/FloatActions.js";
-import { FloatMenuProps } from "./react/FloatMenu/type.js";
-import { FloatMenu } from "./react/FloatMenu/FloatMenu.js";
 import { SendButtonProps } from "./react/SendButton/type.js";
 import { SendButton } from "./react/SendButton/SendButton.js";
-import { SlashMenuProps } from "./react/SlashMenu/type.js";
-import { SlashMenu } from "./react/SlashMenu/SlashMenu.js";
-export { ANCHOR_PADDING_CSS_VAR, ChatInput, ChatInputActionBar, type ChatInputActionBarProps, type ChatInputActionEvent, ChatInputActions, type ChatInputActionsProps, type ChatInputProps, CodeLanguageSelect, type CodeLanguageSelectProps, DEFAULT_BLOCK_ANCHOR_PADDING, Editor, type EditorProps, EditorProvider, type EditorProviderConfig, type EditorProviderProps, type EditorState, FloatActions, type FloatActionsProps, FloatMenu, type FloatMenuProps, SendButton, type SendButtonProps, SlashMenu, type SlashMenuProps, useEditor, useEditorContent, useEditorState, withProps };
+export { ANCHOR_PADDING_CSS_VAR, ChatInput, ChatInputActionBar, type ChatInputActionBarProps, type ChatInputActionEvent, ChatInputActions, type ChatInputActionsProps, type ChatInputProps, CodeLanguageSelect, type CodeLanguageSelectProps, DEFAULT_BLOCK_ANCHOR_PADDING, Editor, type EditorProps, EditorProvider, type EditorProviderConfig, type EditorProviderProps, type EditorState, FloatActions, type FloatActionsProps, SendButton, type SendButtonProps, useEditor, useEditorContent, useEditorState, withProps };

package/es/react.js

@@ -9,7 +9,5 @@ import { EditorProvider, useEditorContent } from "./react/EditorProvider/index.j
 import { withProps } from "./react/Editor/utils.js";
 import Editor from "./react/Editor/index.js";
 import FloatActions from "./react/FloatActions/FloatActions.js";
-import FloatMenu from "./react/FloatMenu/FloatMenu.js";
 import SendButton from "./react/SendButton/SendButton.js";
-import SlashMenu from "./react/SlashMenu/SlashMenu.js";
-export { ANCHOR_PADDING_CSS_VAR, ChatInput, ChatInputActionBar, ChatInputActions, CodeLanguageSelect, DEFAULT_BLOCK_ANCHOR_PADDING, Editor, EditorProvider, FloatActions, FloatMenu, SendButton, SlashMenu, useEditor, useEditorContent, useEditorState, withProps };
+export { ANCHOR_PADDING_CSS_VAR, ChatInput, ChatInputActionBar, ChatInputActions, CodeLanguageSelect, DEFAULT_BLOCK_ANCHOR_PADDING, Editor, EditorProvider, FloatActions, SendButton, useEditor, useEditorContent, useEditorState, withProps };

package/package.json

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

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

@@ -1,7 +0,0 @@
-import { FloatMenuProps } from "./type.js";
-import { FC } from "react";
-
-//#region src/react/FloatMenu/FloatMenu.d.ts
-declare const FloatMenu: FC<FloatMenuProps>;
-//#endregion
-export { FloatMenu };

package/es/react/FloatMenu/FloatMenu.js

@@ -1,32 +0,0 @@
-"use client";
-import { styles } from "./style.js";
-import { Block, Flexbox } from "@lobehub/ui";
-import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import { createPortal } from "react-dom";
-//#region src/react/FloatMenu/FloatMenu.tsx
-const FloatMenu = ({ className, style, getPopupContainer, children, maxHeight = "min(50vh, 640px)", open, placement = "top", styles: customStyles, classNames }) => {
-	const parent = getPopupContainer();
-	if (!parent) return;
-	if (!open) return;
-	return createPortal(/* @__PURE__ */ jsx(Flexbox, {
-		className: cx(placement === "bottom" ? styles.rootBottom : styles.rootTop, classNames?.root),
-		paddingInline: 8,
-		style: customStyles?.root,
-		width: "100%",
-		children: /* @__PURE__ */ jsx(Block, {
-			className: cx(styles.container, className, classNames?.container),
-			shadow: true,
-			style: {
-				maxHeight,
-				...style,
-				...customStyles?.container
-			},
-			variant: "outlined",
-			children
-		})
-	}), parent);
-};
-FloatMenu.displayName = "FloatMenu";
-//#endregion
-export { FloatMenu as default };

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

@@ -1,2 +0,0 @@
-import { FloatMenuProps } from "./type.js";
-import { FloatMenu } from "./FloatMenu.js";

package/es/react/FloatMenu/style.js

@@ -1,28 +0,0 @@
-import { createStaticStyles } from "antd-style";
-//#region src/react/FloatMenu/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	container: css`
-    position: relative;
-    overflow: hidden auto;
-    background: ${cssVar.colorBgElevated};
-  `,
-	containerWithMaxHeight: css`
-    /* maxHeight is set via inline style as it's dynamic */
-  `,
-	rootBottom: css`
-    position: absolute;
-    z-index: 9999;
-    inset-block-start: 100%;
-    inset-inline-start: 0;
-
-    padding-block-start: 8px;
-  `,
-	rootTop: css`
-    position: absolute;
-    inset-block-start: -8px;
-    inset-inline-start: 0;
-    transform: translateY(-100%);
-  `
-}));
-//#endregion
-export { styles };

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

@@ -1,25 +0,0 @@
-import { BlockProps } from "@lobehub/ui";
-import { CSSProperties, ReactNode } from "react";
-
-//#region src/react/FloatMenu/type.d.ts
-interface FloatMenuProps {
-  children?: ReactNode;
-  className?: string;
-  classNames?: {
-    container?: string;
-    root?: string;
-  };
-  containerProps?: Omit<BlockProps, 'children'>;
-  getPopupContainer: () => HTMLDivElement | null;
-  maxHeight?: string | number;
-  open?: boolean;
-  /** Menu placement direction: 'top' (default) or 'bottom' */
-  placement?: 'bottom' | 'top';
-  style?: CSSProperties;
-  styles?: {
-    container?: CSSProperties;
-    root?: CSSProperties;
-  };
-}
-//#endregion
-export { FloatMenuProps };

package/es/react/SlashMenu/SlashMenu.d.ts

@@ -1,7 +0,0 @@
-import { SlashMenuProps } from "./type.js";
-import { FC } from "react";
-
-//#region src/react/SlashMenu/SlashMenu.d.ts
-declare const SlashMenu: FC<SlashMenuProps>;
-//#endregion
-export { SlashMenu };

package/es/react/SlashMenu/SlashMenu.js

@@ -1,40 +0,0 @@
-"use client";
-import FloatMenu from "../FloatMenu/FloatMenu.js";
-import { Menu } from "@lobehub/ui";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/react/SlashMenu/SlashMenu.tsx
-const SlashMenu = ({ options, activeKey, loading, onSelect, classNames, styles: customStyles, menuProps, ...floatMenuProps }) => {
-	const handleMenuClick = useCallback(({ key }) => {
-		if (!onSelect) return;
-		const option = options.find((item) => "key" in item && item.key === key);
-		if (option) onSelect?.(option);
-	}, [options, onSelect]);
-	return /* @__PURE__ */ jsx(FloatMenu, {
-		classNames: {
-			container: classNames?.container,
-			root: classNames?.root
-		},
-		styles: {
-			container: customStyles?.container,
-			root: customStyles?.root
-		},
-		...floatMenuProps,
-		children: /* @__PURE__ */ jsx(Menu, {
-			className: classNames?.menu,
-			items: loading ? [{
-				disabled: true,
-				key: "loading",
-				label: "Loading..."
-			}] : options,
-			mode: "inline",
-			onClick: handleMenuClick,
-			selectedKeys: activeKey ? [activeKey] : void 0,
-			style: customStyles?.menu,
-			...menuProps
-		})
-	});
-};
-SlashMenu.displayName = "SlashMenu";
-//#endregion
-export { SlashMenu as default };

package/es/react/SlashMenu/index.d.ts

@@ -1,2 +0,0 @@
-import { SlashMenuProps } from "./type.js";
-import { SlashMenu } from "./SlashMenu.js";

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

@@ -1,17 +0,0 @@
-import { MenuRenderProps } from "../../plugins/slash/react/type.js";
-import { FloatMenuProps } from "../FloatMenu/type.js";
-import { MenuProps } from "@lobehub/ui";
-import { CSSProperties } from "react";
-
-//#region src/react/SlashMenu/type.d.ts
-interface SlashMenuProps extends MenuRenderProps, Omit<FloatMenuProps, 'children'> {
-  classNames?: FloatMenuProps['classNames'] & {
-    menu?: string;
-  };
-  menuProps?: MenuProps;
-  styles?: FloatMenuProps['styles'] & {
-    menu?: CSSProperties;
-  };
-}
-//#endregion
-export { SlashMenuProps };