@meistrari/minuta-editor 1.0.2 → 1.2.0

package/README.md

@@ -37,6 +37,8 @@ const editor = createMinutaEditor(el, {
     onReady: tiptap => {},
     onChange: () => {},
     onEditChrome: part => {},               // clique no cabeçalho/rodapé
+    onVariableClick: ({ variableId, parentBlockId, text, kind }) => {}, // kind: 'text' | 'image' | 'missingImage'
+    onBlockClick: blockId => {},            // read-only (ou com blockClickWhileEditing)
 })
 
 editor.getHTML()          // → string
@@ -46,6 +48,15 @@ editor.setEditable(bool)
 editor.setChrome({ header, footer, headerScope, footerScope, showPageNumber })
 editor.setHeader({ logoUrl, position })
 editor.setVariables(catalogo)
+editor.setBlockClickWhileEditing(bool)
+
+// variáveis do case marcadas no documento (<span|img data-variable-id>, aviso de imagem faltando)
+editor.scrollToVariable(id)              // → boolean (rola e dá um flash)
+editor.setVariableValue(id, texto)       // → nº de ocorrências (o aviso de "faltando" vira chip)
+editor.setVariableImage(id, src)         // → nº de ocorrências (o aviso de imagem vira <img>)
+editor.variablesInDocument()             // → string[]
+editor.refreshVaultImages(vaultUrl => Promise<string>) // renova o src das imagens inseridas (data-vault-src)
+
 editor.schedulePaginate() // repagina (após mudar algo que afeta altura por fora)
 editor.totalPages()
 editor.destroy()

package/dist/index.d.mts

