@farmzone/fz-react-ui 1.0.23 → 1.1.1

package/dist/index.js

@@ -3,10 +3,10 @@ import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React6 from 'react';
-import React6__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, memo, createContext, useMemo, useContext, useId, useLayoutEffect, useDeferredValue, Fragment as Fragment$1 } from 'react';
+import React6__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, memo, createContext, useContext, useMemo, useId, useLayoutEffect, useDeferredValue, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { ChevronLeft, ChevronRight, FileText, ZoomIn, ZoomOut, RotateCcw, RotateCw, Download, X, Trash2, Plus, EyeOff, Eye, Minus, Check, CircleX, ChevronDown, Calendar, CircleIcon, ChevronUp, Search, TriangleAlert, Info, Pencil, BadgePlus, FileSearch2, Upload, FileUp, PanelRightClose, PanelLeftClose, ChevronFirst, ChevronLast } from 'lucide-react';
+import { ChevronLeft, ChevronRight, FileText, ZoomIn, ZoomOut, RotateCcw, RotateCw, Download, X, Heading1, Heading2, Heading3, Heading4, Bold, Italic, Strikethrough, Code, AlignLeft, AlignCenter, AlignRight, List, ListOrdered, Quote, FileCode, Table as Table$1, Plus, Minus, Trash2, EyeOff, Eye, Check, CircleX, ChevronDown, Calendar, CircleIcon, ChevronUp, Search, TriangleAlert, Info, Pencil, BadgePlus, FileSearch2, Upload, FileUp, PanelRightClose, PanelLeftClose, ChevronFirst, ChevronLast } from 'lucide-react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as RadixSlider from '@radix-ui/react-slider';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -29,6 +29,16 @@ import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import { v4 } from 'uuid';
 import heic2any from 'heic2any';
