@meistrari/minuta-editor 1.0.1 → 1.1.0

package/dist/chunks/docxExport.mjs

@@ -70,6 +70,8 @@ function parseStyle(style) {
   if (bg && bg.toLowerCase() !== "ffffff")
     info.highlight = bg;
   info.size = cssSizeToHalfPoints(getProp(style, "font-size"));
+  if (getProp(style, "text-transform") === "uppercase")
+    info.caps = true;
   const family = getProp(style, "font-family");
   if (family)
     info.font = family.split(",")[0].trim().replace(/["']/g, "");
@@ -123,6 +125,7 @@ function measureEl(el) {
     color: cssColorToHex(cs.color),
     bold: (Number.parseInt(cs.fontWeight) || 400) >= 600,
     italics: cs.fontStyle.includes("italic"),
+    caps: cs.textTransform === "uppercase",
     align: cssAlignToDocx(cs.textAlign)
   };
 }
@@ -145,6 +148,7 @@ function runOptions(info) {
     italics: info.italics,
     underline: info.underline ? {} : void 0,
     strike: info.strike,
+    allCaps: info.caps || void 0,
     color: info.color,
     size: info.size,
     font: info.font,
@@ -165,6 +169,22 @@ function primaryFont(cs) {
   const family = cs.fontFamily?.split(",")[0]?.trim().replace(/["']/g, "");
   return family || void 0;
 }
+function withMarks(base, marks) {
+  const info = { ...base };
+  for (const mark of marks) {
+    if (mark.type.name === "bold")
+      info.bold = true;
+    if (mark.type.name === "italic")
+      info.italics = true;
+    if (mark.type.name === "underline")
+      info.underline = true;
+    if (mark.type.name === "strike")
+      info.strike = true;
+    if (mark.type.name === "inlineStyle")
+      Object.assign(info, cleanUndefined(parseStyle(mark.attrs.style)));
+  }
+  return info;
+}
 function inlineToRuns(node, base, ctx) {
   const runs = [];
   node.forEach((child) => {
@@ -186,7 +206,7 @@ function inlineToRuns(node, base, ctx) {
     }
     if (child.type.name === "variableChip") {
       if (child.attrs.text)
-        runs.push(new TextRun({ text: child.attrs.text, ...runOptions(base) }));
+        runs.push(new TextRun({ text: child.attrs.text, ...runOptions(withMarks(base, child.marks)) }));
       return;
     }
     if (child.type.name === "hardBreak") {
@@ -245,6 +265,7 @@ function domInlineToRuns(root, fallback = {}) {
       italics: cs.fontStyle.includes("italic") || void 0,
       underline: cs.textDecorationLine?.includes("underline") ? {} : void 0,
       strike: cs.textDecorationLine?.includes("line-through") || void 0,
+      allCaps: cs.textTransform === "uppercase" || void 0,
       characterSpacing: TRACKING_COMPENSATION_TW
     }));
   }
@@ -296,7 +317,7 @@ function spacingFrom(m, style) {
 function textBlockToParagraph(node, pos, ctx, opts = {}) {
   const m = measureAt(ctx, pos);
   const style = node.attrs.style;
-  const base = m ? { bold: m.bold, italics: m.italics, color: m.color, size: m.sizeHalf, font: primaryFont(m.cs) } : parseStyle(style);
+  const base = m ? { bold: m.bold, italics: m.italics, caps: m.caps, color: m.color, size: m.sizeHalf, font: primaryFont(m.cs) } : parseStyle(style);
   if (ctx.extraTrackingTw)
     base.trackingTw = ctx.extraTrackingTw;
   const ownIndent = m ? m.marginLeftTw + Math.round((Number.parseFloat(m.cs.paddingLeft) || 0) * PX_TO_TWIP) : cssLengthToTwips(getProp(style, "margin-left")) ?? 0;
@@ -652,6 +673,66 @@ function isFlexRow(node) {
     return false;
   return node.childCount > 1;
 }
+function islandImage(node) {
+  if (node.type.name !== "htmlIsland")
+    return null;
+  const tpl = document.createElement("template");
+  tpl.innerHTML = node.attrs.html || "";
+  const el = tpl.content.firstElementChild;
+  if (!el)
+    return null;
+  const img = el.tagName === "IMG" ? el : el.querySelector("img");
+  return img instanceof HTMLImageElement ? img : null;
+}
+function collectImageIslands(node, pos) {
+  if (islandImage(node))
+    return [{ node, pos }];
+  if (node.type.name !== "styledDiv")
+    return null;
+  const out = [];
+  let childPos = pos + 1;
+  for (let i = 0; i < node.childCount; i++) {
+    const child = node.child(i);
+    if (!(child.isTextblock && child.content.size === 0)) {
+      const inner = collectImageIslands(child, childPos);
+      if (!inner)
+        return null;
+      out.push(...inner);
+    }
+    childPos += child.nodeSize;
+  }
+  return out.length ? out : null;
+}
+async function inlineImagesParagraph(islands, innerPx, ctx) {
+  const GAP_PX = 8;
+  const items = [];
+  for (const { node, pos } of islands) {
+    const img = islandImage(node);
+    const src = await srcToDataUrl(img.getAttribute("src") || "");
+    if (!src)
+      continue;
+    const live = domAt(ctx, pos)?.querySelector("img");
+    const styleW = Number.parseFloat(getProp(img.getAttribute("style"), "width") ?? "");
+    const widthPx = live?.offsetWidth || 0 || (Number.isFinite(styleW) && styleW > 0 ? styleW : 0) || Math.min(innerPx, 200);
+    items.push({ src, widthPx });
+  }
+  if (!items.length)
+    return null;
+  const total = items.reduce((a, b) => a + b.widthPx, 0) + GAP_PX * (items.length - 1);
+  const scale = innerPx > 0 && total > innerPx ? (innerPx - GAP_PX * (items.length - 1)) / (total - GAP_PX * (items.length - 1)) : 1;
+  const runs = [];
+  for (let i = 0; i < items.length; i++) {
+    const run = await dataUrlToImageRun(items[i].src, Math.max(1, Math.round(items[i].widthPx * scale)));
+    if (!run)
+      continue;
+    if (runs.length)
+      runs.push(new TextRun({ text: "  " }));
+    runs.push(run);
+  }
+  if (!runs.length)
+    return null;
+  return new Paragraph({ children: runs, alignment: AlignmentType.CENTER, spacing: { after: 0, before: 0 } });
+}
 async function tableToDocx(node, pos, contentWidthPx, ctx) {
   const tableDomRaw = domAt(ctx, pos);
   const tableEl = tableDomRaw?.tagName === "TABLE" ? tableDomRaw : tableDomRaw?.querySelector("table") ?? null;
@@ -681,9 +762,36 @@ async function tableToDocx(node, pos, contentWidthPx, ctx) {
         }
       }
       const cellCtx = { ...ctx, insideCell: true, indentLeft: 0, lastAfterTw: 0, pending: { breakBefore: false }, extraTrackingTw: extraTrackingTw || void 0 };
+      const cellInnerPx = cellM?.el ? cellM.el.clientWidth - (Number.parseFloat(cellM.cs.paddingLeft) || 0) - (Number.parseFloat(cellM.cs.paddingRight) || 0) : contentWidthPx / 2;
+      const isEmptyBlock = (n) => n.isTextblock && n.content.size === 0;
+      const besideImage = (k) => k > 0 && !!collectImageIslands(cellNode.child(k - 1), 0) || k + 1 < cellNode.childCount && !!collectImageIslands(cellNode.child(k + 1), 0);
       let childPos = cellPos + 1;
       for (let k = 0; k < cellNode.childCount; k++) {
         const child = cellNode.child(k);
+        if (isEmptyBlock(child) && besideImage(k)) {
+          childPos += child.nodeSize;
+          continue;
+        }
+        const islands = collectImageIslands(child, childPos);
+        if (islands?.length) {
+          let end = k + 1;
+          let endPos = childPos + child.nodeSize;
+          while (end < cellNode.childCount) {
+            const next = cellNode.child(end);
+            const more = collectImageIslands(next, endPos);
+            if (!more?.length)
+              break;
+            islands.push(...more);
+            endPos += next.nodeSize;
+            end++;
+          }
+          const para = await inlineImagesParagraph(islands, cellInnerPx, cellCtx);
+          if (para)
+            cellContent.push(para);
+          childPos = endPos;
+          k = end - 1;
+          continue;
+        }
         if (child.isTextblock)
           cellContent.push(textBlockToParagraph(child, childPos, cellCtx));
         else

package/dist/index.d.mts

@@ -232,6 +232,12 @@ interface MinutaEditorOptions {
     toolbar?: boolean;
     /** realce de proveniência de bloco no hover (só faz sentido no modo estruturado) */
     showBlockOrigin?: boolean;
+    /**
+     * Dispara `onBlockClick` também com o editor editável. Desligado por
+     * padrão: na tela do defesa.ai o clique em edição é para posicionar o
+     * cursor, e abrir o bloco do checklist a cada clique atrapalharia.
+     */
+    blockClickWhileEditing?: boolean;
     onReady?: (tiptap: Editor) => void;
     /** o documento mudou por edição (troca de imagem fria não conta) */
     onChange?: () => void;
@@ -274,6 +280,8 @@ interface MinutaEditor {
     setToolbar: (on: boolean) => void;
     setMargins: (margins: MinutaMargins) => void;
     setShowBlockOrigin: (on: boolean) => void;
+    /** liga/desliga `onBlockClick` em edição depois de criado (ver `blockClickWhileEditing`) */
+    setBlockClickWhileEditing: (on: boolean) => void;
     /**
      * Ponte formulário → documento: rola até a primeira ocorrência da variável
      * e a destaca por um instante. `false` se ela não está no documento.
@@ -286,7 +294,13 @@ interface MinutaEditor {
      * editou o texto em volta. Devolve quantas ocorrências mudaram.
      */
     setVariableValue: (variableId: string, value: string) => number;
-    /** as variáveis presentes no documento, na ordem, sem repetição */
+    /**
+     * Troca a imagem de uma variável de imagem: o `<img data-variable-id>` ganha
+     * o `src` novo, e um aviso de imagem faltando com esse id vira a imagem.
+     * Devolve quantas ocorrências mudaram.
+     */
+    setVariableImage: (variableId: string, src: string) => number;
+    /** ids marcados no documento, na ordem, sem repetição: chips de texto, imagens e imagens faltando */
     variablesInDocument: () => string[];
     /** repagina (o host chama após mudar algo que afeta altura fora do editor) */
     schedulePaginate: () => void;

package/dist/index.d.ts

@@ -232,6 +232,12 @@ interface MinutaEditorOptions {
     toolbar?: boolean;
     /** realce de proveniência de bloco no hover (só faz sentido no modo estruturado) */
     showBlockOrigin?: boolean;
+    /**
+     * Dispara `onBlockClick` também com o editor editável. Desligado por
+     * padrão: na tela do defesa.ai o clique em edição é para posicionar o
+     * cursor, e abrir o bloco do checklist a cada clique atrapalharia.
+     */
+    blockClickWhileEditing?: boolean;
     onReady?: (tiptap: Editor) => void;
     /** o documento mudou por edição (troca de imagem fria não conta) */
     onChange?: () => void;
@@ -274,6 +280,8 @@ interface MinutaEditor {
     setToolbar: (on: boolean) => void;
     setMargins: (margins: MinutaMargins) => void;
     setShowBlockOrigin: (on: boolean) => void;
+    /** liga/desliga `onBlockClick` em edição depois de criado (ver `blockClickWhileEditing`) */
+    setBlockClickWhileEditing: (on: boolean) => void;
     /**
      * Ponte formulário → documento: rola até a primeira ocorrência da variável
      * e a destaca por um instante. `false` se ela não está no documento.
@@ -286,7 +294,13 @@ interface MinutaEditor {
      * editou o texto em volta. Devolve quantas ocorrências mudaram.
      */
     setVariableValue: (variableId: string, value: string) => number;
-    /** as variáveis presentes no documento, na ordem, sem repetição */
+    /**
+     * Troca a imagem de uma variável de imagem: o `<img data-variable-id>` ganha
+     * o `src` novo, e um aviso de imagem faltando com esse id vira a imagem.
+     * Devolve quantas ocorrências mudaram.
+     */
+    setVariableImage: (variableId: string, src: string) => number;
+    /** ids marcados no documento, na ordem, sem repetição: chips de texto, imagens e imagens faltando */
     variablesInDocument: () => string[];
     /** repagina (o host chama após mudar algo que afeta altura fora do editor) */
     schedulePaginate: () => void;

package/dist/index.mjs

@@ -1426,8 +1426,9 @@ function createMinutaEditor(element, opts) {
     opts.onEditChrome?.(part);
     window.dispatchEvent(new CustomEvent("poc:edit-chrome", { detail: { part, editor: tiptap } }));
   }
+  let blockClickWhileEditing = opts.blockClickWhileEditing === true;
   function onSheetClick(event) {
-    if (editable)
+    if (editable && !blockClickWhileEditing)
       return;
     const target = event.target;
     if (target.closest(".poc-varchip") || target.closest(".poc-page-headerarea") || target.closest(".poc-page-footerarea") || target.closest(".poc-first-header") || target.closest(".poc-last-footer")) {
@@ -1652,9 +1653,29 @@ function createMinutaEditor(element, opts) {
       text: String(detail.text ?? "")
     });
   }
+  function variableTargetElement(variableId) {
+    const id = CSS.escape(variableId);
+    const chip = sheet.querySelector(`.poc-varchip [data-variable-id="${id}"], .poc-varchip[data-variable-id="${id}"]`);
+    if (chip)
+      return chip.closest(".poc-varchip") ?? chip;
+    const img = sheet.querySelector(`img[data-variable-id="${id}"]`);
+    if (img)
+      return img;
+    const ed = tiptap;
+    if (!ed || ed.isDestroyed)
+      return null;
+    let found = null;
+    ed.state.doc.descendants((node, pos) => {
+      if (found || node.type.name !== "missingImage" || node.attrs.variableId !== variableId)
+        return;
+      const dom = ed.view.nodeDOM(pos);
+      if (dom instanceof HTMLElement)
+        found = dom;
+    });
+    return found;
+  }
   function scrollToVariable(variableId) {
-    const el = sheet.querySelector(`.poc-varchip [data-variable-id="${CSS.escape(variableId)}"], .poc-varchip[data-variable-id="${CSS.escape(variableId)}"]`);
-    const chip = el?.closest(".poc-varchip") ?? el;
+    const chip = variableTargetElement(variableId);
     if (!chip)
       return false;
     chip.scrollIntoView({ block: "center", behavior: "smooth" });
@@ -1682,17 +1703,66 @@ function createMinutaEditor(element, opts) {
       ed.view.dispatch(tr);
     return count;
   }
+  function setVariableImage(variableId, src) {
+    const ed = tiptap;
+    if (!ed || ed.isDestroyed)
+      return 0;
+    const islandType = ed.state.schema.nodes.htmlIsland;
+    const tr = ed.state.tr;
+    let count = 0;
+    const hits = [];
+    ed.state.doc.descendants((node, pos) => {
+      if (node.type.name === "missingImage" && node.attrs.variableId === variableId)
+        hits.push({ pos, node });
+      else if (node.type.name === "htmlIsland" && String(node.attrs.html ?? "").includes(`data-variable-id="${variableId}"`))
+        hits.push({ pos, node });
+    });
+    for (const { pos, node } of hits.reverse()) {
+      if (node.type.name === "missingImage") {
+        if (!islandType)
+          continue;
+        const html = `<img src="${escapeAttr(src)}" alt="${escapeAttr(variableId)}" data-variable-id="${escapeAttr(variableId)}" data-parent-block-id="${escapeAttr(String(node.attrs.parentBlockId ?? ""))}" style="max-width: 100%; height: auto;" />`;
+        tr.replaceWith(pos, pos + node.nodeSize, islandType.create({ html }));
+        count++;
+        continue;
+      }
+      const tpl = document.createElement("template");
+      tpl.innerHTML = String(node.attrs.html ?? "");
+      const imgs = tpl.content.querySelectorAll(`img[data-variable-id="${CSS.escape(variableId)}"]`);
+      if (!imgs.length)
+        continue;
+      for (const img of imgs)
+        img.setAttribute("src", src);
+      tr.setNodeMarkup(pos, void 0, { ...node.attrs, html: tpl.innerHTML });
+      count += imgs.length;
+    }
+    if (count)
+      ed.view.dispatch(tr);
+    return count;
+  }
   function variablesInDocument() {
     const ed = tiptap;
     const ids = [];
     if (!ed || ed.isDestroyed)
       return ids;
+    const add = (id) => {
+      if (typeof id === "string" && id && !ids.includes(id))
+        ids.push(id);
+    };
     ed.state.doc.descendants((node) => {
-      if (node.type.name === "variableChip" && node.attrs.variableId && !ids.includes(node.attrs.variableId))
-        ids.push(node.attrs.variableId);
+      if (node.type.name === "variableChip" || node.type.name === "missingImage") {
+        add(node.attrs.variableId);
+      } else if (node.type.name === "htmlIsland") {
+        for (const m of String(node.attrs.html ?? "").matchAll(/data-variable-id="([^"]+)"/g)) {
+          add(m[1]);
+        }
+      }
     });
     return ids;
   }
+  function escapeAttr(value) {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
   function buildBubbleMenu() {
     const TEXT_COLORS = [
       { label: "Preto", value: "#1C242D" },
@@ -1862,8 +1932,12 @@ function createMinutaEditor(element, opts) {
     setShowBlockOrigin(on) {
       toggleClass(root, "poc-no-block-origin", !on);
     },
+    setBlockClickWhileEditing(on) {
+      blockClickWhileEditing = on;
+    },
     scrollToVariable,
     setVariableValue,
+    setVariableImage,
     variablesInDocument,
     schedulePaginate,
     refreshChrome,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/minuta-editor",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Editor de minuta do defesa.ai sem framework: folha A4 paginada, edição rica, placeholders de variável e export DOCX fiel ao preview — monta em qualquer app (React, Vue, vanilla)",
   "repository": {
     "type": "git",