@simplysm/solid 13.0.0-beta.6

package/dist/components/form-control/date-range-picker/DateRangePicker.js

@@ -0,0 +1,136 @@
+import { Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { DateOnly } from "@simplysm/core-common";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import {} from "../field/Field.styles";
+import { DatePicker } from "../field/DatePicker";
+import { Select } from "../select/Select";
+const baseClass = clsx("inline-flex items-center", "gap-1");
+function getLastDayOfMonth(date) {
+  return date.addMonths(1).setDay(1).addDays(-1);
+}
+const DateRangePicker = (props) => {
+  const [local, rest] = splitProps(props, [
+    "periodType",
+    "onPeriodTypeChange",
+    "from",
+    "onFromChange",
+    "to",
+    "onToChange",
+    "required",
+    "disabled",
+    "size",
+    "periodLabels",
+    "class",
+    "style"
+  ]);
+  const labels = () => ({
+    day: "\uC77C",
+    month: "\uC6D4",
+    range: "\uBC94\uC704",
+    ...local.periodLabels
+  });
+  const [periodType, setPeriodType] = createControllableSignal({
+    value: () => local.periodType ?? "range",
+    onChange: () => local.onPeriodTypeChange
+  });
+  const [from, setFrom] = createControllableSignal({
+    value: () => local.from,
+    onChange: () => local.onFromChange
+  });
+  const [to, setTo] = createControllableSignal({
+    value: () => local.to,
+    onChange: () => local.onToChange
+  });
+  const handlePeriodTypeChange = (newType) => {
+    const type = Array.isArray(newType) ? newType[0] : newType;
+    setPeriodType(type);
+    const currentFrom = from();
+    if (type === "month") {
+      if (currentFrom) {
+        const adjusted = currentFrom.setDay(1);
+        setFrom(adjusted);
+        setTo(getLastDayOfMonth(adjusted));
+      } else {
+        setTo(void 0);
+      }
+    } else if (type === "day") {
+      setTo(currentFrom);
+    }
+  };
+  const handleFromChange = (newFrom) => {
+    setFrom(newFrom);
+    const type = periodType();
+    if (type === "month") {
+      setTo(newFrom ? getLastDayOfMonth(newFrom) : void 0);
+    } else if (type === "day") {
+      setTo(newFrom);
+    } else {
+      const currentTo = to();
+      if (newFrom && currentTo && newFrom.tick > currentTo.tick) {
+        setTo(newFrom);
+      }
+    }
+  };
+  const handleToChange = (newTo) => {
+    setTo(newTo);
+  };
+  const getWrapperClass = () => twMerge(baseClass, local.class);
+  return /* @__PURE__ */ React.createElement("div", { ...rest, "data-date-range-picker": true, class: getWrapperClass(), style: local.style }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      value: periodType(),
+      onValueChange: handlePeriodTypeChange,
+      renderValue: (v) => /* @__PURE__ */ React.createElement(React.Fragment, null, labels()[v]),
+      required: true,
+      disabled: local.disabled,
+      size: local.size,
+      inset: true
+    },
+    /* @__PURE__ */ React.createElement(Select.Item, { value: "day" }, labels().day),
+    /* @__PURE__ */ React.createElement(Select.Item, { value: "month" }, labels().month),
+    /* @__PURE__ */ React.createElement(Select.Item, { value: "range" }, labels().range)
+  ), /* @__PURE__ */ React.createElement(
+    Show,
+    {
+      when: periodType() === "range",
+      fallback: /* @__PURE__ */ React.createElement(
+        DatePicker,
+        {
+          unit: periodType() === "month" ? "month" : "date",
+          value: from(),
+          onValueChange: handleFromChange,
+          disabled: local.disabled,
+          size: local.size
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      DatePicker,
+      {
+        unit: "date",
+        value: from(),
+        onValueChange: handleFromChange,
+        disabled: local.disabled,
+        size: local.size
+      }
+    ),
+    /* @__PURE__ */ React.createElement("span", { class: "text-base-400" }, "~"),
+    /* @__PURE__ */ React.createElement(
+      DatePicker,
+      {
+        unit: "date",
+        value: to(),
+        onValueChange: handleToChange,
+        min: from(),
+        disabled: local.disabled,
+        size: local.size
+      }
+    )
+  ));
+};
+export {
+  DateRangePicker
+};
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/components/form-control/date-range-picker/DateRangePicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/date-range-picker/DateRangePicker.tsx"],
+  "sourcesContent": ["import { type Component, type JSX, Show, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { DateOnly } from \"@simplysm/core-common\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { type FieldSize } from \"../field/Field.styles\";\nimport { DatePicker } from \"../field/DatePicker\";\nimport { Select } from \"../select/Select\";\n\nexport type DateRangePeriodType = \"day\" | \"month\" | \"range\";\n\nconst baseClass = clsx(\"inline-flex items-center\", \"gap-1\");\n\nexport interface DateRangePickerProps {\n  /** \uAE30\uAC04 \uD0C0\uC785 */\n  periodType?: DateRangePeriodType;\n\n  /** \uAE30\uAC04 \uD0C0\uC785 \uBCC0\uACBD \uCF5C\uBC31 */\n  onPeriodTypeChange?: (value: DateRangePeriodType) => void;\n\n  /** \uC2DC\uC791 \uB0A0\uC9DC */\n  from?: DateOnly;\n\n  /** \uC2DC\uC791 \uB0A0\uC9DC \uBCC0\uACBD \uCF5C\uBC31 */\n  onFromChange?: (value: DateOnly | undefined) => void;\n\n  /** \uC885\uB8CC \uB0A0\uC9DC */\n  to?: DateOnly;\n\n  /** \uC885\uB8CC \uB0A0\uC9DC \uBCC0\uACBD \uCF5C\uBC31 */\n  onToChange?: (value: DateOnly | undefined) => void;\n\n  /** \uD544\uC218 \uC785\uB825 */\n  required?: boolean;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: FieldSize;\n\n  /** \uAE30\uAC04 \uD0C0\uC785 \uB77C\uBCA8 (\uAE30\uBCF8\uAC12: { day: \"\uC77C\", month: \"\uC6D4\", range: \"\uBC94\uC704\" }) */\n  periodLabels?: Partial<Record<DateRangePeriodType, string>>;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n/**\n * \uC6D4\uC758 \uB9C8\uC9C0\uB9C9 \uB0A0\uC744 \uAD6C\uD55C\uB2E4.\n */\nfunction getLastDayOfMonth(date: DateOnly): DateOnly {\n  return date.addMonths(1).setDay(1).addDays(-1);\n}\n\n/**\n * DateRangePicker \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uAE30\uAC04 \uD0C0\uC785(\uC77C/\uC6D4/\uBC94\uC704) \uC120\uD0DD\uC5D0 \uB530\uB77C \uB0A0\uC9DC \uBC94\uC704\uB97C \uC785\uB825\uD55C\uB2E4.\n * periodType \uBCC0\uACBD \uC2DC from/to\uB97C \uC790\uB3D9\uC73C\uB85C \uBCF4\uC815\uD55C\uB2E4.\n *\n * @example\n * ```tsx\n * const [periodType, setPeriodType] = createSignal<DateRangePeriodType>(\"range\");\n * const [from, setFrom] = createSignal<DateOnly>();\n * const [to, setTo] = createSignal<DateOnly>();\n *\n * <DateRangePicker\n *   periodType={periodType()}\n *   onPeriodTypeChange={setPeriodType}\n *   from={from()}\n *   onFromChange={setFrom}\n *   to={to()}\n *   onToChange={setTo}\n *   required\n * />\n * ```\n */\nexport const DateRangePicker: Component<DateRangePickerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"periodType\",\n    \"onPeriodTypeChange\",\n    \"from\",\n    \"onFromChange\",\n    \"to\",\n    \"onToChange\",\n    \"required\",\n    \"disabled\",\n    \"size\",\n    \"periodLabels\",\n    \"class\",\n    \"style\",\n  ]);\n\n  // \uAE30\uAC04 \uD0C0\uC785 \uB77C\uBCA8\n  const labels = (): Record<DateRangePeriodType, string> => ({\n    day: \"\uC77C\",\n    month: \"\uC6D4\",\n    range: \"\uBC94\uC704\",\n    ...local.periodLabels,\n  });\n\n  // controlled/uncontrolled \uD328\uD134\n  const [periodType, setPeriodType] = createControllableSignal({\n    value: () => local.periodType ?? (\"range\" as DateRangePeriodType),\n    onChange: () => local.onPeriodTypeChange,\n  });\n\n  const [from, setFrom] = createControllableSignal({\n    value: () => local.from,\n    onChange: () => local.onFromChange,\n  });\n\n  const [to, setTo] = createControllableSignal({\n    value: () => local.to,\n    onChange: () => local.onToChange,\n  });\n\n  // periodType \uBCC0\uACBD \uD578\uB4E4\uB7EC\n  const handlePeriodTypeChange = (newType: DateRangePeriodType | DateRangePeriodType[]) => {\n    const type = Array.isArray(newType) ? newType[0] : newType;\n    setPeriodType(type);\n\n    const currentFrom = from();\n\n    if (type === \"month\") {\n      if (currentFrom) {\n        const adjusted = currentFrom.setDay(1);\n        setFrom(adjusted);\n        setTo(getLastDayOfMonth(adjusted));\n      } else {\n        setTo(undefined as DateOnly | undefined);\n      }\n    } else if (type === \"day\") {\n      setTo(currentFrom);\n    }\n  };\n\n  // from \uBCC0\uACBD \uD578\uB4E4\uB7EC\n  const handleFromChange = (newFrom: DateOnly | undefined) => {\n    setFrom(newFrom);\n\n    const type = periodType();\n\n    if (type === \"month\") {\n      setTo(newFrom ? getLastDayOfMonth(newFrom) : (undefined as DateOnly | undefined));\n    } else if (type === \"day\") {\n      setTo(newFrom);\n    } else {\n      const currentTo = to();\n      if (newFrom && currentTo && newFrom.tick > currentTo.tick) {\n        setTo(newFrom);\n      }\n    }\n  };\n\n  // to \uBCC0\uACBD \uD578\uB4E4\uB7EC\n  const handleToChange = (newTo: DateOnly | undefined) => {\n    setTo(newTo);\n  };\n\n  // wrapper \uD074\uB798\uC2A4\n  const getWrapperClass = () => twMerge(baseClass, local.class);\n\n  return (\n    <div {...rest} data-date-range-picker class={getWrapperClass()} style={local.style}>\n      <Select\n        value={periodType()}\n        onValueChange={handlePeriodTypeChange}\n        renderValue={(v: DateRangePeriodType) => <>{labels()[v]}</>}\n        required\n        disabled={local.disabled}\n        size={local.size}\n        inset\n      >\n        <Select.Item value={\"day\" as DateRangePeriodType}>{labels().day}</Select.Item>\n        <Select.Item value={\"month\" as DateRangePeriodType}>{labels().month}</Select.Item>\n        <Select.Item value={\"range\" as DateRangePeriodType}>{labels().range}</Select.Item>\n      </Select>\n\n      <Show\n        when={periodType() === \"range\"}\n        fallback={\n          <DatePicker\n            unit={periodType() === \"month\" ? \"month\" : \"date\"}\n            value={from()}\n            onValueChange={handleFromChange}\n            disabled={local.disabled}\n            size={local.size}\n          />\n        }\n      >\n        <DatePicker\n          unit=\"date\"\n          value={from()}\n          onValueChange={handleFromChange}\n          disabled={local.disabled}\n          size={local.size}\n        />\n        <span class=\"text-base-400\">~</span>\n        <DatePicker\n          unit=\"date\"\n          value={to()}\n          onValueChange={handleToChange}\n          min={from()}\n          disabled={local.disabled}\n          size={local.size}\n        />\n      </Show>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/form-control/editor/EditorToolbar.js

@@ -0,0 +1,290 @@
+import {} from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createEditorTransaction } from "solid-tiptap";
+import {
+  IconBold,
+  IconItalic,
+  IconUnderline,
+  IconStrikethrough,
+  IconH1,
+  IconH2,
+  IconList,
+  IconListNumbers,
+  IconIndentIncrease,
+  IconIndentDecrease,
+  IconQuote,
+  IconCode,
+  IconAlignLeft,
+  IconAlignCenter,
+  IconAlignRight,
+  IconAlignJustified,
+  IconTablePlus,
+  IconPhoto,
+  IconClearFormatting
+} from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+const toolbarClass = clsx(
+  "flex flex-wrap items-center gap-0.5",
+  "border-b border-base-300 dark:border-base-700",
+  "px-2 py-1"
+);
+const toolbarBtnClass = clsx(
+  "inline-flex items-center justify-center",
+  "size-7 rounded",
+  "text-base-600 dark:text-base-400",
+  "hover:bg-base-100 dark:hover:bg-base-800",
+  "transition-colors"
+);
+const toolbarBtnActiveClass = clsx("bg-primary-100 text-primary-700", "dark:bg-primary-900/40 dark:text-primary-300");
+const separatorClass = clsx("mx-1 h-5 w-px", "bg-base-300 dark:bg-base-700");
+const colorLabelClass = clsx(
+  "relative inline-flex items-center justify-center",
+  "size-7 cursor-pointer rounded",
+  "text-base-600 dark:text-base-400",
+  "hover:bg-base-100 dark:hover:bg-base-800",
+  "transition-colors"
+);
+const colorInputClass = clsx("absolute opacity-0", "size-0");
+const colorIndicatorClass = clsx("absolute inset-x-1 bottom-0.5", "h-0.5 rounded-full");
+const EditorToolbar = (props) => {
+  const e = () => props.editor;
+  const isBold = createEditorTransaction(e, (editor) => editor.isActive("bold"));
+  const isItalic = createEditorTransaction(e, (editor) => editor.isActive("italic"));
+  const isUnderline = createEditorTransaction(e, (editor) => editor.isActive("underline"));
+  const isStrike = createEditorTransaction(e, (editor) => editor.isActive("strike"));
+  const isH1 = createEditorTransaction(e, (editor) => editor.isActive("heading", { level: 1 }));
+  const isH2 = createEditorTransaction(e, (editor) => editor.isActive("heading", { level: 2 }));
+  const isBulletList = createEditorTransaction(e, (editor) => editor.isActive("bulletList"));
+  const isOrderedList = createEditorTransaction(e, (editor) => editor.isActive("orderedList"));
+  const isBlockquote = createEditorTransaction(e, (editor) => editor.isActive("blockquote"));
+  const isCodeBlock = createEditorTransaction(e, (editor) => editor.isActive("codeBlock"));
+  const isAlignLeft = createEditorTransaction(
+    e,
+    (editor) => editor.isActive({ textAlign: "left" })
+  );
+  const isAlignCenter = createEditorTransaction(
+    e,
+    (editor) => editor.isActive({ textAlign: "center" })
+  );
+  const isAlignRight = createEditorTransaction(
+    e,
+    (editor) => editor.isActive({ textAlign: "right" })
+  );
+  const isAlignJustify = createEditorTransaction(
+    e,
+    (editor) => editor.isActive({ textAlign: "justify" })
+  );
+  const currentColor = createEditorTransaction(
+    e,
+    (editor) => editor.getAttributes("textStyle")["color"] ?? "#000000"
+  );
+  const currentHighlight = createEditorTransaction(
+    e,
+    (editor) => editor.getAttributes("highlight")["color"] ?? "#ffff00"
+  );
+  const btnClass = (active) => twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
+  const handleImageInsert = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = () => {
+      var _a;
+      const file = (_a = input.files) == null ? void 0 : _a[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        var _a2;
+        const src = (_a2 = ev.target) == null ? void 0 : _a2.result;
+        if (typeof src === "string") {
+          props.editor.chain().focus().setImage({ src }).run();
+        }
+      };
+      reader.readAsDataURL(file);
+    };
+    input.click();
+  };
+  return /* @__PURE__ */ React.createElement("div", { class: twMerge(toolbarClass, props.class) }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isH1),
+      title: "\uC81C\uBAA9 1",
+      onClick: () => props.editor.chain().focus().toggleHeading({ level: 1 }).run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconH1, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isH2),
+      title: "\uC81C\uBAA9 2",
+      onClick: () => props.editor.chain().focus().toggleHeading({ level: 2 }).run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconH2, size: "1em" })
+  ), /* @__PURE__ */ React.createElement("div", { class: separatorClass }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isBold),
+      title: "\uAD75\uAC8C",
+      onClick: () => props.editor.chain().focus().toggleBold().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconBold, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isItalic),
+      title: "\uAE30\uC6B8\uC784",
+      onClick: () => props.editor.chain().focus().toggleItalic().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconItalic, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isUnderline),
+      title: "\uBC11\uC904",
+      onClick: () => props.editor.chain().focus().toggleUnderline().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconUnderline, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isStrike),
+      title: "\uCDE8\uC18C\uC120",
+      onClick: () => props.editor.chain().focus().toggleStrike().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconStrikethrough, size: "1em" })
+  ), /* @__PURE__ */ React.createElement("div", { class: separatorClass }), /* @__PURE__ */ React.createElement("label", { class: colorLabelClass, title: "\uD14D\uC2A4\uD2B8 \uC0C9\uC0C1" }, /* @__PURE__ */ React.createElement("span", { class: clsx("text-sm font-bold") }, "A"), /* @__PURE__ */ React.createElement("div", { class: colorIndicatorClass, style: { "background-color": currentColor() } }), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "color",
+      class: colorInputClass,
+      value: currentColor(),
+      onInput: (ev) => props.editor.chain().focus().setColor(ev.currentTarget.value).run()
+    }
+  )), /* @__PURE__ */ React.createElement("label", { class: colorLabelClass, title: "\uBC30\uACBD\uC0C9" }, /* @__PURE__ */ React.createElement("span", { class: clsx("rounded px-0.5 text-sm font-bold"), style: { "background-color": currentHighlight() } }, "A"), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "color",
+      class: colorInputClass,
+      value: currentHighlight(),
+      onInput: (ev) => props.editor.chain().focus().toggleHighlight({ color: ev.currentTarget.value }).run()
+    }
+  )), /* @__PURE__ */ React.createElement("div", { class: separatorClass }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isBulletList),
+      title: "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D",
+      onClick: () => props.editor.chain().focus().toggleBulletList().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconList, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isOrderedList),
+      title: "\uBC88\uD638 \uB9E4\uAE30\uAE30 \uBAA9\uB85D",
+      onClick: () => props.editor.chain().focus().toggleOrderedList().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconListNumbers, size: "1em" })
+  ), /* @__PURE__ */ React.createElement("div", { class: separatorClass }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: toolbarBtnClass,
+      title: "\uB4E4\uC5EC\uC4F0\uAE30",
+      onClick: () => props.editor.chain().focus().sinkListItem("listItem").run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconIndentIncrease, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: toolbarBtnClass,
+      title: "\uB0B4\uC5B4\uC4F0\uAE30",
+      onClick: () => props.editor.chain().focus().liftListItem("listItem").run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconIndentDecrease, size: "1em" })
+  ), /* @__PURE__ */ React.createElement("div", { class: separatorClass }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isBlockquote),
+      title: "\uC778\uC6A9",
+      onClick: () => props.editor.chain().focus().toggleBlockquote().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconQuote, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isCodeBlock),
+      title: "\uCF54\uB4DC \uBE14\uB85D",
+      onClick: () => props.editor.chain().focus().toggleCodeBlock().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconCode, size: "1em" })
+  ), /* @__PURE__ */ React.createElement("div", { class: separatorClass }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isAlignLeft),
+      title: "\uC67C\uCABD \uC815\uB82C",
+      onClick: () => props.editor.chain().focus().setTextAlign("left").run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconAlignLeft, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isAlignCenter),
+      title: "\uAC00\uC6B4\uB370 \uC815\uB82C",
+      onClick: () => props.editor.chain().focus().setTextAlign("center").run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconAlignCenter, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isAlignRight),
+      title: "\uC624\uB978\uCABD \uC815\uB82C",
+      onClick: () => props.editor.chain().focus().setTextAlign("right").run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconAlignRight, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: btnClass(isAlignJustify),
+      title: "\uC591\uCABD \uC815\uB82C",
+      onClick: () => props.editor.chain().focus().setTextAlign("justify").run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconAlignJustified, size: "1em" })
+  ), /* @__PURE__ */ React.createElement("div", { class: separatorClass }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: toolbarBtnClass,
+      title: "\uD14C\uC774\uBE14 \uC0BD\uC785",
+      onClick: () => props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconTablePlus, size: "1em" })
+  ), /* @__PURE__ */ React.createElement("button", { type: "button", class: toolbarBtnClass, title: "\uC774\uBBF8\uC9C0 \uC0BD\uC785", onClick: handleImageInsert }, /* @__PURE__ */ React.createElement(Icon, { icon: IconPhoto, size: "1em" })), /* @__PURE__ */ React.createElement("div", { class: separatorClass }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: toolbarBtnClass,
+      title: "\uC11C\uC2DD \uC9C0\uC6B0\uAE30",
+      onClick: () => props.editor.chain().focus().clearNodes().unsetAllMarks().run()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconClearFormatting, size: "1em" })
+  ));
+};
+export {
+  EditorToolbar
+};
+//# sourceMappingURL=EditorToolbar.js.map

