@farmzone/fz-react-ui 1.1.0 → 1.1.1

package/dist/index.cjs

@@ -30,6 +30,16 @@ var zustand = require('zustand');
 var middleware = require('zustand/middleware');
 var uuid = require('uuid');
 var heic2any = require('heic2any');
+var react = require('@tiptap/react');
+var core = require('@tiptap/core');
+var StarterKit = require('@tiptap/starter-kit');
+var TextAlign = require('@tiptap/extension-text-align');
+var extensionImage = require('@tiptap/extension-image');
+var extensionTextStyle = require('@tiptap/extension-text-style');
+var extensionHeading = require('@tiptap/extension-heading');
+var extensionPlaceholder = require('@tiptap/extension-placeholder');
+var Mention = require('@tiptap/extension-mention');
+var extensionTable = require('@tiptap/extension-table');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -63,6 +73,9 @@ var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var customParseFormat__default = /*#__PURE__*/_interopDefault(customParseFormat);
 var heic2any__default = /*#__PURE__*/_interopDefault(heic2any);
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+var TextAlign__default = /*#__PURE__*/_interopDefault(TextAlign);
+var Mention__default = /*#__PURE__*/_interopDefault(Mention);
 
 // src/lib/variants.ts
 function cn(...inputs) {
@@ -9597,6 +9610,1010 @@ function Sidebar(props) {
     }
   );
 }
