@lobehub/editor 4.15.0 → 4.15.2

package/es/react/ChatInputActionBar/ChatInputActionBar.js

@@ -0,0 +1,22 @@
+"use client";
+import { styles } from "./style.js";
+import { Flexbox } from "@lobehub/ui";
+import { jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/react/ChatInputActionBar/ChatInputActionBar.tsx
+const ChatInputActionBar = ({ className, style, left, right, ...rest }) => {
+	return /* @__PURE__ */ jsxs(Flexbox, {
+		align: "center",
+		className: cx(styles.container, className),
+		gap: 4,
+		horizontal: true,
+		justify: "space-between",
+		padding: 4,
+		style,
+		...rest,
+		children: [left, right]
+	});
+};
+ChatInputActionBar.displayName = "ChatInputActionBar";
+//#endregion
+export { ChatInputActionBar as default };

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

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

package/es/react/ChatInputActionBar/style.js

@@ -0,0 +1,7 @@
+import { createStaticStyles } from "antd-style";
+//#region src/react/ChatInputActionBar/style.ts
+const styles = createStaticStyles(({ css }) => ({ container: css`
+    overflow: hidden;
+  ` }));
+//#endregion
+export { styles };

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

@@ -0,0 +1,10 @@
+import { FlexboxProps } from "@lobehub/ui";
+import { ReactNode } from "react";
+
+//#region src/react/ChatInputActionBar/type.d.ts
+interface ChatInputActionBarProps extends Omit<FlexboxProps, 'children'> {
+  left?: ReactNode;
+  right?: ReactNode;
+}
+//#endregion
+export { ChatInputActionBarProps };

package/es/react/ChatInputActions/ChatInputActions.d.ts

@@ -0,0 +1,7 @@
+import { ChatInputActionsProps } from "./type.js";
+import * as _$react from "react";
+
+//#region src/react/ChatInputActions/ChatInputActions.d.ts
+declare const ChatInputActions: _$react.NamedExoticComponent<ChatInputActionsProps>;
+//#endregion
+export { ChatInputActions };

package/es/react/ChatInputActions/ChatInputActions.js

@@ -0,0 +1,65 @@
+"use client";
+import { styles } from "./style.js";
+import ActionItem from "./components/ActionItem.js";
+import { useDisplayActionCount } from "./components/useDisplayActionCount.js";
+import { Flexbox, TooltipGroup } from "@lobehub/ui";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+//#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.container, className),
+		flex: 1,
+		gap,
+		horizontal: true,
+		ref,
+		...rest,
+		children: calcItem.map((item, index) => /* @__PURE__ */ jsx(ActionItem, {
+			collapsed,
+			disabled,
+			gap,
+			groupCollapsed,
+			item,
+			onActionClick,
+			setGroupCollapsed
+		}, item.key || index))
+	}) });
+});
+ChatInputActions.displayName = "ChatInputActions";
+//#endregion
+export { ChatInputActions as default };

package/es/react/ChatInputActions/components/ActionItem.js

