@lobehub/editor 4.15.0 → 4.15.2

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

@@ -0,0 +1,64 @@
+import { IEditor } from "../../types/kernel.js";
+import { ReactEditorContentProps, ReactPlainTextProps } from "../../plugins/common/react/type.js";
+import { ReactMentionPluginProps } from "../../plugins/mention/react/type.js";
+import { ReactSlashOptionProps } from "../../plugins/slash/react/type.js";
+import { CSSProperties, FC, ReactNode } from "react";
+
+//#region src/react/Editor/type.d.ts
+type EditorPlugin = FC<any> | [FC<any>, Record<string, any>];
+interface MentionOption extends Partial<ReactSlashOptionProps> {
+  markdownWriter?: ReactMentionPluginProps['markdownWriter'];
+}
+interface EditorProps extends Partial<ReactEditorContentProps>, Omit<ReactPlainTextProps, 'children'> {
+  autoFocus?: boolean;
+  /**
+   * Automatically convert pasted markdown once the detection threshold is reached
+   * @default true
+   */
+  autoFormatMarkdown?: boolean;
+  children?: ReactNode;
+  className?: string;
+  /**
+   * Debounce wait time in milliseconds for onChange and onTextChange callbacks
+   * @default 100
+   */
+  debounceWait?: number;
+  editable?: boolean;
+  editor?: IEditor;
+  /**
+   * Enable automatic markdown conversion for pasted content
+   * @default true
+   */
+  enablePasteMarkdown?: boolean;
+  /** Custom popup container for slash menu portal rendering and scroll tracking */
+  getPopupContainer?: () => HTMLElement | null;
+  markdownOption?: boolean | {
+    bold?: boolean;
+    code?: boolean;
+    header?: boolean;
+    italic?: boolean;
+    quote?: boolean;
+    strikethrough?: boolean;
+    underline?: boolean;
+    underlineStrikethrough?: boolean;
+  };
+  mentionOption?: MentionOption;
+  onInit?: (editor: IEditor) => void;
+  /**
+   * Callback triggered only when text content changes
+   * Unlike onChange, this won't trigger on cursor movement or selection changes
+   */
+  onTextChange?: (editor: IEditor) => void;
+  /**
+   * Minimum markdown score required before auto conversion runs
+   * @default 5
+   */
+  pasteMarkdownAutoConvertThreshold?: number;
+  plugins?: EditorPlugin[];
+  slashOption?: Partial<ReactSlashOptionProps>;
+  /** Force slash menu placement direction, skipping auto-flip detection */
+  slashPlacement?: 'bottom' | 'top';
+  style?: CSSProperties;
+}
+//#endregion
+export { EditorPlugin, EditorProps };

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

@@ -0,0 +1,6 @@
+import { ComponentProps, FC } from "react";
+
+//#region src/react/Editor/utils.d.ts
+declare function withProps<T extends FC<any>>(plugin: T, props: ComponentProps<T>): [T, ComponentProps<T>];
+//#endregion
+export { withProps };

package/es/react/Editor/utils.js

@@ -0,0 +1,6 @@
+//#region src/react/Editor/utils.ts
+function withProps(plugin, props) {
+	return [plugin, props];
+}
+//#endregion
+export { withProps };

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

@@ -0,0 +1,28 @@
+import { _default } from "../../locale/index.js";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/EditorProvider/index.d.ts
+type LocaleType = typeof _default;
+interface EditorProviderConfig {
+  [key: string]: any;
+  locale?: Partial<LocaleType>;
+  theme?: Record<string, any>;
+}
+interface EditorContextValue {
+  config: EditorProviderConfig;
+}
+interface EditorProviderProps {
+  children: ReactNode;
+  config?: EditorProviderConfig;
+}
+declare const EditorProvider: {
+  ({
+    children,
+    config
+  }: EditorProviderProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+declare const useEditorContent: () => EditorContextValue;
+//#endregion
+export { EditorProvider, EditorProviderConfig, EditorProviderProps, useEditorContent };

package/es/react/EditorProvider/index.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#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
+export { EditorProvider, useEditorContent };

package/es/react/FloatActions/FloatActions.d.ts

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

package/es/react/FloatActions/FloatActions.js

@@ -0,0 +1,34 @@
+"use client";
+import { styles } from "./style.js";
+import ActionItem from "./components/ActionItem.js";
+import { Flexbox } from "@lobehub/ui";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+//#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.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
+export { FloatActions as default };

package/es/react/FloatActions/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/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
+export { ActionItem as default };

package/es/react/FloatActions/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/FloatActions/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/FloatActions/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/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.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
+export { CollapsedActions as default };

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

@@ -0,0 +1,2 @@
+import { ActionItem, CollapseItem, DividerItem, DropdownItem, FloatActionsEvent, FloatActionsItem, FloatActionsProps } from "./type.js";
+import { FloatActions } from "./FloatActions.js";

package/es/react/FloatActions/style.js

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

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

@@ -0,0 +1,33 @@
+import { FlexboxProps, MenuInfo, MenuItemType, TooltipProps } from "@lobehub/ui";
+import { ReactNode } from "react";
+
+//#region src/react/FloatActions/type.d.ts
+type FloatActionsEvent = Pick<MenuInfo, 'key' | 'keyPath' | 'domEvent'>;
+interface ActionItem extends MenuItemType {
+  active?: 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 FloatActionsItem = ActionItem | DividerItem | CollapseItem | DropdownItem;
+interface FloatActionsProps extends Omit<FlexboxProps, 'children'> {
+  defaultGroupCollapse?: boolean;
+  disabled?: boolean;
+  groupCollapse?: boolean;
+  items?: FloatActionsItem[];
+  onActionClick?: (action: FloatActionsEvent) => void;
+  onGroupCollapseChange?: (collapse: boolean) => void;
+}
+//#endregion
+export { ActionItem, CollapseItem, DividerItem, DropdownItem, FloatActionsEvent, FloatActionsItem, FloatActionsProps };

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

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

package/es/react/FloatMenu/FloatMenu.js

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

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

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

package/es/react/FloatMenu/style.js

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

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

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

package/es/react/SendButton/SendButton.d.ts

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

package/es/react/SendButton/SendButton.js

@@ -0,0 +1,107 @@
+"use client";
+import SendIcon from "./components/SendIcon.js";
+import StopIcon from "./components/StopIcon.js";
+import { styles } from "./style.js";
+import { Button, Icon } from "@lobehub/ui";
+import { ChevronDownIcon } from "lucide-react";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Dropdown as Dropdown$1, Space } from "antd";
+//#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
+export { SendButton as default };

package/es/react/SendButton/components/SendIcon.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createStaticStyles, cx } from "antd-style";
+//#region src/react/SendButton/components/SendIcon.tsx
+const styles = createStaticStyles(({ css }) => ({ icon: css`
+    flex: none;
+    line-height: 1;
+  ` }));
+const SendIcon = ({ size = "1em", style }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		className: cx("anticon", styles.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
+export { SendIcon as default };

package/es/react/SendButton/components/StopIcon.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStaticStyles, cssVar, cx } from "antd-style";
+//#region src/react/SendButton/components/StopIcon.tsx
+const styles = createStaticStyles(({ css }) => ({ icon: css`
+    flex: none;
+    line-height: 1;
+  ` }));
+const StopIcon = ({ size = "1.5em", style }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		className: cx("anticon", styles.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
+export { StopIcon as default };