+var LIGHT = {
+  toolbar: {
+    wrapper: "border-b border-gray-200 bg-white",
+    btnIdle: "text-gray-700 hover:bg-gray-100",
+    btnActive: "bg-indigo-100 text-indigo-600",
+    btnDestructive: "text-red-400 hover:bg-red-50 hover:text-red-600",
+    divider: "bg-gray-200",
+    rText: "text-gray-700"
+  },
+  fileList: {
+    wrapper: "border-t border-gray-100",
+    label: "text-gray-400",
+    item: "border border-gray-200 bg-white",
+    itemName: "text-gray-700",
+    itemSize: "text-gray-400",
+    removeBtn: "text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+  },
+  dropZone: {
+    overlay: "border-blue-400 bg-blue-50/80 text-blue-600",
+    subText: "text-blue-400"
+  },
+  mention: {
+    container: "border-gray-200 bg-white",
+    emptyText: "text-gray-400",
+    btnIdle: "text-gray-700 hover:bg-gray-100 hover:text-gray-900",
+    btnSelected: "bg-blue-100 text-blue-900",
+    badgeIdle: "bg-gray-100 text-gray-500",
+    badgeSelected: "bg-blue-200 text-blue-800"
+  }
+};
+var DARK = {
+  toolbar: {
+    wrapper: "border-b border-gray-800 bg-gray-900",
+    btnIdle: "text-gray-400 hover:bg-gray-800 hover:text-gray-200",
+    btnActive: "bg-indigo-900/50 text-indigo-400",
+    btnDestructive: "text-red-400 hover:bg-red-900/30 hover:text-red-300",
+    divider: "bg-gray-800",
+    rText: "text-gray-400"
+  },
+  fileList: {
+    wrapper: "border-t border-gray-800",
+    label: "text-gray-500",
+    item: "border border-gray-700 bg-gray-900",
+    itemName: "text-gray-300",
+    itemSize: "text-gray-500",
+    removeBtn: "text-gray-500 hover:bg-gray-800 hover:text-gray-300"
+  },
+  dropZone: {
+    overlay: "border-blue-500 bg-blue-950/80 text-blue-400",
+    subText: "text-blue-500"
+  },
+  mention: {
+    container: "border-gray-700 bg-gray-900",
+    emptyText: "text-gray-500",
+    btnIdle: "text-gray-300 hover:bg-gray-800 hover:text-gray-100",
+    btnSelected: "bg-blue-900/50 text-blue-200",
+    badgeIdle: "bg-gray-800 text-gray-400",
+    badgeSelected: "bg-blue-800 text-blue-200"
+  }
+};
+var RICH_EDITOR_THEMES = {
+  light: LIGHT,
+  dark: DARK
+};
+var RichEditorThemeContext = React6.createContext(LIGHT);
+var RichEditorThemeProvider = RichEditorThemeContext.Provider;
+function useRichEditorTheme() {
+  return React6.useContext(RichEditorThemeContext);
+}
+var MentionList = React6.forwardRef((props, ref) => {
+  const { items, command, loading, className } = props;
+  const theme = useRichEditorTheme();
+  const [selectedIndex, setSelectedIndex] = React6.useState(0);
+  const selectedRef = React6.useRef(null);
+  const selectItem = (index) => {
+    const item = items[index];
+    if (item) {
+      command({ id: item.id, label: item.label });
+    }
+  };
+  React6.useEffect(() => setSelectedIndex(0), [items]);
+  React6.useEffect(() => {
+    selectedRef.current?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  React6.useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((i) => (i + items.length - 1) % Math.max(items.length, 1));
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((i) => (i + 1) % Math.max(items.length, 1));
+        return true;
+      }
+      if (event.key === "Enter") {
+        selectItem(selectedIndex);
+        return true;
+      }
+      return false;
+    }
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rich-editor-mention-list z-50 overflow-hidden rounded-md border shadow-md", theme.mention.container, className), children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-3 py-2 text-sm", theme.mention.emptyText), children: "\uAC80\uC0C9 \uC911..." }) : items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-3 py-2 text-sm", theme.mention.emptyText), children: "\uAC80\uC0C9 \uACB0\uACFC \uC5C6\uC74C" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-48 overflow-y-auto p-1", children: items.map((item, index) => {
+    const isSelected = index === selectedIndex;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: isSelected ? selectedRef : null,
+        type: "button",
+        onClick: () => selectItem(index),
+        className: cn(
+          "flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 pr-4 text-sm text-left select-none transition-colors",
+          isSelected ? theme.mention.btnSelected : theme.mention.btnIdle
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold",
+                isSelected ? theme.mention.badgeSelected : theme.mention.badgeIdle
+              ),
+              children: item.label[0]?.toUpperCase()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+        ]
+      },
+      item.id
+    );
+  }) }) });
+});
+MentionList.displayName = "MentionList";
+
+// src/components/RichEditor/config/extensions.ts
+function buildExtensions(config) {
+  const { toolbar, mentionUsers = [], onMentionSearch, mentionClassName } = config;
+  const exts = [extensionTextStyle.TextStyleKit, buildMarkResetOnEnter()];
+  const headingLevels = toolbar.heading === false ? [] : Array.isArray(toolbar.heading) ? [...toolbar.heading] : [1, 2, 3, 4];
+  exts.push(
+    StarterKit__default.default.configure({
+      heading: false,
+      bold: toolbar.bold !== false ? {} : false,
+      italic: toolbar.italic !== false ? {} : false,
+      strike: toolbar.strike !== false ? {} : false,
+      code: toolbar.code !== false ? {} : false,
+      bulletList: toolbar.bulletList !== false ? { keepMarks: true, keepAttributes: false } : false,
+      orderedList: toolbar.orderedList !== false ? { keepMarks: true, keepAttributes: false } : false,
+      blockquote: toolbar.blockquote !== false ? {} : false,
+      codeBlock: toolbar.codeBlock !== false ? {
+        HTMLAttributes: {
+          class: "rounded-lg p-4 font-mono text-sm my-4"
+        }
+      } : false
+    })
+  );
+  if (headingLevels.length > 0) {
+    exts.push(extensionHeading.Heading.configure({ levels: headingLevels }));
+  }
+  if (toolbar.textAlign !== false) {
+    exts.push(buildCustomTextAlign());
+  }
+  if (toolbar.image) {
+    exts.push(buildCustomImage());
+  }
+  if (toolbar.placeholder !== void 0) {
+    exts.push(
+      extensionPlaceholder.Placeholder.configure({
+        placeholder: toolbar.placeholder,
+        showOnlyWhenEditable: true
+      })
+    );
+  }
+  if (toolbar.mention) {
+    const ALL_ITEM = { id: "__all__", label: "\uBAA8\uB450" };
+    exts.push(
+      Mention__default.default.configure({
+        HTMLAttributes: { class: "rich-editor-mention" },
+        suggestion: {
+          items: async ({ query }) => {
+            let items;
+            if (onMentionSearch) {
+              items = await onMentionSearch(query);
+            } else {
+              items = mentionUsers.filter(
+                (u) => u.label.toLowerCase().includes(query.toLowerCase())
+              );
+            }
+            return toolbar.mentionAll ? [ALL_ITEM, ...items] : items;
+          },
+          render: () => {
+            let component;
+            let unmount;
+            return {
+              onStart: (props) => {
+                component = new react.ReactRenderer(MentionList, {
+                  props: mentionClassName ? { ...props, className: mentionClassName } : props,
+                  editor: props.editor
+                });
+                unmount = props.mount(component.element);
+              },
+              onUpdate: (props) => {
+                component.updateProps(
+                  mentionClassName ? { ...props, className: mentionClassName } : props
+                );
+              },
+              onKeyDown: ({ event }) => {
+                return component.ref?.onKeyDown({ event }) ?? false;
+              },
+              onExit: () => {
+                unmount?.();
+                component.destroy();
+              }
+            };
+          }
+        }
+      })
+    );
+  }
+  if (toolbar.table) {
+    exts.push(
+      extensionTable.Table.configure({ resizable: true }),
+      extensionTable.TableRow,
+      extensionTable.TableHeader,
+      extensionTable.TableCell
+    );
+  }
+  return exts;
+}
+function buildCustomTextAlign() {
+  const CustomTextAlign = TextAlign__default.default.extend({
+    addKeyboardShortcuts() {
+      return {
+        Enter: ({ editor }) => {
+          const isAligned = editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" });
+          if (!isAligned) return false;
+          const {
+            state: {
+              selection: { $from }
+            }
+          } = editor;
+          const currentNode = $from.node($from.depth);
+          if (currentNode.textContent.trim() === "") {
+            editor.chain().focus().setTextAlign("left").run();
+            return true;
+          }
+          return false;
+        }
+      };
+    }
+  });
+  return CustomTextAlign.configure({
+    types: ["heading", "paragraph"],
+    alignments: ["left", "center", "right"],
+    defaultAlignment: "left"
+  });
+}
+function buildCustomImage() {
+  const CustomImage = extensionImage.Image.extend({
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: {
+          default: null,
+          renderHTML: (attrs) => attrs.width ? { width: attrs.width } : {}
+        },
+        height: {
+          default: null,
+          renderHTML: (attrs) => attrs.height ? { height: attrs.height } : {}
+        },
+        style: {
+          default: null,
+          renderHTML: (attrs) => attrs.style ? { style: attrs.style } : {}
+        }
+      };
+    }
+  });
+  return CustomImage.configure({
+    HTMLAttributes: { class: "max-w-full h-auto rounded-lg my-4" },
+    inline: false,
+    allowBase64: true
+  });
+}
+function buildMarkResetOnEnter() {
+  return core.Extension.create({
+    name: "markResetOnEnter",
+    priority: 200,
+    addKeyboardShortcuts() {
+      return {
+        Enter: ({ editor }) => {
+          if (editor.isActive("heading") || editor.isActive("bulletList") || editor.isActive("orderedList") || editor.isActive("blockquote") || editor.isActive("codeBlock")) {
+            return false;
+          }
+          const { $from } = editor.state.selection;
+          const currentNode = $from.node($from.depth);
+          if (currentNode.textContent.trim() === "") return false;
+          const hasMarks = editor.isActive("bold") || editor.isActive("italic") || editor.isActive("strike") || editor.isActive("code");
+          const hasNonDefaultAlign = editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" });
+          if (!hasMarks && !hasNonDefaultAlign) return false;
+          editor.chain().splitBlock().unsetAllMarks().setTextAlign("left").run();
+          return true;
+        }
+      };
+    }
+  });
+}
+
+// src/components/RichEditor/config/keyboardHandlers.ts
+function createKeyboardHandler(codeBlockEmptyEnterRef, onSubmitRef) {
+  return (view, event) => {
+    const { editor } = view;
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+      onSubmitRef?.current?.();
+      return true;
+    }
+    if (event.key !== "Enter") return false;
+    if (!editor) return false;
+    const { state } = view;
+    const { selection } = state;
+    const { $from } = selection;
+    if (editor.isActive("heading")) {
+      event.preventDefault();
+      editor.chain().focus().splitBlock().setParagraph().run();
+      return true;
+    }
+    if (editor.isActive("blockquote")) {
+      let blockquoteNode = null;
+      for (let i = $from.depth; i >= 0; i--) {
+        if ($from.node(i).type.name === "blockquote") {
+          blockquoteNode = $from.node(i);
+          break;
+        }
+      }
+      const currentText = blockquoteNode?.textContent.trim() || "";
+      if (currentText === "") {
+        event.preventDefault();
+        editor.chain().focus().toggleBlockquote().setParagraph().run();
+        return true;
+      }
+    }
+    if (editor.isActive("codeBlock")) {
+      let codeBlockNode = null;
+      for (let i = $from.depth; i >= 0; i--) {
+        const node = $from.node(i);
+        if (node.type.name === "codeBlock") {
+          codeBlockNode = node;
+          break;
+        }
+      }
+      if (codeBlockNode) {
+        const codeBlockText = codeBlockNode.textContent.trim();
+        if (codeBlockText === "") {
+          if (codeBlockEmptyEnterRef.current) {
+            event.preventDefault();
+            codeBlockEmptyEnterRef.current = false;
+            editor.chain().focus().toggleCodeBlock().setParagraph().run();
+            return true;
+          }
+          codeBlockEmptyEnterRef.current = true;
+          return false;
+        }
+        codeBlockEmptyEnterRef.current = false;
+      }
+    } else {
+      codeBlockEmptyEnterRef.current = false;
+    }
+    if (editor.isActive("bulletList")) {
+      const currentNode = $from.node($from.depth);
+      if (currentNode.textContent.trim() === "") {
+        event.preventDefault();
+        editor.chain().focus().lift("bulletList").setParagraph().run();
+        return true;
+      }
+    }
+    if (editor.isActive("orderedList")) {
+      const currentNode = $from.node($from.depth);
+      if (currentNode.textContent.trim() === "") {
+        event.preventDefault();
+        editor.chain().focus().lift("orderedList").setParagraph().run();
+        return true;
+      }
+    }
+    return false;
+  };
+}
+
+// src/components/RichEditor/hooks/useRichEditor.ts
+var DEFAULT_EDITOR_CLASS = "focus:outline-none";
+function useRichEditor(options = {}) {
+  const {
+    defaultValue,
+    toolbar = {},
+    mentionUsers = [],
+    onMentionSearch,
+    mentionClassName,
+    editable = true,
+    autofocus,
+    editorClassName,
+    additionalExtensions = [],
+    onChange,
+    onSubmit
+  } = options;
+  const codeBlockEmptyEnterRef = React6.useRef(false);
+  const onChangeRef = React6.useRef(onChange);
+  onChangeRef.current = onChange;
+  const onSubmitRef = React6.useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const extensions = [
+    ...buildExtensions({
+      toolbar,
+      mentionUsers,
+      onMentionSearch,
+      mentionClassName
+    }),
+    ...additionalExtensions
+  ];
+  const editor = react.useEditor({
+    extensions,
+    autofocus: autofocus ?? false,
+    editable,
+    editorProps: {
+      attributes: {
+        class: cn(DEFAULT_EDITOR_CLASS, editorClassName)
+      },
+      handleKeyDown: createKeyboardHandler(codeBlockEmptyEnterRef, onSubmitRef)
+    },
+    content: defaultValue ?? "",
+    onUpdate: ({ editor: editor2 }) => {
+      onChangeRef.current?.(editor2.getHTML());
+    }
+  });
+  React6.useEffect(() => {
+    if (editor) editor.setEditable(editable);
+  }, [editor, editable]);
+  return {
+    editor,
+    getHTML: () => editor?.getHTML() ?? "",
+    getJSON: () => editor?.getJSON() ?? {},
+    setContent: (html) => {
+      editor?.commands.setContent(html);
+    },
+    clearContent: () => {
+      editor?.commands.clearContent();
+    },
+    focus: () => {
+      editor?.commands.focus();
+    },
+    isEmpty: editor?.isEmpty ?? true
+    // attachments,
+    // removeAttachment,
+  };
+}
+var MAX_COLS = 8;
+var MAX_ROWS = 8;
+function TableGridPicker({ editor, onClose }) {
+  const [hover, setHover] = React6.useState({ col: 0, row: 0 });
+  const handleSelect = (col, row) => {
+    editor.chain().focus().insertTable({ rows: row, cols: col, withHeaderRow: true }).run();
+    onClose();
+  };
+  const cols = hover.col || 1;
+  const rows = hover.row || 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "grid gap-1",
+        style: { gridTemplateColumns: `repeat(${MAX_COLS}, 1fr)` },
+        onMouseLeave: () => setHover({ col: 0, row: 0 }),
+        children: Array.from(
+          { length: MAX_ROWS },
+          (_, rowIdx) => Array.from({ length: MAX_COLS }, (_2, colIdx) => {
+            const row = rowIdx + 1;
+            const col = colIdx + 1;
+            const isHighlighted = col <= hover.col && row <= hover.row;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${col}\uC5F4 ${row}\uD589 \uD14C\uC774\uBE14`,
+                className: cn(
+                  "size-4 rounded border transition-colors",
+                  isHighlighted ? "border-blue-400 bg-blue-100" : "border-gray-200 bg-gray-50"
+                ),
+                onMouseEnter: () => setHover({ col, row }),
+                onClick: () => handleSelect(col, row)
+              },
+              `${row}-${col}`
+            );
+          })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-center gap-1.5 text-xs text-gray-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ColIcon, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 text-center font-medium text-gray-700", children: cols }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "\xD7" }),
+      /* @__PURE__ */ jsxRuntime.jsx(RowIcon, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 text-center font-medium text-gray-700", children: rows })
+    ] })
+  ] });
+}
+function ColIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", className: "text-gray-400", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "1", width: "5", height: "12", rx: "1", fill: "currentColor", opacity: "0.3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "1", width: "5", height: "12", rx: "1", fill: "currentColor", opacity: "0.15" })
+  ] });
+}
+function RowIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", className: "text-gray-400", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "1", width: "12", height: "5", rx: "1", fill: "currentColor", opacity: "0.3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "8", width: "12", height: "5", rx: "1", fill: "currentColor", opacity: "0.15" })
+  ] });
+}
+function ToolbarButton(props) {
+  const { onMouseDown, active, disabled, title, tooltip, variant = "default", children } = props;
+  const theme = useRichEditorTheme();
+  const btn = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onMouseDown,
+      disabled,
+      "aria-label": title,
+      className: cn(
+        "flex h-8 w-8 cursor-pointer items-center justify-center rounded text-sm transition-colors",
+        "disabled:cursor-not-allowed disabled:opacity-40",
+        variant === "destructive" ? theme.toolbar.btnDestructive : active ? theme.toolbar.btnActive : theme.toolbar.btnIdle
+      ),
+      children
+    }
+  );
+  if (!tooltip) return btn;
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { content: tooltip, position: "bottom", asChild: true, children: btn });
+}
+function Divider() {
+  const theme = useRichEditorTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-1 h-6 w-px", theme.toolbar.divider) });
+}
+function cmd(fn) {
+  return (e) => {
+    e.preventDefault();
+    fn();
+  };
+}
+function RichEditorToolbar(props) {
+  const { editor, toolbar = {}, className } = props;
+  const theme = useRichEditorTheme();
+  const [tablePickerOpen, setTablePickerOpen] = React6.useState(false);
+  const stateOrNull = react.useEditorState({
+    editor,
+    selector: ({ editor: e }) => ({
+      isH1: e?.isActive("heading", { level: 1 }) ?? false,
+      isH2: e?.isActive("heading", { level: 2 }) ?? false,
+      isH3: e?.isActive("heading", { level: 3 }) ?? false,
+      isH4: e?.isActive("heading", { level: 4 }) ?? false,
+      isBold: e?.isActive("bold") ?? false,
+      isItalic: e?.isActive("italic") ?? false,
+      isStrike: e?.isActive("strike") ?? false,
+      isCode: e?.isActive("code") ?? false,
+      isAlignLeft: e?.isActive({ textAlign: "left" }) ?? false,
+      isAlignCenter: e?.isActive({ textAlign: "center" }) ?? false,
+      isAlignRight: e?.isActive({ textAlign: "right" }) ?? false,
+      isBulletList: e?.isActive("bulletList") ?? false,
+      isOrderedList: e?.isActive("orderedList") ?? false,
+      isBlockquote: e?.isActive("blockquote") ?? false,
+      isCodeBlock: e?.isActive("codeBlock") ?? false,
+      isTable: e?.isActive("table") ?? false
+    })
+  });
+  if (!editor) return null;
+  const state = stateOrNull ?? {
+    isH1: false,
+    isH2: false,
+    isH3: false,
+    isH4: false,
+    isBold: false,
+    isItalic: false,
+    isStrike: false,
+    isCode: false,
+    isAlignLeft: false,
+    isAlignCenter: false,
+    isAlignRight: false,
+    isBulletList: false,
+    isOrderedList: false,
+    isBlockquote: false,
+    isCodeBlock: false,
+    isTable: false
+  };
+  const showHeadingGroup = toolbar.heading !== false && (Array.isArray(toolbar.heading) ? toolbar.heading.length > 0 : true);
+  const showInlineGroup = toolbar.bold !== false || toolbar.italic !== false || toolbar.strike !== false || toolbar.code !== false;
+  const showAlignGroup = toolbar.textAlign !== false;
+  const showListGroup = toolbar.bulletList !== false || toolbar.orderedList !== false || toolbar.blockquote !== false || toolbar.codeBlock !== false;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center gap-0.5 p-2",
+        theme.toolbar.wrapper,
+        className
+      ),
+      children: [
+        showHeadingGroup && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          (!Array.isArray(toolbar.heading) || toolbar.heading.includes(1)) && /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+              ),
+              active: state.isH1,
+              title: "\uC81C\uBAA9 1 (H1)",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading1, { size: 16 })
+            }
+          ),
+          (!Array.isArray(toolbar.heading) || toolbar.heading.includes(2)) && /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+              ),
+              active: state.isH2,
+              title: "\uC81C\uBAA9 2 (H2)",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading2, { size: 16 })
+            }
+          ),
+          (!Array.isArray(toolbar.heading) || toolbar.heading.includes(3)) && /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+              ),
+              active: state.isH3,
+              title: "\uC81C\uBAA9 3 (H3)",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading3, { size: 16 })
+            }
+          ),
+          (!Array.isArray(toolbar.heading) || toolbar.heading.includes(4)) && /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleHeading({ level: 4 }).run()
+              ),
+              active: state.isH4,
+              title: "\uC81C\uBAA9 4 (H4)",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading4, { size: 16 })
+            }
+          ),
+          showInlineGroup && /* @__PURE__ */ jsxRuntime.jsx(Divider, {})
+        ] }),
+        toolbar.bold !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            onMouseDown: cmd(() => editor.chain().focus().toggleBold().run()),
+            active: state.isBold,
+            title: "\uAD75\uAC8C (Ctrl+B)",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { size: 16 })
+          }
+        ),
+        toolbar.italic !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            onMouseDown: cmd(() => editor.chain().focus().toggleItalic().run()),
+            active: state.isItalic,
+            title: "\uAE30\uC6B8\uC784 (Ctrl+I)",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { size: 16 })
+          }
+        ),
+        toolbar.strike !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            onMouseDown: cmd(() => editor.chain().focus().toggleStrike().run()),
+            active: state.isStrike,
+            title: "\uCDE8\uC18C\uC120",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, { size: 16 })
+          }
+        ),
+        toolbar.code !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            onMouseDown: cmd(() => editor.chain().focus().toggleCode().run()),
+            active: state.isCode,
+            title: "\uC778\uB77C\uC778 \uCF54\uB4DC",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { size: 16 })
+          }
+        ),
+        showAlignGroup && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showInlineGroup && /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().setTextAlign("left").run()
+              ),
+              active: state.isAlignLeft,
+              title: "\uC67C\uCABD \uC815\uB82C",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().setTextAlign("center").run()
+              ),
+              active: state.isAlignCenter,
+              title: "\uAC00\uC6B4\uB370 \uC815\uB82C",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenter, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().setTextAlign("right").run()
+              ),
+              active: state.isAlignRight,
+              title: "\uC624\uB978\uCABD \uC815\uB82C",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignRight, { size: 16 })
+            }
+          )
+        ] }),
+        showListGroup && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+          toolbar.bulletList !== false && /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleBulletList().run()
+              ),
+              active: state.isBulletList,
+              title: "\uAE00\uBA38\uB9AC \uAE30\uD638",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 16 })
+            }
+          ),
+          toolbar.orderedList !== false && /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleOrderedList().run()
+              ),
+              active: state.isOrderedList,
+              title: "\uBC88\uD638 \uBAA9\uB85D",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { size: 16 })
+            }
+          ),
+          toolbar.blockquote !== false && /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleBlockquote().run()
+              ),
+              active: state.isBlockquote,
+              title: "\uC778\uC6A9\uAD6C",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { size: 16 })
+            }
+          ),
+          toolbar.codeBlock !== false && /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleCodeBlock().run()
+              ),
+              active: state.isCodeBlock,
+              title: "\uCF54\uB4DC \uBE14\uB85D",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode, { size: 16 })
+            }
+          )
+        ] }),
+        toolbar.table && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: tablePickerOpen, onOpenChange: setTablePickerOpen, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "\uD14C\uC774\uBE14 \uC0BD\uC785",
+                className: cn(
+                  "flex h-8 w-8 cursor-pointer items-center justify-center rounded text-sm transition-colors",
+                  "disabled:cursor-not-allowed disabled:opacity-40",
+                  state.isTable ? theme.toolbar.btnActive : theme.toolbar.btnIdle
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", position: "bottom", children: editor && /* @__PURE__ */ jsxRuntime.jsx(TableGridPicker, { editor, onClose: () => setTablePickerOpen(false) }) })
+          ] }),
+          state.isTable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ToolbarButton,
+              {
+                onMouseDown: cmd(() => editor.chain().focus().addRowAfter().run()),
+                title: "\uC544\uB798\uC5D0 \uD589 \uCD94\uAC00",
+                tooltip: "\uD589 \uCD94\uAC00",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ToolbarButton,
+              {
+                onMouseDown: cmd(() => {
+                  editor.chain().focus().command(({ tr, dispatch, state: state2 }) => {
+                    const { $anchor } = state2.selection;
+                    let tableNode = null;
+                    let tableStart = 0;
+                    for (let depth = $anchor.depth; depth > 0; depth--) {
+                      const node = $anchor.node(depth);
+                      if (node.type.name === "table") {
+                        tableNode = node;
+                        tableStart = $anchor.start(depth);
+                        break;
+                      }
+                    }
+                    if (!tableNode) return false;
+                    let lastRowStart = 0;
+                    let lastRowSize = 0;
+                    let rowCount = 0;
+                    tableNode.forEach((child, offset) => {
+                      if (child.type.name !== "tableRow") return;
+                      rowCount++;
+                      lastRowStart = tableStart + offset;
+                      lastRowSize = child.nodeSize;
+                    });
+                    if (rowCount <= 1) return false;
+                    if (dispatch) {
+                      dispatch(tr.delete(lastRowStart, lastRowStart + lastRowSize));
+                    }
+                    return true;
+                  }).run();
+                }),
+                title: "\uB9C8\uC9C0\uB9C9 \uD589 \uC0AD\uC81C",
+                tooltip: "\uD589 \uC0AD\uC81C",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ToolbarButton,
+              {
+                onMouseDown: cmd(() => editor.chain().focus().addColumnAfter().run()),
+                title: "\uC624\uB978\uCABD\uC5D0 \uC5F4 \uCD94\uAC00",
+                tooltip: "\uC5F4 \uCD94\uAC00",
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-bold leading-none", theme.toolbar.rText), children: "R+" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ToolbarButton,
+              {
+                onMouseDown: cmd(() => editor.chain().focus().deleteColumn().run()),
+                title: "\uD604\uC7AC \uC5F4 \uC0AD\uC81C",
+                tooltip: "\uC5F4 \uC0AD\uC81C",
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-bold leading-none", theme.toolbar.rText), children: "R-" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ToolbarButton,
+              {
+                onMouseDown: cmd(() => editor.chain().focus().deleteTable().run()),
+                title: "\uD14C\uC774\uBE14 \uC0AD\uC81C",
+                tooltip: "\uD14C\uC774\uBE14 \uC0AD\uC81C",
+                variant: "destructive",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 14 })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULT_TOOLBAR = {
+  heading: [1, 2, 3, 4],
+  bold: true,
+  italic: true,
+  strike: true,
+  textAlign: true,
+  bulletList: true,
+  orderedList: true,
+  blockquote: true,
+  code: true
+};
+function RichEditorContent(props) {
+  const { editor, className, editorClassName, minHeight, maxHeight } = props;
+  const style = {};
+  if (minHeight) style.minHeight = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
+  if (maxHeight) {
+    style.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+    style.overflowY = "auto";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rich-editor-content", className), style, children: /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor, className: cn("h-full", editorClassName) }) });
+}
+var RichEditor = React6.forwardRef(function RichEditor2({
+  value,
+  defaultValue,
+  onChange,
+  toolbar = true,
+  mentionUsers,
+  onMentionSearch,
+  additionalExtensions,
+  onSubmit,
+  theme = "light",
+  placeholder,
+  minHeight,
+  maxHeight,
+  className,
+  bodyClassName,
+  editorClassName,
+  mentionClassName,
+  themeTokens,
+  editable = true,
+  autofocus
+}, ref) {
+  const showToolbar = toolbar !== false;
+  const toolbarOptions = typeof toolbar === "object" ? toolbar : {};
+  const activeToolbar = {
+    ...DEFAULT_TOOLBAR,
+    ...toolbarOptions,
+    ...placeholder !== void 0 && !toolbarOptions.placeholder ? { placeholder } : {}
+  };
+  const isInternalChangeRef = React6.useRef(false);
+  const handleChange = React6.useCallback(
+    (html) => {
+      isInternalChangeRef.current = true;
+      onChange?.(html);
+    },
+    [onChange]
+  );
+  const { editor } = useRichEditor({
+    defaultValue: value ?? defaultValue,
+    toolbar: activeToolbar,
+    mentionUsers,
+    onMentionSearch,
+    mentionClassName,
+    additionalExtensions,
+    editable,
+    autofocus,
+    editorClassName,
+    onChange: handleChange,
+    onSubmit
+  });
+  React6.useEffect(() => {
+    if (!editor || value === void 0) return;
+    if (isInternalChangeRef.current) {
+      isInternalChangeRef.current = false;
+      return;
+    }
+    if (editor.getHTML() !== value) {
+      editor.commands.setContent(value, { emitUpdate: false });
+    }
+  }, [value, editor]);
+  React6.useImperativeHandle(
+    ref,
+    () => ({
+      getHTML: () => editor?.getHTML() ?? "",
+      getJSON: () => editor?.getJSON() ?? {},
+      setContent: (html) => {
+        editor?.commands.setContent(html);
+      },
+      clearContent: () => {
+        editor?.commands.clearContent();
+      },
+      focus: () => {
+        editor?.commands.focus();
+      },
+      get isEmpty() {
+        return editor?.isEmpty ?? true;
+      },
+      editor
+    }),
+    [editor]
+  );
+  const isToolbarVisible = showToolbar && editable;
+  const baseTheme = RICH_EDITOR_THEMES[theme];
+  const resolvedTheme = themeTokens ? {
+    ...baseTheme,
+    ...themeTokens.toolbar && { toolbar: { ...baseTheme.toolbar, ...themeTokens.toolbar } },
+    ...themeTokens.mention && { mention: { ...baseTheme.mention, ...themeTokens.mention } }
+  } : baseTheme;
+  return /* @__PURE__ */ jsxRuntime.jsx(RichEditorThemeProvider, { value: resolvedTheme, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("overflow-hidden rounded-lg border border-gray-200 shadow-sm flex flex-col relative", className),
+      "data-rich-editor-theme": theme,
+      children: [
+        isToolbarVisible && /* @__PURE__ */ jsxRuntime.jsx(
+          RichEditorToolbar,
+          {
+            editor,
+            toolbar: activeToolbar
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RichEditorContent,
+          {
+            editor,
+            className: cn("p-4", bodyClassName),
+            minHeight,
+            maxHeight
+          }
+        )
+      ]
+    }
+  ) });
+});
+var RichEditor_default = RichEditor;
 function useDetailController(params = {}) {
   const { mode: controlledMode, onModeChange } = params;
   const [internalMode, setInternalMode] = React6.useState("read");
@@ -10394,6 +11411,9 @@ exports.PopoverTitle = PopoverTitle;
 exports.PopoverTrigger = PopoverTrigger;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.RichEditor = RichEditor_default;
+exports.RichEditorContent = RichEditorContent;
+exports.RichEditorToolbar = RichEditorToolbar;
 exports.ScrollArea = ScrollArea_default;
 exports.ScrollBar = ScrollBar;
 exports.SearchAddress = SearchAddress;
@@ -10445,6 +11465,7 @@ exports.useFilePreviewViewer = useFilePreviewViewer;
 exports.useModal = useModal;
 exports.useMultiTabStore = useMultiTabStore;
 exports.useParams = useParams;
+exports.useRichEditor = useRichEditor;
 exports.useScrollToTop = useScrollToTop;
 exports.useStableImageSrc = useStableImageSrc;
 exports.useToast = useToast;