@lobehub/editor 4.15.1 → 4.16.0

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 };

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

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

package/es/react/SendButton/style.js

@@ -0,0 +1,68 @@
+import { createStaticStyles } from "antd-style";
+//#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
+export { styles };

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

@@ -0,0 +1,12 @@
+import { DropdownButtonProps } from "antd/lib/dropdown/index.js";
+
+//#region src/react/SendButton/type.d.ts
+interface SendButtonProps extends Omit<DropdownButtonProps, 'children' | 'icon' | 'size'> {
+  generating?: boolean;
+  onSend?: DropdownButtonProps['onClick'];
+  onStop?: DropdownButtonProps['onClick'];
+  shape?: 'default' | 'round';
+  size?: number;
+}
+//#endregion
+export { SendButtonProps };

package/es/react/SlashMenu/SlashMenu.d.ts

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

package/es/react/SlashMenu/SlashMenu.js

@@ -0,0 +1,40 @@
+"use client";
+import FloatMenu from "../FloatMenu/FloatMenu.js";
+import { Menu } from "@lobehub/ui";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#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
+export { SlashMenu as default };

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

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

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

@@ -0,0 +1,17 @@
+import { MenuRenderProps } from "../../plugins/slash/react/type.js";
+import { FloatMenuProps } from "../FloatMenu/type.js";
+import { MenuProps } from "@lobehub/ui";
+import { CSSProperties } from "react";
+
+//#region src/react/SlashMenu/type.d.ts
+interface SlashMenuProps extends MenuRenderProps, Omit<FloatMenuProps, 'children'> {
+  classNames?: FloatMenuProps['classNames'] & {
+    menu?: string;
+  };
+  menuProps?: MenuProps;
+  styles?: FloatMenuProps['styles'] & {
+    menu?: CSSProperties;
+  };
+}
+//#endregion
+export { SlashMenuProps };

package/es/react/hooks/useEditor.d.ts

@@ -0,0 +1,5 @@
+import { IEditor } from "../../types/kernel.js";
+//#region src/react/hooks/useEditor.d.ts
+declare const useEditor: () => IEditor;
+//#endregion
+export { useEditor };

package/es/react/hooks/useEditor.js

@@ -0,0 +1,8 @@
+import Editor from "../../editor-kernel/index.js";
+import { useMemo } from "react";
+//#region src/react/hooks/useEditor.ts
+const useEditor = () => {
+	return useMemo(() => Editor.createEditor(), []);
+};
+//#endregion
+export { useEditor };

package/es/react/hooks/useEditorState/index.d.ts

@@ -0,0 +1,71 @@
+import { IEditor } from "../../../types/kernel.js";
+//#region src/react/hooks/useEditorState/index.d.ts
+/**
+ * Editor state and toolbar methods return type
+ */
+interface EditorState {
+  /** Current block type (e.g., 'paragraph', 'h1', 'h2', 'bullet', 'number', 'code') */
+  blockType: string | null;
+  /** Format selection as blockquote */
+  blockquote: () => void;
+  /** Toggle bold formatting */
+  bold: () => void;
+  /** Toggle bullet list */
+  bulletList: () => void;
+  /** Whether redo operation is available */
+  canRedo: boolean;
+  /** Whether undo operation is available */
+  canUndo: boolean;
+  /** Toggle check list */
+  checkList: () => void;
+  /** Toggle code formatting */
+  code: () => void;
+  /** Format selection as code block */
+  codeblock: () => void;
+  /** Current code block language */
+  codeblockLang: string | null | undefined;
+  /** Insert or toggle link */
+  insertLink: () => void;
+  /** Insert math (inline or block based on context) */
+  insertMath: () => void;
+  /** Whether cursor is inside a blockquote */
+  isBlockquote: boolean;
+  /** Whether selection has bold formatting */
+  isBold: boolean;
+  /** Whether selection has code formatting */
+  isCode: boolean;
+  /** Whether cursor is inside a code block */
+  isCodeblock: boolean;
+  /** Whether editor content is empty */
+  isEmpty: boolean;
+  /** Whether selection has italic formatting */
+  isItalic: boolean;
+  /** Whether editor has selection */
+  isSelected: boolean;
+  /** Whether selection has strikethrough formatting */
+  isStrikethrough: boolean;
+  /** Whether selection has underline formatting */
+  isUnderline: boolean;
+  /** Toggle italic formatting */
+  italic: () => void;
+  /** Toggle numbered list */
+  numberList: () => void;
+  /** Redo last operation */
+  redo: () => void;
+  /** Toggle strikethrough formatting */
+  strikethrough: () => void;
+  /** Toggle underline formatting */
+  underline: () => void;
+  /** Undo last operation */
+  undo: () => void;
+  /** Update code block language */
+  updateCodeblockLang: (lang: string) => void;
+}
+/**
+ * Provide toolbar state and toolbar methods
+ * @param editor - Editor instance
+ * @returns Editor state and methods for toolbar functionality
+ */
+declare function useEditorState(editor?: IEditor): EditorState;
+//#endregion
+export { EditorState, useEditorState };