Criando um Self-Editor com Monaco Editor (cuidado) – Blog – Devdata Sistemas

O Monaco Editor, o mesmo editor que alimenta o Visual Studio Code, é incrivelmente poderoso e pode ser transformado em um self-editor, permitindo carregar, editar e salvar arquivos diretamente no navegador. Este guia detalha como configurar um sistema simples para edição de arquivos.

O Conceito

Um self-editor permite que os usuários:

Carreguem arquivos do servidor.
Editem os arquivos diretamente no navegador.
Salvem as alterações de volta no servidor.

Isso é ideal para sistemas de gerenciamento de códigos, ambientes de desenvolvimento online ou outras aplicações de edição remota.

Frontend: HTML e JavaScript

Este código implementa a interface do Monaco Editor com recursos para carregar e salvar arquivos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monaco Self-Editor</title>
  <script src="https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js"></script>
  <style>
    #editor {
      width: 100%;
      height: 400px;
      border: 1px solid #ddd;
    }
    #fileSelector {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Monaco Self-Editor</h1>

  <!-- Seleção de arquivo -->
  <select id="fileSelector">
    <option value="file1.txt">file1.txt</option>
    <option value="file2.txt">file2.txt</option>
    <option value="file3.txt">file3.txt</option>
  </select>
  <button id="loadFile">Load</button>
  <div id="editor"></div>
  <button id="saveFile">Save</button>

  <script>
    require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' } });
    require(['vs/editor/editor.main'], function () {
      const editor = monaco.editor.create(document.getElementById('editor'), {
        value: "// Select a file and click Load\n",
        language: 'javascript',
        theme: 'vs-dark'
      });

      const fileSelector = document.getElementById('fileSelector');
      const loadFileButton = document.getElementById('loadFile');
      const saveFileButton = document.getElementById('saveFile');

      // Carregar arquivo do servidor
      loadFileButton.addEventListener('click', () => {
        const fileName = fileSelector.value;
        fetch(`/load?file=${fileName}`)
          .then(response => response.text())
          .then(content => {
            editor.setValue(content);
          })
          .catch(err => alert(`Erro ao carregar o arquivo: ${err}`));
      });

      // Salvar arquivo no servidor
      saveFileButton.addEventListener('click', () => {
        const fileName = fileSelector.value;
        const content = editor.getValue();

        fetch('/save', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ file: fileName, content })
        })
        .then(response => response.text())
        .then(msg => alert(msg))
        .catch(err => alert(`Erro ao salvar o arquivo: ${err}`));
      });
    });
  </script>
</body>
</html>

Backend: PHP para Gerenciamento de Arquivos

O backend deve lidar com as requisições de carregar e salvar arquivos. Aqui está um exemplo usando PHP:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['file'])) {
    $file = basename($_GET['file']); // Proteção contra Path Traversal
    if (file_exists($file)) {
        echo file_get_contents($file);
    } else {
        http_response_code(404);
        echo "Arquivo não encontrado!";
    }
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);
    $file = basename($data['file']); // Proteção contra Path Traversal
    $content = $data['content'];

    if (file_put_contents($file, $content)) {
        echo "Arquivo salvo com sucesso!";
    } else {
        http_response_code(500);
        echo "Erro ao salvar o arquivo!";
    }
}

Recursos e Segurança

Proteção Contra Riscos

Validação de Entrada:
- Use basename() para evitar ataques de Path Traversal.
- Limite a edição a um diretório específico.
Controle de Acesso:
- Autentique usuários antes de permitir a edição.

Funcionalidades Avançadas

Adicione autocompletar para linguagens específicas.
Permita seleção dinâmica de arquivos com listagem de diretórios.
Implemente um sistema de backup automático antes de salvar alterações.

Testando o Sistema

Salve o frontend como index.html.
Configure um servidor local (como XAMPP) e salve o backend como backend.php.
Acesse o sistema no navegador, carregue um arquivo, edite e salve.
Verifique o arquivo editado no servidor.

Conclusão

Com o Monaco Editor configurado como um self-editor, você transforma seu sistema em uma poderosa ferramenta de edição remota. Explore temas, linguagens e funcionalidades adicionais para atender às suas necessidades. 🚀