@@ -92,6 +92,19 @@ declare function resolveTemplateVariables(html: string | null | undefined, value
 declare const POC_ASSET_SWAP = "pocAssetSwap";
 declare const PocDocument: Node<any, any>;
 declare const PocMinutaBlock: Node<any, any>;
+/**
+ * Clique numa variável do case — a ponte documento → formulário. Disparado no
+ * DOM do editor (com bubbling), não em `window`: dois editores na página não
+ * se cruzam, e o host escuta no próprio elemento. `kind` diz o que foi
+ * clicado: chip de texto, `<img data-variable-id>` ou aviso de imagem faltando.
+ */
+type VariableClickKind = 'text' | 'image' | 'missingImage';
+declare function dispatchVariableClick(editor: Editor, detail: {
+    variableId: string | null;
+    parentBlockId: string | null;
+    text: string;
+    kind: VariableClickKind;
+}): void;
 declare const PocHtmlIsland: Node<any, any>;
 /**
  * Aviso de imagem faltando — a caixa tracejada que o render emite quando a
@@ -113,7 +126,12 @@ declare const PocHtmlIsland: Node<any, any>;
  */
 declare const PocMissingImage: Node<any, any>;
 declare const PocVariableChip: Node<any, any>;
-/** `<span data-variable-id>` com o texto trocado — o que `setVariableValue` grava no chip */
+/**
+ * `<span data-variable-id>` com o texto trocado — o que `setVariableValue` grava
+ * no chip. O aviso de variável sem valor (`data-invalid-variable`, vermelho)
+ * é o mesmo nó: ao receber um valor ele vira chip comum — perde a marca de
+ * inválido e o estilo do aviso, mantém id, bloco e índice.
+ */
 declare function variableChipHtml(currentHtml: string, text: string): string;
 /**
  * Placeholder de variável do TEMPLATE — o `#NOME_VARIAVEL` de antigamente, só
@@ -198,12 +216,14 @@ interface MinutaChromeText {
     footerScope?: 'all' | 'first';
     showPageNumber?: boolean;
 }
-/** uma variável do case dentro do documento (`<span data-variable-id>`) */
+/** uma variável do case dentro do documento (`<span data-variable-id>`, `<img data-variable-id>` ou aviso de imagem faltando) */
 interface MinutaVariableRef {
     variableId: string;
     parentBlockId: string | null;
-    /** texto atual do trecho */
+    /** texto atual do trecho (vazio para imagens) */
     text: string;
+    /** o que foi clicado: chip de texto, imagem marcada, ou o aviso de imagem faltando */
+    kind: 'text' | 'image' | 'missingImage';
 }
 interface MinutaEditorOptions {
     /** documento inicial (HTML) */
@@ -232,6 +252,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;
@@ -246,8 +272,10 @@ interface MinutaEditorOptions {
     /** clique no cabeçalho/rodapé da folha (além do CustomEvent `poc:edit-chrome`) */
     onEditChrome?: (part: 'header' | 'footer') => void;
     /**
-     * Clique numa variável renderizada (`<span data-variable-id>` do documento).
-     * É a ponte documento → formulário: o host recebe o id e foca o campo.
+     * Clique numa variável renderizada: chip de texto (`<span data-variable-id>`),
+     * imagem marcada (`<img data-variable-id>`) ou aviso de imagem faltando —
+     * `kind` diz qual. É a ponte documento → formulário: o host recebe o id e
+     * foca o campo.
      */
     onVariableClick?: (variable: MinutaVariableRef) => void;
     onError?: (message: string) => void;
@@ -274,6 +302,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.
@@ -283,11 +313,26 @@ interface MinutaEditor {
      * Troca o texto de TODAS as ocorrências da variável no documento — inclusive
      * numa edição livre, porque a marca é um nó e sobrevive à lapidação. É o que
      * deixa um formulário de variáveis continuar valendo depois que o advogado
-     * editou o texto em volta. Devolve quantas ocorrências mudaram.
+     * editou o texto em volta. O aviso de variável sem valor
+     * (`data-invalid-variable`) também é uma ocorrência: ao receber valor vira
+     * chip comum. 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[];
+    /**
+     * Renova o `src` das imagens inseridas no editor (as que têm `data-vault-src`):
+     * o presignado do upload expira, então quem reabre uma edição salva passa
+     * um resolvedor `vault://` → URL nova (no defesa.ai, `POST /data/vault/download-url`).
+     * Devolve quantos nós mudaram. Não entra no undo nem dispara `onChange`.
+     */
+    refreshVaultImages: (resolveUrl: (vaultUrl: string) => Promise<string>) => Promise<number>;
     /** repagina (o host chama após mudar algo que afeta altura fora do editor) */
     schedulePaginate: () => void;
     /** reconstrói cabeçalhos/rodapés com o chrome atual, sem repaginar */
@@ -387,6 +432,24 @@ declare function shouldMoveBreakToHeading(params: {
     capacity: number;
 }): boolean;
 
+interface RefreshVaultImagesOptions {
+    /**
+     * Metadados extras da transação (ex.: a marca de "programática" do embed
+     * Nuxt, para o rastro de anotações não contar a troca como texto novo).
+     */
+    meta?: Record<string, unknown>;
+}
+/**
+ * Re-resolve todas as imagens `vault://` do documento: as inseridas pela
+ * toolbar entram com `src` presignado (funciona agora) e `data-vault-src`
+ * durável; como o presignado expira, quem reabre uma edição salva chama isto
+ * no load. `resolveUrl` recebe a `vault://` e devolve a URL nova (no defesa.ai,
+ * `POST /data/vault/download-url`). Devolve quantos nós mudaram.
+ *
+ * Fora do histórico de undo: renovar um link não é uma edição do advogado.
+ */
+declare function refreshVaultImages(editor: Editor, resolveUrl: (vaultUrl: string) => Promise<string>, options?: RefreshVaultImagesOptions): Promise<number>;
+
 /**
  * Sanitização do HTML rico de cabeçalho/rodapé (chrome) — conteúdo criado em
  * contenteditable e PERSISTIDO (template.headers, case_edition.chrome). Sem
@@ -409,5 +472,5 @@ declare function escapeVaultAttr(value: string): string;
 declare function decodeVaultAttr(value: string): string;
 declare function vaultImageHtml(src: string, vaultUrl: string): string;
 
-export { A4_HEIGHT_PX, A4_WIDTH_PX, DEFAULT_MARGINS, DOC_FONTS, ICON_PATHS, POC_ASSET_SWAP, PocDocument, PocFootnoteRef, PocHtmlIsland, PocInlineStyle, PocMinutaBlock, PocMissingImage, PocPageConfig, PocStylePassthrough, PocStyledDiv, PocTemplateVariable, PocUnderline, PocVariableChip, buildPocExtensions, createMinutaEditor, decodeVaultAttr, escapeHtml, escapeVaultAttr, extractTemplateVariables, footnoteHtmlToRuns, footnoteSizePt, iconSvg, renumberPocFootnotes, resolveTemplateVariables, sanitizeFootnoteHtml, sanitizeRichHtml, shouldMoveBreakToHeading, variableChipHtml, vaultImageHtml };
-export type { FootnoteRun, MinutaChromeText, MinutaEditor, MinutaEditorOptions, MinutaHeader, MinutaMargins, MinutaVariableCatalog, MinutaVariableDef, MinutaVariableRef, PocKeepWithNextItem };
+export { A4_HEIGHT_PX, A4_WIDTH_PX, DEFAULT_MARGINS, DOC_FONTS, ICON_PATHS, POC_ASSET_SWAP, PocDocument, PocFootnoteRef, PocHtmlIsland, PocInlineStyle, PocMinutaBlock, PocMissingImage, PocPageConfig, PocStylePassthrough, PocStyledDiv, PocTemplateVariable, PocUnderline, PocVariableChip, buildPocExtensions, createMinutaEditor, decodeVaultAttr, dispatchVariableClick, escapeHtml, escapeVaultAttr, extractTemplateVariables, footnoteHtmlToRuns, footnoteSizePt, iconSvg, refreshVaultImages, renumberPocFootnotes, resolveTemplateVariables, sanitizeFootnoteHtml, sanitizeRichHtml, shouldMoveBreakToHeading, variableChipHtml, vaultImageHtml };
+export type { FootnoteRun, MinutaChromeText, MinutaEditor, MinutaEditorOptions, MinutaHeader, MinutaMargins, MinutaVariableCatalog, MinutaVariableDef, MinutaVariableRef, PocKeepWithNextItem, RefreshVaultImagesOptions, VariableClickKind };

package/dist/index.d.ts

@@ -92,6 +92,19 @@ declare function resolveTemplateVariables(html: string | null | undefined, value
 declare const POC_ASSET_SWAP = "pocAssetSwap";
 declare const PocDocument: Node<any, any>;
 declare const PocMinutaBlock: Node<any, any>;
+/**
+ * Clique numa variável do case — a ponte documento → formulário. Disparado no
+ * DOM do editor (com bubbling), não em `window`: dois editores na página não
+ * se cruzam, e o host escuta no próprio elemento. `kind` diz o que foi
+ * clicado: chip de texto, `<img data-variable-id>` ou aviso de imagem faltando.
+ */
+type VariableClickKind = 'text' | 'image' | 'missingImage';
+declare function dispatchVariableClick(editor: Editor, detail: {
+    variableId: string | null;
+    parentBlockId: string | null;
+    text: string;
+    kind: VariableClickKind;
+}): void;
 declare const PocHtmlIsland: Node<any, any>;
 /**
  * Aviso de imagem faltando — a caixa tracejada que o render emite quando a
@@ -113,7 +126,12 @@ declare const PocHtmlIsland: Node<any, any>;
  */
 declare const PocMissingImage: Node<any, any>;
 declare const PocVariableChip: Node<any, any>;
-/** `<span data-variable-id>` com o texto trocado — o que `setVariableValue` grava no chip */
+/**
+ * `<span data-variable-id>` com o texto trocado — o que `setVariableValue` grava
+ * no chip. O aviso de variável sem valor (`data-invalid-variable`, vermelho)
+ * é o mesmo nó: ao receber um valor ele vira chip comum — perde a marca de
+ * inválido e o estilo do aviso, mantém id, bloco e índice.
+ */
 declare function variableChipHtml(currentHtml: string, text: string): string;
 /**
  * Placeholder de variável do TEMPLATE — o `#NOME_VARIAVEL` de antigamente, só
@@ -198,12 +216,14 @@ interface MinutaChromeText {
     footerScope?: 'all' | 'first';
     showPageNumber?: boolean;
 }
-/** uma variável do case dentro do documento (`<span data-variable-id>`) */
+/** uma variável do case dentro do documento (`<span data-variable-id>`, `<img data-variable-id>` ou aviso de imagem faltando) */
 interface MinutaVariableRef {
     variableId: string;
     parentBlockId: string | null;
-    /** texto atual do trecho */
+    /** texto atual do trecho (vazio para imagens) */
     text: string;
+    /** o que foi clicado: chip de texto, imagem marcada, ou o aviso de imagem faltando */
+    kind: 'text' | 'image' | 'missingImage';
 }
 interface MinutaEditorOptions {
     /** documento inicial (HTML) */
@@ -232,6 +252,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;
@@ -246,8 +272,10 @@ interface MinutaEditorOptions {
     /** clique no cabeçalho/rodapé da folha (além do CustomEvent `poc:edit-chrome`) */
     onEditChrome?: (part: 'header' | 'footer') => void;
     /**
-     * Clique numa variável renderizada (`<span data-variable-id>` do documento).
-     * É a ponte documento → formulário: o host recebe o id e foca o campo.
+     * Clique numa variável renderizada: chip de texto (`<span data-variable-id>`),
+     * imagem marcada (`<img data-variable-id>`) ou aviso de imagem faltando —
+     * `kind` diz qual. É a ponte documento → formulário: o host recebe o id e
+     * foca o campo.
      */
     onVariableClick?: (variable: MinutaVariableRef) => void;
     onError?: (message: string) => void;
@@ -274,6 +302,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.
@@ -283,11 +313,26 @@ interface MinutaEditor {
      * Troca o texto de TODAS as ocorrências da variável no documento — inclusive
      * numa edição livre, porque a marca é um nó e sobrevive à lapidação. É o que
      * deixa um formulário de variáveis continuar valendo depois que o advogado
-     * editou o texto em volta. Devolve quantas ocorrências mudaram.
+     * editou o texto em volta. O aviso de variável sem valor
+     * (`data-invalid-variable`) também é uma ocorrência: ao receber valor vira
+     * chip comum. 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[];
+    /**
+     * Renova o `src` das imagens inseridas no editor (as que têm `data-vault-src`):
+     * o presignado do upload expira, então quem reabre uma edição salva passa
+     * um resolvedor `vault://` → URL nova (no defesa.ai, `POST /data/vault/download-url`).
+     * Devolve quantos nós mudaram. Não entra no undo nem dispara `onChange`.
+     */
+    refreshVaultImages: (resolveUrl: (vaultUrl: string) => Promise<string>) => Promise<number>;
     /** repagina (o host chama após mudar algo que afeta altura fora do editor) */
     schedulePaginate: () => void;
     /** reconstrói cabeçalhos/rodapés com o chrome atual, sem repaginar */
@@ -387,6 +432,24 @@ declare function shouldMoveBreakToHeading(params: {
     capacity: number;
 }): boolean;
 
+interface RefreshVaultImagesOptions {
+    /**
+     * Metadados extras da transação (ex.: a marca de "programática" do embed
+     * Nuxt, para o rastro de anotações não contar a troca como texto novo).
+     */
+    meta?: Record<string, unknown>;
+}
+/**
+ * Re-resolve todas as imagens `vault://` do documento: as inseridas pela
+ * toolbar entram com `src` presignado (funciona agora) e `data-vault-src`
+ * durável; como o presignado expira, quem reabre uma edição salva chama isto
+ * no load. `resolveUrl` recebe a `vault://` e devolve a URL nova (no defesa.ai,
+ * `POST /data/vault/download-url`). Devolve quantos nós mudaram.
+ *
+ * Fora do histórico de undo: renovar um link não é uma edição do advogado.
+ */
+declare function refreshVaultImages(editor: Editor, resolveUrl: (vaultUrl: string) => Promise<string>, options?: RefreshVaultImagesOptions): Promise<number>;
+
 /**
  * Sanitização do HTML rico de cabeçalho/rodapé (chrome) — conteúdo criado em
  * contenteditable e PERSISTIDO (template.headers, case_edition.chrome). Sem
@@ -409,5 +472,5 @@ declare function escapeVaultAttr(value: string): string;
 declare function decodeVaultAttr(value: string): string;
 declare function vaultImageHtml(src: string, vaultUrl: string): string;
 
-export { A4_HEIGHT_PX, A4_WIDTH_PX, DEFAULT_MARGINS, DOC_FONTS, ICON_PATHS, POC_ASSET_SWAP, PocDocument, PocFootnoteRef, PocHtmlIsland, PocInlineStyle, PocMinutaBlock, PocMissingImage, PocPageConfig, PocStylePassthrough, PocStyledDiv, PocTemplateVariable, PocUnderline, PocVariableChip, buildPocExtensions, createMinutaEditor, decodeVaultAttr, escapeHtml, escapeVaultAttr, extractTemplateVariables, footnoteHtmlToRuns, footnoteSizePt, iconSvg, renumberPocFootnotes, resolveTemplateVariables, sanitizeFootnoteHtml, sanitizeRichHtml, shouldMoveBreakToHeading, variableChipHtml, vaultImageHtml };
-export type { FootnoteRun, MinutaChromeText, MinutaEditor, MinutaEditorOptions, MinutaHeader, MinutaMargins, MinutaVariableCatalog, MinutaVariableDef, MinutaVariableRef, PocKeepWithNextItem };
+export { A4_HEIGHT_PX, A4_WIDTH_PX, DEFAULT_MARGINS, DOC_FONTS, ICON_PATHS, POC_ASSET_SWAP, PocDocument, PocFootnoteRef, PocHtmlIsland, PocInlineStyle, PocMinutaBlock, PocMissingImage, PocPageConfig, PocStylePassthrough, PocStyledDiv, PocTemplateVariable, PocUnderline, PocVariableChip, buildPocExtensions, createMinutaEditor, decodeVaultAttr, dispatchVariableClick, escapeHtml, escapeVaultAttr, extractTemplateVariables, footnoteHtmlToRuns, footnoteSizePt, iconSvg, refreshVaultImages, renumberPocFootnotes, resolveTemplateVariables, sanitizeFootnoteHtml, sanitizeRichHtml, shouldMoveBreakToHeading, variableChipHtml, vaultImageHtml };
+export type { FootnoteRun, MinutaChromeText, MinutaEditor, MinutaEditorOptions, MinutaHeader, MinutaMargins, MinutaVariableCatalog, MinutaVariableDef, MinutaVariableRef, PocKeepWithNextItem, RefreshVaultImagesOptions, VariableClickKind };

package/dist/index.mjs

@@ -68,6 +68,11 @@ const PocMinutaBlock = Node$1.create({
     }), 0];
   }
 });
+function dispatchVariableClick(editor, detail) {
+  if (!detail.variableId)
+    return;
+  editor.view.dom.dispatchEvent(new CustomEvent("poc:variable-click", { bubbles: true, detail }));
+}
 const PocHtmlIsland = Node$1.create({
   name: "htmlIsland",
   group: "block",
@@ -95,6 +100,17 @@ const PocHtmlIsland = Node$1.create({
       dom.className = "poc-island";
       dom.contentEditable = "false";
       dom.innerHTML = sanitizeRichHtml(node.attrs.html);
+      dom.addEventListener("click", (event) => {
+        const target = event.target?.closest?.("img[data-variable-id]");
+        if (!target)
+          return;
+        dispatchVariableClick(editor, {
+          variableId: target.getAttribute("data-variable-id"),
+          parentBlockId: target.getAttribute("data-parent-block-id"),
+          text: "",
+          kind: "image"
+        });
+      });
       const img = dom.children.length === 1 && dom.firstElementChild instanceof HTMLImageElement ? dom.firstElementChild : null;
       if (img)
         dom.classList.add("poc-island--img");
@@ -206,11 +222,23 @@ const PocMissingImage = Node$1.create({
       const caixa = document.createElement("div");
       caixa.className = "missing-image-warning";
       caixa.setAttribute("style", MISSING_IMAGE_BOX_STYLE);
+      caixa.setAttribute("data-variable-id", node.attrs.variableId ?? "");
+      caixa.setAttribute("data-parent-block-id", node.attrs.parentBlockId ?? "");
       const linha = document.createElement("span");
       linha.setAttribute("style", MISSING_IMAGE_ROW_STYLE);
       linha.textContent = `\u26A0 A imagem ${node.attrs.variableId ?? ""} est\xE1 faltando`;
       caixa.appendChild(linha);
       dom.appendChild(caixa);
+      dom.addEventListener("click", (event) => {
+        if (event.target.closest(".poc-missing-image__remove"))
+          return;
+        dispatchVariableClick(editor, {
+          variableId: node.attrs.variableId,
+          parentBlockId: node.attrs.parentBlockId,
+          text: "",
+          kind: "missingImage"
+        });
+      });
       if (!editor.isEditable)
         return { dom };
       caixa.style.position = "relative";
@@ -280,14 +308,12 @@ const PocVariableChip = Node$1.create({
       dom.innerHTML = sanitizeRichHtml(node.attrs.html);
       dom.addEventListener("click", (event) => {
         event.preventDefault();
-        editor.view.dom.dispatchEvent(new CustomEvent("poc:variable-click", {
-          bubbles: true,
-          detail: {
-            variableId: node.attrs.variableId,
-            parentBlockId: node.attrs.parentBlockId,
-            text: node.attrs.text
-          }
-        }));
+        dispatchVariableClick(editor, {
+          variableId: node.attrs.variableId,
+          parentBlockId: node.attrs.parentBlockId,
+          text: node.attrs.text,
+          kind: "text"
+        });
       });
       return { dom };
     };
@@ -300,6 +326,10 @@ function variableChipHtml(currentHtml, text) {
   if (!el)
     return currentHtml;
   el.textContent = text;
+  if (el.hasAttribute("data-invalid-variable")) {
+    el.removeAttribute("data-invalid-variable");
+    el.removeAttribute("style");
+  }
   return el.outerHTML;
 }
 function readCatalog(catalog) {
@@ -636,7 +666,7 @@ function resolveTemplateVariables(html, values) {
   return { html: resolved, missing };
 }
 
-function escapeAttr(value) {
+function escapeAttr$1(value) {
   return value.replace(/&/g, "&").replace(/"/g, """);
 }
 function escapeVaultAttr(value) {
@@ -646,7 +676,81 @@ function decodeVaultAttr(value) {
   return value.replace(/&quot;/g, '"').replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&amp;/g, "&");
 }
 function vaultImageHtml(src, vaultUrl) {
-  return `<img src="${escapeAttr(src)}" data-vault-src="${escapeVaultAttr(vaultUrl)}" style="width: 420px; height: auto; max-width: 100%;">`;
+  return `<img src="${escapeAttr$1(src)}" data-vault-src="${escapeVaultAttr(vaultUrl)}" style="width: 420px; height: auto; max-width: 100%;">`;
+}
+
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function swapSrcKeepRef(html, attrValue, freshUrl) {
+  const needle = `data-vault-src="${attrValue}"`;
+  if (!html.includes(needle))
+    return html;
+  const tagRe = new RegExp(`<img\\b[^>]*?${escapeRegExp(needle)}[^>]*?>`, "g");
+  return html.replace(tagRe, (tag) => tag.replace(/\ssrc="[^"]*"/, ` src="${escapeAttr(freshUrl)}"`));
+}
+async function refreshVaultImages(editor, resolveUrl, options = {}) {
+  if (!editor || editor.isDestroyed)
+    return 0;
+  const refs = /* @__PURE__ */ new Set();
+  editor.state.doc.descendants((node) => {
+    if (node.type.name !== "htmlIsland")
+      return;
+    for (const m of String(node.attrs.html ?? "").matchAll(/data-vault-src="([^"]+)"/g))
+      refs.add(m[1]);
+  });
+  if (!refs.size)
+    return 0;
+  const resolved = /* @__PURE__ */ new Map();
+  await Promise.all([...refs].map(async (attrValue) => {
+    try {
+      const fresh = await resolveUrl(decodeVaultAttr(attrValue));
+      if (!fresh)
+        return;
+      await new Promise((done) => {
+        const img = new Image();
+        const finish = () => done();
+        img.onload = finish;
+        img.onerror = finish;
+        setTimeout(finish, 4e3);
+        img.src = fresh;
+      });
+      resolved.set(attrValue, fresh);
+    } catch (error) {
+      console.error("minuta: falha ao resolver imagem do vault", attrValue, error);
+    }
+  }));
+  if (!resolved.size || editor.isDestroyed)
+    return 0;
+  const tr = editor.state.tr;
+  let touched = 0;
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== "htmlIsland")
+      return;
+    let html = String(node.attrs.html ?? "");
+    let changed = false;
+    for (const [attrValue, freshUrl] of resolved) {
+      const next = swapSrcKeepRef(html, attrValue, freshUrl);
+      if (next !== html) {
+        html = next;
+        changed = true;
+      }
+    }
+    if (changed) {
+      tr.setNodeMarkup(pos, void 0, { ...node.attrs, html });
+      touched++;
+    }
+  });
+  if (!touched)
+    return 0;
+  tr.setMeta("addToHistory", false);
+  for (const [key, value] of Object.entries(options.meta ?? {}))
+    tr.setMeta(key, value);
+  editor.view.dispatch(tr);
+  return touched;
 }
 
 function h(tag, attrs = {}, children = []) {
@@ -1426,8 +1530,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")) {
@@ -1649,12 +1754,22 @@ function createMinutaEditor(element, opts) {
     opts.onVariableClick?.({
       variableId: detail.variableId,
       parentBlockId: detail.parentBlockId ?? null,
-      text: String(detail.text ?? "")
+      text: String(detail.text ?? ""),
+      kind: detail.kind === "image" || detail.kind === "missingImage" ? detail.kind : "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;
+    return sheet.querySelector(`.poc-missing-image [data-variable-id="${id}"]`);
+  }
   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 +1797,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,9 +2026,19 @@ function createMinutaEditor(element, opts) {
     setShowBlockOrigin(on) {
       toggleClass(root, "poc-no-block-origin", !on);
     },
+    setBlockClickWhileEditing(on) {
+      blockClickWhileEditing = on;
+    },
     scrollToVariable,
     setVariableValue,
+    setVariableImage,
     variablesInDocument,
+    refreshVaultImages(resolveUrl) {
+      const ed = tiptap;
+      if (!ed || ed.isDestroyed)
+        return Promise.resolve(0);
+      return refreshVaultImages(ed, resolveUrl, { meta: { [POC_ASSET_SWAP]: true } });
+    },
     schedulePaginate,
     refreshChrome,
     totalPages: () => totalPages,
@@ -1884,4 +2058,4 @@ function createMinutaEditor(element, opts) {
   return api;
 }
 
-export { A4_HEIGHT_PX, A4_WIDTH_PX, DEFAULT_MARGINS, DOC_FONTS, ICON_PATHS, PAGINATE_META, POC_ASSET_SWAP, PocDocument, PocFootnoteRef, PocHtmlIsland, PocInlineStyle, PocMinutaBlock, PocMissingImage, PocPaginationPlugin, PocStylePassthrough, PocStyledDiv, PocTemplateVariable, PocUnderline, PocVariableChip, breaksEqual, buildPocExtensions, computePocBreaks, createMinutaEditor, decodeVaultAttr, escapeHtml, escapeVaultAttr, extractTemplateVariables, iconSvg, pocPageKey, renumberPocFootnotes, resolveTemplateVariables, sanitizeFootnoteHtml, sanitizeRichHtml, variableChipHtml, vaultImageHtml };
+export { A4_HEIGHT_PX, A4_WIDTH_PX, DEFAULT_MARGINS, DOC_FONTS, ICON_PATHS, PAGINATE_META, POC_ASSET_SWAP, PocDocument, PocFootnoteRef, PocHtmlIsland, PocInlineStyle, PocMinutaBlock, PocMissingImage, PocPaginationPlugin, PocStylePassthrough, PocStyledDiv, PocTemplateVariable, PocUnderline, PocVariableChip, breaksEqual, buildPocExtensions, computePocBreaks, createMinutaEditor, decodeVaultAttr, dispatchVariableClick, escapeHtml, escapeVaultAttr, extractTemplateVariables, iconSvg, pocPageKey, refreshVaultImages, renumberPocFootnotes, resolveTemplateVariables, sanitizeFootnoteHtml, sanitizeRichHtml, variableChipHtml, vaultImageHtml };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/minuta-editor",
-  "version": "1.0.2",
+  "version": "1.2.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",