@lobehub/editor 4.15.0 → 4.15.2

package/es/node_modules/.pnpm/@types_unist@3.0.3/node_modules/@types/unist/index.d.ts

@@ -0,0 +1,83 @@
+//#region node_modules/.pnpm/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts
+// ## Interfaces
+/**
+ * Info associated with nodes by the ecosystem.
+ *
+ * This space is guaranteed to never be specified by unist or specifications
+ * implementing unist.
+ * But you can use it in utilities and plugins to store data.
+ *
+ * This type can be augmented to register custom data.
+ * For example:
+ *
+ * ```ts
+ * declare module 'unist' {
+ *   interface Data {
+ *     // `someNode.data.myId` is typed as `number | undefined`
+ *     myId?: number | undefined
+ *   }
+ * }
+ * ```
+ */
+interface Data {}
+/**
+ * One place in a source file.
+ */
+interface Point {
+  /**
+   * Line in a source file (1-indexed integer).
+   */
+  line: number;
+  /**
+   * Column in a source file (1-indexed integer).
+   */
+  column: number;
+  /**
+   * Character in a source file (0-indexed integer).
+   */
+  offset?: number | undefined;
+}
+/**
+ * Position of a node in a source document.
+ *
+ * A position is a range between two points.
+ */
+interface Position {
+  /**
+   * Place of the first character of the parsed source region.
+   */
+  start: Point;
+  /**
+   * Place of the first character after the parsed source region.
+   */
+  end: Point;
+}
+/**
+ * Abstract unist node.
+ *
+ * The syntactic unit in unist syntax trees are called nodes.
+ *
+ * This interface is supposed to be extended.
+ * If you can use {@link Literal} or {@link Parent}, you should.
+ * But for example in markdown, a `thematicBreak` (`***`), is neither literal
+ * nor parent, but still a node.
+ */
+interface Node {
+  /**
+   * Node type.
+   */
+  type: string;
+  /**
+   * Info from the ecosystem.
+   */
+  data?: Data | undefined;
+  /**
+   * Position of a node in a source document.
+   *
+   * Nodes that are generated (not in the original source document) must not
+   * have a position.
+   */
+  position?: Position | undefined;
+}
+//#endregion
+export { Data, Node };

package/es/plugins/auto-complete/index.d.ts

@@ -0,0 +1,2 @@
+import { AutoCompletePlugin } from "./plugin/index.js";
+import { ReactAutoCompletePlugin } from "./react/ReactAutoCompletePlugin.js";

package/es/plugins/auto-complete/node/placeholderNode.js

