html-editor.php library

Path in the Gestor bibliotecas/html-editor.php

The editor that shows up in the forms of pages, layouts, components, templates, publications, menus, galleries, forms and indexes (about 30 calls in 12 modules). The server builds the screen and answers AJAX; the editing itself runs in the browser (interface/html-editor.js and html-editor-interface.js).

Opening the editor: html_editor_componente()

gestor_incluir_biblioteca('html-editor');
$_GESTOR['pagina'] = modelo_var_troca($_GESTOR['pagina'], '#html-editor#', html_editor_componente([
    'editar' => true,
    'modulo' => $modulo,                    // the module JSON
    'alvo' => 'paginas',                    // picks templates and AI prompts
    'css_precompiled' => $record['css_precompiled'],
    'layout_id' => $record['layout_id'],    // to preview with the layout cascade
]));

Parameters: editar / adicionarEditar (editing, or adding while already editing HTML and CSS), modulo, alvo, alvos_modelos (extra template targets), publisher and publisherPage (publisher variable controls, html_editor_publisher_controls()), css_precompiled and layout_id.

The screen has:

• HTML and CSS code in CodeMirror (external assets);

• visual mode and preview in an iframe with Tailwind running in the browser (registry version, html_editor_tailwind_browser_version()), in desktop, tablet and phone sizes; the base CSS is the same cascade as the site: precompiled CSS of the layout and of the resource, plus the layout's authored CSS (html_editor_css_precompiled_baseline(), html_editor_layout_css_autoral(), html_editor_css_precompiled_concatenar()). Changing the layout in the form reloads that cascade (html-editor-layout-css);

• templates (per target) to start a page;

• @[[…]]@ variables and widgets shown as boxes in the visual mode, with the real content rendered on demand;

• an AI assistant (ia.php), a SEO & Sharing tab for pages, and the HTML/CSS backup history to restore.

What the browser compiles goes to css_compiled on save, with the provenance signature (resources).

AJAX: html_editor_ajax_interface()

Called by interface.php when the library is among the module's. It first goes through ia_ajax_interface() and then dispatches by ajax-opcao:

Theme tokens for the AI

So the AI uses the site's colors and fonts instead of inventing them, the editor summarizes the project's Tailwind contract into a {{theme_tokens}} block of about 1.5 KB (2 KB hard cap), prioritizing color, font and spacing: html_editor_ia_tokens_tema_compilar(), with html_editor_ia_tokens_tema_limite(), html_editor_ia_tokens_tema_namespaces(), html_editor_ia_tokens_tema_valor_util(), html_editor_ia_tokens_tema_bloco(), html_editor_ia_tokens_tema_componentes(), html_editor_ia_css_classes_resumir() and html_editor_ia_extrair_tokens_tema(). The AI mode receives the block in its own marker (html_editor_ia_theme_tokens_marcador(), html_editor_ia_modo_theme_tokens_aplicar()).

Includes and filters

• html_editor_include(['js_vars' => …]) includes the visual editor and its dependencies; the html-editor.html_editor_include.projectJS and html-editor.html_editor_include.imagepickJS filters (hooks) let the project replace the project JS and the image picker.

• html_editor_assets_registro() loads the external assets registry on demand.

• html_editor_tailwind_browser_contract() reads the project theme contract (contents/tailwindcss/browser-contract.css, which overrides the core one) handed to the in-browser Tailwind.

Functions

html_editor_publisher_controls(array $params = false)

html_editor_tailwind_browser_version(): string

html_editor_assets_registro(): array

html_editor_tailwind_browser_contract(): string

html_editor_ia_tokens_tema_limite(): int

html_editor_ia_tokens_tema_namespaces(): array

html_editor_ia_tokens_tema_valor_util(string $valor): bool

html_editor_ia_tokens_tema_bloco(string $css): string

html_editor_ia_tokens_tema_componentes(string $css): array

html_editor_ia_css_classes_resumir(string $css, int|null $limiteBytes = null): string

html_editor_ia_tokens_tema_compilar(string $css, int|null $limiteBytes = null): string

html_editor_ia_theme_tokens_marcador(): string

html_editor_ia_modo_theme_tokens_aplicar(string $modo, string $theme_tokens): string

html_editor_ia_extrair_tokens_tema(string|null $caminhoContrato = null, int|null $limiteBytes = null): string

html_editor_css_precompiled_baseline(array $params = false): string

html_editor_layout_css_autoral(string $layout_id): string

html_editor_css_precompiled_concatenar(string $layout, string $recurso): string

html_editor_componente($params = false)

html_editor_include($params = false)

html_editor_ajax_interface(array $params = false)

html_editor_ajax_layout_css()

html_editor_var_pattern()

html_editor_var_box($marker, $rendered, $tipo)

html_editor_render_widget_signature($signature)

html_editor_widget_renderizar($sig): array

html_editor_widget_js_modulos(): array

html_editor_resolver_var($id)

html_editor_boxes_widgets($html)

html_editor_resolver_variaveis($html)

html_editor_boxes_variaveis($html)

html_editor_ajax_render_vars()

html_editor_ajax_widget_render()

html_editor_ajax_widget_types()

html_editor_ajax_widgets_list()

html_editor_widgets_buscar(array $params = array()): array

html_editor_ajax_templates_load()

html_editor_ajax_ia_requests()

Widgets and responsive previews

html_editor_widget_renderizar renders a declared widget and returns an array with html and css; html_editor_widget_js_modulos returns a module => true map for active widgets with a .widget.js file. Dashboard callers collect the CSS, head and scripts registered during rendering, then restore temporary context. The visual editor uses viewport-based preview height, calc(100vh - 220px), in Tailwind edit/view modals. Widgets require their template, record and theme styles in the isolated preview. See Dashboard for stylesheet order.