@superleapai/flow-ui 2.3.5 → 2.3.7

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/components/textarea.js

@@ -21,7 +21,7 @@
     warning:
       "min-h-[80px] border-warning-base hover:border-warning-base focus:border-warning-base",
     disabled:
-      "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+      "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
   };
 
   function join() {

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
@@ -1494,6 +1536,34 @@
     return field;
   }
 
+  // ============================================================================
+  // ALERTS
+  // ============================================================================
+
+  /**
+   * Render multiple alert messages into a container
+   * @param {HTMLElement} container - Container to append alerts to
+   * @param {string[]} messages - Array of message strings
+   * @param {string} [variant='default'] - 'default' | 'error' | 'warning' | 'success' | 'info' | 'destructive'
+   */
+  function renderAlerts(container, messages, variant = "default") {
+    if (!container || !Array.isArray(messages)) return;
+    const Alert = getComponent("Alert");
+    if (Alert && typeof Alert.simple === "function") {
+      messages.forEach((msg) => {
+        const el = Alert.simple(msg, variant);
+        if (el) container.appendChild(el);
+      });
+    } else {
+      messages.forEach((msg) => {
+        const div = document.createElement("div");
+        div.className = "rounded border p-2 text-sm " + (variant === "error" ? "bg-red-50 border-red-200 text-red-800" : "bg-gray-50 border-gray-200");
+        div.textContent = msg;
+        container.appendChild(div);
+      });
+    }
+  }
+
   // ============================================================================
   // TOAST NOTIFICATIONS
   // ============================================================================
@@ -1630,6 +1700,7 @@
     // Form components
     createInput,
     createTextarea,
+    createRichTextEditor,
     createSelect,
     createTimePicker,
     createDateTimePicker,
@@ -1667,6 +1738,7 @@
     renderStepper,
 
     // Alerts
+    renderAlerts,
     showToast,
 
     // Table