@lobehub/editor 4.15.1 → 4.15.2

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

@@ -0,0 +1,160 @@
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { IBlockMenuService } from "../../block/service/i-block-menu-service.js";
+import { getQueryTextForSearch, tryToPositionRange } from "../utils/utils.js";
+import { ISlashService, SlashService } from "../service/i-slash-service.js";
+import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, KEY_DOWN_COMMAND } from "lexical";
+import { $createListItemNode, $isListItemNode } from "@lexical/list";
+//#region src/plugins/slash/plugin/index.ts
+init_plugin();
+const SlashPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "SlashPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.service = null;
+		this.currentSlashTrigger = null;
+		this.currentSlashTriggerIndex = -1;
+		this.manualOpen = false;
+		this.suppressOpen = false;
+		this.service = new SlashService(kernel);
+		kernel.registerService(ISlashService, this.service);
+		if (config?.slashOptions) config.slashOptions.forEach((option) => {
+			this.service?.registerSlash(option);
+		});
+	}
+	triggerClose() {
+		this.config?.triggerClose?.();
+		this.currentSlashTrigger = null;
+		this.currentSlashTriggerIndex = -1;
+		this.manualOpen = false;
+		this.suppressOpen = true;
+	}
+	onInit(editor) {
+		const blockMenuService = this.kernel.requireService(IBlockMenuService);
+		if (blockMenuService) {
+			const unregisterAddBlockButton = blockMenuService.registerActionButton({
+				icon: "plus",
+				key: "__slash_add_below",
+				onClick: (context) => {
+					const lexicalEditor = context.editor.getLexicalEditor();
+					if (!lexicalEditor) return;
+					const slashOptions = this.service?.getSlashOptions("/") || this.config?.slashOptions?.[0];
+					if (!slashOptions) return;
+					let nextParagraphBlockId = null;
+					lexicalEditor.focus();
+					lexicalEditor.update(() => {
+						const targetNode = $getNodeByKey(context.blockId);
+						if (!targetNode) return;
+						let nextNode;
+						if ($isListItemNode(targetNode)) {
+							nextNode = $createListItemNode();
+							targetNode.insertAfter(nextNode);
+						} else {
+							nextNode = $createParagraphNode();
+							targetNode.insertAfter(nextNode);
+						}
+						nextNode.selectStart();
+						nextParagraphBlockId = nextNode.getKey();
+					});
+					const fallbackRect = context.blockElement.getBoundingClientRect();
+					this.manualOpen = true;
+					this.currentSlashTrigger = slashOptions.trigger;
+					this.currentSlashTriggerIndex = -1;
+					this.config?.triggerOpen({
+						getRect: () => {
+							if (nextParagraphBlockId) {
+								const paragraphElement = lexicalEditor.getRootElement()?.querySelector(`[data-block-id="${nextParagraphBlockId}"]`);
+								if (paragraphElement) return paragraphElement.getBoundingClientRect();
+							}
+							return fallbackRect;
+						},
+						items: slashOptions.items,
+						lastIndex: -1,
+						match: null,
+						trigger: slashOptions.trigger
+					});
+				},
+				order: -100,
+				title: "Add block below"
+			});
+			this.register(unregisterAddBlockButton);
+		}
+		this.register(editor.registerCommand(KEY_DOWN_COMMAND, (event) => {
+			if (event.isComposing) return false;
+			const key = event.key;
+			if (key.length === 1 || key === "Backspace" || key === "Delete") {
+				this.suppressOpen = false;
+				this.manualOpen = false;
+			}
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL));
+		this.register(editor.registerUpdateListener(() => {
+			editor.getEditorState().read(() => {
+				if (!editor.isEditable()) {
+					this.triggerClose();
+					return;
+				}
+				if (this.manualOpen) return;
+				if (editor.isComposing()) return;
+				const editorWindow = editor._window || window;
+				if (editorWindow === void 0 || !editorWindow.document) return;
+				const range = editorWindow.document.createRange();
+				const selection = $getSelection();
+				const text = getQueryTextForSearch(editor);
+				if (!$isRangeSelection(selection) || !selection.isCollapsed() || selection.hasFormat("code") || text === null || range === null || this.currentSlashTrigger === null && text.length > 1 && text.at(-2) !== " ") {
+					this.triggerClose();
+					return;
+				}
+				if (this.currentSlashTrigger === null && this.suppressOpen) {
+					this.triggerClose();
+					return;
+				}
+				let triggerText = this.currentSlashTrigger;
+				if (triggerText === null) {
+					triggerText = text.slice(-1);
+					this.currentSlashTriggerIndex = text.length - 1;
+				}
+				const lastIndex = text.lastIndexOf(triggerText);
+				if (lastIndex < this.currentSlashTriggerIndex) {
+					this.triggerClose();
+					return;
+				}
+				const slashOptions = this.service?.getSlashOptions(triggerText);
+				const maxLength = slashOptions?.maxLength || 75;
+				if (text.length - lastIndex > maxLength || !slashOptions) {
+					this.triggerClose();
+					return;
+				}
+				const triggerFn = this.service?.getSlashTriggerFn(triggerText);
+				const fuse = this.service?.getSlashFuse(triggerText);
+				const isRangePositioned = tryToPositionRange(this.currentSlashTriggerIndex, range, editorWindow);
+				const match = triggerFn?.(text.slice(this.currentSlashTriggerIndex));
+				if (text.slice(this.currentSlashTriggerIndex).includes(" ") && !slashOptions?.allowWhitespace) {
+					this.triggerClose();
+					return;
+				}
+				const finalItems = fuse && match && match.matchingString.length > 0 ? fuse.search(match.matchingString).map((result) => result.item) : slashOptions.items;
+				if (isRangePositioned !== null && finalItems.length > 0) {
+					this.currentSlashTrigger = triggerText;
+					this.config?.triggerOpen({
+						getRect: () => range.getBoundingClientRect(),
+						items: finalItems,
+						lastIndex,
+						match,
+						trigger: slashOptions.trigger
+					});
+					return;
+				}
+				this.triggerClose();
+			});
+		}));
+	}
+	destroy() {
+		super.destroy();
+	}
+};
+//#endregion
+export { SlashPlugin };

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

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

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

