No desenvolvimento de aplicações web, frequentemente surge a necessidade de editar arquivos de configuração YAML diretamente no frontend. Este artigo aborda como implementar um editor YAML integrado ao Vue 3 utilizando a biblioteca CodeMirror, com suporte a verifciação de sintaxe, realce de sintaxe e integração com um backend para carregar e salvar conteúdo.

O cenário típico envolve a obtenção do conteúdo YAML padrão de uma API backend, exibindo-o no editor CodeMirror. Após as modificações realizadas pelo usuário, o conteúdo atualizado é enviado de volta ao backend, que o grava em um arquivo de configuração no servidor. A solução utiliza referências reativas do Vue para manipular o valor do editor, garantindo vinculação bidirecional de dados.

No template Vue, o componente CodeMirror é vinculado a uma propriedade reativa usando v-model. Abaixo, um exemplo simplificado:

<template>
  <codemirror
    v-model="yamlContent"
    placeholder="Edite seu arquivo YAML aqui"
    :style="{ height: '400px', textAlign: 'left' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="editorExtensions"
    @ready="onEditorReady"
    @change="handleChange"
  />
</template>

No script TypeScript, defina uma referência reativa para armazenar o conteúdo YAML. Utilize Axios para buscar os dados iniciais da API backend durante a montagem do componente. A estrutura do código é ajustada para melhor clareza:

<script lang="ts">
import { defineComponent, ref, shallowRef, onMounted } from 'vue';
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
import axios from 'axios';

export default defineComponent({
  name: 'YamlEditor',
  components: { Codemirror },
  setup() {
    const yamlContent = ref('');
    const editorExtensions = [javascript(), oneDark];
    const editorView = shallowRef();

    const onEditorReady = (payload: any) => {
      editorView.value = payload.view;
    };

    const handleChange = (event: any) => {
      console.log('Conteúdo alterado:', event);
    };

    onMounted(async () => {
      try {
        const response = await axios.get('/api/yaml-config');
        yamlContent.value = response.data;
      } catch (error) {
        console.error('Erro ao carregar configuração YAML:', error);
      }
    });

    const retrieveEditorState = () => {
      if (!editorView.value) return null;
      const state = editorView.value.state;
      return {
        selectedText: state.selection.ranges.reduce((acc: number, range: any) => acc + (range.to - range.from), 0),
        cursorPosition: state.selection.ranges[0].anchor,
        contentLength: state.doc.length,
        lineCount: state.doc.lines,
      };
    };

    return {
      yamlContent,
      editorExtensions,
      onEditorReady,
      handleChange,
      retrieveEditorState,
    };
  },
});
</script>

Para obter ou atualizar o valor do editor programaticamente, a referência reativa yamlContent pode ser usada diretamente. Se houver necessidade de acessar estados mais detalhados do editor, a função retrieveEditorState fornece informações como seleção, posição do curser e métricas do documento. A integração com o backend é feita por meio de requisições HTTP, permitindo persistir as alterações na configuração do servidor.