@meistrari/minuta-editor 1.0.2 → 1.1.0

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.2",
+  "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",