Widget Code Editor

Widget Code Editor - documentazione operativa e tecnica

field-editormetadata-columncode_editorcustomEditorConfigsqltypescripthtmlstable

Overview

Widget Code Editor

code_editor widget based on Monaco (wuic-code-editor) with contextual parser/provider support and advanced configuration via mc_props_bag.extras.customEditorConfig.

Scope

  • Column type: mc_ui_column_type = "code_editor"
  • Runtime component: src/lib/component/code-editor/code-editor.component.ts
  • Supported languages in config: sql, typescript (ts), html, json, csharp
  • Actually implemented parsers/providers: sql, typescript, html

mc_props_bag: customEditorConfig (detail)

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

Property Meaning

  • customEditorConfig.editorOptions.language

- selects the editor engine.

- useful values: sql, typescript, html.

- also accepted values: json, csharp (without dedicated advanced provider).

  • customEditorConfig.editorOptions.scaffoldedOnly (SQL)

- passed to the backend CodeEditor/AutocompleteSqlObjects?scaffoldedOnly=....

- true: suggestions only on scaffolded objects.

  • customEditorConfig.editorOptions.theme

- Monaco theme (vs-dark, etc.), can then be overridden by the SQL provider (sqlTheme).

  • customEditorConfig.compilerOptions (TS)

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

- used by typescriptDefaults.setCompilerOptions.

  • customEditorConfig.schemas (JSON)

- JSON schema diagnostics for json mode.

  • customEditorConfig.codeContext (TS)

- typed callback signature/template based on route/column metadata.

  • customEditorConfig.extraLibs (TS)

- additional .d.ts libraries loaded in the editor.

  • customEditorConfig.routeContextField / columnContextField (TS)

- record fields used to infer current route and column and generate contextual typing.

  • customEditorConfig.htmlAutoFormat (HTML)

- if false, disables auto-format debounce (1.2s) on HTML changes.

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

- UI field-editor layout/disabling.

Available Parsers/Providers (Code Verification)

SQL Parser (SqlProvider)

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

- contextual autocomplete on schema/tables/columns/relationships/functions/stored procedures.

- drag & drop SQL tree nodes into the editor.

- Monarch tokenization and dedicated sqlTheme theme.

- SQL validation via backend endpoint CodeEditor/ParseSql (test action).

TS Parser (TSProvider)

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

- contextual snippets (http.get, http.post, prompt, toast, etc.).

- loading of extraLibs and baseLibs .d.ts.

- configurable Monaco compiler options.

- dynamic record typing based on route/lookup metadata (codeContext).

HTML Parser (HtmlProvider)

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

- HTML validation with parse5 + Monaco markers.

- additional strict rules: unclosed tags, malformed Angular bindings, javascript: URLs, inline on* handlers.

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

- HTML document formatter registered on Monaco.

- sanitized pseudo-render preview in the component (toggleHtmlPreview).

Advanced Scenario: Contextual Typing routeContextField/columnContextField

  • Inline snippet: customEditorConfig.routeContextField: "md_route_name".
  • Inline snippet: customEditorConfig.columnContextField: "mc_id".
  • Runtime TS provider: reads route/column from the current record and builds typed context for autocomplete and helper snippets.
  • Practical result: more guided callback code, fewer field/route errors, and better discoverability of available APIs.
  • Recommended use: metadata-editor, action callbacks, and custom scripts where the column changes based on user context.
  • Integration: for the related assisted lookup flow see field-widget-lookup.

Client/Server Effects

  • Client:

- advanced editing with toolbar, fullscreen, suggest, formatter.

- sync on record[field] via BehaviorSubject.

  • Server:

- SQL validation and metadata schema autocomplete go through CodeEditor/* endpoints.

- TS/HTML parsing stays client-side (Monaco + local providers).

Operational Notes

  • For user request "ts", use language: "typescript".
  • In html with complex Angular templates, keep htmlAutoFormat disableable to avoid aggressive formatting.
  • In json there is schema validation but no advanced parser provider like SQL/TS/HTML.