@@ -0,0 +1,89 @@
+import { $applyNodeReplacement, ElementNode } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/auto-complete/node/placeholderNode.ts
+var PlaceholderNode = class PlaceholderNode extends ElementNode {
+	static getType() {
+		return "PlaceholderInline";
+	}
+	static clone(node) {
+		return new PlaceholderNode(node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createPlaceholderNode().updateFromJSON(serializedNode);
+	}
+	createDOM(config) {
+		const element = document.createElement("span");
+		element.setAttribute("data-lexical-key", this.getKey());
+		addClassNamesToElement(element, config.theme.placeholderInline);
+		return element;
+	}
+	updateDOM(prevNode, dom, config) {
+		if ((prevNode ? prevNode : null) !== this) addClassNamesToElement(dom, config.theme.placeholderInline);
+		return false;
+	}
+	canBeEmpty() {
+		return false;
+	}
+	isCardLike() {
+		return true;
+	}
+	isInline() {
+		return true;
+	}
+	canIndent() {
+		return false;
+	}
+	canInsertTextBefore() {
+		return true;
+	}
+	canInsertTextAfter() {
+		return true;
+	}
+};
+var PlaceholderBlockNode = class PlaceholderBlockNode extends ElementNode {
+	static getType() {
+		return "PlaceholderBlock";
+	}
+	static clone(node) {
+		return new PlaceholderBlockNode(node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createPlaceholderBlockNode().updateFromJSON(serializedNode);
+	}
+	createDOM(config) {
+		const element = document.createElement("div");
+		element.setAttribute("data-lexical-key", this.getKey());
+		addClassNamesToElement(element, config.theme.placeholderBlock);
+		return element;
+	}
+	updateDOM(prevNode, dom, config) {
+		if ((prevNode ? prevNode : null) !== this) addClassNamesToElement(dom, config.theme.placeholderBlock);
+		return false;
+	}
+	canBeEmpty() {
+		return false;
+	}
+	isCardLike() {
+		return true;
+	}
+	isInline() {
+		return false;
+	}
+	canIndent() {
+		return false;
+	}
+	canInsertTextBefore() {
+		return false;
+	}
+	canInsertTextAfter() {
+		return false;
+	}
+};
+function $createPlaceholderNode() {
+	return $applyNodeReplacement(new PlaceholderNode());
+}
+function $createPlaceholderBlockNode() {
+	return $applyNodeReplacement(new PlaceholderBlockNode());
+}
+//#endregion
+export { PlaceholderBlockNode, PlaceholderNode };

package/es/plugins/auto-complete/plugin/index.d.ts

@@ -0,0 +1,31 @@
+import { IEditor, IEditorPluginConstructor } from "../../../types/kernel.js";
+//#region src/plugins/auto-complete/plugin/index.d.ts
+interface AutoCompletePluginOptions {
+  /** Delay in milliseconds before triggering auto-complete (default: 1000ms) */
+  delay?: number;
+  onAutoComplete?: (opt: {
+    abortSignal: AbortSignal;
+    afterText: string;
+    editor: IEditor;
+    input: string;
+    selectionType: string;
+    suggestionId?: string;
+  }) => Promise<string | null>;
+  onSuggestionAccepted?: (info: {
+    acceptedText: string;
+    suggestionId: string;
+    visibleMs: number;
+  }) => void;
+  onSuggestionRejected?: (info: {
+    reason: 'cursor-move' | 'typing' | 'esc' | 'blur' | 'other';
+    suggestionId: string;
+    visibleMs: number;
+  }) => void;
+  theme?: {
+    placeholderBlock?: string;
+    placeholderInline?: string;
+  };
+}
+declare const AutoCompletePlugin: IEditorPluginConstructor<AutoCompletePluginOptions>;
+//#endregion
+export { AutoCompletePlugin };

package/es/plugins/auto-complete/plugin/index.js

@@ -0,0 +1,395 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { PlaceholderBlockNode, PlaceholderNode } from "../node/placeholderNode.js";
+import { $getSelection, $isRangeSelection, $nodesOfType, $setSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from "lexical";
+//#region src/plugins/auto-complete/plugin/index.ts
+init_plugin();
+init_debug();
+const AUTO_COMPLETE_GUARD_LIMIT = 5e4;
+const AutoCompletePlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "AutoCompletePlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.logger = createDebugLogger("plugin", "auto-complete");
+		this.lastCursorPosition = null;
+		this.cursorStableTimer = null;
+		this.abortController = null;
+		this.currentSuggestion = null;
+		this.currentSuggestionId = null;
+		this.suggestionIdCounter = 0;
+		this.suggestionRequestIdCounter = 0;
+		this.activeSuggestionRequestId = null;
+		this.suggestionShownAt = 0;
+		this.placeholderAnchorPosition = null;
+		this.placeholderSelectionSnapshot = null;
+		this.markdownService = null;
+		this.skipNextTextContentListener = false;
+		this.delay = config?.delay ?? 1e3;
+		kernel.registerNodes([PlaceholderNode, PlaceholderBlockNode]);
+		if (config?.theme) kernel.registerThemes(config?.theme);
+	}
+	onInit(editor) {
+		this.markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		if (!this.markdownService) {
+			this.logger.error("❌ MarkdownShortCutService is required for AutoCompletePlugin");
+			return;
+		}
+		const handleBlur = () => {
+			if (this.currentSuggestion) {
+				this.rejectSuggestion("blur");
+				this.clearPlaceholderNodes(editor, { restoreSelection: false });
+			}
+		};
+		this.register(editor.registerUpdateListener(({ editorState }) => {
+			editorState.read(() => {
+				if (editor.isComposing()) {
+					this.clearTimer();
+					if (this.currentSuggestion) {
+						this.rejectSuggestion("other");
+						this.clearPlaceholderNodes(editor, { restoreSelection: false });
+					}
+					return;
+				}
+				const selection = $getSelection();
+				if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+					this.clearTimer();
+					if (this.currentSuggestion) {
+						this.rejectSuggestion("other");
+						this.clearPlaceholderNodes(editor, { restoreSelection: false });
+					}
+					return;
+				}
+				const currentPosition = {
+					key: selection.anchor.key,
+					offset: selection.anchor.offset,
+					type: selection.anchor.type
+				};
+				if (this.hasPositionChanged(currentPosition)) {
+					this.clearTimer();
+					if (this.currentSuggestion) {
+						this.rejectSuggestion("cursor-move");
+						this.clearPlaceholderNodes(editor, { restoreSelection: false });
+					}
+					this.abortController = new AbortController();
+					this.cursorStableTimer = window.setTimeout(() => {
+						this.handleCursorStable(editor, currentPosition);
+					}, this.delay);
+				}
+			});
+		}));
+		this.register(editor.registerCommand(KEY_TAB_COMMAND, (event) => {
+			if (this.currentSuggestion) {
+				event?.preventDefault();
+				this.applySuggestion(editor);
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_HIGH));
+		this.register(editor.registerCommand(KEY_ARROW_LEFT_COMMAND, () => {
+			if (this.currentSuggestion) {
+				this.rejectSuggestion("cursor-move");
+				this.clearPlaceholderNodes(editor, { restoreSelection: false });
+				return false;
+			}
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL));
+		this.register(editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, () => {
+			if (this.currentSuggestion) {
+				this.rejectSuggestion("cursor-move");
+				this.clearPlaceholderNodes(editor, { restoreSelection: false });
+				return false;
+			}
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL));
+		this.register(editor.registerCommand(KEY_ESCAPE_COMMAND, (event) => {
+			if (this.currentSuggestion) {
+				event?.preventDefault();
+				this.rejectSuggestion("esc");
+				this.clearPlaceholderNodes(editor);
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL));
+		this.register(editor.registerTextContentListener(() => {
+			if (this.skipNextTextContentListener) {
+				this.skipNextTextContentListener = false;
+				return;
+			}
+			if (this.currentSuggestion) {
+				this.rejectSuggestion("typing");
+				this.clearPlaceholderNodes(editor, { restoreSelection: false });
+			}
+		}));
+		this.register(editor.registerRootListener((rootElement, prevRootElement) => {
+			prevRootElement?.removeEventListener("blur", handleBlur);
+			rootElement?.addEventListener("blur", handleBlur);
+		}));
+	}
+	createSuggestionId() {
+		this.suggestionIdCounter += 1;
+		if (this.suggestionIdCounter > Number.MAX_SAFE_INTEGER) this.suggestionIdCounter = 1;
+		return `acp${this.suggestionIdCounter}`;
+	}
+	createSuggestionRequestId() {
+		this.suggestionRequestIdCounter += 1;
+		if (this.suggestionRequestIdCounter > Number.MAX_SAFE_INTEGER) this.suggestionRequestIdCounter = 1;
+		return this.suggestionRequestIdCounter;
+	}
+	isActiveSuggestionRequest(requestId, abortSignal) {
+		return this.activeSuggestionRequestId === requestId && !abortSignal.aborted;
+	}
+	rejectSuggestion(reason) {
+		if (this.currentSuggestion && this.currentSuggestionId) this.config?.onSuggestionRejected?.({
+			reason,
+			suggestionId: this.currentSuggestionId,
+			visibleMs: Date.now() - this.suggestionShownAt
+		});
+		this.currentSuggestion = null;
+		this.currentSuggestionId = null;
+		this.suggestionShownAt = 0;
+	}
+	hasPositionChanged(currentPosition) {
+		if (!this.lastCursorPosition) return true;
+		return this.lastCursorPosition.key !== currentPosition.key || this.lastCursorPosition.offset !== currentPosition.offset || this.lastCursorPosition.type !== currentPosition.type;
+	}
+	clearTimer() {
+		this.abortController?.abort("use cancel");
+		this.activeSuggestionRequestId = null;
+		if (this.cursorStableTimer) {
+			clearTimeout(this.cursorStableTimer);
+			this.cursorStableTimer = null;
+		}
+	}
+	handleCursorStable(editor, position) {
+		editor.getEditorState().read(() => {
+			if (editor.isComposing()) {
+				this.clearTimer();
+				if (this.currentSuggestion) {
+					this.rejectSuggestion("other");
+					this.clearPlaceholderNodes(editor, { restoreSelection: false });
+				}
+				return;
+			}
+			if (!this.abortController || this.abortController.signal.aborted) return;
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || !selection.isCollapsed()) return;
+			const currentPosition = {
+				key: selection.anchor.key,
+				offset: selection.anchor.offset,
+				type: selection.anchor.type
+			};
+			if (!this.isSamePosition(position, currentPosition)) return;
+			if (this.lastCursorPosition && this.isSamePosition(position, this.lastCursorPosition)) return;
+			this.lastCursorPosition = currentPosition;
+			const anchorNode = selection.anchor.getNode();
+			const textRet = this.getTextBeforeCursor(selection);
+			const selectionType = anchorNode.getType();
+			if (this.config?.onAutoComplete) {
+				const suggestionId = this.createSuggestionId();
+				const requestId = this.createSuggestionRequestId();
+				const abortSignal = this.abortController.signal;
+				this.activeSuggestionRequestId = requestId;
+				this.config.onAutoComplete({
+					abortSignal,
+					afterText: textRet.textAfter,
+					editor: this.kernel,
+					input: textRet.textBefore,
+					selectionType,
+					suggestionId
+				}).then((result) => {
+					if (!this.isActiveSuggestionRequest(requestId, abortSignal)) return;
+					let currentSelection = null;
+					editor.getEditorState().read(() => {
+						currentSelection = $getSelection();
+					});
+					if (editor.isComposing()) {
+						this.rejectSuggestion("other");
+						this.clearPlaceholderNodes(editor, { restoreSelection: false });
+						return;
+					}
+					if (!currentSelection || !$isRangeSelection(currentSelection) || !currentSelection.isCollapsed()) {
+						this.rejectSuggestion("other");
+						this.clearPlaceholderNodes(editor, { restoreSelection: false });
+						return;
+					}
+					const newPosition = {
+						key: currentSelection.anchor.key,
+						offset: currentSelection.anchor.offset,
+						type: currentSelection.anchor.type
+					};
+					if (!this.isSamePosition(currentPosition, newPosition)) {
+						this.rejectSuggestion("cursor-move");
+						this.clearPlaceholderNodes(editor, { restoreSelection: false });
+						return;
+					}
+					if (result) {
+						this.currentSuggestion = result;
+						this.currentSuggestionId = suggestionId;
+						this.suggestionShownAt = Date.now();
+						this.placeholderAnchorPosition = currentPosition;
+						this.showPlaceholderNodes(editor, result);
+						this.logger.debug("🔍 Auto-complete triggered:", {
+							afterText: textRet.textAfter,
+							input: textRet.textBefore,
+							position: currentPosition,
+							result,
+							selectionType
+						});
+					} else this.clearPlaceholderNodes(editor, { restoreSelection: false });
+				});
+			}
+		});
+	}
+	getTextBeforeCursor(selection) {
+		const anchorNode = selection.anchor.getNode();
+		const anchorOffset = selection.anchor.offset;
+		let paragraphNode = anchorNode;
+		let parentTraversalCount = 0;
+		while (paragraphNode && paragraphNode.isInline()) {
+			parentTraversalCount++;
+			if (parentTraversalCount > AUTO_COMPLETE_GUARD_LIMIT) throw new Error(`getTextBeforeCursor: parent traversal > ${AUTO_COMPLETE_GUARD_LIMIT}`);
+			const parent = paragraphNode.getParent();
+			if (!parent) break;
+			paragraphNode = parent;
+		}
+		if (!paragraphNode) return {
+			textAfter: "",
+			textBefore: ""
+		};
+		this.logger.debug("🔍 Paragraph Node Type:", paragraphNode, anchorNode);
+		let founded = false;
+		let recursionDepth = 0;
+		const collectTextBeforeCursor = (node, targetNode, targetOffset) => {
+			recursionDepth++;
+			if (recursionDepth > AUTO_COMPLETE_GUARD_LIMIT) throw new Error(`collectTextBeforeCursor: recursion depth > ${AUTO_COMPLETE_GUARD_LIMIT}`);
+			if (node === targetNode) {
+				founded = true;
+				if (node.getTextContent) {
+					const nodeText = node.getTextContent();
+					return {
+						text: nodeText.slice(0, targetOffset),
+						textAfter: nodeText.slice(targetOffset)
+					};
+				}
+				return {
+					text: "",
+					textAfter: ""
+				};
+			}
+			let collectedText = "";
+			let collectedTextAfter = "";
+			if (node.getTextContent && node.getType() === "text") if (founded) collectedTextAfter += node.getTextContent();
+			else collectedText += node.getTextContent();
+			if (node.getChildren) {
+				const children = node.getChildren();
+				for (const child of children) {
+					const result = collectTextBeforeCursor(child, targetNode, targetOffset);
+					collectedTextAfter += result.textAfter;
+					collectedText += result.text;
+				}
+			}
+			return {
+				text: collectedText,
+				textAfter: collectedTextAfter
+			};
+		};
+		const result = collectTextBeforeCursor(paragraphNode, anchorNode, anchorOffset);
+		return {
+			textAfter: result.textAfter,
+			textBefore: result.text
+		};
+	}
+	showPlaceholderNodes(editor, suggestion) {
+		this.skipNextTextContentListener = true;
+		editor.update(() => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+				this.logger.warn("⚠️ No valid selection for placeholder");
+				return;
+			}
+			if (!this.markdownService) {
+				this.logger.warn("⚠️ No valid markdown service for placeholder");
+				return;
+			}
+			for (const node of $nodesOfType(PlaceholderNode)) node.remove();
+			for (const node of $nodesOfType(PlaceholderBlockNode)) node.remove();
+			const nodes = this.markdownService.parseMarkdownToLexical(suggestion);
+			if (nodes.children[0]) {
+				const firstChild = nodes.children[0];
+				firstChild.children = [{
+					children: firstChild.children,
+					type: "PlaceholderInline"
+				}];
+			}
+			for (let i = 1; i < nodes.children.length; i++) {
+				const child = nodes.children[i];
+				nodes.children[i] = {
+					children: [child],
+					type: "PlaceholderBlock"
+				};
+			}
+			const saveSel = selection.clone();
+			this.placeholderSelectionSnapshot = saveSel;
+			this.markdownService.insertIRootNode(editor, nodes, selection);
+			$setSelection(saveSel);
+		});
+	}
+	clearPlaceholderNodes(editor, options) {
+		const shouldRestoreSelection = options?.restoreSelection ?? true;
+		const restoreSelection = this.placeholderSelectionSnapshot;
+		this.currentSuggestion = null;
+		this.currentSuggestionId = null;
+		this.suggestionShownAt = 0;
+		this.placeholderAnchorPosition = null;
+		this.placeholderSelectionSnapshot = null;
+		this.clearTimer();
+		let hasPlaceholderNodes = false;
+		editor.getEditorState().read(() => {
+			hasPlaceholderNodes = $nodesOfType(PlaceholderNode).length > 0 || $nodesOfType(PlaceholderBlockNode).length > 0;
+		});
+		if (!hasPlaceholderNodes && !(shouldRestoreSelection && restoreSelection)) {
+			this.skipNextTextContentListener = false;
+			return;
+		}
+		this.skipNextTextContentListener = true;
+		editor.update(() => {
+			for (const node of $nodesOfType(PlaceholderNode)) node.remove();
+			for (const node of $nodesOfType(PlaceholderBlockNode)) node.remove();
+			if (shouldRestoreSelection && restoreSelection) $setSelection(restoreSelection);
+		});
+	}
+	applySuggestion(editor) {
+		if (!this.currentSuggestion) return;
+		const markdown = this.currentSuggestion;
+		const suggestionId = this.currentSuggestionId;
+		const suggestionShownAt = this.suggestionShownAt;
+		editor.update(() => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || !selection.isCollapsed() || !this.markdownService) return;
+			if (suggestionId) this.config?.onSuggestionAccepted?.({
+				acceptedText: markdown,
+				suggestionId,
+				visibleMs: Date.now() - suggestionShownAt
+			});
+			for (const node of $nodesOfType(PlaceholderNode)) node.remove();
+			for (const node of $nodesOfType(PlaceholderBlockNode)) node.remove();
+			const nodes = this.markdownService.parseMarkdownToLexical(markdown);
+			this.markdownService.insertIRootNode(editor, nodes, selection);
+			this.clearPlaceholderNodes(editor, { restoreSelection: false });
+		});
+	}
+	isSamePosition(pos1, pos2) {
+		return pos1.key === pos2.key && pos1.offset === pos2.offset && pos1.type === pos2.type;
+	}
+	destroy() {
+		this.clearTimer();
+		super.destroy();
+	}
+};
+//#endregion
+export { AutoCompletePlugin };