@@ -0,0 +1,46 @@
+"use client";
+import ActionRender from "./ActionRender.js";
+import CollapsedActions from "./CollapsedActions.js";
+import { ActionIcon, Dropdown } from "@lobehub/ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/ChatInputActions/components/ActionItem.tsx
+const ActionItem = ({ item, disabled, onActionClick, groupCollapsed, collapsed, gap, setGroupCollapsed }) => {
+	if (item.type === "collapse") return /* @__PURE__ */ jsx(CollapsedActions, {
+		gap,
+		groupCollapse: groupCollapsed,
+		mode: collapsed ? "popup" : "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 = "ChatInputActionItem";
+//#endregion
+export { ActionItem as default };

package/es/react/ChatInputActions/components/ActionRender.js

@@ -0,0 +1,45 @@
+import { styles } from "../style.js";
+import { ActionIcon } from "@lobehub/ui";
+import { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Divider } from "antd";
+//#region src/react/ChatInputActions/components/ActionRender.tsx
+const ActionRender = ({ item, onActionClick, disabled }) => {
+	if (item.type === "divider") return /* @__PURE__ */ jsx(Divider, {
+		className: styles.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
+export { ActionRender as default };

package/es/react/ChatInputActions/components/CollapsedActions.js

@@ -0,0 +1,60 @@
+"use client";
+import { styles } from "../style.js";
+import { ActionIcon, Flexbox, Popover, useMotionComponent } from "@lobehub/ui";
+import { CircleChevronLeftIcon, CircleChevronRightIcon, CircleChevronUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/ChatInputActions/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.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 = "ChatInputActionsCollapse";
+//#endregion
+export { CollapsedActions as default };

package/es/react/ChatInputActions/components/useDisplayActionCount.js

@@ -0,0 +1,45 @@
+import { useWidth } from "../../hooks/useSize.js";
+import { useEffect, useMemo, useState } from "react";
+//#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
+export { useDisplayActionCount };

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

@@ -0,0 +1,2 @@
+import { ActionItem, ChatInputActionEvent, ChatInputActionItem, ChatInputActionsProps, CollapseItem, DividerItem, DropdownItem } from "./type.js";
+import { ChatInputActions } from "./ChatInputActions.js";

package/es/react/ChatInputActions/style.js

@@ -0,0 +1,20 @@
+import { createStaticStyles } from "antd-style";
+//#region src/react/ChatInputActions/style.ts
+const styles = 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
+export { styles };

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

@@ -0,0 +1,36 @@
+import { FlexboxProps, MenuInfo, MenuItemType, TooltipProps } from "@lobehub/ui";
+import { ReactNode } from "react";
+
+//#region src/react/ChatInputActions/type.d.ts
+type ChatInputActionEvent = Pick<MenuInfo, 'key' | 'keyPath' | 'domEvent'>;
+interface ActionItem extends MenuItemType {
+  active?: boolean;
+  alwaysDisplay?: boolean;
+  children?: ReactNode;
+  tooltipProps?: TooltipProps;
+  wrapper?: (dom: ReactNode) => ReactNode;
+}
+type DividerItem = {
+  type: 'divider';
+};
+type CollapseItem = {
+  children: (ActionItem | DividerItem)[];
+  type: 'collapse';
+};
+type DropdownItem = Omit<ActionItem, 'children' | 'type'> & {
+  children: MenuItemType[];
+  type: 'dropdown';
+};
+type ChatInputActionItem = ActionItem | DividerItem | CollapseItem | DropdownItem;
+interface ChatInputActionsProps extends Omit<FlexboxProps, 'children'> {
+  autoCollapse?: boolean;
+  collapseOffset?: number;
+  defaultGroupCollapse?: boolean;
+  disabled?: boolean;
+  groupCollapse?: boolean;
+  items?: ChatInputActionItem[];
+  onActionClick?: (action: ChatInputActionEvent) => void;
+  onGroupCollapseChange?: (collapse: boolean) => void;
+}
+//#endregion
+export { ActionItem, ChatInputActionEvent, ChatInputActionItem, ChatInputActionsProps, CollapseItem, DividerItem, DropdownItem };

package/es/react/CodeLanguageSelect/CodeLanguageSelect.d.ts

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

package/es/react/CodeLanguageSelect/CodeLanguageSelect.js

@@ -0,0 +1,67 @@
+"use client";
+import { styles } from "./style.js";
+import { Flexbox, MaterialFileTypeIcon, Select, Text } from "@lobehub/ui";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { bundledLanguagesInfo } from "shiki";
+//#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.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
+export { CodeLanguageSelect as default };

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

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

package/es/react/CodeLanguageSelect/style.js

@@ -0,0 +1,7 @@
+import { createStaticStyles } from "antd-style";
+//#region src/react/CodeLanguageSelect/style.ts
+const styles = createStaticStyles(({ css }) => ({ container: css`
+    width: 160px;
+  ` }));
+//#endregion
+export { styles };

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

@@ -0,0 +1,6 @@
+import { SelectProps } from "@lobehub/ui";
+
+//#region src/react/CodeLanguageSelect/type.d.ts
+type CodeLanguageSelectProps = Omit<SelectProps, 'options'>;
+//#endregion
+export { CodeLanguageSelectProps };

package/es/react/Editor/Editor.js

@@ -0,0 +1,108 @@
+"use client";
+import { ReactEditor } from "../../editor-kernel/react/react-editor.js";
+import ReactMarkdownPlugin from "../../plugins/markdown/react/index.js";
+import ReactEditorContent from "../../plugins/common/react/ReactEditorContent.js";
+import ReactPlainText from "../../plugins/common/react/ReactPlainText.js";
+import ReactMentionPlugin from "../../plugins/mention/react/ReactMentionPlugin.js";
+import ReactSlashOption from "../../plugins/slash/react/ReactSlashOption.js";
+import ReactSlashPlugin from "../../plugins/slash/react/ReactSlashPlugin.js";
+import { useEditorContent } from "../EditorProvider/index.js";
+import { createElement, memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { debounce } from "es-toolkit";
+//#region src/react/Editor/Editor.tsx
+const Editor = 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.displayName = "Editor";
+//#endregion
+export { Editor as default };

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

@@ -0,0 +1,16 @@
+import { useEditor } from "../hooks/useEditor.js";
+import { useEditorState } from "../hooks/useEditorState/index.js";
+import { EditorPlugin, EditorProps } from "./type.js";
+import { withProps } from "./utils.js";
+import { ReactNode } from "react";
+
+//#region src/react/Editor/index.d.ts
+interface IEditor {
+  (props: EditorProps): ReactNode;
+  useEditor: typeof useEditor;
+  useEditorState: typeof useEditorState;
+  withProps: typeof withProps;
+}
+declare const Editor: IEditor;
+//#endregion
+export { Editor };

package/es/react/Editor/index.js

@@ -0,0 +1,11 @@
+import { useEditor } from "../hooks/useEditor.js";
+import { useEditorState } from "../hooks/useEditorState/index.js";
+import Editor$1 from "./Editor.js";
+import { withProps } from "./utils.js";
+//#region src/react/Editor/index.ts
+const Editor = Editor$1;
+Editor.useEditor = useEditor;
+Editor.useEditorState = useEditorState;
+Editor.withProps = withProps;
+//#endregion
+export { Editor as default };