@@ -0,0 +1,8 @@
+"use client";
+//#region src/plugins/slash/react/ReactSlashOption.tsx
+const ReactSlashOption = () => {
+	return null;
+};
+ReactSlashOption.displayName = "ReactSlashOption";
+//#endregion
+export { ReactSlashOption as default };

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

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

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

@@ -0,0 +1,190 @@
+"use client";
+import { noop } from "../../../editor-kernel/utils.js";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
+import { $splitNodeContainingQuery } from "../utils/utils.js";
+import { ISlashService } from "../service/i-slash-service.js";
+import { SlashPlugin } from "../plugin/index.js";
+import SlashMenu from "./components/SlashMenu.js";
+import { setCancelablePromise } from "./utils.js";
+import { Children, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/slash/react/ReactSlashPlugin.tsx
+const ReactSlashPlugin = ({ children, anchorClassName, getPopupContainer, placement }) => {
+	const [editor] = useLexicalComposerContext();
+	const [isOpen, setIsOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [activeKey, setActiveKey] = useState(null);
+	const [resolution, setResolution] = useState(null);
+	const [options, setOptions] = useState([]);
+	const [dropdownPosition, setDropdownPosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const cancelRef = useRef({ cancel: noop });
+	const triggerMapRef = useRef(/* @__PURE__ */ new Map());
+	const close = useCallback(() => {
+		setIsOpen(false);
+		setOptions([]);
+		setResolution(null);
+		setActiveKey(null);
+	}, []);
+	useEffect(() => close, [close]);
+	const handleActiveKeyChange = useCallback((key) => {
+		setActiveKey(key);
+	}, []);
+	useLayoutEffect(() => {
+		const options = Children.map(children, (child) => {
+			if (!child) return null;
+			const option = child.props;
+			triggerMapRef.current.set(option.trigger, option);
+			return option;
+		})?.filter(Boolean) || [];
+		editor.registerPlugin(SlashPlugin, {
+			slashOptions: options,
+			triggerClose: () => {
+				close();
+				cancelRef.current.cancel();
+			},
+			triggerOpen: (ctx) => {
+				setResolution(ctx);
+				cancelRef.current.cancel();
+				if (Array.isArray(ctx.items)) {
+					setOptions(ctx.items);
+					if (!activeKey) setActiveKey(ctx.items?.[0]?.key);
+				} else {
+					setLoading(true);
+					const pr = setCancelablePromise((resolve, reject) => {
+						ctx.items(ctx.match || null).then(resolve, reject).finally(() => setLoading(false));
+					});
+					pr.promise.then((items) => {
+						const typedItems = items;
+						setOptions(typedItems);
+						if (!activeKey) setActiveKey(typedItems?.[0]?.key);
+					});
+					cancelRef.current.cancel = () => {
+						pr.cancel();
+						setLoading(false);
+					};
+				}
+				const rect = ctx.getRect();
+				setDropdownPosition({
+					getRect: ctx.getRect,
+					rect,
+					x: rect.left,
+					y: rect.bottom
+				});
+				setIsOpen(true);
+			}
+		});
+	}, [
+		activeKey,
+		editor,
+		close
+	]);
+	useLayoutEffect(() => {
+		const slash = editor.requireService(ISlashService);
+		if (slash) {
+			const options = Children.map(children, (child) => {
+				if (!child) return null;
+				const option = child.props;
+				triggerMapRef.current.set(option.trigger, option);
+				return option;
+			})?.filter(Boolean) || [];
+			slash.updateOptions(options);
+		}
+	}, [children]);
+	const handleMenuSelect = useCallback((option) => {
+		if ("type" in option && option.type === "divider") return;
+		const lexicalEditor = editor.getLexicalEditor();
+		if (lexicalEditor && resolution) lexicalEditor.update(() => {
+			(resolution.match ? $splitNodeContainingQuery(resolution.match) : null)?.remove();
+			option.onSelect?.(editor, resolution.match ? resolution.match.matchingString : "");
+		});
+		const currentTriggerProps = triggerMapRef.current.get(resolution?.trigger || "");
+		if (currentTriggerProps?.onSelect) currentTriggerProps.onSelect(editor, option);
+		close();
+	}, [
+		editor,
+		resolution,
+		close
+	]);
+	useLexicalEditor(() => {
+		const pureOptions = options.filter((item) => !("type" in item && item.type === "divider") && "key" in item && Boolean(item.key));
+		return mergeRegister(editor.registerHighCommand(KEY_ARROW_DOWN_COMMAND, (payload) => {
+			const event = payload;
+			if (pureOptions !== null && pureOptions.length) {
+				const currentIndex = activeKey ? pureOptions.findIndex((opt) => opt.key === activeKey) : -1;
+				const newIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % pureOptions.length;
+				setActiveKey(String(pureOptions[newIndex].key));
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_ARROW_UP_COMMAND, (payload) => {
+			const event = payload;
+			if (pureOptions !== null && pureOptions.length) {
+				const currentIndex = activeKey ? pureOptions.findIndex((opt) => opt.key === activeKey) : -1;
+				const newIndex = currentIndex === -1 ? pureOptions.length - 1 : (currentIndex - 1 + pureOptions.length) % pureOptions.length;
+				setActiveKey(String(pureOptions[newIndex].key));
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_ESCAPE_COMMAND, (payload) => {
+			const event = payload;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			close();
+			return true;
+		}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_TAB_COMMAND, (payload) => {
+			const event = payload;
+			if (options === null || activeKey === null) return false;
+			const selectedOption = options.find((opt) => "key" in opt && opt.key === activeKey);
+			if (!selectedOption) return false;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			handleMenuSelect(selectedOption);
+			return true;
+		}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_DOWN_COMMAND, (event) => {
+			if (isOpen && event.key === "Enter" && !event.isComposing) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				if (options !== null && activeKey !== null) {
+					const selectedOption = options.find((opt) => "key" in opt && opt.key === activeKey);
+					if (selectedOption) handleMenuSelect(selectedOption);
+				}
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL));
+	}, [
+		options,
+		activeKey,
+		handleActiveKeyChange,
+		handleMenuSelect,
+		isOpen
+	]);
+	const { renderComp: CustomRender } = triggerMapRef.current.get(resolution?.trigger || "") || {};
+	return /* @__PURE__ */ jsx(SlashMenu, {
+		activeKey,
+		anchorClassName,
+		customRender: CustomRender,
+		getPopupContainer,
+		loading,
+		onActiveKeyChange: handleActiveKeyChange,
+		onClose: close,
+		onSelect: handleMenuSelect,
+		open: isOpen,
+		options,
+		placement,
+		position: dropdownPosition
+	});
+};
+ReactSlashPlugin.displayName = "ReactSlashPlugin";
+//#endregion
+export { ReactSlashPlugin as default };

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

@@ -0,0 +1,168 @@
+"use client";
+import { Menu } from "@lobehub/ui";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createStaticStyles } from "antd-style";
+import { createPortal } from "react-dom";
+import { flip, offset, shift, 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 }) => ({
+	menu: css`
+    z-index: 9999;
+    width: max-content;
+  `,
+	popup: css`
+    scrollbar-width: none;
+
+    overflow-y: auto;
+
+    min-width: 120px;
+    max-height: min(50vh, 400px);
+    padding: 4px;
+    border-radius: ${cssVar.borderRadius};
+
+    background: ${cssVar.colorBgElevated};
+    outline: none;
+    box-shadow:
+      0 0 15px 0 #00000008,
+      0 2px 30px 0 #00000014,
+      0 0 0 1px ${cssVar.colorBorder} inset;
+
+    .ant-menu {
+      min-width: 200px;
+      padding: 0 !important;
+      border-inline-end: none !important;
+
+      color: ${cssVar.colorText} !important;
+
+      background: transparent !important;
+      background-color: transparent !important;
+    }
+
+    .ant-menu-item {
+      overflow: hidden;
+      display: flex !important;
+      align-items: center;
+
+      width: 100% !important;
+      min-height: 36px;
+      margin: 0 !important;
+      padding-block: 8px !important;
+      padding-inline: 12px !important;
+      border-radius: ${cssVar.borderRadiusSM} !important;
+
+      font-size: 14px;
+      line-height: 20px;
+      color: ${cssVar.colorText} !important;
+
+      background: transparent !important;
+
+      transition: all 150ms ${cssVar.motionEaseOut};
+
+      &:hover,
+      &.ant-menu-item-active {
+        background: ${cssVar.colorFillTertiary} !important;
+      }
+
+      &:active {
+        background: ${cssVar.colorFillSecondary} !important;
+      }
+    }
+
+    .ant-menu-item-divider {
+      height: 1px;
+      margin-block: 4px !important;
+      margin-inline: 0 !important;
+      background: ${cssVar.colorBorder} !important;
+    }
+
+    .ant-menu-title-content,
+    .ant-menu-title-content-with-extra {
+      overflow: visible;
+      display: inline-flex;
+      gap: 24px;
+      justify-content: space-between;
+
+      width: 100%;
+
+      text-overflow: unset;
+    }
+  `
+}));
+const DefaultSlashMenu = ({ activeKey, getPopupContainer, loading, onSelect, open, options, placement: forcePlacement, position }) => {
+	const resolvedPlacement = forcePlacement ? `${forcePlacement}-start` : "top-start";
+	const middleware = useMemo(() => [
+		offset(8),
+		...!forcePlacement ? [flip()] : [],
+		shift({ padding: 8 })
+	], [forcePlacement]);
+	const getRectRef = useRef(position.getRect);
+	getRectRef.current = position.getRect;
+	const { refs, floatingStyles, update } = useFloating({
+		middleware,
+		open,
+		placement: resolvedPlacement,
+		strategy: "fixed"
+	});
+	useLayoutEffect(() => {
+		if (!position.rect) return;
+		refs.setPositionReference({ getBoundingClientRect: () => getRectRef.current?.() ?? position.rect });
+	}, [position.rect, refs]);
+	useEffect(() => {
+		if (!open || !position.rect) return;
+		const frame = requestAnimationFrame(() => update());
+		return () => cancelAnimationFrame(frame);
+	}, [
+		open,
+		position.rect,
+		update
+	]);
+	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 handleMenuClick = useCallback(({ key }) => {
+		const option = options.find((item) => "key" in item && item.key === key);
+		if (option) onSelect(option);
+	}, [options, onSelect]);
+	const hasVisibleItems = options?.some((item) => !("type" in item && item.type === "divider"));
+	if (!open || !hasVisibleItems) return null;
+	const portalContainer = getPopupContainer?.() || document.getElementById(LOBE_THEME_APP_ID$1) || document.body;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: styles.menu,
+		"data-resloved-placement": resolvedPlacement,
+		ref: refs.setFloating,
+		style: floatingStyles,
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles.popup,
+			children: /* @__PURE__ */ jsx(Menu, {
+				activeKey,
+				items: loading ? [{
+					disabled: true,
+					key: "loading",
+					label: "Loading..."
+				}] : options,
+				onClick: handleMenuClick,
+				selectable: false
+			})
+		})
+	}), portalContainer);
+};
+DefaultSlashMenu.displayName = "DefaultSlashMenu";
+//#endregion
+export { DefaultSlashMenu as default };

