Bangun editor web menggunakan react-monaco-editor – Beragampengetahuan

Editor web online adalah aplikasi berbasis web yang memungkinkan pengguna menulis dan mengedit kode di browser. Mereka bekerja tanpa pengaturan atau lingkungan lokal, mendorong aksesibilitas, kolaborasi, dan kesederhanaan.

Editor online menyediakan antarmuka sederhana untuk menulis dan mengedit kode serta alat penghemat waktu seperti penyorotan sintaks, nomor baris, dan pelengkapan otomatis. Beberapa contoh editor web online termasuk Repl.it, CodePen, dan CodeSandbox. Pada artikel ini, kita akan membahas cara membuat editor web menggunakan React dan paket react-monaco-editor.

Lompat ke depan:

Apa itu Editor Monako?

Monaco Editor adalah editor kode berbasis browser yang dikembangkan oleh Microsoft untuk digunakan di beberapa produk Microsoft, termasuk VS Code, Azure DevOps, dan Visual Studio Online. Monaco Editor dirancang untuk memberikan pengalaman pengkodean yang cepat dan efisien, dengan fitur seperti penyorotan sintaks dan pelengkapan otomatis. Ini juga memiliki dukungan bawaan untuk berbagai bahasa dan teknologi pemrograman, termasuk JavaScript, TypeScript, HTML, CSS, dan banyak lagi.

Ada dua paket yang tersedia untuk menggunakan React with Monaco Editor: react-monaco-editor dan @monaco-editor/react. React-monaco-editor dibuat enam tahun lalu dan memiliki lebih dari 114.000 npm unduhan per minggu, sedangkan paket @monaco-editor/react dirancang empat tahun lalu dan memiliki lebih dari 380.000 npm unduhan per minggu.

react-monaco-editor dengan @monaco-editor/react

Paket react-monaco-editor adalah paket pertama yang tersedia untuk penyematan React dan masih dipertahankan secara aktif. Namun, Anda harus melakukan berbagai perubahan webpack, yang cukup merepotkan, terutama saat menggunakan React. Hal ini membuat paket tersebut kurang populer, seperti yang ditunjukkan oleh unduhan mingguan dibandingkan dengan paket @monaco-editor/react.

Paket @monaco-editor/react menyematkan React dan tidak memerlukan konfigurasi apa pun untuk mulai menggunakannya. Berikut adalah diagram yang membandingkan react-monaco-editor dan paket @monaco-editor/react:

Buat aplikasi baru dan instal dependensi

Langkah pertama adalah membuat aplikasi React baru dengan menjalankan:

yarn create react-app monaco-editor-with-react

Selanjutnya, tambahkan paket react-monaco-editor dengan perintah berikut:

yarn add react-monaco-editor

Kita juga perlu menginstal beberapa dependensi untuk bekerja dengan react-monaco-editor. Instal mereka dengan menjalankan:

yarn add monaco-editor monaco-editor-core monaco-languageclient

Kami juga akan menginstal plugin webpack Monaco sebagai devDependency Masuk ke aplikasi React kami dengan:

yarn add --dev monaco-editor-webpack-plugin

Atur ulang aplikasi React Anda untuk bekerja dengan Monaco Editor

Langkah selanjutnya setelah mengunduh dependensi adalah membuat berbagai perubahan webpack untuk memungkinkan editor Monaco bekerja dengan aplikasi React kita.Namun, mengubah webpack sangat menantang karena konfigurasi webpack tidak tersedia untuk pengguna di Create React App kecuali mereka memilih untuk mengeluarkan aplikasi React dengan menjalankan yarn eject.

Mengeluarkan aplikasi React adalah ide yang buruk, karena aplikasi kita akan kehilangan semua konfigurasi React dan tidak akan mendapat manfaat dari pembaruan CRA. Beberapa solusi untuk mengeluarkan aplikasi kami termasuk menggunakan paket seperti react-app-rewired atau rewire. Anda juga dapat menggunakan CRACO untuk memunculkan aplikasi React Anda, tetapi Anda harus menginstal plugin tambahan.

Dalam tutorial ini, kita akan menggunakan react-app-rewired untuk memasang ulang aplikasi React kita. Instal paket dengan menjalankan:

yarn add --dev react-app-rewired

Selanjutnya, buat a config-overrides.js Dalam file di bawah direktori root proyek, rekatkan kode berikut:

// config-overrides.js

