@dmitryvim/form-builder 0.2.19 → 0.2.20

package/dist/esm/index.js

@@ -218,6 +218,11 @@ function pathJoin(base, key) {
 function clear(node) {
   while (node.firstChild) node.removeChild(node.firstChild);
 }
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 
 // src/utils/enable-conditions.ts
 function getValueByPath(data, path) {
@@ -5710,6 +5715,1273 @@ function updateTableField(_element, fieldPath, value, context) {
   }
 }
 
+// src/components/richinput.ts
+function applyAutoExpand2(textarea, backdrop) {
+  textarea.style.overflow = "hidden";
+  textarea.style.resize = "none";
+  const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
+  textarea.rows = Math.max(3, lineCount);
+  const resize = () => {
+    if (!textarea.isConnected) return;
+    textarea.style.height = "0";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+    if (backdrop) {
+      backdrop.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+  textarea.addEventListener("input", resize);
+  setTimeout(() => {
+    if (textarea.isConnected) resize();
+  }, 0);
+}
+function buildFileLabels(files, state) {
+  const labels = /* @__PURE__ */ new Map();
+  const nameCount = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const meta = state.resourceIndex.get(rid);
+    const name = meta?.name ?? rid;
+    nameCount.set(name, (nameCount.get(name) ?? 0) + 1);
+  }
+  for (const rid of files) {
+    const meta = state.resourceIndex.get(rid);
+    const name = meta?.name ?? rid;
+    if ((nameCount.get(name) ?? 1) > 1 && meta) {
+      labels.set(rid, `${name} (${formatFileSize(meta.size)})`);
+    } else {
+      labels.set(rid, name);
+    }
+  }
+  return labels;
+}
+function isImageMeta(meta) {
+  if (!meta) return false;
+  return meta.type.startsWith("image/");
+}
+function buildNameToRid(files, state) {
+  const labels = buildFileLabels(files, state);
+  const map = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const label = labels.get(rid);
+    if (label) map.set(label, rid);
+  }
+  return map;
+}
+function formatMention(name) {
+  if (/\s/.test(name) || name.includes('"')) {
+    return `@"${name.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+  }
+  return `@${name}`;
+}
+function findAtTokens(text) {
+  const tokens = [];
+  const len = text.length;
+  let i = 0;
+  while (i < len) {
+    if (text[i] === "@") {
+      if (i > 0 && !/\s/.test(text[i - 1])) {
+        i++;
+        continue;
+      }
+      const start = i;
+      i++;
+      if (i < len && text[i] === '"') {
+        i++;
+        let name = "";
+        while (i < len && text[i] !== '"') {
+          if (text[i] === "\\" && i + 1 < len) {
+            name += text[i + 1];
+            i += 2;
+          } else {
+            name += text[i];
+            i++;
+          }
+        }
+        if (i < len && text[i] === '"') {
+          i++;
+          if (i >= len || /\s/.test(text[i])) {
+            tokens.push({ start, end: i, raw: text.slice(start, i), name });
+          }
+        }
+      } else if (i < len && !/\s/.test(text[i])) {
+        const wordStart = i;
+        while (i < len && !/\s/.test(text[i])) {
+          i++;
+        }
+        const name = text.slice(wordStart, i);
+        tokens.push({ start, end: i, raw: text.slice(start, i), name });
+      }
+    } else {
+      i++;
+    }
+  }
+  return tokens;
+}
+function findMentions(text, nameToRid) {
+  if (nameToRid.size === 0) return [];
+  const tokens = findAtTokens(text);
+  const results = [];
+  for (const token of tokens) {
+    const rid = nameToRid.get(token.name);
+    if (rid) {
+      results.push({
+        start: token.start,
+        end: token.end,
+        name: token.name,
+        rid
+      });
+    }
+  }
+  return results;
+}
+function replaceFilenamesWithRids(text, nameToRid) {
+  const mentions = findMentions(text, nameToRid);
+  if (mentions.length === 0) return text;
+  let result = "";
+  let lastIdx = 0;
+  for (const m of mentions) {
+    result += text.slice(lastIdx, m.start);
+    result += `@${m.rid}`;
+    lastIdx = m.end;
+  }
+  result += text.slice(lastIdx);
+  return result;
+}
+function replaceRidsWithFilenames(text, files, state) {
+  const labels = buildFileLabels(files, state);
+  const ridToLabel = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const label = labels.get(rid);
+    if (label) ridToLabel.set(rid, label);
+  }
+  const tokens = findAtTokens(text);
+  if (tokens.length === 0) return text;
+  let result = "";
+  let lastIdx = 0;
+  for (const token of tokens) {
+    result += text.slice(lastIdx, token.start);
+    const label = ridToLabel.get(token.name);
+    if (label) {
+      result += formatMention(label);
+    } else {
+      result += token.raw;
+    }
+    lastIdx = token.end;
+  }
+  result += text.slice(lastIdx);
+  return result;
+}
+function renderThumbContent(thumb, rid, meta, state) {
+  clear(thumb);
+  if (meta?.file && isImageMeta(meta)) {
+    const img = document.createElement("img");
+    img.alt = meta.name;
+    img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result || "";
+    };
+    reader.readAsDataURL(meta.file);
+    thumb.appendChild(img);
+  } else if (state.config.getThumbnail) {
+    state.config.getThumbnail(rid).then((url) => {
+      if (!url || !thumb.isConnected) return;
+      const img = document.createElement("img");
+      img.alt = meta?.name ?? rid;
+      img.src = url;
+      img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+      clear(thumb);
+      thumb.appendChild(img);
+    }).catch((err) => {
+      state.config.onThumbnailError?.(err, rid);
+    });
+    const placeholder = document.createElement("div");
+    placeholder.style.cssText = "width: 100%; height: 100%; background: var(--fb-background-hover-color, #f3f4f6); display: flex; align-items: center; justify-content: center;";
+    placeholder.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
+    thumb.appendChild(placeholder);
+  } else {
+    const icon = document.createElement("div");
+    icon.style.cssText = "width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; box-sizing: border-box;";
+    icon.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+    if (meta?.name) {
+      const nameEl = document.createElement("span");
+      nameEl.style.cssText = "font-size: 9px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44px; color: var(--fb-text-color, #111827);";
+      nameEl.textContent = meta.name;
+      icon.appendChild(nameEl);
+    }
+    thumb.appendChild(icon);
+  }
+}
+function renderImagePreview(hoverEl, rid, meta, state) {
+  clear(hoverEl);
+  if (meta?.file && isImageMeta(meta)) {
+    const img = document.createElement("img");
+    img.alt = meta.name;
+    img.style.cssText = "max-width: 120px; max-height: 120px; object-fit: contain; display: block;";
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result || "";
+    };
+    reader.readAsDataURL(meta.file);
+    hoverEl.appendChild(img);
+  } else if (state.config.getThumbnail) {
+    state.config.getThumbnail(rid).then((url) => {
+      if (!url || !hoverEl.isConnected) return;
+      const img = document.createElement("img");
+      img.alt = meta?.name ?? rid;
+      img.src = url;
+      img.style.cssText = "max-width: 120px; max-height: 120px; object-fit: contain; display: block;";
+      clear(hoverEl);
+      hoverEl.appendChild(img);
+    }).catch((err) => {
+      state.config.onThumbnailError?.(err, rid);
+    });
+  }
+}
+function positionPortalTooltip(tooltip, anchor) {
+  const rect = anchor.getBoundingClientRect();
+  const ttRect = tooltip.getBoundingClientRect();
+  const left = Math.max(
+    4,
+    Math.min(
+      rect.left + rect.width / 2 - ttRect.width / 2,
+      window.innerWidth - ttRect.width - 4
+    )
+  );
+  const topAbove = rect.top - ttRect.height - 8;
+  const topBelow = rect.bottom + 8;
+  const top = topAbove >= 4 ? topAbove : topBelow;
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${Math.max(4, top)}px`;
+}
+function showMentionTooltip(anchor, rid, state) {
+  const meta = state.resourceIndex.get(rid);
+  const tooltip = document.createElement("div");
+  tooltip.className = "fb-richinput-portal-tooltip fb-richinput-mention-tooltip";
+  tooltip.style.cssText = `
+    position: fixed;
+    z-index: 99999;
+    background: #fff;
+    border: 1px solid var(--fb-border-color, #d1d5db);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    padding: 4px;
+    pointer-events: none;
+    min-width: 60px;
+    max-width: 140px;
+  `;
+  const preview = document.createElement("div");
+  preview.style.cssText = "min-height: 60px; max-height: 120px; display: flex; align-items: center; justify-content: center;";
+  renderImagePreview(preview, rid, meta, state);
+  tooltip.appendChild(preview);
+  document.body.appendChild(tooltip);
+  positionPortalTooltip(tooltip, anchor);
+  return tooltip;
+}
+function showFileTooltip(anchor, opts) {
+  const { rid, state, isReadonly, onMention, onRemove } = opts;
+  const meta = state.resourceIndex.get(rid);
+  const filename = meta?.name ?? rid;
+  const tooltip = document.createElement("div");
+  tooltip.className = "fb-richinput-portal-tooltip fb-richinput-file-tooltip";
+  tooltip.style.cssText = `
+    position: fixed;
+    z-index: 99999;
+    background: #fff;
+    border: 1px solid var(--fb-border-color, #d1d5db);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    padding: 4px;
+    pointer-events: auto;
+    min-width: 80px;
+    max-width: 260px;
+  `;
+  const preview = document.createElement("div");
+  preview.style.cssText = "min-height: 60px; max-height: 120px; display: flex; align-items: center; justify-content: center;";
+  renderImagePreview(preview, rid, meta, state);
+  tooltip.appendChild(preview);
+  const nameEl = document.createElement("div");
+  nameEl.style.cssText = "padding: 4px 6px 2px; font-size: 12px; color: var(--fb-text-color, #111827); word-break: break-word; border-top: 1px solid var(--fb-border-color, #d1d5db);";
+  nameEl.textContent = filename;
+  tooltip.appendChild(nameEl);
+  const actionsRow = document.createElement("div");
+  actionsRow.style.cssText = "display: flex; align-items: center; gap: 2px; padding: 3px 4px 2px; border-top: 1px solid var(--fb-border-color, #d1d5db); justify-content: center;";
+  const btnStyle = "background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 4px; color: var(--fb-text-muted-color, #6b7280); display: flex; align-items: center; transition: background 0.1s, color 0.1s;";
+  const btnHoverIn = (btn) => {
+    btn.style.background = "var(--fb-background-hover-color, #f3f4f6)";
+    btn.style.color = "var(--fb-text-color, #111827)";
+  };
+  const btnHoverOut = (btn) => {
+    btn.style.background = "none";
+    btn.style.color = "var(--fb-text-muted-color, #6b7280)";
+  };
+  if (!isReadonly && onMention) {
+    const mentionBtn = document.createElement("button");
+    mentionBtn.type = "button";
+    mentionBtn.title = "Mention";
+    mentionBtn.style.cssText = btnStyle;
+    mentionBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/></svg>';
+    mentionBtn.addEventListener("mouseenter", () => btnHoverIn(mentionBtn));
+    mentionBtn.addEventListener("mouseleave", () => btnHoverOut(mentionBtn));
+    mentionBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onMention();
+      tooltip.remove();
+    });
+    actionsRow.appendChild(mentionBtn);
+  }
+  if (state.config.downloadFile) {
+    const dlBtn = document.createElement("button");
+    dlBtn.type = "button";
+    dlBtn.title = "Download";
+    dlBtn.style.cssText = btnStyle;
+    dlBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
+    dlBtn.addEventListener("mouseenter", () => btnHoverIn(dlBtn));
+    dlBtn.addEventListener("mouseleave", () => btnHoverOut(dlBtn));
+    dlBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      state.config.downloadFile?.(rid, filename);
+    });
+    actionsRow.appendChild(dlBtn);
+  }
+  const hasOpenUrl = !!(state.config.getDownloadUrl ?? state.config.getThumbnail);
+  if (hasOpenUrl) {
+    const openBtn = document.createElement("button");
+    openBtn.type = "button";
+    openBtn.title = "Open in new window";
+    openBtn.style.cssText = btnStyle;
+    openBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
+    openBtn.addEventListener("mouseenter", () => btnHoverIn(openBtn));
+    openBtn.addEventListener("mouseleave", () => btnHoverOut(openBtn));
+    openBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (state.config.getDownloadUrl) {
+        const url = state.config.getDownloadUrl(rid);
+        if (url) {
+          window.open(url, "_blank");
+        } else {
+          state.config.getThumbnail?.(rid).then((thumbUrl) => {
+            if (thumbUrl) window.open(thumbUrl, "_blank");
+          }).catch(() => {
+          });
+        }
+      } else {
+        state.config.getThumbnail?.(rid).then((url) => {
+          if (url) window.open(url, "_blank");
+        }).catch(() => {
+        });
+      }
+    });
+    actionsRow.appendChild(openBtn);
+  }
+  if (!isReadonly && onRemove) {
+    const removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.title = "Remove";
+    removeBtn.style.cssText = btnStyle;
+    removeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';
+    removeBtn.addEventListener("mouseenter", () => {
+      removeBtn.style.background = "var(--fb-background-hover-color, #f3f4f6)";
+      removeBtn.style.color = "var(--fb-error-color, #ef4444)";
+    });
+    removeBtn.addEventListener("mouseleave", () => btnHoverOut(removeBtn));
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      tooltip.remove();
+      onRemove();
+    });
+    actionsRow.appendChild(removeBtn);
+  }
+  const hasActions = actionsRow.children.length > 0;
+  if (hasActions) {
+    tooltip.appendChild(actionsRow);
+  }
+  document.body.appendChild(tooltip);
+  positionPortalTooltip(tooltip, anchor);
+  return tooltip;
+}
+function createTooltipHandle() {
+  return { element: null, hideTimer: null };
+}
+function scheduleHideTooltip(handle, delayMs = 150) {
+  if (handle.hideTimer !== null) return;
+  handle.hideTimer = setTimeout(() => {
+    handle.hideTimer = null;
+    if (handle.element) {
+      handle.element.remove();
+      handle.element = null;
+    }
+  }, delayMs);
+}
+function cancelHideTooltip(handle) {
+  if (handle.hideTimer !== null) {
+    clearTimeout(handle.hideTimer);
+    handle.hideTimer = null;
+  }
+}
+function removePortalTooltip(tooltip) {
+  if (tooltip) tooltip.remove();
+  return null;
+}
+function getAtTrigger(textarea) {
+  const cursorPos = textarea.selectionStart ?? 0;
+  const textBefore = textarea.value.slice(0, cursorPos);
+  for (let i = textBefore.length - 1; i >= 0; i--) {
+    if (textBefore[i] === "@") {
+      if (i === 0 || /\s/.test(textBefore[i - 1])) {
+        let query = textBefore.slice(i + 1);
+        if (query.startsWith('"')) {
+          query = query.slice(1);
+        }
+        return { query, pos: i };
+      }
+      return null;
+    }
+  }
+  return null;
+}
+function filterFilesForDropdown(query, files, labels) {
+  const lq = query.toLowerCase();
+  return files.filter((rid) => {
+    const label = labels.get(rid) ?? rid;
+    return label.toLowerCase().includes(lq);
+  });
+}
+var TEXTAREA_FONT = "font-size: var(--fb-font-size, 14px); font-family: var(--fb-font-family, inherit); line-height: 1.6;";
+var TEXTAREA_PADDING = "padding: 12px 52px 12px 14px;";
+function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
+  const state = ctx.state;
+  const files = [...initialValue.files];
+  const dropdownState = {
+    open: false,
+    query: "",
+    triggerPos: -1,
+    selectedIndex: 0
+  };
+  const docListenerCtrl = new AbortController();
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  function getCurrentValue() {
+    const rawText = textarea.value;
+    const nameToRid = buildNameToRid(files, state);
+    const submissionText = rawText ? replaceFilenamesWithRids(rawText, nameToRid) : null;
+    const textKey = element.textKey ?? "text";
+    const filesKey = element.filesKey ?? "files";
+    return {
+      [textKey]: rawText === "" ? null : submissionText,
+      [filesKey]: [...files]
+    };
+  }
+  function writeHidden() {
+    hiddenInput.value = JSON.stringify(getCurrentValue());
+  }
+  const outerDiv = document.createElement("div");
+  outerDiv.className = "fb-richinput-wrapper";
+  outerDiv.style.cssText = `
+    position: relative;
+    border: 1px solid var(--fb-border-color, #d1d5db);
+    border-radius: 16px;
+    background: var(--fb-background-color, #f9fafb);
+    transition: box-shadow 0.15s, border-color 0.15s;
+  `;
+  outerDiv.addEventListener("focusin", () => {
+    outerDiv.style.borderColor = "var(--fb-primary-color, #0066cc)";
+    outerDiv.style.boxShadow = "0 0 0 2px color-mix(in srgb, var(--fb-primary-color, #0066cc) 25%, transparent)";
+  });
+  outerDiv.addEventListener("focusout", () => {
+    outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
+    outerDiv.style.boxShadow = "none";
+  });
+  let dragCounter = 0;
+  outerDiv.addEventListener("dragenter", (e) => {
+    e.preventDefault();
+    dragCounter++;
+    outerDiv.style.borderColor = "var(--fb-primary-color, #0066cc)";
+    outerDiv.style.boxShadow = "0 0 0 2px color-mix(in srgb, var(--fb-primary-color, #0066cc) 25%, transparent)";
+  });
+  outerDiv.addEventListener("dragover", (e) => {
+    e.preventDefault();
+  });
+  outerDiv.addEventListener("dragleave", (e) => {
+    e.preventDefault();
+    dragCounter--;
+    if (dragCounter <= 0) {
+      dragCounter = 0;
+      outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
+      outerDiv.style.boxShadow = "none";
+    }
+  });
+  outerDiv.addEventListener("drop", (e) => {
+    e.preventDefault();
+    dragCounter = 0;
+    outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
+    outerDiv.style.boxShadow = "none";
+    const droppedFiles = e.dataTransfer?.files;
+    if (!droppedFiles || !state.config.uploadFile) return;
+    const maxFiles = element.maxFiles ?? Infinity;
+    for (let i = 0; i < droppedFiles.length && files.length < maxFiles; i++) {
+      uploadFile(droppedFiles[i]);
+    }
+  });
+  const filesRow = document.createElement("div");
+  filesRow.className = "fb-richinput-files";
+  filesRow.style.cssText = "display: none; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; align-items: center;";
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.multiple = true;
+  fileInput.style.display = "none";
+  if (element.accept) {
+    if (typeof element.accept === "string") {
+      fileInput.accept = element.accept;
+    } else {
+      fileInput.accept = element.accept.extensions.map((ext) => ext.startsWith(".") ? ext : `.${ext}`).join(",");
+    }
+  }
+  const textareaArea = document.createElement("div");
+  textareaArea.style.cssText = "position: relative;";
+  const backdrop = document.createElement("div");
+  backdrop.className = "fb-richinput-backdrop";
+  backdrop.style.cssText = `
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    ${TEXTAREA_PADDING}
+    ${TEXTAREA_FONT}
+    white-space: pre-wrap;
+    word-break: break-word;
+    color: transparent;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: inherit;
+    box-sizing: border-box;
+    z-index: 2;
+  `;
+  const textarea = document.createElement("textarea");
+  textarea.name = `${pathKey}__text`;
+  textarea.placeholder = element.placeholder || t("richinputPlaceholder", state);
+  const rawInitialText = initialValue.text ?? "";
+  textarea.value = rawInitialText ? replaceRidsWithFilenames(rawInitialText, files, state) : "";
+  textarea.style.cssText = `
+    width: 100%;
+    ${TEXTAREA_PADDING}
+    ${TEXTAREA_FONT}
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    color: var(--fb-text-color, #111827);
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    caret-color: var(--fb-text-color, #111827);
+  `;
+  applyAutoExpand2(textarea, backdrop);
+  textarea.addEventListener("scroll", () => {
+    backdrop.scrollTop = textarea.scrollTop;
+  });
+  let mentionTooltip = null;
+  backdrop.addEventListener("mouseover", (e) => {
+    const mark = e.target.closest?.("mark");
+    if (!mark?.dataset.rid) return;
+    mentionTooltip = removePortalTooltip(mentionTooltip);
+    mentionTooltip = showMentionTooltip(mark, mark.dataset.rid, state);
+  });
+  backdrop.addEventListener("mouseout", (e) => {
+    const mark = e.target.closest?.("mark");
+    if (!mark) return;
+    const related = e.relatedTarget;
+    if (related?.closest?.("mark")) return;
+    mentionTooltip = removePortalTooltip(mentionTooltip);
+  });
+  backdrop.addEventListener("mousedown", (e) => {
+    const mark = e.target.closest?.("mark");
+    if (!mark) return;
+    mentionTooltip = removePortalTooltip(mentionTooltip);
+    const marks = backdrop.querySelectorAll("mark");
+    marks.forEach((m) => m.style.pointerEvents = "none");
+    const under = document.elementFromPoint(e.clientX, e.clientY);
+    if (under) {
+      under.dispatchEvent(
+        new MouseEvent("mousedown", {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          button: e.button,
+          buttons: e.buttons,
+          detail: e.detail
+        })
+      );
+    }
+    document.addEventListener(
+      "mouseup",
+      () => {
+        marks.forEach((m) => m.style.pointerEvents = "auto");
+      },
+      { once: true }
+    );
+  });
+  function updateBackdrop() {
+    const text = textarea.value;
+    const nameToRid = buildNameToRid(files, state);
+    const tokens = findAtTokens(text);
+    if (tokens.length === 0) {
+      backdrop.innerHTML = escapeHtml(text) + "\n";
+      return;
+    }
+    let html = "";
+    let lastIdx = 0;
+    for (const token of tokens) {
+      html += escapeHtml(text.slice(lastIdx, token.start));
+      const rid = nameToRid.get(token.name);
+      if (rid) {
+        html += `<mark data-rid="${escapeHtml(rid)}" style="background: color-mix(in srgb, var(--fb-primary-color, #0066cc) 15%, transparent); color: transparent; border-radius: 8px; padding: 0; border: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fb-primary-color, #0066cc) 15%, transparent), 0 0 0 3px color-mix(in srgb, var(--fb-primary-color, #0066cc) 30%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; pointer-events: auto; cursor: text;">${escapeHtml(text.slice(token.start, token.end))}</mark>`;
+      } else {
+        html += `<mark style="color: transparent; background: none; padding: 0; border: none; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: rgba(239, 68, 68, 0.45); text-underline-offset: 2px;">${escapeHtml(text.slice(token.start, token.end))}</mark>`;
+      }
+      lastIdx = token.end;
+    }
+    html += escapeHtml(text.slice(lastIdx));
+    backdrop.innerHTML = html + "\n";
+  }
+  const paperclipBtn = document.createElement("button");
+  paperclipBtn.type = "button";
+  paperclipBtn.title = t("richinputAttachFile", state);
+  paperclipBtn.style.cssText = `
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 2;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fb-text-muted-color, #9ca3af);
+    transition: color 0.15s, background 0.15s;
+  `;
+  paperclipBtn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
+  paperclipBtn.addEventListener("mouseenter", () => {
+    paperclipBtn.style.color = "var(--fb-primary-color, #0066cc)";
+    paperclipBtn.style.background = "var(--fb-background-hover-color, #f3f4f6)";
+  });
+  paperclipBtn.addEventListener("mouseleave", () => {
+    paperclipBtn.style.color = "var(--fb-text-muted-color, #9ca3af)";
+    paperclipBtn.style.background = "transparent";
+  });
+  paperclipBtn.addEventListener("click", () => {
+    const maxFiles = element.maxFiles ?? Infinity;
+    if (files.length < maxFiles) {
+      fileInput.click();
+    }
+  });
+  const dropdown = document.createElement("div");
+  dropdown.className = "fb-richinput-dropdown";
+  dropdown.style.cssText = `
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    z-index: 1000;
+    background: #fff;
+    border: 1px solid var(--fb-border-color, #d1d5db);
+    border-radius: var(--fb-border-radius, 6px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    min-width: 180px;
+    max-width: 320px;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-bottom: 4px;
+    ${TEXTAREA_FONT}
+  `;
+  function buildFileLabelsFromClosure() {
+    return buildFileLabels(files, state);
+  }
+  function renderDropdownItems(filtered) {
+    clear(dropdown);
+    const labels = buildFileLabelsFromClosure();
+    if (filtered.length === 0) {
+      dropdown.style.display = "none";
+      dropdownState.open = false;
+      return;
+    }
+    filtered.forEach((rid, idx) => {
+      const meta = state.resourceIndex.get(rid);
+      const item = document.createElement("div");
+      item.className = "fb-richinput-dropdown-item";
+      item.dataset.rid = rid;
+      item.style.cssText = `
+        padding: 5px 10px;
+        cursor: pointer;
+        color: var(--fb-text-color, #111827);
+        background: ${idx === dropdownState.selectedIndex ? "var(--fb-background-hover-color, #f3f4f6)" : "transparent"};
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      `;
+      const thumb = document.createElement("div");
+      thumb.style.cssText = "width: 24px; height: 24px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--fb-background-hover-color, #f3f4f6); display: flex; align-items: center; justify-content: center;";
+      if (meta?.file && isImageMeta(meta)) {
+        const img = document.createElement("img");
+        img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+          img.src = ev.target?.result || "";
+        };
+        reader.readAsDataURL(meta.file);
+        thumb.appendChild(img);
+      } else if (state.config.getThumbnail) {
+        state.config.getThumbnail(rid).then((url) => {
+          if (!url || !thumb.isConnected) return;
+          const img = document.createElement("img");
+          img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+          img.src = url;
+          clear(thumb);
+          thumb.appendChild(img);
+        }).catch(() => {
+        });
+        thumb.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+      } else {
+        thumb.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+      }
+      item.appendChild(thumb);
+      const nameSpan = document.createElement("span");
+      nameSpan.style.cssText = "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;";
+      nameSpan.textContent = labels.get(rid) ?? rid;
+      item.appendChild(nameSpan);
+      dropdown.appendChild(item);
+    });
+    dropdown.onmousemove = (e) => {
+      const target = e.target.closest?.(
+        ".fb-richinput-dropdown-item"
+      );
+      if (!target) return;
+      const newIdx = filtered.indexOf(target.dataset.rid ?? "");
+      if (newIdx === -1 || newIdx === dropdownState.selectedIndex) return;
+      const items = dropdown.querySelectorAll(
+        ".fb-richinput-dropdown-item"
+      );
+      items.forEach((el, i) => {
+        el.style.background = i === newIdx ? "var(--fb-background-hover-color, #f3f4f6)" : "transparent";
+      });
+      dropdownState.selectedIndex = newIdx;
+    };
+    dropdown.onmousedown = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.target.closest?.(
+        ".fb-richinput-dropdown-item"
+      );
+      if (!target?.dataset.rid) return;
+      insertMention(target.dataset.rid);
+    };
+    dropdown.style.display = "block";
+    dropdownState.open = true;
+  }
+  function openDropdown() {
+    const trigger = getAtTrigger(textarea);
+    if (!trigger) {
+      closeDropdown();
+      return;
+    }
+    dropdownState.query = trigger.query;
+    dropdownState.triggerPos = trigger.pos;
+    dropdownState.selectedIndex = 0;
+    const labels = buildFileLabelsFromClosure();
+    const filtered = filterFilesForDropdown(trigger.query, files, labels);
+    renderDropdownItems(filtered);
+  }
+  function closeDropdown() {
+    dropdown.style.display = "none";
+    dropdownState.open = false;
+  }
+  function insertMention(rid) {
+    const labels = buildFileLabelsFromClosure();
+    const label = labels.get(rid) ?? state.resourceIndex.get(rid)?.name ?? rid;
+    const cursorPos = textarea.selectionStart ?? 0;
+    const before = textarea.value.slice(0, dropdownState.triggerPos);
+    const after = textarea.value.slice(cursorPos);
+    const mention = `${formatMention(label)} `;
+    textarea.value = `${before}${mention}${after}`;
+    const newPos = before.length + mention.length;
+    textarea.setSelectionRange(newPos, newPos);
+    textarea.dispatchEvent(new Event("input"));
+    closeDropdown();
+  }
+  textarea.addEventListener("input", () => {
+    updateBackdrop();
+    writeHidden();
+    ctx.instance?.triggerOnChange(pathKey, getCurrentValue());
+    if (files.length > 0) {
+      openDropdown();
+    } else {
+      closeDropdown();
+    }
+  });
+  function updateDropdownHighlight() {
+    const items = dropdown.querySelectorAll(
+      ".fb-richinput-dropdown-item"
+    );
+    items.forEach((el, i) => {
+      el.style.background = i === dropdownState.selectedIndex ? "var(--fb-background-hover-color, #f3f4f6)" : "transparent";
+    });
+  }
+  textarea.addEventListener("keydown", (e) => {
+    if (!dropdownState.open) return;
+    const labels = buildFileLabelsFromClosure();
+    const filtered = filterFilesForDropdown(
+      dropdownState.query,
+      files,
+      labels
+    );
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      dropdownState.selectedIndex = Math.min(
+        dropdownState.selectedIndex + 1,
+        filtered.length - 1
+      );
+      updateDropdownHighlight();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      dropdownState.selectedIndex = Math.max(
+        dropdownState.selectedIndex - 1,
+        0
+      );
+      updateDropdownHighlight();
+    } else if (e.key === "Enter" && filtered.length > 0) {
+      e.preventDefault();
+      insertMention(filtered[dropdownState.selectedIndex]);
+    } else if (e.key === "Escape") {
+      closeDropdown();
+    }
+  });
+  document.addEventListener(
+    "click",
+    (e) => {
+      if (!outerDiv.contains(e.target) && !dropdown.contains(e.target)) {
+        closeDropdown();
+      }
+    },
+    { signal: docListenerCtrl.signal }
+  );
+  function renderFilesRow() {
+    clear(filesRow);
+    if (files.length === 0) {
+      filesRow.style.display = "none";
+      return;
+    }
+    filesRow.style.display = "flex";
+    files.forEach((rid) => {
+      const meta = state.resourceIndex.get(rid);
+      const thumbWrapper = document.createElement("div");
+      thumbWrapper.className = "fb-richinput-file-thumb";
+      thumbWrapper.style.cssText = `
+        position: relative;
+        width: 48px;
+        height: 48px;
+        border: 1px solid var(--fb-border-color, #d1d5db);
+        border-radius: 8px;
+        overflow: hidden;
+        flex-shrink: 0;
+        cursor: pointer;
+        background: #fff;
+      `;
+      const thumbInner = document.createElement("div");
+      thumbInner.style.cssText = "width: 48px; height: 48px; border-radius: inherit; overflow: hidden;";
+      renderThumbContent(thumbInner, rid, meta, state);
+      thumbWrapper.appendChild(thumbInner);
+      const tooltipHandle = createTooltipHandle();
+      const doMention = () => {
+        const cursorPos = textarea.selectionStart ?? textarea.value.length;
+        const labels = buildFileLabelsFromClosure();
+        const label = labels.get(rid) ?? meta?.name ?? rid;
+        const before = textarea.value.slice(0, cursorPos);
+        const after = textarea.value.slice(cursorPos);
+        const prefix = before.length > 0 && !/[\s\n]$/.test(before) ? "\n" : "";
+        const mention = `${prefix}${formatMention(label)} `;
+        textarea.value = `${before}${mention}${after}`;
+        const newPos = cursorPos + mention.length;
+        textarea.setSelectionRange(newPos, newPos);
+        textarea.focus();
+        textarea.dispatchEvent(new Event("input"));
+      };
+      const doRemove = () => {
+        const idx = files.indexOf(rid);
+        if (idx !== -1) files.splice(idx, 1);
+        renderFilesRow();
+        updateBackdrop();
+        writeHidden();
+        ctx.instance?.triggerOnChange(pathKey, getCurrentValue());
+      };
+      thumbWrapper.addEventListener("mouseenter", () => {
+        cancelHideTooltip(tooltipHandle);
+        if (!tooltipHandle.element) {
+          tooltipHandle.element = showFileTooltip(thumbWrapper, {
+            rid,
+            state,
+            isReadonly: false,
+            onMention: doMention,
+            onRemove: doRemove
+          });
+          tooltipHandle.element.addEventListener("mouseenter", () => {
+            cancelHideTooltip(tooltipHandle);
+          });
+          tooltipHandle.element.addEventListener("mouseleave", () => {
+            scheduleHideTooltip(tooltipHandle);
+          });
+        }
+      });
+      thumbWrapper.addEventListener("mouseleave", () => {
+        scheduleHideTooltip(tooltipHandle);
+      });
+      filesRow.appendChild(thumbWrapper);
+    });
+  }
+  function uploadFile(file) {
+    if (!state.config.uploadFile) return;
+    const tempId = `temp-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    state.resourceIndex.set(tempId, {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      uploadedAt: /* @__PURE__ */ new Date(),
+      file
+    });
+    files.push(tempId);
+    renderFilesRow();
+    const thumbs = filesRow.querySelectorAll(
+      ".fb-richinput-file-thumb"
+    );
+    const loadingThumb = thumbs[thumbs.length - 1];
+    if (loadingThumb) loadingThumb.style.opacity = "0.5";
+    state.config.uploadFile(file).then((resourceId) => {
+      const idx = files.indexOf(tempId);
+      if (idx !== -1) files[idx] = resourceId;
+      state.resourceIndex.delete(tempId);
+      state.resourceIndex.set(resourceId, {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        uploadedAt: /* @__PURE__ */ new Date(),
+        file
+      });
+      renderFilesRow();
+      updateBackdrop();
+      writeHidden();
+      ctx.instance?.triggerOnChange(pathKey, getCurrentValue());
+    }).catch((err) => {
+      const idx = files.indexOf(tempId);
+      if (idx !== -1) files.splice(idx, 1);
+      state.resourceIndex.delete(tempId);
+      renderFilesRow();
+      state.config.onUploadError?.(err, file);
+    });
+  }
+  fileInput.addEventListener("change", () => {
+    const selected = fileInput.files;
+    if (!selected || selected.length === 0) return;
+    const maxFiles = element.maxFiles ?? Infinity;
+    for (let i = 0; i < selected.length && files.length < maxFiles; i++) {
+      uploadFile(selected[i]);
+    }
+    fileInput.value = "";
+  });
+  textareaArea.appendChild(backdrop);
+  textareaArea.appendChild(textarea);
+  textareaArea.appendChild(paperclipBtn);
+  textareaArea.appendChild(dropdown);
+  outerDiv.appendChild(filesRow);
+  outerDiv.appendChild(textareaArea);
+  if (element.minLength != null || element.maxLength != null) {
+    const counterRow = document.createElement("div");
+    counterRow.style.cssText = "position: relative; padding: 2px 14px 6px; text-align: right;";
+    const counter = createCharCounter(element, textarea, false);
+    counter.style.cssText = `
+      position: static;
+      display: inline-block;
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-secondary-color);
+      pointer-events: none;
+    `;
+    counterRow.appendChild(counter);
+    outerDiv.appendChild(counterRow);
+  }
+  outerDiv.appendChild(hiddenInput);
+  outerDiv.appendChild(fileInput);
+  writeHidden();
+  updateBackdrop();
+  hiddenInput._applyExternalUpdate = (value) => {
+    const rawText = value.text ?? "";
+    textarea.value = rawText ? replaceRidsWithFilenames(rawText, files, state) : "";
+    textarea.dispatchEvent(new Event("input"));
+    files.length = 0;
+    for (const rid of value.files) files.push(rid);
+    renderFilesRow();
+    updateBackdrop();
+    writeHidden();
+  };
+  wrapper.appendChild(outerDiv);
+  renderFilesRow();
+  const observer = new MutationObserver(() => {
+    if (!outerDiv.isConnected) {
+      docListenerCtrl.abort();
+      mentionTooltip = removePortalTooltip(mentionTooltip);
+      observer.disconnect();
+    }
+  });
+  if (outerDiv.parentElement) {
+    observer.observe(outerDiv.parentElement, { childList: true });
+  }
+}
+function renderReadonlyMode(_element, ctx, wrapper, _pathKey, value) {
+  const state = ctx.state;
+  const { text, files } = value;
+  const ridToName = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const meta = state.resourceIndex.get(rid);
+    if (meta?.name) ridToName.set(rid, meta.name);
+  }
+  if (files.length > 0) {
+    const filesRow = document.createElement("div");
+    filesRow.style.cssText = "display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px;";
+    files.forEach((rid) => {
+      const meta = state.resourceIndex.get(rid);
+      const thumbWrapper = document.createElement("div");
+      thumbWrapper.style.cssText = `
+        position: relative;
+        width: 48px; height: 48px;
+        border: 1px solid var(--fb-border-color, #d1d5db);
+        border-radius: 8px;
+        overflow: hidden;
+        flex-shrink: 0;
+        background: #fff;
+        cursor: default;
+      `;
+      const thumbInner = document.createElement("div");
+      thumbInner.style.cssText = "width: 48px; height: 48px; border-radius: inherit; overflow: hidden;";
+      renderThumbContent(thumbInner, rid, meta, state);
+      thumbWrapper.appendChild(thumbInner);
+      const tooltipHandle = createTooltipHandle();
+      thumbWrapper.addEventListener("mouseenter", () => {
+        cancelHideTooltip(tooltipHandle);
+        if (!tooltipHandle.element) {
+          tooltipHandle.element = showFileTooltip(thumbWrapper, {
+            rid,
+            state,
+            isReadonly: true
+          });
+          tooltipHandle.element.addEventListener("mouseenter", () => {
+            cancelHideTooltip(tooltipHandle);
+          });
+          tooltipHandle.element.addEventListener("mouseleave", () => {
+            scheduleHideTooltip(tooltipHandle);
+          });
+        }
+      });
+      thumbWrapper.addEventListener("mouseleave", () => {
+        scheduleHideTooltip(tooltipHandle);
+      });
+      filesRow.appendChild(thumbWrapper);
+    });
+    wrapper.appendChild(filesRow);
+  }
+  if (text) {
+    const textDiv = document.createElement("div");
+    textDiv.style.cssText = `
+      ${TEXTAREA_FONT}
+      color: var(--fb-text-color, #111827);
+      white-space: pre-wrap;
+      word-break: break-word;
+    `;
+    const tokens = findAtTokens(text);
+    const resolvedTokens = tokens.filter(
+      (tok) => ridToName.has(tok.name) || [...ridToName.values()].includes(tok.name)
+    );
+    if (resolvedTokens.length === 0) {
+      textDiv.textContent = text;
+    } else {
+      let lastIndex = 0;
+      for (const token of resolvedTokens) {
+        if (token.start > lastIndex) {
+          textDiv.appendChild(
+            document.createTextNode(text.slice(lastIndex, token.start))
+          );
+        }
+        const span = document.createElement("span");
+        span.style.cssText = `
+          display: inline;
+          background: color-mix(in srgb, var(--fb-primary-color, #0066cc) 15%, transparent);
+          color: var(--fb-primary-color, #0066cc);
+          border-radius: 8px;
+          padding: 1px 6px;
+          font-weight: 500;
+          cursor: default;
+        `;
+        const rid = ridToName.has(token.name) ? token.name : [...ridToName.entries()].find(([, n]) => n === token.name)?.[0];
+        const displayName = ridToName.get(token.name) ?? token.name;
+        span.textContent = `@${displayName}`;
+        if (rid) {
+          let spanTooltip = null;
+          const mentionRid = rid;
+          span.addEventListener("mouseenter", () => {
+            spanTooltip = removePortalTooltip(spanTooltip);
+            spanTooltip = showMentionTooltip(span, mentionRid, state);
+          });
+          span.addEventListener("mouseleave", () => {
+            spanTooltip = removePortalTooltip(spanTooltip);
+          });
+        }
+        textDiv.appendChild(span);
+        lastIndex = token.end;
+      }
+      if (lastIndex < text.length) {
+        textDiv.appendChild(document.createTextNode(text.slice(lastIndex)));
+      }
+    }
+    wrapper.appendChild(textDiv);
+  }
+  if (!text && files.length === 0) {
+    const empty = document.createElement("div");
+    empty.style.cssText = "color: var(--fb-text-muted-color, #6b7280); font-size: var(--fb-font-size, 14px);";
+    empty.textContent = "\u2014";
+    wrapper.appendChild(empty);
+  }
+}
+function renderRichInputElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const textKey = element.textKey ?? "text";
+  const filesKey = element.filesKey ?? "files";
+  const rawPrefill = ctx.prefill[element.key];
+  let initialValue;
+  if (rawPrefill && typeof rawPrefill === "object" && !Array.isArray(rawPrefill)) {
+    const obj = rawPrefill;
+    const textVal = obj[textKey] ?? obj["text"];
+    const filesVal = obj[filesKey] ?? obj["files"];
+    initialValue = {
+      text: typeof textVal === "string" ? textVal : null,
+      files: Array.isArray(filesVal) ? filesVal : []
+    };
+  } else if (typeof rawPrefill === "string") {
+    initialValue = { text: rawPrefill || null, files: [] };
+  } else {
+    initialValue = { text: null, files: [] };
+  }
+  for (const rid of initialValue.files) {
+    if (!state.resourceIndex.has(rid)) {
+      state.resourceIndex.set(rid, {
+        name: rid,
+        type: "application/octet-stream",
+        size: 0,
+        uploadedAt: /* @__PURE__ */ new Date(),
+        file: void 0
+      });
+    }
+  }
+  if (state.config.readonly) {
+    renderReadonlyMode(element, ctx, wrapper, pathKey, initialValue);
+  } else {
+    if (!state.config.uploadFile) {
+      throw new Error(
+        `RichInput field "${element.key}" requires uploadFile handler in config`
+      );
+    }
+    renderEditMode(element, ctx, wrapper, pathKey, initialValue);
+  }
+}
+function validateRichInputElement(element, key, context) {
+  const { scopeRoot, state, skipValidation } = context;
+  const errors = [];
+  const textKey = element.textKey ?? "text";
+  const filesKey = element.filesKey ?? "files";
+  const hiddenInput = scopeRoot.querySelector(
+    `[name="${key}"]`
+  );
+  if (!hiddenInput) {
+    return { value: null, errors };
+  }
+  let rawValue = {};
+  try {
+    const parsed = JSON.parse(hiddenInput.value);
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      rawValue = parsed;
+    } else {
+      errors.push(`${key}: invalid richinput data`);
+      return { value: null, errors };
+    }
+  } catch {
+    errors.push(`${key}: invalid richinput data`);
+    return { value: null, errors };
+  }
+  const textVal = rawValue[textKey];
+  const filesVal = rawValue[filesKey];
+  const text = textVal === null || typeof textVal === "string" ? textVal : null;
+  const files = Array.isArray(filesVal) ? filesVal : [];
+  const value = {
+    [textKey]: text ?? null,
+    [filesKey]: files
+  };
+  if (!skipValidation) {
+    const textEmpty = !text || text.trim() === "";
+    const filesEmpty = files.length === 0;
+    if (element.required && textEmpty && filesEmpty) {
+      errors.push(`${key}: ${t("required", state)}`);
+    }
+    if (!textEmpty && text) {
+      if (element.minLength != null && text.length < element.minLength) {
+        errors.push(
+          `${key}: ${t("minLength", state, { min: element.minLength })}`
+        );
+      }
+      if (element.maxLength != null && text.length > element.maxLength) {
+        errors.push(
+          `${key}: ${t("maxLength", state, { max: element.maxLength })}`
+        );
+      }
+    }
+    if (element.maxFiles != null && files.length > element.maxFiles) {
+      errors.push(
+        `${key}: ${t("maxFiles", state, { max: element.maxFiles })}`
+      );
+    }
+  }
+  return { value, errors };
+}
+function updateRichInputField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  const hiddenInput = scopeRoot.querySelector(
+    `[name="${fieldPath}"]`
+  );
+  if (!hiddenInput) {
+    console.warn(
+      `updateRichInputField: no hidden input found for "${fieldPath}". Re-render to reflect new data.`
+    );
+    return;
+  }
+  let normalized = null;
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const obj = value;
+    const textKey = element.textKey ?? "text";
+    const filesKey = element.filesKey ?? "files";
+    const textVal = obj[textKey] ?? obj["text"];
+    const filesVal = obj[filesKey] ?? obj["files"];
+    if (textVal !== void 0 || filesVal !== void 0) {
+      normalized = {
+        text: typeof textVal === "string" ? textVal : null,
+        files: Array.isArray(filesVal) ? filesVal : []
+      };
+    }
+  }
+  if (normalized && hiddenInput._applyExternalUpdate) {
+    hiddenInput._applyExternalUpdate(normalized);
+  } else if (normalized) {
+    hiddenInput.value = JSON.stringify(normalized);
+  }
+}
+
 // src/components/index.ts
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
@@ -6059,6 +7331,9 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
     case "table":
       renderTableElement(element, ctx, wrapper, pathKey);
       break;
+    case "richinput":
+      renderRichInputElement(element, ctx, wrapper, pathKey);
+      break;
     default: {
       const unsupported = document.createElement("div");
       unsupported.className = "text-red-500 text-sm";
@@ -6155,7 +7430,11 @@ var defaultConfig = {
       tableRemoveRow: "Remove row",
       tableRemoveColumn: "Remove column",
       tableMergeCells: "Merge cells (Ctrl+M)",
-      tableSplitCell: "Split cell (Ctrl+Shift+M)"
+      tableSplitCell: "Split cell (Ctrl+Shift+M)",
+      richinputPlaceholder: "Type text...",
+      richinputAttachFile: "Attach file",
+      richinputMention: "Mention",
+      richinputRemoveFile: "Remove"
     },
     ru: {
       // UI texts
@@ -6207,7 +7486,11 @@ var defaultConfig = {
       tableRemoveRow: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443",
       tableRemoveColumn: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u043E\u043B\u0431\u0435\u0446",
       tableMergeCells: "\u041E\u0431\u044A\u0435\u0434\u0438\u043D\u0438\u0442\u044C \u044F\u0447\u0435\u0439\u043A\u0438 (Ctrl+M)",
-      tableSplitCell: "\u0420\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u044C \u044F\u0447\u0435\u0439\u043A\u0443 (Ctrl+Shift+M)"
+      tableSplitCell: "\u0420\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u044C \u044F\u0447\u0435\u0439\u043A\u0443 (Ctrl+Shift+M)",
+      richinputPlaceholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442...",
+      richinputAttachFile: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B",
+      richinputMention: "\u0423\u043F\u043E\u043C\u044F\u043D\u0443\u0442\u044C",
+      richinputRemoveFile: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C"
     }
   },
   theme: {}
@@ -6485,6 +7768,10 @@ var componentRegistry = {
   table: {
     validate: validateTableElement,
     update: updateTableField
+  },
+  richinput: {
+    validate: validateRichInputElement,
+    update: updateRichInputField
   }
 };
 function getComponentOperations(elementType) {