package/es/plugins/slash/react/components/SlashMenu.d.ts

@@ -0,0 +1,11 @@
+import { SlashMenuProps } from "../type.js";
+import { FC } from "react";
+
+//#region src/plugins/slash/react/components/SlashMenu.d.ts
+/**
+ * SlashMenu component - Only responsible for rendering the menu UI
+ * All state management and plugin registration is handled by ReactSlashPlugin
+ */
+declare const SlashMenu: FC<SlashMenuProps>;
+//#endregion
+export { SlashMenu };

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

@@ -0,0 +1,40 @@
+"use client";
+import DefaultSlashMenu from "./DefaultSlashMenu.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/slash/react/components/SlashMenu.tsx
+/**
+* SlashMenu component - Only responsible for rendering the menu UI
+* All state management and plugin registration is handled by ReactSlashPlugin
+*/
+const SlashMenu = ({ activeKey, anchorClassName, customRender: CustomRender, getPopupContainer, loading, onActiveKeyChange, onSelect, open, options, placement, position, onClose }) => {
+	const customRenderOnSelect = useCallback((option) => {
+		onSelect(option);
+	}, [onSelect]);
+	/**
+	* Render the custom component if it exists
+	*/
+	if (CustomRender) return /* @__PURE__ */ jsx(CustomRender, {
+		activeKey,
+		loading,
+		onSelect: customRenderOnSelect,
+		open,
+		options,
+		setActiveKey: onActiveKeyChange
+	});
+	return /* @__PURE__ */ jsx(DefaultSlashMenu, {
+		activeKey,
+		anchorClassName,
+		getPopupContainer,
+		loading,
+		onClose,
+		onSelect,
+		open,
+		options,
+		placement,
+		position
+	});
+};
+SlashMenu.displayName = "SlashMenu";
+//#endregion
+export { SlashMenu as default };

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

@@ -0,0 +1,4 @@
+import { MenuRenderProps, ReactSlashOptionProps, ReactSlashPluginProps, SlashMenuProps } from "./type.js";
+import { SlashMenu } from "./components/SlashMenu.js";
+import { ReactSlashOption } from "./ReactSlashOption.js";
+import { ReactSlashPlugin } from "./ReactSlashPlugin.js";