EccUtilsDesignCode Component

Overview

The ecc-utils-design-code component is a powerful code editor built on top of the Ace Editor (opens in a new tab). It provides syntax highlighting for over 160 programming languages, automatic language detection from file extensions, and real-time change events.

Usage

Basic Code Editor

Read-Only Display

Properties

value

Controls the content displayed in the code editor. This property is reactive - changes to this property will update the editor content, and when users edit the code, it will emit change events with the new value.

<EccUtilsDesignCode value="console.log('Hello!');" />

language

Specifies the programming language for syntax highlighting. Supports over 160 languages including javascript, python, java, html, css, json, yaml, etc. When not specified, defaults to "text" with no syntax highlighting.

<EccUtilsDesignCode 
  value="def hello(): print('Hello!')" 
  language="python" 
/>

extension

Automatically detects the programming language from file extensions (e.g., .js, .py, .html). This is useful for file-based workflows. If both language and extension are provided, extension takes precedence.

<EccUtilsDesignCode 
  value="const x = 5;" 
  extension="js" 
/>

disabled

When set to true, makes the editor read-only. Users can view and select code but cannot modify it. Perfect for documentation, code examples, or display-only scenarios.

<EccUtilsDesignCode 
  value="const readOnly = true;" 
  disabled={true} 
/>

Events

ecc-input-changed

Emitted whenever the user modifies the code content. The event detail contains the updated code value. This allows you to track changes, save content, or update other parts of your application.

<EccUtilsDesignCode 
  value={code}
  onEccInputChanged={(event) => {
    setCode(event.detail.value);
  }}
/>