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: importe pluton-stackblitz-angular-21-22 no StackBlitz.

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 ≤ 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

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

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)" />

API do componente

Métodos públicos (ViewChild)

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