pluton-html-angular-21-22

Editor HTML híbrido para Angular 21–22 com suporte a templates EJS: modo Visual (contenteditable com chips) e modo Código (Monaco + preview ao vivo).

Pacote pré-compilado — contém apenas bundles compilados, tipos TypeScript e estilos SCSS (sem código-fonte).

Demo online (StackBlitz): angular-pluton-html-editor

Recursos principais

• Variáveis EJS (<%= ... %>) e lógica de template (<% if (...) { %>, <% } %>, loops, etc.) como chips no modo visual
• Toolbar sincronizada com a seleção (negrito, itálico, sublinhado, tachado, alinhamento)
• Formatação em variáveis — negrito, itálico, cores e tamanho acumulam no style do chip
• Tamanho de fonte personalizado (ex.: 27px) além da lista fixa
• Layout de página — Automático (largura máxima, padrão), A4/A3/Letter, retrato/paisagem, múltiplas folhas e quebra de página
• Config global + local com defaults exportáveis e botões customizados na toolbar
• Modo código com altura dobrada: editor Monaco e preview em 50% / 50%

Instalação

js-beautify já vem como dependência da lib (não precisa instalar à parte).

npm install pluton-html-angular-21-22 monaco-editor ngx-monaco-editor-v2

pnpm add pluton-html-angular-21-22 monaco-editor ngx-monaco-editor-v2

Versões suportadas

Recomendado: Angular 21.2.x · Node 20.19+ ou 22.12+

| Angular | Node.js (consumidor) | |---------|----------------------| | 21.0 – 21.2 | ≥ 20.11 (mín.) · 20.19+ recomendado | | 22.0+ | 22.12+ ou 24+ recomendado |

Angular ≤ 20 e ≥ 23 não são suportados por este pacote. Para Angular 6–8, use pluton-html-angular-6-8.

Configuração do Monaco (obrigatório)

Em angular.json, adicione os assets do Monaco ao app consumidor:

{
  "glob": "**/*",
  "input": "node_modules/monaco-editor/min",
  "output": "assets/monaco"
}

Em app.config.ts (loader.js fica em assets/monaco/vs/):

import { ApplicationConfig } from '@angular/core';
import { provideMonacoEditor } from 'ngx-monaco-editor-v2';

export const appConfig: ApplicationConfig = {
  providers: [provideMonacoEditor({ baseUrl: 'assets/monaco/vs' })],
};

Estilos dos blocos (cards, headers, chips EJS)

Importe o SCSS no styles.scss do app:

@use 'pluton-html-angular-21-22/styles/editor-blocks';

Sem esse import, cards, chips EJS e estilos de debug não aparecem corretamente no modo visual.

Uso mínimo

import { Component } from '@angular/core';
import { PlutonHtmlEditorComponent } from 'pluton-html-angular-21-22';

@Component({
  selector: 'app-example',
  imports: [PlutonHtmlEditorComponent],
  template: `
    <pluton-html-editor
      [content]="html"
      (contentChange)="html = $event"
    />
  `,
})
export class ExamplePage {
  html = '<p>Olá <%= user.name %></p>';
}

Exemplo com configuração global e local

A configuração é mesclada nesta ordem (o último vence em chaves de primeiro nível; objetos aninhados são mesclados em profundidade):

1. DEFAULT_PLUTON_HTML_EDITOR_CONFIG — defaults exportados pela biblioteca
2. PLUTON_HTML_EDITOR_CONFIG — token global (app)
3. [config] no <pluton-html-editor> — config local da instância

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { PLUTON_HTML_EDITOR_CONFIG } from 'pluton-html-angular-21-22';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: PLUTON_HTML_EDITOR_CONFIG,
      useValue: {
        theme: 'vs-dark',
        minifyOnEmit: false,
        defaultViewMode: 'visual',
        features: {
          insertPageBreak: true,
          debugCss: true,
        },
        defaults: {
          typography: {
            fontSize: '16px',
            fontFamily: 'Arial, sans-serif',
            foreColor: '#1e293b',
          },
          pageLayout: {
            pageSize: { preset: 'A4', orientation: 'portrait' },
            margin: { top: '16px', right: '16px', bottom: '16px', left: '16px' },
          },
        },
      },
    },
  ],
};

<pluton-html-editor
  [content]="html"
  [height]="720"
  [config]="{
    theme: 'vs',
    features: { insertImage: true },
    defaults: { typography: { fontSize: '18px' } }
  }"
  (contentChange)="html = $event"
/>

Chips EJS no modo visual

