Introdução ao Codemirror-Editor-Vue3

Codemirror-Editor-Vue3 é um componente para Vue.js 3 que integra o editor de código CodeMirror. Baseado no CodeMirror 5, ele oferece funcionalidades de edição de texto com suporte a realce de sintaxe para diversas linguagens, além de modos adicionais como exibição de logs.

Tecnologias Fundamentais

O projeto utiliza Vue.js 3 para a camada de interface, TypeScript para tipagem estática, e o CodeMirror como motor de edição. Ferramentas como Vite ou Vitepress podem ser empregadas para build e documentação.

Instalação do Pacote

Certifique-se de ter o Node.js e um gerenciador de pacotes (npm ou yarn) configurados no ambiente.

Execute o seguinte comando para instalar via npm:

npm adicionar codemirror-editor-vue3 codemirror@^5 --salvar

Ou utilize o yarn:

yarn adicionar codemirror-editor-vue3 codemirror@">=5.64.0 <6"

Para integração com TypeScript, adicione as definições de tipo:

npm adicionar @types/codemirror --salvar-dev

Integração no Projeto Vue 3

Registro Global

No ponto de entrada da aplicação (ex: main.js), registre o componente globalmente:

import { createApp } from 'vue';
import App from './App.vue';
import { InstallCodeMirror } from 'codemirror-editor-vue3';

const instanciaApp = createApp(App);
instanciaApp.use(InstallCodeMirror);
instanciaApp.mount('#app');

Registro Local

No componente específico, importe e registre localmente:

<template>
  <Codemirror v-model:value="codigoEditor" :options="configuracoes"/>
</template>

<script>
import Codemirror from 'codemirror-editor-vue3';

export default {
  components: {
    Codemirror,
  },
  data() {
    return {
      codigoEditor: '// Conteúdo inicial do editor',
      configuracoes: {
        mode: 'text/html',
        theme: 'dracula',
      },
    };
  },
};
</script>

Configuração de Modos Linguísticos e Temas

Para adicionar suporte a uma linguagem específica, importe o módulo correspondente. Exemplo para JavaScript:

import "codemirror/mode/javascript/javascript.js";

Para aplicar um tema visual, importe seu arquivo CSS:

import "codemirror/theme/dracula.css";

Manipulação de Eventos e Opções Avançadas

Utilize a Composition API para definir opções dinâmicas e monitorar interações. Exemplo de configuração com evento de alteração:

import { ref } from 'vue';

export default {
  setup() {
    const textoDoEditor = ref('');
    const parametrosEditor = ref({
      mode: 'text/javascript',
      theme: 'monokai',
    });

    function aoAtualizarConteudo(valor, instanciaEditor) {
      console.log('Novo valor do editor:', valor);
    }

    return {
      textoDoEditor,
      parametrosEditor,
      aoAtualizarConteudo,
    };
  },
};

No template, associe o evento: @change="aoAtualizarConteudo"

Execução e Verificação

Após completar a configuração, enicie o servidor de desenvolvimento com npm run servir ou yarn servir. Acesse o endereço local fornecido no navegador para testar o editor funcional. Para explorar recursos adicionais, consulte a documentação do CodeMirror e as APIs disponíveis no pacote.