@timeax/form-palette 0.0.23 → 0.0.25

package/dist/index.mjs

@@ -13,6 +13,8 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import '@radix-ui/react-toggle';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import Editor from '@toast-ui/editor';
+import '@toast-ui/editor/dist/toastui-editor.css';
 import * as LabelPrimitive from '@radix-ui/react-label';
 
 var __defProp = Object.defineProperty;
@@ -20623,6 +20625,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.useRef(null);
+  const editorRef = React10.useRef(null);
+  const formatRef = React10.useRef(format2);
+  const onValueRef = React10.useRef(onValue);
+  const syncingRef = React10.useRef(false);
+  const loadedRef = React10.useRef(false);
+  formatRef.current = format2;
+  onValueRef.current = onValue;
+  const effectiveReadOnly = Boolean(disabled || readOnly);
+  const readContent = React10.useCallback((ed) => {
+    var _a, _b;
+    return formatRef.current === "markdown" ? (_a = ed.getMarkdown()) != null ? _a : "" : (_b = ed.getHTML()) != null ? _b : "";
+  }, []);
+  const emit = React10.useCallback((next) => {
+    var _a;
+    const detail = { source: "user", raw: next };
+    (_a = onValueRef.current) == null ? void 0 : _a.call(onValueRef, next, detail);
+  }, []);
+  const structuralKey = React10.useMemo(() => {
+    const hideModeSwitch = toolbar === "none" || pastePlainText;
+    return JSON.stringify({ toolbar, useCommandShortcut, hideModeSwitch });
+  }, [toolbar, useCommandShortcut, pastePlainText]);
+  React10.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(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.useEffect(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (typeof ed.setHeight === "function") ed.setHeight(height);
+  }, [height]);
+  React10.useEffect(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (typeof ed.setPlaceholder === "function")
+      ed.setPlaceholder(placeholder);
+  }, [placeholder]);
+  React10.useEffect(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (typeof ed.changeMode === "function") ed.changeMode(editType);
+  }, [editType]);
+  React10.useEffect(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (typeof ed.changePreviewStyle === "function")
+      ed.changePreviewStyle(previewStyle);
+  }, [previewStyle]);
+  React10.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.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__ */ 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__ */ 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 = [
@@ -20644,7 +20835,8 @@ var variants = [
   custom_default,
   treeselect_default2,
   fileManagerModule,
-  toggleGroupModule
+  toggleGroupModule,
+  shadcnEditorVariant
 ];
 function registerCoreVariants() {
   variants.forEach((item) => registerVariant(item));