@superleapai/flow-ui 2.3.6 → 2.3.7

package/components/icon.js

@@ -77,6 +77,40 @@
     /** Filled circle for "just color" mode (IconOrColor when only icon_color is set) */
     IconCircleFilled:
       '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>',
+
+    // Rich text editor / toolbar (Tabler Icons outline, stroke 2)
+    IconBold:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bold"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7" /><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" /></svg>',
+    IconItalic:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-italic"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 5l6 0" /><path d="M7 19l6 0" /><path d="M14 5l-4 14" /></svg>',
+    IconUnderline:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-underline"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 5v5a5 5 0 0 0 10 0v-5" /><path d="M5 19h14" /></svg>',
+    IconH1:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 18v-8l-2 2" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+    IconH2:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+    IconH3:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 14a2 2 0 1 0 -2 -2" /><path d="M17 16a2 2 0 1 0 2 -2" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+    IconList:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l11 0" /><path d="M9 12l11 0" /><path d="M9 18l11 0" /><path d="M5 6l0 .01" /><path d="M5 12l0 .01" /><path d="M5 18l0 .01" /></svg>',
+    IconListNumbers:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list-numbers"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 6h9" /><path d="M11 12h9" /><path d="M12 18h8" /><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" /><path d="M6 10v-6l-2 2" /></svg>',
+    IconAlignLeft:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l10 0" /><path d="M4 18l14 0" /></svg>',
+    IconAlignCenter:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-center"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M8 12l8 0" /><path d="M6 18l12 0" /></svg>',
+    IconAlignRight:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M10 12l10 0" /><path d="M6 18l14 0" /></svg>',
+    IconCode:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-code"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 8l-4 4l4 4" /><path d="M17 8l4 4l-4 4" /><path d="M14 4l-4 16" /></svg>',
+    IconLink:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-link"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>',
+    IconPhoto:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>',
+    IconArrowBackUp:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-back-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 14l-4 -4l4 -4" /><path d="M5 10h11a4 4 0 1 1 0 8h-1" /></svg>',
+    IconArrowForwardUp:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-forward-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 14l4 -4l-4 -4" /><path d="M19 10h-11a4 4 0 1 0 0 8h1" /></svg>',
   };
 
   function join() {

package/components/richtext-editor.js

@@ -0,0 +1,336 @@
+/**
+ * Rich Text Editor Component (vanilla JS)
+ * Toolbar + contenteditable area with formatting (bold, italic, underline, headings, lists, alignment, link, image, code block, undo/redo).
+ * Styling matches design: rounded-12, toolbar bg-fill-tertiary-fill-light-gray, content area with min-height.
+ */
+
+(function (global) {
+  "use strict";
+
+  var RICH_TEXT_CONTENT_STYLES =
+    ".rich-text-editor-content ul{list-style-type:disc;padding-left:1.5em;margin:0.5em 0}" +
+    ".rich-text-editor-content ol{list-style-type:decimal;padding-left:1.5em;margin:0.5em 0}" +
+    ".rich-text-editor-content li{margin:0.25em 0}" +
+    ".rich-text-editor-content li p{margin:0}" +
+    ".rich-text-editor-content h1{font-size:1.5rem;font-weight:700;line-height:1.3;margin:0.75em 0 0.5em}" +
+    ".rich-text-editor-content h2{font-size:1.25rem;font-weight:600;line-height:1.3;margin:0.75em 0 0.5em}" +
+    ".rich-text-editor-content h3{font-size:1.125rem;font-weight:600;line-height:1.3;margin:0.75em 0 0.5em}" +
+    ".rich-text-editor-content p{margin:0.5em 0}" +
+    ".rich-text-editor-content a{color:var(--color-primary-500);text-decoration:underline;cursor:pointer}" +
+    ".rich-text-editor-content pre{background:var(--color-neutral-100);border-radius:var(--sizes-size-8);padding:0.75em 1em;margin:0.5em 0;overflow-x:auto}" +
+    ".rich-text-editor-content code{font-family:ui-monospace,monospace;font-size:0.875em}" +
+    ".rich-text-editor-content img{max-width:100%;height:auto;margin:0.5em 0}" +
+    ".rich-text-editor-content blockquote{border-left:3px solid var(--color-neutral-200);padding-left:1em;margin:0.5em 0;color:var(--color-neutral-600)}" +
+    ".rich-text-editor-content hr{border:none;border-top:1px solid var(--color-neutral-150);margin:1em 0}" +
+    ".rich-text-editor-content .ProseMirror,.rich-text-editor-content [contenteditable]{outline:none}";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  function getDep(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  /** Get Tabler icon element (16px) from Icon component for toolbar. */
+  function getTablerIcon(iconName) {
+    var Icon = getDep("Icon");
+    if (!Icon || !Icon.iconMap || !Icon.iconMap[iconName]) return null;
+    var svgStr = Icon.iconMap[iconName];
+    var s16 = svgStr.replace(/width="24"/, 'width="16"').replace(/height="24"/, 'height="16"').replace(/width="20"/, 'width="16"').replace(/height="20"/, 'height="16"');
+    var span = document.createElement("span");
+    span.className = "flex items-center justify-center size-16";
+    span.innerHTML = s16;
+    return span;
+  }
+
+  function createToolbarButton(opts) {
+    var Button = getDep("Button");
+    if (!Button || typeof Button.create !== "function") {
+      throw new Error("RichTextEditor requires Button");
+    }
+    var icon = opts.iconStr ? getTablerIcon(opts.iconStr) : null;
+    return Button.create({
+      variant: opts.active ? "primary" : "outline",
+      size: "default",
+      title: opts.title,
+      icon: icon,
+      onClick: opts.onClick,
+      disabled: opts.disabled,
+    });
+  }
+
+  function createSeparator() {
+    var sep = document.createElement("div");
+    sep.className = "w-px h-16 bg-border-primary mx-4";
+    sep.setAttribute("aria-hidden", "true");
+    return sep;
+  }
+
+  /**
+   * Create a rich text editor
+   * @param {Object} config
+   * @param {string} [config.value] - Initial HTML content
+   * @param {string} [config.placeholder] - Placeholder when empty
+   * @param {number} [config.minHeightPx] - Min height of editor area (default 400)
+   * @param {boolean} [config.disabled]
+   * @param {Function} [config.onChange] - (html: string) => void
+   * @returns {HTMLElement} Wrapper element with getValue/setValue/setDisabled/getInput
+   */
+  function create(config) {
+    var value = config.value != null ? String(config.value) : "";
+    var placeholder = config.placeholder != null ? config.placeholder : "";
+    var minHeightPx = config.minHeightPx != null ? config.minHeightPx : 400;
+    var disabled = !!config.disabled;
+    var onChange = config.onChange;
+
+    var wrapper = document.createElement("div");
+    wrapper.className = "w-full rounded-12 border border-borderColor-border-primary shadow-soft-2x-small";
+
+    var styleEl = document.createElement("style");
+    styleEl.textContent = RICH_TEXT_CONTENT_STYLES;
+    wrapper.appendChild(styleEl);
+
+    var toolbar = document.createElement("div");
+    toolbar.className =
+      "flex flex-wrap gap-4 rounded-t-12 border-borderColor-border-primary bg-fill-tertiary-fill-light-gray p-6";
+    toolbar.setAttribute("role", "toolbar");
+
+    var editorEl = document.createElement("div");
+    editorEl.contentEditable = !disabled;
+    editorEl.className = join(
+      "rich-text-editor-content max-w-none rounded-b-12 border-t border-borderColor-border-primary p-8 text-reg-14 text-typography-primary-text"
+    );
+    editorEl.style.minHeight = minHeightPx + "px";
+    if (value) editorEl.innerHTML = value;
+    editorEl.setAttribute("data-placeholder", placeholder);
+
+    function isEmpty() {
+      var text = (editorEl.textContent || "").trim();
+      if (text) return false;
+      var html = (editorEl.innerHTML || "").replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "");
+      return !html.trim();
+    }
+    function updatePlaceholder() {
+      if (placeholder && isEmpty()) {
+        editorEl.classList.add("empty");
+        editorEl.setAttribute("data-placeholder", placeholder);
+      } else {
+        editorEl.classList.remove("empty");
+        editorEl.removeAttribute("data-placeholder");
+      }
+    }
+    updatePlaceholder();
+
+    function getHtml() {
+      return editorEl.innerHTML;
+    }
+    function setHtml(html) {
+      editorEl.innerHTML = html || "";
+      updatePlaceholder();
+    }
+    function notifyChange() {
+      if (typeof onChange === "function") onChange(getHtml());
+    }
+
+    function isActive(cmd, val) {
+      try {
+        return document.queryCommandState(cmd);
+      } catch (e) {
+        return false;
+      }
+    }
+    function blockTag() {
+      var sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) return null;
+      var node = sel.anchorNode;
+      while (node && node !== editorEl) {
+        if (node.nodeType === 1) {
+          var n = node.nodeName.toLowerCase();
+          if (["h1", "h2", "h3", "p", "div", "pre", "blockquote"].indexOf(n) !== -1) return n;
+        }
+        node = node.parentNode;
+      }
+      return null;
+    }
+    function isAlignment(align) {
+      try {
+        if (align === "left") return document.queryCommandState("justifyLeft");
+        if (align === "center") return document.queryCommandState("justifyCenter");
+        if (align === "right") return document.queryCommandState("justifyRight");
+      } catch (e) {}
+      return false;
+    }
+
+    function refreshToolbar() {
+      toolbar.querySelectorAll("button").forEach(function (btn) {
+        var cmd = btn.getAttribute("data-command");
+        var val = btn.getAttribute("data-value");
+        if (!cmd) return;
+        var active = false;
+        if (cmd === "formatBlock") active = blockTag() === val;
+        else if (cmd === "justifyLeft" && val === "left") active = isAlignment("left");
+        else if (cmd === "justifyCenter" && val === "center") active = isAlignment("center");
+        else if (cmd === "justifyRight" && val === "right") active = isAlignment("right");
+        else active = isActive(cmd);
+        btn.classList.toggle("bg-primary-base", active);
+        btn.classList.toggle("border-primary-base", active);
+        btn.classList.toggle("text-typography-invert-text", active);
+        btn.classList.toggle("bg-fill-quarternary-fill-white", !active);
+        btn.classList.toggle("border-border-primary", !active);
+        btn.classList.toggle("text-typography-primary-text", !active);
+      });
+    }
+
+    function exec(cmd, value) {
+      editorEl.focus();
+      document.execCommand(cmd, false, value != null ? value : null);
+      refreshToolbar();
+      notifyChange();
+    }
+
+    function insertCodeBlock() {
+      editorEl.focus();
+      var sel = window.getSelection();
+      if (sel && sel.rangeCount) {
+        var range = sel.getRangeAt(0);
+        var pre = document.createElement("pre");
+        var code = document.createElement("code");
+        code.textContent = "code here";
+        pre.appendChild(code);
+        range.insertNode(pre);
+        range.setStart(code, 0);
+        range.setEnd(code, 0);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+      refreshToolbar();
+      notifyChange();
+    }
+
+    function addLink() {
+      var url = window.prompt("Enter the URL:", "https://");
+      if (url) {
+        exec("createLink", url);
+      }
+    }
+
+    function addImage() {
+      var input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+      input.onchange = function (e) {
+        var file = e.target && e.target.files && e.target.files[0];
+        if (file) {
+          var reader = new FileReader();
+          reader.onload = function (ev) {
+            var src = ev.target && ev.target.result;
+            if (src) {
+              editorEl.focus();
+              document.execCommand("insertImage", false, src);
+              notifyChange();
+            }
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+      input.click();
+    }
+
+    function undo() {
+      editorEl.focus();
+      document.execCommand("undo", false, null);
+      refreshToolbar();
+      notifyChange();
+    }
+    function redo() {
+      editorEl.focus();
+      document.execCommand("redo", false, null);
+      refreshToolbar();
+      notifyChange();
+    }
+
+    function addBtn(iconStr, title, onClick, dataCommand, dataValue) {
+      var btn = createToolbarButton({
+        iconStr: iconStr,
+        title: title,
+        onClick: function () {
+          if (disabled) return;
+          onClick();
+        },
+        active: false,
+      });
+      if (dataCommand) btn.setAttribute("data-command", dataCommand);
+      if (dataValue != null) btn.setAttribute("data-value", dataValue);
+      toolbar.appendChild(btn);
+    }
+
+    addBtn("IconBold", "Bold (Ctrl+B)", function () { exec("bold"); }, "bold");
+    addBtn("IconItalic", "Italic (Ctrl+I)", function () { exec("italic"); }, "italic");
+    addBtn("IconUnderline", "Underline (Ctrl+U)", function () { exec("underline"); }, "underline");
+    toolbar.appendChild(createSeparator());
+    addBtn("IconH1", "Heading 1", function () { exec("formatBlock", "h1"); }, "formatBlock", "h1");
+    addBtn("IconH2", "Heading 2", function () { exec("formatBlock", "h2"); }, "formatBlock", "h2");
+    addBtn("IconH3", "Heading 3", function () { exec("formatBlock", "h3"); }, "formatBlock", "h3");
+    toolbar.appendChild(createSeparator());
+    addBtn("IconList", "Bullet List", function () { exec("insertUnorderedList"); }, "insertUnorderedList");
+    addBtn("IconListNumbers", "Ordered List", function () { exec("insertOrderedList"); }, "insertOrderedList");
+    toolbar.appendChild(createSeparator());
+    addBtn("IconAlignLeft", "Align Left", function () { exec("justifyLeft"); }, "justifyLeft", "left");
+    addBtn("IconAlignCenter", "Align Center", function () { exec("justifyCenter"); }, "justifyCenter", "center");
+    addBtn("IconAlignRight", "Align Right", function () { exec("justifyRight"); }, "justifyRight", "right");
+    toolbar.appendChild(createSeparator());
+    addBtn("IconCode", "Code Block", insertCodeBlock, "formatBlock", "pre");
+    addBtn("IconLink", "Add Link", addLink, "link");
+    addBtn("IconPhoto", "Insert Image", addImage);
+    toolbar.appendChild(createSeparator());
+    addBtn("IconArrowBackUp", "Undo", undo);
+    addBtn("IconArrowForwardUp", "Redo", redo);
+
+    editorEl.addEventListener("input", function () {
+      updatePlaceholder();
+      refreshToolbar();
+      notifyChange();
+    });
+    editorEl.addEventListener("keyup", refreshToolbar);
+    editorEl.addEventListener("mouseup", refreshToolbar);
+    editorEl.addEventListener("focus", refreshToolbar);
+
+    if (placeholder) {
+      var placeholderStyles = document.createElement("style");
+      placeholderStyles.textContent =
+        ".rich-text-editor-content.empty:before{content:attr(data-placeholder);color:var(--color-neutral-400);pointer-events:none}";
+      wrapper.appendChild(placeholderStyles);
+    }
+
+    wrapper.appendChild(toolbar);
+    wrapper.appendChild(editorEl);
+
+    wrapper.getInput = function () {
+      return editorEl;
+    };
+    wrapper.getValue = function () {
+      return getHtml();
+    };
+    wrapper.setValue = function (v) {
+      setHtml(v);
+    };
+    wrapper.setDisabled = function (d) {
+      disabled = !!d;
+      editorEl.contentEditable = !disabled;
+      toolbar.querySelectorAll("button").forEach(function (b) {
+        b.disabled = disabled;
+      });
+    };
+
+    return wrapper;
+  }
+
+  global.RichTextEditorComponent = {
+    create: create,
+  };
+})(typeof window !== "undefined" ? window : this);

package/core/flow.js

@@ -248,6 +248,48 @@
     return field;
   }
 
+  /**
+   * Create a rich text editor field
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {string} [config.placeholder] - Placeholder when empty
+   * @param {boolean} [config.required] - Whether field is required
+   * @param {string} [config.helpText] - Optional help text for tooltip
+   * @param {number} [config.minHeightPx] - Min height of editor area in pixels (default 400)
+   * @param {boolean} [config.disabled] - Whether editor is disabled
+   * @returns {HTMLElement} Field element
+   */
+  function createRichTextEditor(config) {
+    const { label, fieldId, placeholder, required = false, helpText = null, minHeightPx = 400, disabled = false } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("RichTextEditorComponent") && getComponent("RichTextEditorComponent").create) {
+      const currentValue = get(fieldId) || "";
+      const editorEl = getComponent("RichTextEditorComponent").create({
+        value: currentValue,
+        placeholder: placeholder || "",
+        minHeightPx,
+        disabled,
+        onChange: (html) => set(fieldId, html),
+      });
+      editorEl._fieldId = fieldId;
+      field.appendChild(editorEl);
+      return field;
+    }
+
+    const fallback = document.createElement("textarea");
+    fallback.className = "textarea min-h-[400px]";
+    fallback.placeholder = placeholder || `Enter ${label.toLowerCase()}`;
+    fallback.value = get(fieldId) || "";
+    fallback.disabled = disabled;
+    fallback.addEventListener("change", (e) => set(fieldId, e.target.value));
+    field.appendChild(fallback);
+    return field;
+  }
+
   /**
    * Create a select dropdown field (using custom select component)
    * @param {Object} config - Configuration object
@@ -1658,6 +1700,7 @@
     // Form components
     createInput,
     createTextarea,
+    createRichTextEditor,
     createSelect,
     createTimePicker,
     createDateTimePicker,