package/dist/components/form-control/editor/EditorToolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/editor/EditorToolbar.tsx"],
+  "sourcesContent": ["import { type Component } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport type { Editor } from \"@tiptap/core\";\nimport { createEditorTransaction } from \"solid-tiptap\";\nimport {\n  IconBold,\n  IconItalic,\n  IconUnderline,\n  IconStrikethrough,\n  IconH1,\n  IconH2,\n  IconList,\n  IconListNumbers,\n  IconIndentIncrease,\n  IconIndentDecrease,\n  IconQuote,\n  IconCode,\n  IconAlignLeft,\n  IconAlignCenter,\n  IconAlignRight,\n  IconAlignJustified,\n  IconTablePlus,\n  IconPhoto,\n  IconClearFormatting,\n} from \"@tabler/icons-solidjs\";\nimport { Icon } from \"../../display/Icon\";\n\nexport interface EditorToolbarProps {\n  editor: Editor;\n  class?: string;\n}\n\n// \uD234\uBC14 \uCEE8\uD14C\uC774\uB108 \uC2A4\uD0C0\uC77C\nconst toolbarClass = clsx(\n  \"flex flex-wrap items-center gap-0.5\",\n  \"border-b border-base-300 dark:border-base-700\",\n  \"px-2 py-1\",\n);\n\n// \uD234\uBC14 \uBC84\uD2BC \uAE30\uBCF8 \uC2A4\uD0C0\uC77C\nconst toolbarBtnClass = clsx(\n  \"inline-flex items-center justify-center\",\n  \"size-7 rounded\",\n  \"text-base-600 dark:text-base-400\",\n  \"hover:bg-base-100 dark:hover:bg-base-800\",\n  \"transition-colors\",\n);\n\n// \uD234\uBC14 \uBC84\uD2BC \uD65C\uC131 \uC2A4\uD0C0\uC77C\nconst toolbarBtnActiveClass = clsx(\"bg-primary-100 text-primary-700\", \"dark:bg-primary-900/40 dark:text-primary-300\");\n\n// \uAD6C\uBD84\uC120 \uC2A4\uD0C0\uC77C\nconst separatorClass = clsx(\"mx-1 h-5 w-px\", \"bg-base-300 dark:bg-base-700\");\n\n// \uC0C9\uC0C1 \uC120\uD0DD label \uC2A4\uD0C0\uC77C\nconst colorLabelClass = clsx(\n  \"relative inline-flex items-center justify-center\",\n  \"size-7 cursor-pointer rounded\",\n  \"text-base-600 dark:text-base-400\",\n  \"hover:bg-base-100 dark:hover:bg-base-800\",\n  \"transition-colors\",\n);\n\n// \uC0C9\uC0C1 input \uC228\uAE30\uAE30 \uC2A4\uD0C0\uC77C\nconst colorInputClass = clsx(\"absolute opacity-0\", \"size-0\");\n\n// \uC0C9\uC0C1 indicator \uC2A4\uD0C0\uC77C\nconst colorIndicatorClass = clsx(\"absolute inset-x-1 bottom-0.5\", \"h-0.5 rounded-full\");\n\nexport const EditorToolbar: Component<EditorToolbarProps> = (props) => {\n  const e = () => props.editor;\n\n  // createEditorTransaction\uC73C\uB85C \uBC18\uC751\uC801 \uD65C\uC131 \uC0C1\uD0DC \uCD94\uC801\n  const isBold = createEditorTransaction(e, (editor) => editor.isActive(\"bold\"));\n  const isItalic = createEditorTransaction(e, (editor) => editor.isActive(\"italic\"));\n  const isUnderline = createEditorTransaction(e, (editor) => editor.isActive(\"underline\"));\n  const isStrike = createEditorTransaction(e, (editor) => editor.isActive(\"strike\"));\n  const isH1 = createEditorTransaction(e, (editor) => editor.isActive(\"heading\", { level: 1 }));\n  const isH2 = createEditorTransaction(e, (editor) => editor.isActive(\"heading\", { level: 2 }));\n  const isBulletList = createEditorTransaction(e, (editor) => editor.isActive(\"bulletList\"));\n  const isOrderedList = createEditorTransaction(e, (editor) => editor.isActive(\"orderedList\"));\n  const isBlockquote = createEditorTransaction(e, (editor) => editor.isActive(\"blockquote\"));\n  const isCodeBlock = createEditorTransaction(e, (editor) => editor.isActive(\"codeBlock\"));\n  const isAlignLeft = createEditorTransaction(e, (editor) =>\n    editor.isActive({ textAlign: \"left\" } as unknown as string),\n  );\n  const isAlignCenter = createEditorTransaction(e, (editor) =>\n    editor.isActive({ textAlign: \"center\" } as unknown as string),\n  );\n  const isAlignRight = createEditorTransaction(e, (editor) =>\n    editor.isActive({ textAlign: \"right\" } as unknown as string),\n  );\n  const isAlignJustify = createEditorTransaction(e, (editor) =>\n    editor.isActive({ textAlign: \"justify\" } as unknown as string),\n  );\n\n  // \uD604\uC7AC \uD14D\uC2A4\uD2B8 \uC0C9\uC0C1\n  const currentColor = createEditorTransaction(\n    e,\n    (editor) => (editor.getAttributes(\"textStyle\")[\"color\"] as string | undefined) ?? \"#000000\",\n  );\n\n  // \uD604\uC7AC \uD558\uC774\uB77C\uC774\uD2B8 \uC0C9\uC0C1\n  const currentHighlight = createEditorTransaction(\n    e,\n    (editor) => (editor.getAttributes(\"highlight\")[\"color\"] as string | undefined) ?? \"#ffff00\",\n  );\n\n  const btnClass = (active: () => boolean) => twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);\n\n  // \uC774\uBBF8\uC9C0 \uC0BD\uC785 \uD578\uB4E4\uB7EC\n  const handleImageInsert = () => {\n    const input = document.createElement(\"input\");\n    input.type = \"file\";\n    input.accept = \"image/*\";\n    input.onchange = () => {\n      const file = input.files?.[0];\n      if (!file) return;\n\n      const reader = new FileReader();\n      reader.onload = (ev) => {\n        const src = ev.target?.result;\n        if (typeof src === \"string\") {\n          props.editor.chain().focus().setImage({ src }).run();\n        }\n      };\n      reader.readAsDataURL(file);\n    };\n    input.click();\n  };\n\n  return (\n    <div class={twMerge(toolbarClass, props.class)}>\n      {/* 1. \uD5E4\uB354 (H1, H2) */}\n      <button\n        type=\"button\"\n        class={btnClass(isH1)}\n        title=\"\uC81C\uBAA9 1\"\n        onClick={() => props.editor.chain().focus().toggleHeading({ level: 1 }).run()}\n      >\n        <Icon icon={IconH1} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isH2)}\n        title=\"\uC81C\uBAA9 2\"\n        onClick={() => props.editor.chain().focus().toggleHeading({ level: 2 }).run()}\n      >\n        <Icon icon={IconH2} size=\"1em\" />\n      </button>\n\n      {/* 2. \uAD6C\uBD84\uC120 */}\n      <div class={separatorClass} />\n\n      {/* 3. \uD14D\uC2A4\uD2B8 \uC11C\uC2DD (Bold, Italic, Underline, Strike) */}\n      <button\n        type=\"button\"\n        class={btnClass(isBold)}\n        title=\"\uAD75\uAC8C\"\n        onClick={() => props.editor.chain().focus().toggleBold().run()}\n      >\n        <Icon icon={IconBold} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isItalic)}\n        title=\"\uAE30\uC6B8\uC784\"\n        onClick={() => props.editor.chain().focus().toggleItalic().run()}\n      >\n        <Icon icon={IconItalic} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isUnderline)}\n        title=\"\uBC11\uC904\"\n        onClick={() => props.editor.chain().focus().toggleUnderline().run()}\n      >\n        <Icon icon={IconUnderline} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isStrike)}\n        title=\"\uCDE8\uC18C\uC120\"\n        onClick={() => props.editor.chain().focus().toggleStrike().run()}\n      >\n        <Icon icon={IconStrikethrough} size=\"1em\" />\n      </button>\n\n      {/* 4. \uAD6C\uBD84\uC120 */}\n      <div class={separatorClass} />\n\n      {/* 5. \uD14D\uC2A4\uD2B8 \uC0C9\uC0C1 + \uBC30\uACBD\uC0C9 (input[type=color] \uC0AC\uC6A9) */}\n      <label class={colorLabelClass} title=\"\uD14D\uC2A4\uD2B8 \uC0C9\uC0C1\">\n        <span class={clsx(\"text-sm font-bold\")}>A</span>\n        <div class={colorIndicatorClass} style={{ \"background-color\": currentColor() }} />\n        <input\n          type=\"color\"\n          class={colorInputClass}\n          value={currentColor()}\n          onInput={(ev) => props.editor.chain().focus().setColor(ev.currentTarget.value).run()}\n        />\n      </label>\n      <label class={colorLabelClass} title=\"\uBC30\uACBD\uC0C9\">\n        <span class={clsx(\"rounded px-0.5 text-sm font-bold\")} style={{ \"background-color\": currentHighlight() }}>\n          A\n        </span>\n        <input\n          type=\"color\"\n          class={colorInputClass}\n          value={currentHighlight()}\n          onInput={(ev) => props.editor.chain().focus().toggleHighlight({ color: ev.currentTarget.value }).run()}\n        />\n      </label>\n\n      {/* 6. \uAD6C\uBD84\uC120 */}\n      <div class={separatorClass} />\n\n      {/* 7. \uB9AC\uC2A4\uD2B8 (Bullet, Ordered) */}\n      <button\n        type=\"button\"\n        class={btnClass(isBulletList)}\n        title=\"\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D\"\n        onClick={() => props.editor.chain().focus().toggleBulletList().run()}\n      >\n        <Icon icon={IconList} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isOrderedList)}\n        title=\"\uBC88\uD638 \uB9E4\uAE30\uAE30 \uBAA9\uB85D\"\n        onClick={() => props.editor.chain().focus().toggleOrderedList().run()}\n      >\n        <Icon icon={IconListNumbers} size=\"1em\" />\n      </button>\n\n      {/* 8. \uAD6C\uBD84\uC120 */}\n      <div class={separatorClass} />\n\n      {/* 9. \uB4E4\uC5EC\uC4F0\uAE30 (Increase, Decrease) */}\n      <button\n        type=\"button\"\n        class={toolbarBtnClass}\n        title=\"\uB4E4\uC5EC\uC4F0\uAE30\"\n        onClick={() => props.editor.chain().focus().sinkListItem(\"listItem\").run()}\n      >\n        <Icon icon={IconIndentIncrease} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={toolbarBtnClass}\n        title=\"\uB0B4\uC5B4\uC4F0\uAE30\"\n        onClick={() => props.editor.chain().focus().liftListItem(\"listItem\").run()}\n      >\n        <Icon icon={IconIndentDecrease} size=\"1em\" />\n      </button>\n\n      {/* 10. \uAD6C\uBD84\uC120 */}\n      <div class={separatorClass} />\n\n      {/* 11. \uBE14\uB85D (Blockquote, CodeBlock) */}\n      <button\n        type=\"button\"\n        class={btnClass(isBlockquote)}\n        title=\"\uC778\uC6A9\"\n        onClick={() => props.editor.chain().focus().toggleBlockquote().run()}\n      >\n        <Icon icon={IconQuote} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isCodeBlock)}\n        title=\"\uCF54\uB4DC \uBE14\uB85D\"\n        onClick={() => props.editor.chain().focus().toggleCodeBlock().run()}\n      >\n        <Icon icon={IconCode} size=\"1em\" />\n      </button>\n\n      {/* 12. \uAD6C\uBD84\uC120 */}\n      <div class={separatorClass} />\n\n      {/* 13. \uC815\uB82C (Left, Center, Right, Justify) */}\n      <button\n        type=\"button\"\n        class={btnClass(isAlignLeft)}\n        title=\"\uC67C\uCABD \uC815\uB82C\"\n        onClick={() => props.editor.chain().focus().setTextAlign(\"left\").run()}\n      >\n        <Icon icon={IconAlignLeft} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isAlignCenter)}\n        title=\"\uAC00\uC6B4\uB370 \uC815\uB82C\"\n        onClick={() => props.editor.chain().focus().setTextAlign(\"center\").run()}\n      >\n        <Icon icon={IconAlignCenter} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isAlignRight)}\n        title=\"\uC624\uB978\uCABD \uC815\uB82C\"\n        onClick={() => props.editor.chain().focus().setTextAlign(\"right\").run()}\n      >\n        <Icon icon={IconAlignRight} size=\"1em\" />\n      </button>\n      <button\n        type=\"button\"\n        class={btnClass(isAlignJustify)}\n        title=\"\uC591\uCABD \uC815\uB82C\"\n        onClick={() => props.editor.chain().focus().setTextAlign(\"justify\").run()}\n      >\n        <Icon icon={IconAlignJustified} size=\"1em\" />\n      </button>\n\n      {/* 14. \uAD6C\uBD84\uC120 */}\n      <div class={separatorClass} />\n\n      {/* 15. \uD14C\uC774\uBE14 \uC0BD\uC785 */}\n      <button\n        type=\"button\"\n        class={toolbarBtnClass}\n        title=\"\uD14C\uC774\uBE14 \uC0BD\uC785\"\n        onClick={() => props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}\n      >\n        <Icon icon={IconTablePlus} size=\"1em\" />\n      </button>\n\n      {/* 16. \uC774\uBBF8\uC9C0 \uC0BD\uC785 */}\n      <button type=\"button\" class={toolbarBtnClass} title=\"\uC774\uBBF8\uC9C0 \uC0BD\uC785\" onClick={handleImageInsert}>\n        <Icon icon={IconPhoto} size=\"1em\" />\n      </button>\n\n      {/* 17. \uAD6C\uBD84\uC120 */}\n      <div class={separatorClass} />\n\n      {/* 18. \uC11C\uC2DD \uC9C0\uC6B0\uAE30 */}\n      <button\n        type=\"button\"\n        class={toolbarBtnClass}\n        title=\"\uC11C\uC2DD \uC9C0\uC6B0\uAE30\"\n        onClick={() => props.editor.chain().focus().clearNodes().unsetAllMarks().run()}\n      >\n        <Icon icon={IconClearFormatting} size=\"1em\" />\n      </button>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["_a"]
+}