package/es/plugins/auto-complete/react/ReactAutoCompletePlugin.d.ts

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

package/es/plugins/auto-complete/react/ReactAutoCompletePlugin.js

@@ -0,0 +1,60 @@
+"use client";
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { AutoCompletePlugin } from "../plugin/index.js";
+import { styles } from "./style.js";
+import { useLayoutEffect, useRef } from "react";
+import { cx } from "antd-style";
+//#region src/plugins/auto-complete/react/ReactAutoCompletePlugin.tsx
+init_debug();
+const logger = createDebugLogger("react-plugin", "auto-complete");
+const ReactAutoCompletePlugin = ({ delay, onAutoComplete, onSuggestionAccepted, onSuggestionRejected }) => {
+	const [editor] = useLexicalComposerContext();
+	const propsRef = useRef({
+		delay,
+		onAutoComplete,
+		onSuggestionAccepted,
+		onSuggestionRejected
+	});
+	propsRef.current = {
+		delay,
+		onAutoComplete,
+		onSuggestionAccepted,
+		onSuggestionRejected
+	};
+	useLayoutEffect(() => {
+		editor.registerPlugin(AutoCompletePlugin, {
+			delay,
+			onAutoComplete: async (opt) => {
+				try {
+					return await propsRef.current.onAutoComplete?.(opt) ?? null;
+				} catch (error) {
+					logger.warn("Auto-complete onAutoComplete callback failed:", error);
+					return null;
+				}
+			},
+			onSuggestionAccepted: (info) => {
+				try {
+					propsRef.current.onSuggestionAccepted?.(info);
+				} catch (error) {
+					logger.warn("Auto-complete onSuggestionAccepted callback failed:", error);
+				}
+			},
+			onSuggestionRejected: (info) => {
+				try {
+					propsRef.current.onSuggestionRejected?.(info);
+				} catch (error) {
+					logger.warn("Auto-complete onSuggestionRejected callback failed:", error);
+				}
+			},
+			theme: {
+				placeholderBlock: cx(styles.placeholderBlock),
+				placeholderInline: cx(styles.placeholderInline)
+			}
+		});
+	}, []);
+	return null;
+};
+ReactAutoCompletePlugin.displayName = "ReactAutoCompletePlugin";
+//#endregion
+export { ReactAutoCompletePlugin as default };

package/es/plugins/auto-complete/react/index.d.ts

@@ -0,0 +1 @@
+import { ReactAutoCompletePlugin } from "./ReactAutoCompletePlugin.js";

package/es/plugins/auto-complete/react/style.js

@@ -0,0 +1,12 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/auto-complete/react/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	placeholderBlock: css`
+    opacity: 0.4;
+  `,
+	placeholderInline: css`
+    opacity: 0.4;
+  `
+}));
+//#endregion
+export { styles };