const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
  config.plugins.push(new MonacoWebpackPlugin())
  return config;
}

Sekarang, arahkan ke App.js file, membersihkan semua kode boilerplate, dan membuat editor kode.

Membangun editor kode di React

Untuk mulai membuat editor kode di React, rekatkan kode di bawah ini ke App.js dokumen:

import MonacoEditor from 'react-monaco-editor';

function App() {
  return (
      <MonacoEditor
        height="400"
      />
  );
}

export default App;

Mari kita tinjau apa fungsinya.Dalam kode di atas, kami mengimpor MonacoEditor dari react-monaco-editor. Selanjutnya, kami menyematkan editor web ke dalam aplikasi dan meneruskannya height Kami ingin editor dirender.

Perhatikan bahwa kami tidak meneruskan bahasa apa pun ke editor.ini MonacoEditor JavaScript digunakan sebagai bahasa default ketika tidak ada bahasa yang ditentukan. Ini berarti Anda mendapatkan semua penyorotan sintaks dan fitur pintar JavaScript.

sekarang jalankan yarn start Tinjau perubahan Anda di browser Anda, seharusnya terlihat seperti ini:

lulus options Kepada editor

Anda dapat memberikan daftar options Diedit untuk Monako.Pilihan berkisar dari pengaturan font size Dan font family memilih cursor style dan memilih apakah kita ingin menempatkan minimap di editor.Sekarang, salin dan tempel daftar options Memasuki App.js dokumen:

  const options = {
    autoIndent: 'full',
    contextmenu: true,
    fontFamily: 'monospace',
    fontSize: 13,
    lineHeight: 24,
    hideCursorInOverviewRuler: true,
    matchBrackets: 'always',
    minimap: {
      enabled: true,
    },
    scrollbar: {
      horizontalSliderSize: 4,
      verticalSliderSize: 18,
    },
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: false,
    cursorStyle: 'line',
    automaticLayout: true,
  }; 

Di blok kode di atas, kami mendefinisikan beberapa options Sesuaikan penampilan dan perilaku editor.Langkah selanjutnya adalah lulus options Untuk editor, seperti gambar di bawah ini:

<MonacoEditor
    height="400"
    options={options}
/>

Buka file di editor

Sejauh ini, kami telah meng-hardcode bahasa editor dengan menyetelnya ke JavaScript, dan kami dapat melihat bahwa editor kode bekerja dengan baik. Apa yang terjadi jika kita mencoba menulis kode tanpa sintaks JavaScript? Lihat saja gambar di bawah ini:

Pada gambar di atas, kami menulis beberapa kode Python. Anda dapat melihat bahwa editor tidak mengenali sintaks, itu sebabnya kesalahan dan tilde. Salah satu solusinya adalah mengunggah file dari mesin lokal kami, memeriksa bahasa setiap file, dan meneruskan bahasa ke editor secara dinamis. Mari kita lakukan ini di blok kode di bawah ini:

import React, { useState, useEffect } from 'react';
import MonacoEditorfrom 'react-monaco-editor';

const CodeEditor = () => {
  const [code, setCode] = useState('');
  const [file, setFile] = useState();
  const [language, setLanguage] = useState('javascript');

  const handleFileChange = (event) => {
    if (event.target.files) {
      setFile(event.target.files[0]);
    }
  };

  useEffect(() => {
    if (file) {
      var reader = new FileReader();
      reader.onload = async (e) => {
        setCode(e.target.result);
      };
      reader.readAsText(file);
      let newLanguage="javascript";
      const extension = file.name.split('.').pop();
      if (['css', 'html', 'python', 'dart'].includes(extension)) {
        newLanguage = extension;
      }
      setLanguage(newLanguage);
    }
  }, [file]);

// The Options object goes here and is passed to the editor below

  return (
    <div>
      <div>
        <input type="file" onChange={handleFileChange} /> 
      </div>
      <hr />
      <MonacoEditor
        height="800"
        language={language}
        value={code}
        options={options}
      />
    </div>
  );
};

const App = () => (
  <div>
    <h2>Monaco Editor </h2>
    <CodeEditor />
  </div>
);
export default App;

Di blok kode di atas, kami membuat dua useState Hooks – satu untuk mendapatkan dan menyetel bahasa editor, dan satu lagi untuk menangani status file.Selanjutnya, kami membuat useEffect Kaitkan untuk memeriksa file. Jika ada file, kami mendapatkan ekstensi dan menggunakannya untuk menyetel bahasa editor ke bahasa file yang dimuat.