package/dist/components/form-control/editor/RichTextEditor.js

@@ -0,0 +1,114 @@
+import { Show, createEffect, on, onCleanup, splitProps, untrack } from "solid-js";
+import clsx from "clsx";
+import "./editor.css";
+import { twMerge } from "tailwind-merge";
+import { createTiptapEditor } from "solid-tiptap";
+import StarterKit from "@tiptap/starter-kit";
+import TextAlign from "@tiptap/extension-text-align";
+import { Color } from "@tiptap/extension-color";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Highlight from "@tiptap/extension-highlight";
+import { Table } from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TableHeader from "@tiptap/extension-table-header";
+import TableCell from "@tiptap/extension-table-cell";
+import Image from "@tiptap/extension-image";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { EditorToolbar } from "./EditorToolbar";
+const editorWrapperClass = clsx(
+  "flex flex-col",
+  "bg-white dark:bg-base-900",
+  "text-base-900 dark:text-base-100",
+  "border border-base-300 dark:border-base-700",
+  "rounded",
+  "focus-within:border-primary-500"
+);
+const editorErrorClass = clsx("border-danger-500");
+const editorDisabledClass = clsx("bg-base-100 dark:bg-base-800", "text-base-500");
+const editorContentClass = clsx(
+  "px-4 py-3",
+  "min-h-32",
+  "outline-none",
+  "prose prose-sm max-w-none",
+  "dark:prose-invert"
+);
+const editorContentSizeClasses = {
+  sm: clsx("px-3 py-2", "min-h-24"),
+  lg: clsx("px-5 py-4", "min-h-48")
+};
+const RichTextEditor = (props) => {
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "error", "size", "class", "style"]);
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? "",
+    onChange: () => local.onValueChange
+  });
+  let isInternalUpdate = false;
+  let editorRef;
+  const editor = createTiptapEditor(() => ({
+    element: editorRef,
+    extensions: [
+      StarterKit,
+      TextAlign.configure({
+        types: ["heading", "paragraph"]
+      }),
+      TextStyle,
+      Color,
+      Highlight.configure({
+        multicolor: true
+      }),
+      Table.configure({
+        resizable: true
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      Image.configure({
+        inline: true,
+        allowBase64: true
+      })
+    ],
+    // untrack: value/editable 변경 시 에디터 재생성 방지 (createEffect에서 동기화)
+    content: untrack(() => value()),
+    editable: untrack(() => !local.disabled),
+    onUpdate({ editor: e }) {
+      const html = e.getHTML();
+      isInternalUpdate = true;
+      setValue(html === "<p></p>" ? "" : html);
+      queueMicrotask(() => {
+        isInternalUpdate = false;
+      });
+    }
+  }));
+  createEffect(() => {
+    const e = editor();
+    if (e) {
+      e.setEditable(!local.disabled);
+    }
+  });
+  createEffect(
+    on(
+      () => value(),
+      (newValue) => {
+        if (isInternalUpdate) return;
+        const e = editor();
+        if (!e) return;
+        const editorHtml = e.getHTML();
+        const normalizedEditor = editorHtml === "<p></p>" ? "" : editorHtml;
+        if (normalizedEditor !== newValue) {
+          e.commands.setContent(newValue || "", { emitUpdate: false });
+        }
+      }
+    )
+  );
+  onCleanup(() => {
+    var _a;
+    (_a = editor()) == null ? void 0 : _a.destroy();
+  });
+  const getWrapperClass = () => twMerge(editorWrapperClass, local.error && editorErrorClass, local.disabled && editorDisabledClass, local.class);
+  const getContentClass = () => twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
+  return /* @__PURE__ */ React.createElement("div", { ...rest, "data-rich-text-editor": true, class: getWrapperClass(), style: local.style }, /* @__PURE__ */ React.createElement(Show, { when: editor() }, (instance) => /* @__PURE__ */ React.createElement(Show, { when: !local.disabled }, /* @__PURE__ */ React.createElement(EditorToolbar, { editor: instance() }))), /* @__PURE__ */ React.createElement("div", { ref: editorRef, class: getContentClass() }));
+};
+export {
+  RichTextEditor
+};
+//# sourceMappingURL=RichTextEditor.js.map

package/dist/components/form-control/editor/RichTextEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/editor/RichTextEditor.tsx"],
+  "sourcesContent": ["import { type Component, type JSX, Show, createEffect, on, onCleanup, splitProps, untrack } from \"solid-js\";\nimport clsx from \"clsx\";\nimport \"./editor.css\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createTiptapEditor } from \"solid-tiptap\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport TextAlign from \"@tiptap/extension-text-align\";\nimport { Color } from \"@tiptap/extension-color\";\nimport { TextStyle } from \"@tiptap/extension-text-style\";\nimport Highlight from \"@tiptap/extension-highlight\";\nimport { Table } from \"@tiptap/extension-table\";\nimport TableRow from \"@tiptap/extension-table-row\";\nimport TableHeader from \"@tiptap/extension-table-header\";\nimport TableCell from \"@tiptap/extension-table-cell\";\nimport Image from \"@tiptap/extension-image\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport type { FieldSize } from \"../field/Field.styles\";\nimport { EditorToolbar } from \"./EditorToolbar\";\n\nexport interface RichTextEditorProps {\n  /** HTML \uBB38\uC790\uC5F4 \uAC12 */\n  value?: string;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: string) => void;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC5D0\uB7EC \uC0C1\uD0DC */\n  error?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: FieldSize;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n// \uC5D0\uB514\uD130 wrapper \uC2A4\uD0C0\uC77C\nconst editorWrapperClass = clsx(\n  \"flex flex-col\",\n  \"bg-white dark:bg-base-900\",\n  \"text-base-900 dark:text-base-100\",\n  \"border border-base-300 dark:border-base-700\",\n  \"rounded\",\n  \"focus-within:border-primary-500\",\n);\n\n// \uC5D0\uB514\uD130 \uC5D0\uB7EC \uC2A4\uD0C0\uC77C\nconst editorErrorClass = clsx(\"border-danger-500\");\n\n// \uC5D0\uB514\uD130 disabled \uC2A4\uD0C0\uC77C\nconst editorDisabledClass = clsx(\"bg-base-100 dark:bg-base-800\", \"text-base-500\");\n\n// \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uC601\uC5ED \uC2A4\uD0C0\uC77C\nconst editorContentClass = clsx(\n  \"px-4 py-3\",\n  \"min-h-32\",\n  \"outline-none\",\n  \"prose prose-sm max-w-none\",\n  \"dark:prose-invert\",\n);\n\n// \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nconst editorContentSizeClasses: Record<FieldSize, string> = {\n  sm: clsx(\"px-3 py-2\", \"min-h-24\"),\n  lg: clsx(\"px-5 py-4\", \"min-h-48\"),\n};\n\nexport const RichTextEditor: Component<RichTextEditorProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"value\", \"onValueChange\", \"disabled\", \"error\", \"size\", \"class\", \"style\"]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? \"\",\n    onChange: () => local.onValueChange,\n  });\n\n  // \uC5D0\uB514\uD130 \uB0B4\uBD80 \uC5C5\uB370\uC774\uD2B8(onUpdate)\uC640 \uC678\uBD80 value \uBCC0\uACBD\uC744 \uAD6C\uBD84\uD558\uAE30 \uC704\uD55C \uD50C\uB798\uADF8\n  let isInternalUpdate = false;\n\n  let editorRef!: HTMLDivElement;\n\n  const editor = createTiptapEditor(() => ({\n    element: editorRef,\n    extensions: [\n      StarterKit,\n      TextAlign.configure({\n        types: [\"heading\", \"paragraph\"],\n      }),\n      TextStyle,\n      Color,\n      Highlight.configure({\n        multicolor: true,\n      }),\n      Table.configure({\n        resizable: true,\n      }),\n      TableRow,\n      TableHeader,\n      TableCell,\n      Image.configure({\n        inline: true,\n        allowBase64: true,\n      }),\n    ],\n    // untrack: value/editable \uBCC0\uACBD \uC2DC \uC5D0\uB514\uD130 \uC7AC\uC0DD\uC131 \uBC29\uC9C0 (createEffect\uC5D0\uC11C \uB3D9\uAE30\uD654)\n    content: untrack(() => value()),\n    editable: untrack(() => !local.disabled),\n    onUpdate({ editor: e }) {\n      const html = e.getHTML();\n      isInternalUpdate = true;\n      setValue(html === \"<p></p>\" ? \"\" : html);\n      queueMicrotask(() => {\n        isInternalUpdate = false;\n      });\n    },\n  }));\n\n  // disabled \uBCC0\uACBD \uC2DC \uC5D0\uB514\uD130 editable \uC0C1\uD0DC \uB3D9\uAE30\uD654\n  createEffect(() => {\n    const e = editor();\n    if (e) {\n      e.setEditable(!local.disabled);\n    }\n  });\n\n  // \uC678\uBD80\uC5D0\uC11C value\uAC00 \uBCC0\uACBD\uB420 \uB54C\uB9CC \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uB3D9\uAE30\uD654\n  createEffect(\n    on(\n      () => value(),\n      (newValue) => {\n        // \uC5D0\uB514\uD130 \uB0B4\uBD80 \uC5C5\uB370\uC774\uD2B8\uB85C \uC778\uD55C value \uBCC0\uACBD\uC740 \uBB34\uC2DC\n        if (isInternalUpdate) return;\n\n        const e = editor();\n        if (!e) return;\n\n        const editorHtml = e.getHTML();\n        const normalizedEditor = editorHtml === \"<p></p>\" ? \"\" : editorHtml;\n        if (normalizedEditor !== newValue) {\n          e.commands.setContent(newValue || \"\", { emitUpdate: false });\n        }\n      },\n    ),\n  );\n\n  // \uD074\uB9B0\uC5C5\n  onCleanup(() => {\n    editor()?.destroy();\n  });\n\n  const getWrapperClass = () =>\n    twMerge(editorWrapperClass, local.error && editorErrorClass, local.disabled && editorDisabledClass, local.class);\n\n  const getContentClass = () => twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);\n\n  return (\n    <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>\n      <Show when={editor()}>\n        {(instance) => (\n          <Show when={!local.disabled}>\n            <EditorToolbar editor={instance()} />\n          </Show>\n        )}\n      </Show>\n      <div ref={editorRef} class={getContentClass()} />\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}