| Tipo | Sintaxe | Classe CSS | Aparência | |------|---------|------------|-----------| | Variável / saída | <%= data.name %> | pluton-editor-var | Chip cinza | | Lógica de template | <% if (x) { %>, <% } %>, <% for (...) { %> | pluton-editor-template | Chip violeta |

Edição

• Duplo clique no chip abre edição inline da expressão ou do bloco de lógica
• Enter confirma, Esc cancela

Formatação na seleção

• Selecione o chip (ou texto dentro dele) e use B, I, U, S, cores ou tamanho
• Vários estilos acumulam no atributo style do chip (ex.: negrito + itálico + 27px)
• Clicar de novo no mesmo botão remove só aquele estilo (toggle)
• Tags EJS digitadas como texto são promovidas a chips automaticamente

Padrões regex configuráveis:

import {
  DEFAULT_VARIABLE_PATTERN,
  DEFAULT_TEMPLATE_LOGIC_PATTERN,
} from 'pluton-html-angular-21-22';

// Padrão: <%= expressão %>
DEFAULT_VARIABLE_PATTERN; // /<%=\s*([\s\S]*?)\s*%>/g

// Padrão: <% lógica %> (exceto <%=)
DEFAULT_TEMPLATE_LOGIC_PATTERN; // /<%(?!=)\s*([\s\S]*?)\s*%>/g

Modos Visual e Código

Modo visual

• Canvas com folhas; padrão Automático (largura 100% do editor) ou tamanho fixo (A4, A3, etc.)
• Toolbar fixa; scroll apenas no corpo do editor
• Painel Debug CSS destaca blocos, seções, páginas e chips

Modo código

• Altura total do componente dobra em relação ao modo visual (editorHeight × 2)
• Monaco (metade superior) e Preview (metade inferior)
• Botão flutuante F formata o HTML com js-beautify (se features.formatCodeButton)

PlutonHtmlEditorConfig

| Campo | Descrição | |-------|-----------| | theme | 'vs' | 'vs-dark' — tema do Monaco | | minifyOnEmit | Minifica HTML no contentChange | | variablePattern | Regex para saída/variáveis (<%= ... %>) | | templateLogicPattern | Regex para lógica (<% ... %> exceto <%=) | | visualDebounceMs | Debounce do sync no modo visual (padrão 300) | | defaultViewMode | 'visual' | 'code' | | editorHeight | Altura no modo visual. Número = px; string = CSS. Padrão: min(85vh, 720px) | | editorMinHeight | Altura mínima (padrão 420 px). No modo código, valor efetivo × 2 | | features | Liga/desliga grupos da toolbar | | defaults | Valores iniciais dos painéis e seletores | | lists | Listas customizadas (fontes, tamanhos, margens, etc.) | | customToolbarButtons | Botões extras no header |

Principais chaves de features (todas true por padrão): undoRedo, textFormatting, lists, alignment, typography, colors, insertImage, insertColumns, insertCard, insertTable, insertPageBreak, insertPageLayout, debugCss, viewModeSwitch, formatCodeButton.

Botões customizados na toolbar

customToolbarButtons: [
  {
    id: 'paste-model',
    label: 'Modelo',
    icon: 'template',
    action: {
      type: 'insertHtml',
      html: '<% if (order.show) { %><p><%= order.id %></p><% } %>',
      modes: ['visual', 'code'],
    },
  },
],

<pluton-html-editor (customToolbarClick)="onCustom($event)" />

| action.type | Comportamento | |---------------|----------------| | insertHtml | Cola HTML na seleção/cursor | | deleteSelection | Apaga a seleção | | deleteWord | Apaga seleção ou palavra sob o cursor |

API do componente

| Input / Output | Tipo | Descrição | |----------------|------|-----------| | content | string | HTML inicial | | contentChange | string | HTML emitido (inline + EJS) | | config | Partial<PlutonHtmlEditorConfig> | Config local | | height | string \| number | Sobrescreve editorHeight nesta instância | | defaultViewMode | 'code' \| 'visual' | Modo inicial | | viewModeChange | 'code' \| 'visual' | Troca de modo | | customToolbarClick | PlutonCustomToolbarClickEvent | Botão customizado sem action embutida |

Métodos públicos (ViewChild)

| Método | Descrição | |--------|-----------| | insertHtmlAtCursor(html) | Insere HTML no cursor (visual ou código) | | deleteSelectionOrWord() | Remove seleção ou palavra | | getToolbarSelection() | { selectedText, hasSelection } |

Exports úteis

import {
  PlutonHtmlEditorComponent,
  PLUTON_HTML_EDITOR_CONFIG,
  DEFAULT_PLUTON_HTML_EDITOR_CONFIG,
  DEFAULT_VARIABLE_PATTERN,
  DEFAULT_TEMPLATE_LOGIC_PATTERN,
  PLUTON_EDITOR_VAR_CLASS,
  PLUTON_EDITOR_TEMPLATE_CLASS,
  mergePlutonHtmlEditorConfig,
  createDefaultPlutonHtmlEditorConfig,
  createPlutonHtmlEditorConfig,
  normalizeFlexColumnsInHtml,
  scaleCssSize,
} from 'pluton-html-angular-21-22';

PDF / Puppeteer (opcional)

Somente colunas inseridas pelo botão Colunas da toolbar usam <table> (melhor em PDF). HTML colado ou editado com display:flex não é alterado pelo editor.

Para converter flex legado só na geração do PDF (no seu backend):

import { normalizeFlexColumnsInHtml } from 'pluton-html-angular-21-22';

const html = normalizeFlexColumnsInHtml(ejs.render('template', data));

Repositório

Código-fonte e guia de contribuição: github.com/grupoprominas/pluton-html-editor