Widget Code Editor

Widget Code Editor - documentazione operativa e tecnica

field-editormetadata-columncode_editorcustomEditorConfigsqltypescripthtmlstable

Overview

Widget Code Editor

Widget code_editor basato su Monaco (wuic-code-editor) con supporto parser/provider contestuali e configurazione avanzata via mc_props_bag.extras.customEditorConfig.

Scope

  • tipo colonna: mc_ui_column_type = "code_editor"
  • componente runtime: src/lib/component/code-editor/code-editor.component.ts
  • linguaggi supportati in config: sql, typescript (ts), html, json, csharp
  • parser/provider effettivamente implementati: sql, typescript, html

mc_props_bag: customEditorConfig (dettaglio)

Snippet 1JSON
{
  "customEditorConfig": {
    "editorOptions": {
      "language": "sql",
      "theme": "vs-dark",
      "wordWrap": "on",
      "wrappingIndent": "same",

Significato proprietà

  • customEditorConfig.editorOptions.language

- seleziona il motore editor.

- valori utili: sql, typescript, html.

- valori anche accettati: json, csharp (senza provider avanzato dedicato).

  • customEditorConfig.editorOptions.scaffoldedOnly (SQL)

- passato al backend CodeEditor/AutocompleteSqlObjects?scaffoldedOnly=....

- true: suggerimenti solo su oggetti scaffolded.

  • customEditorConfig.editorOptions.theme

- tema Monaco (vs-dark, ecc.), poi può essere sovrascritto dal provider SQL (sqlTheme).

  • customEditorConfig.compilerOptions (TS)

- opzioni TypeScript Monaco (target, module, moduleResolution, ...).

- usate da typescriptDefaults.setCompilerOptions.

  • customEditorConfig.schemas (JSON)

- JSON schema diagnostics per modalità json.

  • customEditorConfig.codeContext (TS)

- firma/template callback tipizzato in base ai metadata route/colonna.

  • customEditorConfig.extraLibs (TS)

- librerie .d.ts addizionali caricate nell'editor.

  • customEditorConfig.routeContextField / columnContextField (TS)

- campi record usati per dedurre route e colonna correnti e generare tipizzazione contestuale.

  • customEditorConfig.htmlAutoFormat (HTML)

- se false, disabilita auto-format debounce (1.2s) su modifiche HTML.

  • style.editCss, form.columns, form.disabled

- layout/disabilitazione UI field-editor.

Parser/provider disponibili (verifica codice)

SQL parser (SqlProvider)

  • file: code-editor/sql-parser.ts
  • features:

- autocomplete contestuale su schema/tabelle/colonne/relazioni/funzioni/stored.

- drag&drop nodi SQL tree dentro editor.

- tokenizzazione Monarch e tema dedicato sqlTheme.

- validazione SQL via endpoint backend CodeEditor/ParseSql (azione test).

TS parser (TSProvider)

  • file: code-editor/ts-parser.ts
  • features:

- snippets contestuali (http.get, http.post, prompt, toast, ecc.).

- caricamento extraLibs e baseLibs .d.ts.

- compiler options Monaco configurabili.

- tipizzazione dinamica del record in base ai metadata route/lookup (codeContext).

HTML parser (HtmlProvider)

  • file: code-editor/html-parser.ts
  • features:

- validazione HTML con parse5 + marker Monaco.

- regole strict aggiuntive: tag non chiusi, binding Angular malformati, javascript: URL, inline handler on*.

- completion snippet HTML + binding Angular/WUIC ([input], (output), [(model)], *ngIf, *ngFor).

- formatter documento HTML registrato su Monaco.

- preview pseudo-render sanitizzata nel componente (toggleHtmlPreview).

Scenario Advanced: Tipizzazione Contestuale routeContextField/columnContextField

  • Snippet inline: customEditorConfig.routeContextField: "md_route_name".
  • Snippet inline: customEditorConfig.columnContextField: "mc_id".
  • Runtime TS provider: legge route/colonna dal record corrente e costruisce contesto tipizzato per autocomplete e helper snippet.
  • Risultato pratico: codice callback piu guidato, meno errori di campo/route e migliore discoverability delle API disponibili.
  • Uso consigliato: metadata-editor, action callback e script custom dove la colonna cambia in base al contesto utente.
  • Integrazione: per il flusso lookup assistito correlato vedi field-widget-lookup.

Effetti Client/Server

  • Client:

- editing avanzato con toolbar, fullscreen, suggest, formatter.

- sync su record[field] via BehaviorSubject.

  • Server:

- SQL validation e metadata schema autocomplete passano da endpoint CodeEditor/*.

- TS/HTML parsing resta client-side (Monaco + provider locali).

Note operative

  • per richiesta utente “ts”, usare language: "typescript".
  • in html con template Angular complessi, tenere htmlAutoFormat disattivabile per evitare format aggressivo.
  • in json c'è validazione schema ma non provider parser avanzato come SQL/TS/HTML.