Langkah selanjutnya adalah membuat a input tombol untuk mendapatkan file dari mesin kami.Terakhir, kami membuat fungsi untuk menangani perubahan file dan meneruskannya ke onChange penangan aktif input tombol. Saat kami menyimpan perubahan kami dan menavigasi ke browser, semua kesalahan dan garis berlekuk-lekuk hilang karena kami sekarang secara dinamis mengatur bahasa editor. Berikut tampilannya:

Tambahkan themes ke editor kode

Monaco Editor menyediakan tema untuk digunakan dalam editor.Beberapa topik tersebut antara lain light theme (standar), a dark themedan a high-contrast theme. Mari kita lihat cara memasukkan tema ke dalam editor:

// The remaining state hooks here remain the same
const [theme, setTheme] = useState('vs-light');

// The fileChange function and useEffect remains the same

const setDarkTheme = (e) => {
    e.preventDefault();
    setTheme((prev) => (prev === 'vs-dark' ? 'hc-black' : 'vs-dark'));
  };

  const setLightTheme = (e) => {
    e.preventDefault();
    setTheme('vs-light');
  };

Pada kode di atas, kita membuat dua fungsi: satu untuk mengatur light theme lain untuk pengaturan dark theme. di dalam dark theme fungsi, kami mendapatkan keadaan topik sebelumnya dan kemudian mengaturnya ke keadaan lain yang sesuai.Langkah selanjutnya adalah meneruskan fungsi ke buttons Akan digunakan untuk mengubah tema. Gunakan kode berikut:

  return (
    <div>
      <div>
        <button onClick={setDarkTheme} type="button">
          Set dark theme ({theme === 'vs-dark' ? 'hc-black' : 'vs-dark'})
        </button>
        {theme !== 'vs-light' && (
          <button onClick={setLightTheme} type="button">
            Set light theme
          </button>
        )}
        <input type="file" onChange={handleFileChange} />
      </div>
      <hr />
      <MonacoEditor
        height="500"
        language={language}
        value={code}
        options={options}
        theme={theme}
      />
    </div>
  );
};

Pada blok kode di atas, kita atur buttons akan digunakan untuk mengubah tema editor kode, lalu lulus theme kepada editor. Hasilnya akan terlihat seperti GIF di bawah ini:

Membuat Diff Editor Editor Monako

A Diff Editor digunakan untuk membandingkan dua file.Untungnya, editor Monaco menyediakan kemampuan untuk membuat Diff sunting.Mari gali beberapa kode dan lihat cara membuat Diff Editor di blok kode di bawah ini:

import { MonacoDiffEditor } from 'react-monaco-editor';

const DiffEditor = () => {
  const originalCode="const firstCode = "Hello from the Monaco Diff Editor!"";
  const modifiedCode="const secondCode = "Lets change this and see what happens next"";

// The Options objects still remains the same 

  return (
    <div>
      <MonacoDiffEditor
        width="800"
        height="300"
        options={options}
        language="javascript"
        original={originalCode}
        value={modifiedCode}
      />
    </div>
  );
};

const App = () => (
  <div className="editor">
    <h2>Another editor (showing a diff)</h2>
    <DiffEditor />
  </div>
);
export default App;

Di blok kode di atas, kami mengimpor file MonacoDiffEditor Dari paket react-monaco-editor.Kemudian kami membuat dua baris kode untuk membandingkan dan meneruskannya MonacoDiffEditor sebagai penyangga value properti dan original Properti.ini original properti mempertahankan nilai aslinya dan value Properti memegang kode perbandingan. Hasilnya adalah sebagai berikut:

Kesimpulannya

Artikel ini membahas cara membuat editor web menggunakan React dan paket react-monaco-editor. Menggunakan React dan paket react-monaco-editor sangat menyederhanakan proses pembuatan editor kode berbasis web. react-monaco-editor menyediakan komponen editor yang kuat dan efisien dengan penyorotan sintaks, pelengkapan otomatis, dan banyak fitur berguna lainnya.

Posting Membangun editor web dengan react-monaco-editor muncul pertama kali di blog beragampengetahuan.

Dari Blog beragampengetahuan https://ift.tt/1FswWjT
Hasilkan $200 seminggu
dengan lebih banyak membaca