📘 CODE LAB PRO - O EDITOR DE CÓDIGO DEFINITIVO
Transforme seu aplicativo Bubble com uma IDE completa. O Code Lab Pro implementa o poderoso Ace Editor em um ambiente isolado (iframe) para garantir performance máxima, suporte a temas e coloração de sintaxe (syntax highlighting) sem conflitos.

🚀 PRINCIPAIS RECURSOS: • Editor Robusto: Suporte a diversas linguagens com validação de erros. • Console Integrado: Capture logs, erros e avisos diretamente no Bubble. • Alta Performance: Arquitetura via Iframe que previne conflitos. • Customização Total: Controle temas, atalhos (Vim/Emacs) e comportamentos.

⚙️ CONFIGURAÇÕES (FIELDS)

Abaixo está a descrição de cada opção disponível no painel de propriedades:

GERAL • Initial Content: O código inicial exibido. Aceita dados dinâmicos. • Language: Define a linguagem (ex: JS, JSON, SQL, Python). Ativa as cores e validação de erros. • Theme: Esquema de cores. Inclui opções claras (Chrome, Github) e escuras (Dracula, Monokai). • Keyboard Handler: Define o estilo dos atalhos de teclado. Opções: Default, Vim, Emacs, Sublime e VSCode.

APARÊNCIA E FONTE • Tab Size: Largura da indentação em espaços (Padrão: 2). • Cursor Style: Visual do cursor (Ace, Slim, Smooth ou Wide). • Font Size: Controlado nativamente pela aba "Appearance" do Bubble. A família da fonte é fixada como Monospace para garantir o alinhamento.

COMPORTAMENTO (CHECKBOXES) • Read Only: Bloqueia a edição (modo leitura). • Wrap Content: Quebra linhas longas automaticamente. • Show Gutter: Exibe a barra lateral com números de linha e erros. • Highlight Active Line: Destaca a linha onde o cursor está. • Highlight Selected Word: Destaca repetições da palavra selecionada. • Show Invisibles: Mostra espaços e quebras de linha ocultos. • Show Print Margin: Exibe linha guia de limite de caracteres. • Display Indent Guides: Linhas verticais para visualizar a indentação. • Scroll Past End: Permite rolar além da última linha. • Live Autocomplete: Sugestões inteligentes enquanto digita. • Auto Close Brackets: Fecha parênteses e chaves automaticamente.

⚡ AÇÕES (WORKFLOWS)

Use estas ações nos seus fluxos de trabalho:

Run Code Executa o código JavaScript do editor. Os resultados (logs/erros) são enviados para os estados do elemento.

Format Code Formata e indenta o código automaticamente (Beautify) para JS, JSON, HTML ou CSS.

📊 ESTADOS EXPOSTOS (OUTPUTS)

Use estes estados para ler dados do plugin:

• Content (Text): O código atual contido no editor. • Console Output (Text): Texto único com todo o histórico de logs. • Console Logs List (List of Texts): Lista com cada linha de log (ideal para Repeating Groups). • Is Ready (Yes/No): Indica se o editor terminou de carregar.