@lobehub/editor 4.15.1 → 4.16.0

package/es/react.js

@@ -1,1574 +1,14 @@
-import { A as $createCodeMirrorNode, B as Editor$2, Ft as init_utils, Mt as $isRootTextContentEmpty, S as formatUrl, T as $isSelectionInCodeInline, a as $createMathBlockNode, d as $isLinkHighlightNode, h as $isLinkNode, j as $isCodeMirrorNode, mt as noop, o as $createMathInlineNode, x as TOGGLE_LINK_COMMAND } from "./style-DADgHVA1.js";
-import { C as INSERT_CODEINLINE_COMMAND, E as ReactEditorContent, O as ReactMarkdownPlugin, Q as ReactEditor, S as validateUrl, T as ReactPlainText, _ as INSERT_CHECK_LIST_COMMAND, a as ReactMentionPlugin, c as INSERT_LINK_HIGHLIGHT_COMMAND, n as ReactSlashOption, p as UPDATE_CODEBLOCK_LANG, t as ReactSlashPlugin, x as sanitizeUrl, y as extractUrlFromText } from "./ReactSlashPlugin-BiVy_Iwf.js";
-import { ActionIcon, Block, Button, Dropdown, Flexbox, Icon, MaterialFileTypeIcon, Menu, Popover, Select, Text, TooltipGroup, useMotionComponent } from "@lobehub/ui";
-import { ChevronDownIcon, CircleChevronLeftIcon, CircleChevronRightIcon, CircleChevronUpIcon } from "lucide-react";
-import { createContext, createElement, isValidElement, memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createStaticStyles, cssVar, cx, useThemeMode } from "antd-style";
-import { Divider, Dropdown as Dropdown$1, Space } from "antd";
-import { $createNodeSelection, $createParagraphNode, $getSelection, $isParagraphNode, $isRangeSelection, $isRootOrShadowRoot, $setSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from "lexical";
-import { $createQuoteNode, $isHeadingNode, $isQuoteNode } from "@lexical/rich-text";
-import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
-import { $isAtNodeEnd, $setBlocksType } from "@lexical/selection";
-import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from "@lexical/list";
-import { $createCodeNode, $isCodeNode } from "@lexical/code-core";
-import { createPortal } from "react-dom";
-import { bundledLanguagesInfo } from "shiki";
-import { Resizable } from "re-resizable";
-import useMergeState from "use-merge-value";
-import { debounce } from "es-toolkit";
-//#region src/react/hooks/useSize.ts
-const useWidth = (options = {}) => {
-	const { debounceMs = 100 } = options;
-	const ref = useRef(null);
-	const [size, setSize] = useState();
-	const resizeObserverRef = useRef(null);
-	const updateSize = useCallback(debounce((entries) => {
-		if (entries[0]) {
-			const { width } = entries[0].contentRect;
-			setSize(Math.floor(width));
-		}
-	}, debounceMs), [debounceMs]);
-	useEffect(() => {
-		const element = ref.current;
-		if (!element) return;
-		resizeObserverRef.current = new ResizeObserver(updateSize);
-		resizeObserverRef.current.observe(element);
-		return () => {
-			if (resizeObserverRef.current) {
-				resizeObserverRef.current.disconnect();
-				updateSize.cancel?.();
-			}
-		};
-	}, [updateSize]);
-	return {
-		ref,
-		width: size
-	};
-};
-const useHeight = (options = {}) => {
-	const { debounceMs = 100 } = options;
-	const ref = useRef(null);
-	const [size, setSize] = useState();
-	const resizeObserverRef = useRef(null);
-	const updateSize = useCallback(debounce((entries) => {
-		if (entries[0]) {
-			const { height } = entries[0].contentRect;
-			setSize(Math.floor(height));
-		}
-	}, debounceMs), [debounceMs]);
-	useEffect(() => {
-		const element = ref.current;
-		if (!element) return;
-		resizeObserverRef.current = new ResizeObserver(updateSize);
-		resizeObserverRef.current.observe(element);
-		return () => {
-			if (resizeObserverRef.current) {
-				resizeObserverRef.current.disconnect();
-				updateSize.cancel?.();
-			}
-		};
-	}, [updateSize]);
-	return {
-		height: size,
-		ref
-	};
-};
-//#endregion
-//#region src/react/ChatInput/style.ts
-const styles$8 = createStaticStyles(({ css, cssVar }) => ({
-	bodyEditor: css`
-    z-index: 0;
-    flex: 1;
-  `,
-	containerDark: css`
-    position: relative;
-
-    display: flex;
-    flex-direction: column;
-
-    height: 100%;
-    border: 1px solid ${cssVar.colorFillSecondary};
-    border-radius: ${cssVar.borderRadiusLG};
-
-    background-color: ${cssVar.colorBgElevated};
-    box-shadow: 0 4px 4px color-mix(in srgb, #000 40%, transparent);
-  `,
-	containerLight: css`
-    position: relative;
-
-    display: flex;
-    flex-direction: column;
-
-    height: 100%;
-    border: 1px solid ${cssVar.colorFill};
-    border-radius: ${cssVar.borderRadiusLG};
-
-    background-color: ${cssVar.colorBgElevated};
-    box-shadow: 0 4px 4px color-mix(in srgb, #000 4%, transparent);
-  `,
-	editor: css`
-    cursor: text;
-
-    overflow: hidden auto;
-    flex: 1;
-
-    width: 100%;
-    padding-block: 8px 0;
-    padding-inline: 12px;
-  `,
-	footer: css`
-    z-index: 1;
-    width: 100%;
-  `,
-	header: css`
-    z-index: 1;
-    width: 100%;
-  `,
-	resizableContainer: css`
-    position: relative;
-
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    align-self: flex-end;
-
-    width: 100%;
-
-    &:hover .resize-handle {
-      opacity: 1;
-    }
-  `,
-	resizeHandle: css`
-    position: absolute;
-    inset-block-start: -4px;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
-
-    width: 100%;
-    height: 8px;
-
-    opacity: 0;
-
-    transition: opacity 0.2s ease-in-out;
-
-    &::before {
-      content: '';
-
-      position: absolute;
-      inset-block-start: 0;
-      inset-inline-start: 50%;
-      transform: translateX(-50%);
-
-      width: 32px;
-      height: 4px;
-      border-radius: 4px;
-
-      background-color: ${cssVar.colorPrimary};
-      box-shadow: 0 1px 2px color-mix(in srgb, ${cssVar.colorTextSecondary} 12.5%, transparent);
-    }
-
-    &:hover {
-      opacity: 1 !important;
-
-      &::before {
-        background-color: ${cssVar.colorPrimaryHover};
-        box-shadow: 0 2px 4px color-mix(in srgb, ${cssVar.colorTextSecondary} 25%, transparent);
-      }
-    }
-
-    &:active {
-      &::before {
-        background-color: ${cssVar.colorPrimaryActive};
-      }
-    }
-  `,
-	root: css`
-    position: relative;
-  `
-}));
-//#endregion
-//#region src/react/ChatInput/ChatInput.tsx
-const ChatInput = (props) => {
-	const { defaultHeight = props.defaultHeight || props.minHeight || 64, height, maxHeight = 320, minHeight = 64, resizeMaxHeightOffset = 120, resize = true, onSizeChange, onSizeDragging, className, children, footer, header, style, slashMenuRef, classNames, fullscreen, showResizeHandle, onBodyClick, styles: customStyles, ...rest } = props;
-	const { isDarkMode } = useThemeMode();
-	const { ref: headerRef, height: headerHeight = 0 } = useHeight();
-	const [currentHeight, setCurrentHeight] = useMergeState(defaultHeight, {
-		defaultValue: defaultHeight,
-		onChange: onSizeChange,
-		value: height
-	});
-	const handleResizeStop = useCallback((e, direction, ref) => {
-		setCurrentHeight(ref.style.height ? parseInt(ref.style.height) : defaultHeight);
-	}, [setCurrentHeight, defaultHeight]);
-	const handleResize = useCallback((e, direction, ref) => {
-		const newHeight = ref.style.height ? parseInt(ref.style.height) : defaultHeight;
-		onSizeDragging?.(newHeight);
-	}, [onSizeDragging, defaultHeight]);
-	const bodyNode = /* @__PURE__ */ jsx("div", {
-		className: cx(styles$8.editor, styles$8.bodyEditor, classNames?.body),
-		draggable: false,
-		onClick: onBodyClick,
-		style: {
-			...customStyles?.body,
-			maxHeight: fullscreen ? "100%" : maxHeight,
-			minHeight: resize ? currentHeight : minHeight
-		},
-		children
-	});
-	return /* @__PURE__ */ jsxs(Flexbox, {
-		className: cx(isDarkMode ? styles$8.containerDark : styles$8.containerLight, styles$8.root, className),
-		height: fullscreen ? "100%" : void 0,
-		style,
-		width: "100%",
-		...rest,
-		children: [
-			slashMenuRef && /* @__PURE__ */ jsx("div", { ref: slashMenuRef }),
-			/* @__PURE__ */ jsx("div", {
-				className: cx(styles$8.header, classNames?.header),
-				ref: headerRef,
-				style: customStyles?.header,
-				children: header
-			}),
-			resize ? /* @__PURE__ */ jsx(Resizable, {
-				className: styles$8.resizableContainer,
-				enable: fullscreen ? false : { top: true },
-				handleClasses: { top: showResizeHandle ? styles$8.resizeHandle : void 0 },
-				handleStyles: { top: {
-					backgroundColor: "transparent",
-					borderRadius: "4px",
-					cursor: "ns-resize",
-					height: "8px",
-					left: "50%",
-					top: !!header ? -3 - headerHeight : -3,
-					transform: "translateX(-50%)",
-					width: "100%"
-				} },
-				maxHeight: fullscreen ? void 0 : maxHeight + resizeMaxHeightOffset,
-				minHeight: fullscreen ? void 0 : minHeight,
-				onResize: handleResize,
-				onResizeStop: handleResizeStop,
-				size: {
-					height: fullscreen ? void 0 : "auto",
-					width: "100%"
-				},
-				style: fullscreen ? {
-					flex: 1,
-					overflow: "hidden",
-					position: "relative"
-				} : void 0,
-				children: bodyNode
-			}) : bodyNode,
-			/* @__PURE__ */ jsx("div", {
-				className: cx(styles$8.footer, classNames?.footer),
-				style: customStyles?.footer,
-				children: footer
-			})
-		]
-	});
-};
-ChatInput.displayName = "ChatInput";
-//#endregion
-//#region src/react/ChatInputActionBar/style.ts
-const styles$7 = createStaticStyles(({ css }) => ({ container: css`
-    overflow: hidden;
-  ` }));
-//#endregion
-//#region src/react/ChatInputActionBar/ChatInputActionBar.tsx
-const ChatInputActionBar = ({ className, style, left, right, ...rest }) => {
-	return /* @__PURE__ */ jsxs(Flexbox, {
-		align: "center",
-		className: cx(styles$7.container, className),
-		gap: 4,
-		horizontal: true,
-		justify: "space-between",
-		padding: 4,
-		style,
-		...rest,
-		children: [left, right]
-	});
-};
-ChatInputActionBar.displayName = "ChatInputActionBar";
-//#endregion
-//#region src/react/ChatInputActions/style.ts
-const styles$6 = createStaticStyles(({ css }) => ({
-	collapsedContainer: css`
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-  `,
-	container: css`
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-  `,
-	divider: css`
-    height: 20px;
-    margin-inline: 4px;
-  `
-}));
-//#endregion
-//#region src/react/ChatInputActions/components/ActionRender.tsx
-const ActionRender$1 = ({ item, onActionClick, disabled }) => {
-	if (item.type === "divider") return /* @__PURE__ */ jsx(Divider, {
-		className: styles$6.divider,
-		orientation: "vertical"
-	});
-	const { wrapper, icon, key, label, onClick, danger, loading, active, tooltipProps, ...itemRest } = item;
-	if (item.children && isValidElement(item.children)) {
-		if (!wrapper) return item.children;
-		return wrapper(item.children);
-	}
-	const action = /* @__PURE__ */ jsx(ActionIcon, {
-		active,
-		danger,
-		disabled: disabled || loading || itemRest?.disabled,
-		icon,
-		loading,
-		onClick: (e) => {
-			onActionClick?.({
-				domEvent: e,
-				key: String(key),
-				keyPath: [String(key)]
-			});
-			onClick?.(e);
-		},
-		size: {
-			blockSize: 36,
-			size: 20
-		},
-		title: label,
-		tooltipProps: {
-			placement: "top",
-			...tooltipProps
-		}
-	});
-	if (!wrapper) return action;
-	return wrapper(action);
-};
-//#endregion
-//#region src/react/ChatInputActions/components/CollapsedActions.tsx
-const CollapsedActions$1 = ({ children, groupCollapse = false, onGroupCollapseChange, gap, mode }) => {
-	const Motion = useMotionComponent();
-	if (mode === "popup") return /* @__PURE__ */ jsx(Popover, {
-		arrow: false,
-		content: /* @__PURE__ */ jsx(Flexbox, {
-			align: "center",
-			gap,
-			horizontal: true,
-			children
-		}),
-		styles: { content: { padding: 4 } },
-		children: /* @__PURE__ */ jsx(ActionIcon, {
-			icon: CircleChevronUpIcon,
-			size: {
-				blockSize: 36,
-				size: 20
-			}
-		})
-	});
-	return /* @__PURE__ */ jsxs(Flexbox, {
-		align: "center",
-		flex: "none",
-		gap,
-		horizontal: true,
-		children: [/* @__PURE__ */ jsx(Motion.div, {
-			animate: groupCollapse ? "closed" : "open",
-			className: styles$6.collapsedContainer,
-			initial: groupCollapse ? "closed" : "open",
-			style: { gap },
-			transition: { duration: .2 },
-			variants: {
-				closed: {
-					opacity: 0,
-					width: 0
-				},
-				open: {
-					opacity: 1,
-					width: "auto"
-				}
-			},
-			children
-		}), /* @__PURE__ */ jsx(ActionIcon, {
-			icon: groupCollapse ? CircleChevronRightIcon : CircleChevronLeftIcon,
-			onClick: () => onGroupCollapseChange?.(!groupCollapse),
-			size: {
-				blockSize: 36,
-				size: 20
-			}
-		})]
-	});
-};
-CollapsedActions$1.displayName = "ChatInputActionsCollapse";
-//#endregion
-//#region src/react/ChatInputActions/components/ActionItem.tsx
-const ActionItem$1 = ({ item, disabled, onActionClick, groupCollapsed, collapsed, gap, setGroupCollapsed }) => {
-	if (item.type === "collapse") return /* @__PURE__ */ jsx(CollapsedActions$1, {
-		gap,
-		groupCollapse: groupCollapsed,
-		mode: collapsed ? "popup" : "default",
-		onGroupCollapseChange: setGroupCollapsed,
-		children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionRender$1, {
-			disabled,
-			item: child,
-			onActionClick
-		}, child?.key || `action-${childIndex}`))
-	});
-	if (item.type === "dropdown") return /* @__PURE__ */ jsx(Dropdown, {
-		menu: { items: item.children },
-		children: /* @__PURE__ */ jsx(ActionIcon, {
-			active: item.active,
-			danger: item.danger,
-			disabled: disabled || item.loading || item?.disabled,
-			icon: item.icon,
-			loading: item.loading,
-			size: {
-				blockSize: 36,
-				size: 20
-			},
-			title: item.label,
-			tooltipProps: {
-				placement: "top",
-				...item.tooltipProps
-			}
-		})
-	}, item.key);
-	return /* @__PURE__ */ jsx(ActionRender$1, {
-		disabled,
-		item,
-		onActionClick
-	});
-};
-ActionItem$1.displayName = "ChatInputActionItem";
-//#endregion
-//#region src/react/ChatInputActions/components/useDisplayActionCount.ts
-const useDisplayActionCount = ({ items = [], collapseOffset = 0, autoCollapse } = {}) => {
-	const { ref, width } = useWidth();
-	const [collapsed, setCollapsed] = useState(false);
-	const flatItems = useMemo(() => items.flatMap((item) => {
-		if (item.type === "collapse" && item.children) return item.children;
-		return item;
-	}).filter((item) => item.type !== "divider"), [items]);
-	const alwaysDisplayCount = useMemo(() => items.filter((item) => item.alwaysDisplay).length, [items]);
-	const rawMaxCount = useMemo(() => flatItems.length + 1, [flatItems.length]);
-	const [maxCount, setMaxCount] = useState(rawMaxCount);
-	useEffect(() => {
-		if (!autoCollapse) {
-			setCollapsed(false);
-			setMaxCount(rawMaxCount);
-			return;
-		}
-		if (!width) return;
-		const atLeastCount = 1 + alwaysDisplayCount;
-		let calcMaxCount = Math.floor((width - collapseOffset) / 38);
-		if (calcMaxCount < atLeastCount) calcMaxCount = atLeastCount;
-		setCollapsed(calcMaxCount < rawMaxCount);
-		if (calcMaxCount >= rawMaxCount) return;
-		setMaxCount(calcMaxCount);
-	}, [
-		autoCollapse,
-		width,
-		rawMaxCount,
-		collapseOffset,
-		alwaysDisplayCount
-	]);
-	return useMemo(() => ({
-		collapsed,
-		maxCount,
-		ref
-	}), [
-		collapsed,
-		maxCount,
-		ref
-	]);
-};
-//#endregion
-//#region src/react/ChatInputActions/ChatInputActions.tsx
-const ChatInputActions = memo(({ gap = 2, disabled, items = [], onActionClick, className, collapseOffset = 0, autoCollapse = true, defaultGroupCollapse = false, onGroupCollapseChange, groupCollapse, ...rest }) => {
-	const [groupCollapsed, setGroupCollapsed] = useMergeState(defaultGroupCollapse, {
-		defaultValue: defaultGroupCollapse,
-		onChange: onGroupCollapseChange,
-		value: groupCollapse
-	});
-	const { ref, maxCount, collapsed } = useDisplayActionCount({
-		autoCollapse,
-		collapseOffset,
-		items
-	});
-	const calcItem = useMemo(() => {
-		if (!collapsed) return items;
-		const alwaysDisplayItems = items.filter((item) => item.alwaysDisplay);
-		const normalItems = items.filter((item) => item.type !== "collapse" && !item.alwaysDisplay);
-		const collapseItems = items.find((item) => item.type === "collapse" && item.children) || {
-			children: [],
-			type: "collapse"
-		};
-		const sliceCount = maxCount - alwaysDisplayItems.length - 1;
-		return [
-			...normalItems.slice(0, sliceCount),
-			{
-				...collapseItems,
-				children: [...normalItems.filter((item) => item.type !== "divider").slice(sliceCount), ...collapseItems.children]
-			},
-			...alwaysDisplayItems
-		].filter(Boolean);
-	}, [
-		collapsed,
-		items,
-		maxCount
-	]);
-	return /* @__PURE__ */ jsx(TooltipGroup, { children: /* @__PURE__ */ jsx(Flexbox, {
-		align: "center",
-		className: cx(styles$6.container, className),
-		flex: 1,
-		gap,
-		horizontal: true,
-		ref,
-		...rest,
-		children: calcItem.map((item, index) => /* @__PURE__ */ jsx(ActionItem$1, {
-			collapsed,
-			disabled,
-			gap,
-			groupCollapsed,
-			item,
-			onActionClick,
-			setGroupCollapsed
-		}, item.key || index))
-	}) });
-});
-ChatInputActions.displayName = "ChatInputActions";
-//#endregion
-//#region src/react/CodeLanguageSelect/style.ts
-const styles$5 = createStaticStyles(({ css }) => ({ container: css`
-    width: 160px;
-  ` }));
-//#endregion
-//#region src/react/CodeLanguageSelect/CodeLanguageSelect.tsx
-const CodeLanguageSelect = ({ className, ...rest }) => {
-	const options = useMemo(() => [{
-		aliases: ["text", "txt"],
-		label: /* @__PURE__ */ jsxs(Flexbox, {
-			align: "center",
-			gap: 4,
-			horizontal: true,
-			children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon, {
-				fallbackUnknownType: false,
-				filename: `*.txt`,
-				size: 18,
-				type: "file",
-				variant: "raw"
-			}), /* @__PURE__ */ jsx(Text, {
-				ellipsis: true,
-				fontSize: 13,
-				children: "Plaintext"
-			})]
-		}),
-		value: "plaintext"
-	}, ...bundledLanguagesInfo.map((item) => ({
-		aliases: item.aliases,
-		label: /* @__PURE__ */ jsxs(Flexbox, {
-			align: "center",
-			gap: 4,
-			horizontal: true,
-			children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon, {
-				fallbackUnknownType: false,
-				filename: `*.${item?.aliases?.[0] || item.id}`,
-				size: 18,
-				type: "file",
-				variant: "raw"
-			}), /* @__PURE__ */ jsx(Text, {
-				ellipsis: true,
-				fontSize: 13,
-				children: item.name
-			})]
-		}),
-		title: (item.aliases || [item.id]).filter(Boolean).map((item) => `*.${item}`).join(","),
-		value: item.id
-	}))], []);
-	return /* @__PURE__ */ jsx(Select, {
-		className: cx(styles$5.container, className),
-		defaultValue: "plaintext",
-		filterOption: (input, option) => {
-			const lang = input.toLowerCase();
-			if ((option?.value)?.startsWith(lang)) return true;
-			if (option?.aliases?.some((item) => item.startsWith(lang))) return true;
-			return false;
-		},
-		options,
-		showSearch: true,
-		variant: "filled",
-		...rest
-	});
-};
-CodeLanguageSelect.displayName = "CodeLanguageSelect";
-//#endregion
-//#region src/react/hooks/useEditor.ts
-const useEditor = () => {
-	return useMemo(() => Editor$2.createEditor(), []);
-};
-//#endregion
-//#region src/react/hooks/useEditorState/utils.ts
-init_utils();
-const $findTopLevelElement = (node) => {
-	let topLevelElement = node.getKey() === "root" ? node : $findMatchingParent(node, (e) => {
-		const parent = e.getParent();
-		return parent !== null && $isRootOrShadowRoot(parent);
-	});
-	if (topLevelElement === null) topLevelElement = node.getTopLevelElementOrThrow();
-	return topLevelElement;
-};
-const formatParagraph = (editor) => {
-	editor?.update(() => {
-		$setBlocksType($getSelection(), () => $createParagraphNode());
-	});
-};
-const getSelectedNode = (selection) => {
-	const anchor = selection.anchor;
-	const focus = selection.focus;
-	const anchorNode = selection.anchor.getNode();
-	const focusNode = selection.focus.getNode();
-	if (anchorNode === focusNode) return anchorNode;
-	if (selection.isBackward()) return $isAtNodeEnd(focus) ? anchorNode : focusNode;
-	else return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
-};
-//#endregion
-//#region src/react/hooks/useEditorState/index.ts
-/**
-* Provide toolbar state and toolbar methods
-* @param editor - Editor instance
-* @returns Editor state and methods for toolbar functionality
-*/
-function useEditorState(editor) {
-	const [canUndo, setCanUndo] = useState(false);
-	const [canRedo, setCanRedo] = useState(false);
-	const [editable, setEditable] = useState(editor?.isEditable() ?? true);
-	const [isBold, setIsBold] = useState(false);
-	const [isItalic, setIsItalic] = useState(false);
-	const [isUnderline, setIsUnderline] = useState(false);
-	const [isStrikethrough, setIsStrikethrough] = useState(false);
-	const [isSubscript, setIsSubscript] = useState(false);
-	const [isSuperscript, setIsSuperscript] = useState(false);
-	const [isCode, setIsCode] = useState(false);
-	const [isLink, setIsLink] = useState(false);
-	const [isCodeblock, setIsInCodeblok] = useState(false);
-	const [isBlockquote, setIsInBlockquote] = useState(false);
-	const [codeblockLang, setCodeblockLang] = useState(null);
-	const [isEmpty, setIsEmpty] = useState(true);
-	const [isSelected, setIsSelected] = useState(false);
-	const [blockType, setBlockType] = useState(null);
-	const $handleHeadingNode = useCallback((selectedElement) => {
-		setBlockType($isHeadingNode(selectedElement) ? selectedElement.getTag() : selectedElement.getType());
-	}, [setBlockType]);
-	const $updateToolbar = useCallback(() => {
-		const selection = $getSelection();
-		const lexicalEditor = editor?.getLexicalEditor();
-		setIsSelected(false);
-		setEditable(editor?.isEditable() ?? true);
-		if (lexicalEditor) setIsEmpty($isRootTextContentEmpty(lexicalEditor.isComposing(), false));
-		if ($isRangeSelection(selection)) {
-			setIsSelected(!!selection._cachedNodes);
-			setIsBold(selection.hasFormat("bold"));
-			setIsItalic(selection.hasFormat("italic"));
-			setIsUnderline(selection.hasFormat("underline"));
-			setIsStrikethrough(selection.hasFormat("strikethrough"));
-			setIsSubscript(selection.hasFormat("subscript"));
-			setIsSuperscript(selection.hasFormat("superscript"));
-			setIsCode($isSelectionInCodeInline(lexicalEditor));
-			const anchorNode = selection.anchor.getNode();
-			const focusNode = selection.focus.getNode();
-			const element = $findTopLevelElement(anchorNode);
-			const focusElement = $findTopLevelElement(focusNode);
-			const elementKey = element.getKey();
-			const elementDOM = editor?.getLexicalEditor()?.getElementByKey(elementKey);
-			const node = getSelectedNode(selection);
-			const parent = node.getParent();
-			setIsLink($isLinkNode(parent) || $isLinkNode(node) || $isLinkHighlightNode(parent) || $isLinkHighlightNode(node));
-			const isLexicalCodeBlock = $isCodeNode(element) && $isCodeNode(focusElement) && elementKey === focusElement.getKey();
-			const isCodeMirrorBlock = $isCodeMirrorNode(element) && $isCodeMirrorNode(focusElement) && elementKey === focusElement.getKey();
-			setIsInCodeblok(isLexicalCodeBlock || isCodeMirrorBlock);
-			if (isLexicalCodeBlock) setCodeblockLang(element.getLanguage());
-			else if (isCodeMirrorBlock) setCodeblockLang(element.lang);
-			else setCodeblockLang("");
-			setIsInBlockquote($isQuoteNode(element) && $isQuoteNode(focusElement) && elementKey === focusElement.getKey());
-			if (elementDOM !== null) if ($isListNode(element)) {
-				const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-				setBlockType(parentList ? parentList.getListType() : element.getListType());
-			} else $handleHeadingNode(element);
-		} else if (!selection) {
-			setIsSelected(false);
-			setIsBold(false);
-			setIsItalic(false);
-			setIsUnderline(false);
-			setIsStrikethrough(false);
-			setIsSubscript(false);
-			setIsSuperscript(false);
-			setIsCode(false);
-			setIsLink(false);
-			setIsInCodeblok(false);
-			setIsInBlockquote(false);
-			setCodeblockLang(null);
-			setBlockType(null);
-		}
-	}, [editor]);
-	const undo = useCallback(() => {
-		editor?.dispatchCommand(UNDO_COMMAND, void 0);
-	}, [editor]);
-	const redo = useCallback(() => {
-		editor?.dispatchCommand(REDO_COMMAND, void 0);
-	}, [editor]);
-	const formatText = useCallback((type) => {
-		editor?.dispatchCommand(FORMAT_TEXT_COMMAND, type);
-	}, [editor]);
-	const bold = useCallback(() => {
-		formatText("bold");
-	}, [formatText]);
-	const underline = useCallback(() => {
-		formatText("underline");
-	}, [formatText]);
-	const strikethrough = useCallback(() => {
-		formatText("strikethrough");
-	}, [formatText]);
-	const italic = useCallback(() => {
-		formatText("italic");
-	}, [formatText]);
-	const subscript = useCallback(() => {
-		formatText("subscript");
-	}, [formatText]);
-	const superscript = useCallback(() => {
-		formatText("superscript");
-	}, [formatText]);
-	const code = useCallback(() => {
-		editor?.dispatchCommand(INSERT_CODEINLINE_COMMAND, void 0);
-	}, [formatText]);
-	const bulletList = useCallback(() => {
-		if (blockType !== "bullet") editor?.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
-		else formatParagraph(editor?.getLexicalEditor());
-	}, [blockType, editor]);
-	const numberList = useCallback(() => {
-		if (blockType !== "number") editor?.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
-		else formatParagraph(editor?.getLexicalEditor());
-	}, [blockType, editor]);
-	const checkList = useCallback(() => {
-		if (blockType !== "check") editor?.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0);
-		else formatParagraph(editor?.getLexicalEditor());
-	}, [blockType, editor]);
-	const codeblock = useCallback(() => {
-		if (blockType !== "code") editor?.getLexicalEditor()?.update(() => {
-			let selection = $getSelection();
-			if (!selection) return;
-			const lexicalEditor = editor?.getLexicalEditor();
-			if (lexicalEditor ? lexicalEditor._nodes.has("code") && lexicalEditor._nodes.get("code")?.klass.name === "CodeMirrorNode" : false) if (!$isRangeSelection(selection) || selection.isCollapsed()) {
-				const codeMirrorNode = $createCodeMirrorNode("plain", selection.getTextContent());
-				const nodeSelection = $createNodeSelection();
-				nodeSelection.add(codeMirrorNode.getKey());
-				selection.insertNodes([codeMirrorNode]);
-				$setSelection(nodeSelection);
-			} else {
-				const codeMirrorNode = $createCodeMirrorNode("plain", selection.getTextContent());
-				selection.insertNodes([codeMirrorNode]);
-				const nodeSelection = $createNodeSelection();
-				nodeSelection.add(codeMirrorNode.getKey());
-				$setSelection(nodeSelection);
-			}
-			else if (!$isRangeSelection(selection) || selection.isCollapsed()) $setBlocksType(selection, () => $createCodeNode());
-			else {
-				const textContent = selection.getTextContent();
-				const codeNode = $createCodeNode();
-				selection.insertNodes([codeNode]);
-				selection = $getSelection();
-				if ($isRangeSelection(selection)) selection.insertRawText(textContent);
-			}
-		});
-		else formatParagraph(editor?.getLexicalEditor());
-	}, [blockType, editor]);
-	const blockquote = useCallback(() => {
-		if (blockType !== "quote") editor?.getLexicalEditor()?.update(() => {
-			const selection = $getSelection();
-			if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createQuoteNode());
-		});
-		else formatParagraph(editor?.getLexicalEditor());
-	}, [blockType, editor]);
-	const updateCodeblockLang = useCallback((lang) => {
-		if (!isCodeblock) return;
-		editor?.dispatchCommand(UPDATE_CODEBLOCK_LANG, { lang });
-	}, [editor, isCodeblock]);
-	const insertLink = useCallback(() => {
-		const lexical = editor?.getLexicalEditor();
-		if (!lexical) return;
-		let inLinkNode = false;
-		let inLinkHighlightNode = false;
-		lexical.getEditorState().read(() => {
-			const selection = $getSelection();
-			if ($isRangeSelection(selection)) {
-				const node = getSelectedNode(selection);
-				const parent = node.getParent();
-				if ($isLinkNode(parent) || $isLinkNode(node)) inLinkNode = true;
-				if ($isLinkHighlightNode(parent) || $isLinkHighlightNode(node)) inLinkHighlightNode = true;
-			}
-		});
-		if (inLinkHighlightNode) {
-			lexical.dispatchCommand(INSERT_LINK_HIGHLIGHT_COMMAND, void 0);
-			setIsLink(false);
-			return;
-		}
-		if (inLinkNode) {
-			setIsLink(false);
-			lexical.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-			return;
-		}
-		if (!isLink) {
-			if (lexical.dispatchCommand(INSERT_LINK_HIGHLIGHT_COMMAND, void 0)) {
-				setIsLink(true);
-				return;
-			}
-			let nextUrl = sanitizeUrl("https://");
-			let expandTo = null;
-			lexical.getEditorState().read(() => {
-				const selection = $getSelection();
-				if ($isRangeSelection(selection)) {
-					const text = selection.getTextContent();
-					if (!selection.isCollapsed()) {
-						const maybeUrl = formatUrl(text.trim());
-						if (validateUrl(maybeUrl)) nextUrl = maybeUrl;
-					} else {
-						const found = extractUrlFromText(selection.anchor.getNode().getTextContent());
-						if (found && validateUrl(formatUrl(found.url))) expandTo = {
-							index: found.index,
-							length: found.length
-						};
-					}
-				}
-			});
-			setIsLink(true);
-			lexical.update(() => {
-				if (expandTo) {
-					const selection = $getSelection();
-					if ($isRangeSelection(selection)) {
-						const anchorNode = selection.anchor.getNode();
-						selection.anchor.set(anchorNode.getKey(), expandTo.index, "text");
-						selection.focus.set(anchorNode.getKey(), expandTo.index + expandTo.length, "text");
-					}
-				}
-				lexical.dispatchCommand(TOGGLE_LINK_COMMAND, validateUrl(nextUrl) ? nextUrl : sanitizeUrl("https://"));
-			});
-		}
-	}, [editor, isLink]);
-	const insertMath = useCallback(() => {
-		editor?.getLexicalEditor()?.update(() => {
-			const selection = $getSelection();
-			if ($isRangeSelection(selection)) {
-				const element = $findTopLevelElement(selection.anchor.getNode());
-				const mathNode = $isParagraphNode(element) && selection.isCollapsed() && selection.anchor.offset === 0 && element.getTextContentSize() === 0 || !selection.isCollapsed() && selection.anchor.offset === 0 && selection.focus.offset === element.getTextContentSize() ? $createMathBlockNode("") : $createMathInlineNode("");
-				selection.insertNodes([mathNode]);
-				const nodeSelection = $createNodeSelection();
-				nodeSelection.add(mathNode.getKey());
-				$setSelection(nodeSelection);
-			}
-		});
-	}, [editor]);
-	useEffect(() => {
-		if (!editor) return;
-		const lexicalEditor = editor.getLexicalEditor();
-		let cleanup = noop;
-		const debounceUpdate = debounce(() => {
-			lexicalEditor?.read(() => {
-				$updateToolbar();
-			});
-		}, 500);
-		const handleLexicalEditor = (lexicalEditor) => {
-			cleanup = mergeRegister(lexicalEditor.registerUpdateListener(debounce(({ editorState }) => {
-				editorState.read(() => {
-					$updateToolbar();
-				});
-			}, 500)), lexicalEditor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-				if (lexicalEditor.isComposing()) return false;
-				debounceUpdate();
-				return false;
-			}, COMMAND_PRIORITY_LOW), lexicalEditor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
-				setCanUndo(payload);
-				return false;
-			}, COMMAND_PRIORITY_LOW), lexicalEditor.registerCommand(CAN_REDO_COMMAND, (payload) => {
-				setCanRedo(payload);
-				return false;
-			}, COMMAND_PRIORITY_LOW));
-			return cleanup;
-		};
-		if (!lexicalEditor) {
-			editor.on("initialized", handleLexicalEditor);
-			return () => {
-				cleanup();
-				editor.off("initialized", handleLexicalEditor);
-			};
-		}
-		return handleLexicalEditor(lexicalEditor);
-	}, [editor, $updateToolbar]);
-	return useMemo(() => ({
-		blockType,
-		blockquote,
-		bold,
-		bulletList,
-		canRedo,
-		canUndo,
-		checkList,
-		code,
-		codeblock,
-		codeblockLang,
-		editable,
-		insertLink,
-		insertMath,
-		isBlockquote,
-		isBold,
-		isCode,
-		isCodeblock,
-		isEmpty,
-		isItalic,
-		isSelected,
-		isStrikethrough,
-		isSubscript,
-		isSuperscript,
-		isUnderline,
-		italic,
-		numberList,
-		redo,
-		strikethrough,
-		subscript,
-		superscript,
-		underline,
-		undo,
-		updateCodeblockLang
-	}), [
-		blockType,
-		canRedo,
-		canUndo,
-		codeblockLang,
-		isBold,
-		isCode,
-		isEmpty,
-		isBlockquote,
-		isCodeblock,
-		isItalic,
-		isSelected,
-		isStrikethrough,
-		isUnderline,
-		isSubscript,
-		isSuperscript,
-		italic
-	]);
-}
-//#endregion
-//#region src/react/EditorProvider/index.tsx
-const EditorContext = createContext({ config: {} });
-const EditorProvider = ({ children, config = {} }) => {
-	const value = useMemo(() => ({ config }), [config]);
-	return /* @__PURE__ */ jsx(EditorContext.Provider, {
-		value,
-		children
-	});
-};
-const useEditorContent = () => {
-	return use(EditorContext);
-};
-EditorProvider.displayName = "EditorProvider";
-//#endregion
-//#region src/react/Editor/Editor.tsx
-const Editor$1 = memo(({ content, style, className, debounceWait = 100, editable, editor, onInit, onChange, placeholder, lineEmptyPlaceholder, plugins = [], slashOption = {}, slashPlacement, getPopupContainer, mentionOption = {}, variant, onKeyDown, children, type = "json", onPressEnter, onFocus, onBlur, autoFocus, enablePasteMarkdown = true, autoFormatMarkdown = true, markdownOption = true, pasteMarkdownAutoConvertThreshold, pasteAsPlainText = false, pasteVSCodeAsCodeBlock = true, onCompositionStart, onCompositionEnd, onContextMenu, onTextChange }) => {
-	const { config } = useEditorContent();
-	const enableSlash = Boolean(slashOption?.items && slashOption.items.length > 0);
-	const enableMention = Boolean(mentionOption?.items && mentionOption.items.length > 0);
-	const { markdownWriter, ...restMentionOption } = mentionOption;
-	const debouncedOnChange = useMemo(() => onChange ? debounce(onChange, debounceWait) : void 0, [onChange, debounceWait]);
-	const debouncedOnTextChange = useMemo(() => onTextChange ? debounce(onTextChange, debounceWait) : void 0, [onTextChange, debounceWait]);
-	const memoPlugins = useMemo(() => [enablePasteMarkdown && autoFormatMarkdown && ReactMarkdownPlugin, ...plugins].filter(Boolean).map((plugin, index) => {
-		if (typeof plugin === "function") return createElement(plugin, { key: index });
-		return createElement(plugin[0], {
-			key: index,
-			...plugin[1]
-		});
-	}), [
-		plugins,
-		enablePasteMarkdown,
-		autoFormatMarkdown,
-		ReactMarkdownPlugin
-	]);
-	const memoMention = useMemo(() => {
-		if (!enableMention) return;
-		return /* @__PURE__ */ jsx(ReactMentionPlugin, {
-			className,
-			markdownWriter
-		});
-	}, [
-		enableMention,
-		markdownWriter,
-		className
-	]);
-	return /* @__PURE__ */ jsxs(ReactEditor, {
-		config,
-		editor,
-		onInit,
-		children: [
-			memoPlugins,
-			useMemo(() => {
-				if (!enableSlash && !enableMention) return null;
-				return /* @__PURE__ */ jsxs(ReactSlashPlugin, {
-					getPopupContainer,
-					placement: slashPlacement,
-					children: [enableSlash ? /* @__PURE__ */ jsx(ReactSlashOption, {
-						maxLength: 8,
-						trigger: "/",
-						...slashOption
-					}) : void 0, enableMention ? /* @__PURE__ */ jsx(ReactSlashOption, {
-						maxLength: 8,
-						trigger: "@",
-						...restMentionOption
-					}) : void 0]
-				});
-			}, [
-				enableSlash,
-				enableMention,
-				slashOption,
-				slashPlacement,
-				getPopupContainer,
-				restMentionOption
-			]),
-			memoMention,
-			/* @__PURE__ */ jsx(ReactPlainText, {
-				autoFocus,
-				autoFormatMarkdown,
-				className,
-				editable,
-				enablePasteMarkdown,
-				markdownOption,
-				onBlur,
-				onChange: debouncedOnChange,
-				onCompositionEnd,
-				onCompositionStart,
-				onContextMenu,
-				onFocus,
-				onKeyDown,
-				onPressEnter,
-				onTextChange: debouncedOnTextChange,
-				pasteAsPlainText,
-				pasteMarkdownAutoConvertThreshold,
-				pasteVSCodeAsCodeBlock,
-				style,
-				variant,
-				children: /* @__PURE__ */ jsx(ReactEditorContent, {
-					content,
-					lineEmptyPlaceholder,
-					placeholder,
-					type
-				})
-			}),
-			children
-		]
-	});
-});
-Editor$1.displayName = "Editor";
-//#endregion
-//#region src/react/Editor/utils.ts
-function withProps(plugin, props) {
-	return [plugin, props];
-}
-//#endregion
-//#region src/react/Editor/index.ts
-const Editor = Editor$1;
-Editor.useEditor = useEditor;
-Editor.useEditorState = useEditorState;
-Editor.withProps = withProps;
-//#endregion
-//#region src/react/FloatActions/style.ts
-const styles$4 = createStaticStyles(({ css }) => ({
-	collapsedContainer: css`
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-  `,
-	container: css`
-    position: relative;
-    width: 100%;
-  `,
-	divider: css`
-    height: 20px;
-    margin-inline: 4px;
-  `
-}));
-//#endregion
-//#region src/react/FloatActions/components/ActionRender.tsx
-const ActionRender = ({ item, onActionClick, disabled }) => {
-	if (item.type === "divider") return /* @__PURE__ */ jsx(Divider, {
-		className: styles$4.divider,
-		orientation: "vertical"
-	});
-	const { wrapper, icon, key, label, onClick, danger, loading, active, tooltipProps, ...itemRest } = item;
-	if (item.children && isValidElement(item.children)) {
-		if (!wrapper) return item.children;
-		return wrapper(item.children);
-	}
-	const action = /* @__PURE__ */ jsx(ActionIcon, {
-		active,
-		danger,
-		disabled: disabled || loading || itemRest?.disabled,
-		icon,
-		loading,
-		onClick: (e) => {
-			onActionClick?.({
-				domEvent: e,
-				key: String(key),
-				keyPath: [String(key)]
-			});
-			onClick?.(e);
-		},
-		size: {
-			blockSize: 36,
-			size: 20
-		},
-		title: label,
-		tooltipProps: {
-			placement: "top",
-			...tooltipProps
-		}
-	});
-	if (!wrapper) return action;
-	return wrapper(action);
-};
-//#endregion
-//#region src/react/FloatActions/components/CollapsedActions.tsx
-const CollapsedActions = ({ children, groupCollapse = false, onGroupCollapseChange, gap, mode }) => {
-	const Motion = useMotionComponent();
-	if (mode === "popup") return /* @__PURE__ */ jsx(Popover, {
-		arrow: false,
-		content: /* @__PURE__ */ jsx(Flexbox, {
-			align: "center",
-			gap,
-			horizontal: true,
-			children
-		}),
-		styles: { content: { padding: 4 } },
-		children: /* @__PURE__ */ jsx(ActionIcon, {
-			icon: CircleChevronUpIcon,
-			size: {
-				blockSize: 36,
-				size: 20
-			}
-		})
-	});
-	return /* @__PURE__ */ jsxs(Flexbox, {
-		align: "center",
-		flex: "none",
-		gap,
-		horizontal: true,
-		children: [/* @__PURE__ */ jsx(Motion.div, {
-			animate: groupCollapse ? "closed" : "open",
-			className: styles$4.collapsedContainer,
-			initial: groupCollapse ? "closed" : "open",
-			style: { gap },
-			transition: { duration: .2 },
-			variants: {
-				closed: {
-					opacity: 0,
-					width: 0
-				},
-				open: {
-					opacity: 1,
-					width: "auto"
-				}
-			},
-			children
-		}), /* @__PURE__ */ jsx(ActionIcon, {
-			icon: groupCollapse ? CircleChevronRightIcon : CircleChevronLeftIcon,
-			onClick: () => onGroupCollapseChange?.(!groupCollapse),
-			size: {
-				blockSize: 36,
-				size: 20
-			}
-		})]
-	});
-};
-CollapsedActions.displayName = "FloatActionsCollapse";
-//#endregion
-//#region src/react/FloatActions/components/ActionItem.tsx
-const ActionItem = ({ item, disabled, onActionClick, groupCollapsed, gap, setGroupCollapsed }) => {
-	if (item.type === "collapse") return /* @__PURE__ */ jsx(CollapsedActions, {
-		gap,
-		groupCollapse: groupCollapsed,
-		mode: "default",
-		onGroupCollapseChange: setGroupCollapsed,
-		children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionRender, {
-			disabled,
-			item: child,
-			onActionClick
-		}, child?.key || `action-${childIndex}`))
-	});
-	if (item.type === "dropdown") return /* @__PURE__ */ jsx(Dropdown, {
-		menu: { items: item.children },
-		children: /* @__PURE__ */ jsx(ActionIcon, {
-			active: item.active,
-			danger: item.danger,
-			disabled: disabled || item.loading || item?.disabled,
-			icon: item.icon,
-			loading: item.loading,
-			size: {
-				blockSize: 36,
-				size: 20
-			},
-			title: item.label,
-			tooltipProps: {
-				placement: "top",
-				...item.tooltipProps
-			}
-		})
-	}, item.key);
-	return /* @__PURE__ */ jsx(ActionRender, {
-		disabled,
-		item,
-		onActionClick
-	});
-};
-ActionItem.displayName = "FloatActionsItem";
-//#endregion
-//#region src/react/FloatActions/FloatActions.tsx
-const FloatActions = ({ gap = 2, disabled, items = [], onActionClick, className, defaultGroupCollapse = false, onGroupCollapseChange, groupCollapse, ...rest }) => {
-	const [groupCollapsed, setGroupCollapsed] = useMergeState(defaultGroupCollapse, {
-		defaultValue: defaultGroupCollapse,
-		onChange: onGroupCollapseChange,
-		value: groupCollapse
-	});
-	return /* @__PURE__ */ jsx(Flexbox, {
-		align: "center",
-		className: cx(styles$4.container, className),
-		flex: 1,
-		gap,
-		horizontal: true,
-		...rest,
-		children: items.map((item, index) => /* @__PURE__ */ jsx(ActionItem, {
-			disabled,
-			gap,
-			groupCollapsed,
-			item,
-			onActionClick,
-			setGroupCollapsed
-		}, item.key || index))
-	});
-};
-FloatActions.displayName = "FloatActions";
-//#endregion
-//#region src/react/FloatMenu/style.ts
-const styles$3 = 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
-//#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$3.rootBottom : styles$3.rootTop, classNames?.root),
-		paddingInline: 8,
-		style: customStyles?.root,
-		width: "100%",
-		children: /* @__PURE__ */ jsx(Block, {
-			className: cx(styles$3.container, className, classNames?.container),
-			shadow: true,
-			style: {
-				maxHeight,
-				...style,
-				...customStyles?.container
-			},
-			variant: "outlined",
-			children
-		})
-	}), parent);
-};
-FloatMenu.displayName = "FloatMenu";
-//#endregion
-//#region src/react/SendButton/components/SendIcon.tsx
-const styles$2 = createStaticStyles(({ css }) => ({ icon: css`
-    flex: none;
-    line-height: 1;
-  ` }));
-const SendIcon = ({ size = "1em", style }) => {
-	return /* @__PURE__ */ jsx("svg", {
-		className: cx("anticon", styles$2.icon),
-		fill: "currentColor",
-		fillRule: "evenodd",
-		height: size,
-		style,
-		viewBox: "0 0 14 14",
-		width: size,
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ jsx("path", { d: "M.743 3.773c-.818-.555-.422-1.834.567-1.828l11.496.074a1 1 0 01.837 1.538l-6.189 9.689c-.532.833-1.822.47-1.842-.518L5.525 8.51a1 1 0 01.522-.9l1.263-.686a.808.808 0 00-.772-1.42l-1.263.686a1 1 0 01-1.039-.051L.743 3.773z" })
-	});
-};
-//#endregion
-//#region src/react/SendButton/components/StopIcon.tsx
-const styles$1 = createStaticStyles(({ css }) => ({ icon: css`
-    flex: none;
-    line-height: 1;
-  ` }));
-const StopIcon = ({ size = "1.5em", style }) => {
-	return /* @__PURE__ */ jsx("svg", {
-		className: cx("anticon", styles$1.icon),
-		color: "currentColor",
-		height: size,
-		style,
-		viewBox: "0 0 1024 1024",
-		width: size,
-		xmlns: "http://www.w3.org/2000/svg",
-		children: /* @__PURE__ */ jsxs("g", {
-			fill: "none",
-			children: [
-				/* @__PURE__ */ jsx("circle", {
-					cx: "512",
-					cy: "512",
-					fill: "none",
-					r: "426",
-					stroke: cssVar.colorBorder,
-					strokeWidth: "72"
-				}),
-				/* @__PURE__ */ jsx("rect", {
-					fill: "currentColor",
-					height: "252",
-					rx: "24",
-					ry: "24",
-					width: "252",
-					x: "386",
-					y: "386"
-				}),
-				/* @__PURE__ */ jsx("path", {
-					d: "M938.667 512C938.667 276.359 747.64 85.333 512 85.333",
-					stroke: "currentColor",
-					strokeLinecap: "round",
-					strokeWidth: "73",
-					children: /* @__PURE__ */ jsx("animateTransform", {
-						attributeName: "transform",
-						dur: "1s",
-						from: "0 512 512",
-						repeatCount: "indefinite",
-						to: "360 512 512",
-						type: "rotate"
-					})
-				})
-			]
-		})
-	});
-};
-//#endregion
-//#region src/react/SendButton/style.ts
-const prefixCls = "ant";
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	button: css`
-    &.${prefixCls}-btn {
-      flex: none;
-      width: var(--send-button-size, 32px) !important;
-      height: var(--send-button-size, 32px);
-      padding-inline: 0 !important;
-    }
-  `,
-	disabled: css`
-    &.${prefixCls}-btn {
-      cursor: default;
-      border-color: ${cssVar.colorBorderSecondary};
-      background: transparent;
-    }
-
-    .${prefixCls}-btn-compact-first-item {
-      cursor: default;
-      border-color: ${cssVar.colorBorderSecondary};
-      background: transparent;
-    }
-    .${prefixCls}-dropdown-trigger {
-      cursor: default;
-      border-color: ${cssVar.colorBorderSecondary};
-      border-inline-start-color: transparent;
-      background: transparent;
-    }
-  `,
-	dropdownButton: css`
-    flex: none;
-    width: fit-content;
-    .${prefixCls}-btn {
-      width: calc(var(--send-button-size, 32px) * 1.2);
-      height: var(--send-button-size, 32px);
-    }
-    .${prefixCls}-dropdown-trigger {
-      width: calc(var(--send-button-size, 32px) * 0.8);
-      &.${prefixCls}-btn-primary {
-        &::before {
-          background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 10%, transparent) !important;
-        }
-      }
-    }
-  `,
-	dropdownButtonRound: css`
-    .${prefixCls}-btn-compact-first-item {
-      border-start-start-radius: calc(var(--send-button-size, 32px) / 2);
-      border-end-start-radius: calc(var(--send-button-size, 32px) / 2);
-    }
-    .${prefixCls}-dropdown-trigger {
-      width: var(--send-button-size, 32px);
-      border-start-end-radius: calc(var(--send-button-size, 32px) / 2);
-      border-end-end-radius: calc(var(--send-button-size, 32px) / 2);
-    }
-  `,
-	loadingButton: css`
-    &.${prefixCls}-btn {
-      flex: none;
-      height: var(--send-button-size, 32px);
-      padding-inline: 0 !important;
-    }
-  `
-}));
-//#endregion
-//#region src/react/SendButton/SendButton.tsx
-const SendButton = ({ type = "primary", menu, className, style, loading, generating, size = 32, shape, onSend, onStop, disabled, onClick, styles: _styles, classNames: _classNames, ...rest }) => {
-	const cssVariables = useMemo(() => ({ "--send-button-size": `${size}px` }), [size]);
-	if (generating) return /* @__PURE__ */ jsx(Button, {
-		className: cx(styles.loadingButton, className),
-		onClick: (e) => {
-			e.stopPropagation();
-			e.preventDefault();
-			if (onStop) onStop(e);
-			if (onClick) onClick(e);
-		},
-		shape,
-		style: {
-			...cssVariables,
-			...style,
-			width: menu ? size * 2 : size
-		},
-		variant: "filled",
-		...rest,
-		children: /* @__PURE__ */ jsx(StopIcon, { size: size * .75 })
-	});
-	if (loading) return /* @__PURE__ */ jsx(Button, {
-		className: cx(styles.loadingButton, className),
-		disabled: true,
-		loading,
-		shape,
-		style: {
-			...cssVariables,
-			...style,
-			width: menu ? size * 2 : size
-		},
-		type,
-		...rest
-	});
-	if (!menu) return /* @__PURE__ */ jsx(Button, {
-		className: cx(styles.button, disabled && styles.disabled, className),
-		disabled,
-		icon: /* @__PURE__ */ jsx(SendIcon, {}),
-		onClick: (e) => {
-			e.stopPropagation();
-			e.preventDefault();
-			if (onSend) onSend(e);
-			if (onClick) onClick(e);
-		},
-		shape,
-		style: {
-			...cssVariables,
-			...style
-		},
-		type,
-		...rest
-	});
-	return /* @__PURE__ */ jsxs(Space.Compact, {
-		className: cx(styles.dropdownButton, disabled && styles.disabled, shape === "round" && styles.dropdownButtonRound, className),
-		style: {
-			...cssVariables,
-			...style
-		},
-		...rest,
-		children: [/* @__PURE__ */ jsx(Button, {
-			className: cx(styles.button, disabled && styles.disabled, className),
-			disabled,
-			icon: /* @__PURE__ */ jsx(SendIcon, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				e.preventDefault();
-				if (onSend) onSend(e);
-				if (onClick) onClick(e);
-			},
-			shape,
-			style: {
-				...cssVariables,
-				...style
-			},
-			type,
-			...rest
-		}), /* @__PURE__ */ jsx(Dropdown$1, {
-			menu,
-			placement: "topRight",
-			...rest,
-			children: /* @__PURE__ */ jsx(Button, {
-				className: cx(styles.button, disabled && styles.disabled, className),
-				disabled,
-				icon: /* @__PURE__ */ jsx(Icon, { icon: ChevronDownIcon }),
-				shape,
-				style: {
-					...cssVariables,
-					cursor: "pointer"
-				},
-				type
-			})
-		})]
-	});
-};
-SendButton.displayName = "SendButton";
-//#endregion
-//#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
+import ChatInput from "./react/ChatInput/ChatInput.js";
+import ChatInputActionBar from "./react/ChatInputActionBar/ChatInputActionBar.js";
+import ChatInputActions from "./react/ChatInputActions/ChatInputActions.js";
+import CodeLanguageSelect from "./react/CodeLanguageSelect/CodeLanguageSelect.js";
+import { useEditor } from "./react/hooks/useEditor.js";
+import { useEditorState } from "./react/hooks/useEditorState/index.js";
+import { EditorProvider, useEditorContent } from "./react/EditorProvider/index.js";
+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 { ChatInput, ChatInputActionBar, ChatInputActions, CodeLanguageSelect, Editor, EditorProvider, FloatActions, FloatMenu, SendButton, SlashMenu, useEditor, useEditorContent, useEditorState, withProps };