# CodeEditor

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente de editor de código com syntax highlighting, construído sobre CodeMirror 6. Suporta configuração de linguagem e tema via `editorOptions`. Implementa `ControlValueAccessor` para integração com Angular Forms.

## Quando usar

- Edição de configurações em formato JSON
- Campos de script ou regra com syntax highlighting (ex.: cálculo tributário)
- Formulários com área de código onde a validação de sintaxe é necessária
- Visualização e edição de payloads de API ou configurações avançadas

## Quando não usar

- Para entrada de texto simples sem necessidade de syntax highlighting — use `TextArea`
- Para exibição de código sem edição — use um bloco `<pre><code>` estilizado
- Quando o ambiente não suporta o carregamento assíncrono do CodeMirror

## Instalação

```typescript
import { CodeEditorModule } from '@seniorsistemas/angular-components/code-editor';

@NgModule({
  imports: [CodeEditorModule],
})
export class MeuModule {}
```

## Uso básico

```html
<s-code-editor
  [editorOptions]="{ language: 'Json', theme: 'SDSLight' }"
  [(code)]="codigoAtual"
  (codeChange)="onAlteracao($event)">
</s-code-editor>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `editorOptions` | `EditorOptions` | `undefined` | não | Configurações do editor (linguagem, tema) |
| `code` | `string` | `''` | não | Conteúdo textual do editor (two-way binding via `[(code)]`) |
| `isCodeValid` | `boolean` | `false` | não | Indica se o código atual é válido (two-way binding via `[(isCodeValid)]`) |
| `payload` | `string` | `undefined` | não | Payload adicional para contexto de autocompletar ou validações específicas |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `codeChange` | `EventEmitter<string>` | Emitido a cada alteração no conteúdo |
| `isCodeValidChange` | `EventEmitter<boolean>` | Emitido quando o estado de validade muda |
| `onComponentFinishLoad` | `EventEmitter<void>` | Emitido quando o editor termina de carregar |
| `onCodeChange` | `EventEmitter<string>` | **Descontinuado** — use `codeChange` em novos projetos |

### Tipos

```typescript
interface EditorOptions {
  language?: Languages; // 'Json' | 'TaxCalculation'
  theme?: Themes;       // 'SDSLight'
}

enum Languages {
  TaxCalculation = 'TaxCalculation',
  Json = 'Json',
}

enum Themes {
  SDSLight = 'SDSLight',
}
```

## Exemplos

### Editor JSON

```html
<div style="height: 300px;">
  <s-code-editor
    [editorOptions]="{ language: 'Json', theme: 'SDSLight' }"
    [(code)]="json"
    [(isCodeValid)]="jsonValido"
    (codeChange)="onAlteracao($event)">
  </s-code-editor>
</div>
```

### Editor de cálculo tributário

```html
<div style="height: 300px;">
  <s-code-editor
    [editorOptions]="{ language: 'TaxCalculation', theme: 'SDSLight' }"
    [(code)]="regra"
    (codeChange)="onAlteracao($event)">
  </s-code-editor>
</div>
```

### Integrado com Reactive Forms

```html
<form [formGroup]="form">
  <div style="height: 300px;">
    <s-code-editor
      formControlName="script"
      [editorOptions]="editorOptions"
      (codeChange)="onAlteracao($event)">
    </s-code-editor>
  </div>
</form>
```

```typescript
form = new FormGroup({
  script: new FormControl(''),
});

editorOptions: EditorOptions = {
  language: Languages.Json,
  theme: Themes.SDSLight,
};
```

### Reagindo ao carregamento do editor

```html
<s-code-editor
  [editorOptions]="editorOptions"
  [(code)]="codigo"
  (onComponentFinishLoad)="editorPronto()">
</s-code-editor>
```

## Acessibilidade

- O editor é construído sobre CodeMirror 6, que oferece suporte a navegação por teclado dentro do código
- Use `aria-label` ou um `<label>` associado via `id` para descrever o editor ao usuário
- O campo aceita foco via Tab e suporta a maioria dos atalhos de edição de texto padrão do sistema operacional

## Componentes relacionados

- [`TextArea`](../text-area/README.md) — área de texto simples sem syntax highlighting, para casos onde formatação de código não é necessária