@timeax/form-palette 0.0.23 → 0.0.25

package/dist/index.d.mts

@@ -3277,6 +3277,33 @@ interface ShadcnToggleVariantProps extends Pick<VariantBaseProps<string | string
     gap?: number;
 }
 
+/**
+ * Host app MUST import Toast UI Editor CSS:
+ *   import "@toast-ui/editor/dist/toastui-editor.css";
+ */
+type ToastToolbarItem = "heading" | "bold" | "italic" | "strike" | "hr" | "quote" | "ul" | "ol" | "task" | "indent" | "outdent" | "table" | "image" | "link" | "code" | "codeblock";
+type EditorFormat = "html" | "markdown";
+type EditorToolbar = "default" | "none" | ToastToolbarItem[][];
+interface ShadcnEditorVariantProps extends Pick<VariantBaseProps<string | undefined>, "value" | "onValue" | "error" | "disabled" | "readOnly" | "required" | "size" | "density"> {
+    placeholder?: string;
+    height?: string;
+    previewStyle?: "vertical" | "tab";
+    editType?: "wysiwyg" | "markdown";
+    useCommandShortcut?: boolean;
+    /** Which format to store in the form value */
+    format?: EditorFormat;
+    /**
+     * Toolbar config:
+     * - "default" uses Toast UI defaults
+     * - "none" hides tools + mode switch
+     * - array provides toolbarItems
+     */
+    toolbar?: EditorToolbar;
+    /** If true, paste is intercepted and inserted as plain text only */
+    pastePlainText?: boolean;
+    className?: string;
+}
+
 /**
  * Helper type for a single variant registry entry.
  *
@@ -3331,6 +3358,7 @@ interface Variants<H = unknown> {
     custom: VariantEntry<unknown | undefined, ShadcnCustomVariantProps>;
     treeselect: VariantEntry<string | number | undefined, ShadcnTreeSelectVariantProps>;
     file: VariantEntry<FileLike, ShadcnFileVariantProps>;
+    editor: VariantEntry<string | undefined, ShadcnEditorVariantProps>;
 }
 /**
  * Union of all variant keys.

package/dist/index.d.ts

@@ -3277,6 +3277,33 @@ interface ShadcnToggleVariantProps extends Pick<VariantBaseProps<string | string
     gap?: number;
 }
 
+/**
+ * Host app MUST import Toast UI Editor CSS:
+ *   import "@toast-ui/editor/dist/toastui-editor.css";
+ */
+type ToastToolbarItem = "heading" | "bold" | "italic" | "strike" | "hr" | "quote" | "ul" | "ol" | "task" | "indent" | "outdent" | "table" | "image" | "link" | "code" | "codeblock";
+type EditorFormat = "html" | "markdown";
+type EditorToolbar = "default" | "none" | ToastToolbarItem[][];
+interface ShadcnEditorVariantProps extends Pick<VariantBaseProps<string | undefined>, "value" | "onValue" | "error" | "disabled" | "readOnly" | "required" | "size" | "density"> {
+    placeholder?: string;
+    height?: string;
+    previewStyle?: "vertical" | "tab";
+    editType?: "wysiwyg" | "markdown";
+    useCommandShortcut?: boolean;
+    /** Which format to store in the form value */
+    format?: EditorFormat;
+    /**
+     * Toolbar config:
+     * - "default" uses Toast UI defaults
+     * - "none" hides tools + mode switch
+     * - array provides toolbarItems
+     */
+    toolbar?: EditorToolbar;
+    /** If true, paste is intercepted and inserted as plain text only */
+    pastePlainText?: boolean;
+    className?: string;
+}
+
 /**
  * Helper type for a single variant registry entry.
  *
@@ -3331,6 +3358,7 @@ interface Variants<H = unknown> {
     custom: VariantEntry<unknown | undefined, ShadcnCustomVariantProps>;
     treeselect: VariantEntry<string | number | undefined, ShadcnTreeSelectVariantProps>;
     file: VariantEntry<FileLike, ShadcnFileVariantProps>;
+    editor: VariantEntry<string | undefined, ShadcnEditorVariantProps>;
 }
 /**
  * Union of all variant keys.

package/dist/index.js

@@ -14,8 +14,12 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 require('@radix-ui/react-toggle');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var Editor = require('@toast-ui/editor');
+require('@toast-ui/editor/dist/toastui-editor.css');
 var LabelPrimitive = require('@radix-ui/react-label');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -45,6 +49,7 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var Editor__default = /*#__PURE__*/_interopDefault(Editor);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 
 var __defProp = Object.defineProperty;
@@ -20655,6 +20660,195 @@ var toggleGroupModule = {
     tags: ["buttons", "toggle"]
   }
 };