+import { useEditor, useEditorState, EditorContent, ReactRenderer } from '@tiptap/react';
+import { Extension } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import TextAlign from '@tiptap/extension-text-align';
+import { Image } from '@tiptap/extension-image';
+import { TextStyleKit } from '@tiptap/extension-text-style';
+import { Heading } from '@tiptap/extension-heading';
+import { Placeholder } from '@tiptap/extension-placeholder';
+import Mention from '@tiptap/extension-mention';
+import { Table as Table$2, TableRow, TableHeader as TableHeader$1, TableCell } from '@tiptap/extension-table';
 
 // src/lib/variants.ts
 function cn(...inputs) {
@@ -2370,18 +2380,19 @@ function useCalendarState(props) {
 var CALENDAR_GAP = 4;
 var CALENDAR_MIN_WIDTH = 280;
 function useFloatingCalendarPosition(anchorRef, isOpen2, placement, align = "start") {
-  const [style, setStyle] = useState({ visibility: "hidden" });
+  const [style, setStyle] = useState({ position: "fixed", visibility: "hidden" });
   useLayoutEffect(() => {
     if (!isOpen2 || !anchorRef.current) return;
     const update = () => {
       const rect = anchorRef.current.getBoundingClientRect();
-      const left = align === "end" ? Math.max(8, rect.right - CALENDAR_MIN_WIDTH) : rect.left;
       const base = {
         position: "fixed",
-        left,
         zIndex: CALENDAR_PORTAL_Z_INDEX,
         minWidth: CALENDAR_MIN_WIDTH,
-        visibility: "visible"
+        visibility: "visible",
+        ...align === "end" ? { left: rect.left } : { right: window.innerWidth - rect.right }
+        // ? { right: window.innerWidth - rect.right }
+        // : { left: rect.left }),
       };
       if (placement === "top") {
         setStyle({ ...base, bottom: window.innerHeight - rect.top + CALENDAR_GAP });
@@ -9562,6 +9573,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 = createContext(LIGHT);
+var RichEditorThemeProvider = RichEditorThemeContext.Provider;
+function useRichEditorTheme() {
+  return useContext(RichEditorThemeContext);
+}
+var MentionList = forwardRef((props, ref) => {
+  const { items, command, loading, className } = props;
+  const theme = useRichEditorTheme();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const selectedRef = useRef(null);
+  const selectItem = (index) => {
+    const item = items[index];
+    if (item) {
+      command({ id: item.id, label: item.label });
+    }
+  };
+  useEffect(() => setSelectedIndex(0), [items]);
+  useEffect(() => {
+    selectedRef.current?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  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__ */ jsx("div", { className: cn("rich-editor-mention-list z-50 overflow-hidden rounded-md border shadow-md", theme.mention.container, className), children: loading ? /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2 text-sm", theme.mention.emptyText), children: "\uAC80\uC0C9 \uC911..." }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2 text-sm", theme.mention.emptyText), children: "\uAC80\uC0C9 \uACB0\uACFC \uC5C6\uC74C" }) : /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto p-1", children: items.map((item, index) => {
+    const isSelected = index === selectedIndex;
+    return /* @__PURE__ */ 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__ */ 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__ */ 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 = [TextStyleKit, buildMarkResetOnEnter()];
+  const headingLevels = toolbar.heading === false ? [] : Array.isArray(toolbar.heading) ? [...toolbar.heading] : [1, 2, 3, 4];
+  exts.push(
+    StarterKit.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(Heading.configure({ levels: headingLevels }));
+  }
+  if (toolbar.textAlign !== false) {
+    exts.push(buildCustomTextAlign());
+  }
+  if (toolbar.image) {
+    exts.push(buildCustomImage());
+  }
+  if (toolbar.placeholder !== void 0) {
+    exts.push(
+      Placeholder.configure({
+        placeholder: toolbar.placeholder,
+        showOnlyWhenEditable: true
+      })
+    );
+  }
+  if (toolbar.mention) {
+    const ALL_ITEM = { id: "__all__", label: "\uBAA8\uB450" };
+    exts.push(
+      Mention.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 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(
+      Table$2.configure({ resizable: true }),
+      TableRow,
+      TableHeader$1,
+      TableCell
+    );
+  }
+  return exts;
+}
+function buildCustomTextAlign() {
+  const CustomTextAlign = TextAlign.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 = 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 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 = useRef(false);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const extensions = [
+    ...buildExtensions({
+      toolbar,
+      mentionUsers,
+      onMentionSearch,
+      mentionClassName
+    }),
+    ...additionalExtensions
+  ];
+  const editor = 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());
+    }
+  });
+  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] = 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__ */ jsxs("div", { className: "p-1.5", children: [
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "mt-2 flex items-center justify-center gap-1.5 text-xs text-gray-500", children: [
+      /* @__PURE__ */ jsx(ColIcon, {}),
+      /* @__PURE__ */ jsx("span", { className: "w-4 text-center font-medium text-gray-700", children: cols }),
+      /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\xD7" }),
+      /* @__PURE__ */ jsx(RowIcon, {}),
+      /* @__PURE__ */ jsx("span", { className: "w-4 text-center font-medium text-gray-700", children: rows })
+    ] })
+  ] });
+}
+function ColIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", className: "text-gray-400", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "5", height: "12", rx: "1", fill: "currentColor", opacity: "0.3" }),
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "1", width: "5", height: "12", rx: "1", fill: "currentColor", opacity: "0.15" })
+  ] });
+}
+function RowIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", className: "text-gray-400", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "12", height: "5", rx: "1", fill: "currentColor", opacity: "0.3" }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsx(Tooltip2, { content: tooltip, position: "bottom", asChild: true, children: btn });
+}
+function Divider() {
+  const theme = useRichEditorTheme();
+  return /* @__PURE__ */ 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] = useState(false);
+  const stateOrNull = 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__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center gap-0.5 p-2",
+        theme.toolbar.wrapper,
+        className
+      ),
+      children: [
+        showHeadingGroup && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (!Array.isArray(toolbar.heading) || toolbar.heading.includes(1)) && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+              ),
+              active: state.isH1,
+              title: "\uC81C\uBAA9 1 (H1)",
+              children: /* @__PURE__ */ jsx(Heading1, { size: 16 })
+            }
+          ),
+          (!Array.isArray(toolbar.heading) || toolbar.heading.includes(2)) && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+              ),
+              active: state.isH2,
+              title: "\uC81C\uBAA9 2 (H2)",
+              children: /* @__PURE__ */ jsx(Heading2, { size: 16 })
+            }
+          ),
+          (!Array.isArray(toolbar.heading) || toolbar.heading.includes(3)) && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+              ),
+              active: state.isH3,
+              title: "\uC81C\uBAA9 3 (H3)",
+              children: /* @__PURE__ */ jsx(Heading3, { size: 16 })
+            }
+          ),
+          (!Array.isArray(toolbar.heading) || toolbar.heading.includes(4)) && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleHeading({ level: 4 }).run()
+              ),
+              active: state.isH4,
+              title: "\uC81C\uBAA9 4 (H4)",
+              children: /* @__PURE__ */ jsx(Heading4, { size: 16 })
+            }
+          ),
+          showInlineGroup && /* @__PURE__ */ jsx(Divider, {})
+        ] }),
+        toolbar.bold !== false && /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onMouseDown: cmd(() => editor.chain().focus().toggleBold().run()),
+            active: state.isBold,
+            title: "\uAD75\uAC8C (Ctrl+B)",
+            children: /* @__PURE__ */ jsx(Bold, { size: 16 })
+          }
+        ),
+        toolbar.italic !== false && /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onMouseDown: cmd(() => editor.chain().focus().toggleItalic().run()),
+            active: state.isItalic,
+            title: "\uAE30\uC6B8\uC784 (Ctrl+I)",
+            children: /* @__PURE__ */ jsx(Italic, { size: 16 })
+          }
+        ),
+        toolbar.strike !== false && /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onMouseDown: cmd(() => editor.chain().focus().toggleStrike().run()),
+            active: state.isStrike,
+            title: "\uCDE8\uC18C\uC120",
+            children: /* @__PURE__ */ jsx(Strikethrough, { size: 16 })
+          }
+        ),
+        toolbar.code !== false && /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onMouseDown: cmd(() => editor.chain().focus().toggleCode().run()),
+            active: state.isCode,
+            title: "\uC778\uB77C\uC778 \uCF54\uB4DC",
+            children: /* @__PURE__ */ jsx(Code, { size: 16 })
+          }
+        ),
+        showAlignGroup && /* @__PURE__ */ jsxs(Fragment, { children: [
+          showInlineGroup && /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().setTextAlign("left").run()
+              ),
+              active: state.isAlignLeft,
+              title: "\uC67C\uCABD \uC815\uB82C",
+              children: /* @__PURE__ */ jsx(AlignLeft, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().setTextAlign("center").run()
+              ),
+              active: state.isAlignCenter,
+              title: "\uAC00\uC6B4\uB370 \uC815\uB82C",
+              children: /* @__PURE__ */ jsx(AlignCenter, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().setTextAlign("right").run()
+              ),
+              active: state.isAlignRight,
+              title: "\uC624\uB978\uCABD \uC815\uB82C",
+              children: /* @__PURE__ */ jsx(AlignRight, { size: 16 })
+            }
+          )
+        ] }),
+        showListGroup && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          toolbar.bulletList !== false && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleBulletList().run()
+              ),
+              active: state.isBulletList,
+              title: "\uAE00\uBA38\uB9AC \uAE30\uD638",
+              children: /* @__PURE__ */ jsx(List, { size: 16 })
+            }
+          ),
+          toolbar.orderedList !== false && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleOrderedList().run()
+              ),
+              active: state.isOrderedList,
+              title: "\uBC88\uD638 \uBAA9\uB85D",
+              children: /* @__PURE__ */ jsx(ListOrdered, { size: 16 })
+            }
+          ),
+          toolbar.blockquote !== false && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleBlockquote().run()
+              ),
+              active: state.isBlockquote,
+              title: "\uC778\uC6A9\uAD6C",
+              children: /* @__PURE__ */ jsx(Quote, { size: 16 })
+            }
+          ),
+          toolbar.codeBlock !== false && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onMouseDown: cmd(
+                () => editor.chain().focus().toggleCodeBlock().run()
+              ),
+              active: state.isCodeBlock,
+              title: "\uCF54\uB4DC \uBE14\uB85D",
+              children: /* @__PURE__ */ jsx(FileCode, { size: 16 })
+            }
+          )
+        ] }),
+        toolbar.table && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs(Popover, { open: tablePickerOpen, onOpenChange: setTablePickerOpen, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(Table$1, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", position: "bottom", children: editor && /* @__PURE__ */ jsx(TableGridPicker, { editor, onClose: () => setTablePickerOpen(false) }) })
+          ] }),
+          state.isTable && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                onMouseDown: cmd(() => editor.chain().focus().addRowAfter().run()),
+                title: "\uC544\uB798\uC5D0 \uD589 \uCD94\uAC00",
+                tooltip: "\uD589 \uCD94\uAC00",
+                children: /* @__PURE__ */ jsx(Plus, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(Minus, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                onMouseDown: cmd(() => editor.chain().focus().addColumnAfter().run()),
+                title: "\uC624\uB978\uCABD\uC5D0 \uC5F4 \uCD94\uAC00",
+                tooltip: "\uC5F4 \uCD94\uAC00",
+                children: /* @__PURE__ */ jsx("span", { className: cn("text-xs font-bold leading-none", theme.toolbar.rText), children: "R+" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                onMouseDown: cmd(() => editor.chain().focus().deleteColumn().run()),
+                title: "\uD604\uC7AC \uC5F4 \uC0AD\uC81C",
+                tooltip: "\uC5F4 \uC0AD\uC81C",
+                children: /* @__PURE__ */ jsx("span", { className: cn("text-xs font-bold leading-none", theme.toolbar.rText), children: "R-" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ 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__ */ jsx(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__ */ jsx("div", { className: cn("rich-editor-content", className), style, children: /* @__PURE__ */ jsx(EditorContent, { editor, className: cn("h-full", editorClassName) }) });
+}
+var RichEditor = 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 = useRef(false);
+  const handleChange = 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
+  });
+  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]);
+  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__ */ jsx(RichEditorThemeProvider, { value: resolvedTheme, children: /* @__PURE__ */ 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__ */ jsx(
+          RichEditorToolbar,
+          {
+            editor,
+            toolbar: activeToolbar
+          }
+        ),
+        /* @__PURE__ */ 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] = useState("read");
@@ -10319,6 +11334,6 @@ function useParams(initialParams) {
   };
 }
 
-export { ArrowIcon, Badge, BaseUploader, BreadCrumb, Button, Carousel_default as Carousel, Checkbox, DatePicker, DebouncedButton, DetailContent, DetailModalFrame, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, Input2 as Input, Loading, LoadingOverlay, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, ModalOverlay, MultiTabBar as MultiTab, PageFilter, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, Radio, RadioGroup, ScrollArea_default as ScrollArea, ScrollBar, SearchAddress, SearchBar, Select2 as Select, Select as SelectBase, SelectContent, SelectGroup2 as SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SimplePopover, Skeleton, Slider, Spinner, SubmitForm, Switch, Tab, Table, Textarea, ToastProvider, ToggleSwitch, Tooltip2 as Tooltip, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };
+export { ArrowIcon, Badge, BaseUploader, BreadCrumb, Button, Carousel_default as Carousel, Checkbox, DatePicker, DebouncedButton, DetailContent, DetailModalFrame, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, Input2 as Input, Loading, LoadingOverlay, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, ModalOverlay, MultiTabBar as MultiTab, PageFilter, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, Radio, RadioGroup, RichEditor_default as RichEditor, RichEditorContent, RichEditorToolbar, ScrollArea_default as ScrollArea, ScrollBar, SearchAddress, SearchBar, Select2 as Select, Select as SelectBase, SelectContent, SelectGroup2 as SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SimplePopover, Skeleton, Slider, Spinner, SubmitForm, Switch, Tab, Table, Textarea, ToastProvider, ToggleSwitch, Tooltip2 as Tooltip, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useRichEditor, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map