+function ShadcnEditorVariant(props) {
+  const {
+    value,
+    onValue,
+    error,
+    disabled,
+    readOnly,
+    required,
+    size,
+    density,
+    className,
+    placeholder = "",
+    height = "400px",
+    previewStyle = "vertical",
+    editType = "wysiwyg",
+    useCommandShortcut = true,
+    format: format2 = "html",
+    toolbar = "default",
+    pastePlainText = false
+  } = props;
+  const mountRef = React10__namespace.useRef(null);
+  const editorRef = React10__namespace.useRef(null);
+  const formatRef = React10__namespace.useRef(format2);
+  const onValueRef = React10__namespace.useRef(onValue);
+  const syncingRef = React10__namespace.useRef(false);
+  const loadedRef = React10__namespace.useRef(false);
+  formatRef.current = format2;
+  onValueRef.current = onValue;
+  const effectiveReadOnly = Boolean(disabled || readOnly);
+  const readContent = React10__namespace.useCallback((ed) => {
+    var _a, _b;
+    return formatRef.current === "markdown" ? (_a = ed.getMarkdown()) != null ? _a : "" : (_b = ed.getHTML()) != null ? _b : "";
+  }, []);
+  const emit = React10__namespace.useCallback((next) => {
+    var _a;
+    const detail = { source: "user", raw: next };
+    (_a = onValueRef.current) == null ? void 0 : _a.call(onValueRef, next, detail);
+  }, []);
+  const structuralKey = React10__namespace.useMemo(() => {
+    const hideModeSwitch = toolbar === "none" || pastePlainText;
+    return JSON.stringify({ toolbar, useCommandShortcut, hideModeSwitch });
+  }, [toolbar, useCommandShortcut, pastePlainText]);
+  React10__namespace.useEffect(() => {
+    const el = mountRef.current;
+    if (!el) return;
+    if (editorRef.current) {
+      try {
+        editorRef.current.off("change");
+      } catch {
+      }
+      try {
+        editorRef.current.off("load");
+      } catch {
+      }
+      try {
+        editorRef.current.destroy();
+      } catch {
+      }
+      editorRef.current = null;
+    }
+    loadedRef.current = false;
+    syncingRef.current = true;
+    const hideModeSwitch = toolbar === "none" || pastePlainText;
+    const options = {
+      el,
+      height,
+      initialValue: value != null ? value : "",
+      previewStyle,
+      initialEditType: editType,
+      useCommandShortcut,
+      usageStatistics: false,
+      placeholder,
+      hideModeSwitch,
+      ...toolbar === "none" ? { toolbarItems: [] } : Array.isArray(toolbar) ? { toolbarItems: toolbar } : {},
+      events: {
+        load: () => {
+          loadedRef.current = true;
+          syncingRef.current = false;
+        },
+        change: () => {
+          const ed = editorRef.current;
+          if (!ed) return;
+          if (syncingRef.current) return;
+          emit(readContent(ed));
+        }
+      }
+    };
+    editorRef.current = new Editor__default.default(options);
+    Promise.resolve().then(() => {
+      syncingRef.current = false;
+    });
+    return () => {
+      const ed = editorRef.current;
+      if (!ed) return;
+      try {
+        ed.off("change");
+      } catch {
+      }
+      try {
+        ed.off("load");
+      } catch {
+      }
+      try {
+        ed.destroy();
+      } catch {
+      }
+      editorRef.current = null;
+    };
+  }, [structuralKey]);
+  React10__namespace.useEffect(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (typeof ed.setHeight === "function") ed.setHeight(height);
+  }, [height]);
+  React10__namespace.useEffect(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (typeof ed.setPlaceholder === "function")
+      ed.setPlaceholder(placeholder);
+  }, [placeholder]);
+  React10__namespace.useEffect(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (typeof ed.changeMode === "function") ed.changeMode(editType);
+  }, [editType]);
+  React10__namespace.useEffect(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (typeof ed.changePreviewStyle === "function")
+      ed.changePreviewStyle(previewStyle);
+  }, [previewStyle]);
+  React10__namespace.useEffect(() => {
+    var _a, _b, _c, _d;
+    const ed = editorRef.current;
+    if (!ed) return;
+    const next = value != null ? value : "";
+    syncingRef.current = true;
+    if (format2 === "markdown") {
+      const cur = (_b = (_a = ed.getMarkdown) == null ? void 0 : _a.call(ed)) != null ? _b : "";
+      if (cur !== next) ed.setMarkdown(next, false);
+    } else {
+      const cur = (_d = (_c = ed.getHTML) == null ? void 0 : _c.call(ed)) != null ? _d : "";
+      if (cur !== next) ed.setHTML(next, false);
+    }
+    Promise.resolve().then(() => {
+      syncingRef.current = false;
+    });
+  }, [value, format2]);
+  React10__namespace.useEffect(() => {
+    if (!pastePlainText) return;
+    const host = mountRef.current;
+    if (!host) return;
+    const onPaste = (e) => {
+      var _a, _b;
+      e.preventDefault();
+      const text = (_b = (_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) != null ? _b : "";
+      const ed = editorRef.current;
+      if (text && ed) ed.insertText(text);
+    };
+    host.addEventListener("paste", onPaste);
+    return () => host.removeEventListener("paste", onPaste);
+  }, [pastePlainText]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-size": size,
+      "data-density": density,
+      className: cn(
+        "rounded-md border border-input bg-background overflow-hidden",
+        effectiveReadOnly && "opacity-60 pointer-events-none",
+        className
+      ),
+      "aria-invalid": error ? true : void 0,
+      "aria-required": required ? true : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mountRef })
+    }
+  );
+}
+
+// src/variants/core/editor.ts
+var shadcnEditorVariant = {
+  variant: "editor",
+  Variant: ShadcnEditorVariant,
+  meta: {
+    label: "Editor",
+    description: "Toast UI Editor (vanilla @toast-ui/editor).",
+    tags: ["editor", "rich-text", "markdown", "toast-ui"]
+  }
+};
 
 // src/variants/index.ts
 var variants = [
@@ -20676,7 +20870,8 @@ var variants = [
   custom_default,
   treeselect_default2,
   fileManagerModule,
-  toggleGroupModule
+  toggleGroupModule,
+  shadcnEditorVariant
 ];
 function registerCoreVariants() {
   variants.forEach((item) => registerVariant(item));