Cara Membuat Web Editor dengan react-monaco-editor

Web editor adalah aplikasi berbasis web yang memungkinkan pengguna untuk menulis dan mengedit kode pada browser. Editor ini bekerja tanpa memerlukan lingkungan atau pengaturan lokal, mendorong aksesibilitas, kolaborasi, dan kesederhanaan.

Web editor menawarkan antarmuka yang sederhana untuk menulis dan mengedit kode serta alat penghemat waktu seperti penyorotan sintaksis, penomoran 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 dengan React dan paket react-monaco-editor.

Apa Itu Monaco Editor?

Monaco Editor adalah editor kode berbasis browser yang dikembangkan oleh Microsoft dan 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-fitur seperti penyorotan sintaksis dan pelengkapan otomatis. Editor ini juga memiliki dukungan bawaan untuk berbagai bahasa pemrograman dan teknologi, termasuk JavaScript, TypeScript, HTML, CSS, dan banyak lagi.

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

Membuat Aplikasi React

Langkah pertama adalah membuat aplikasi React baru dengan menjalankan perintah di bawah ini:

npx create-react-app monaco-editor-with-react

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

npm install react-monaco-editor

Kita juga perlu menginstal beberapa dependensi untuk bekerja dengan react-monaco-editor. Install dependensi dengan menjalankan perintah di bawah ini:

npm install monaco-editor monaco-editor-core

Selain itu, kita juga akan memasang plugin Monaco webpack sebagai devDependency ke dalam aplikasi React dengan perintah berikut:

npm install --dev monaco-editor-webpack-plugin

Langkah selanjutnya setelah mengunduh dependensi adalah membuat berbagai perubahan webpack agar editor Monaco dapat bekerja dengan aplikasi React kita. Namun, cukup sulit untuk membuat perubahan webpack karena konfigurasi webpack tidak tersedia untuk pengguna di Create React App kecuali mereka memilih untuk eject aplikasi React dengan menjalankan npm run eject.

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

Pada tutorial ini, kita akan menggunakan react-app-rewired untuk menulis ulang aplikasi React kita. Install paket dengan menjalankan perintah di bawah ini:

npm install --dev react-app-rewired

Selanjutnya, buat file config-overrides.js di root proyek, dan tempelkan kode berikut ini ke dalam file tersebut:

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

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

Membuat Code Editor di React

Untuk mulai membuat code editor di React, tempelkan kode di bawah ini ke dalam file App.js:

import MonacoEditor from 'react-monaco-editor';

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

export default App;

Pada kode di atas, kita mengimpor MonacoEditor dari react-monaco-editor. Selanjutnya, kita menyematkan web editor tersebut ke dalam aplikasi dan mengirim height yang kita inginkan agar editor dirender.

Mengirim options ke editor

Anda dapat memberikan daftar options ke monaco-editor. Opsi-opsi tersebut berkisar dari pengaturan font size dan font family hingga memilih cursor style dan memilih apakah kita ingin meletakkan minimap di editor. Sekarang, salin dan tempelkan daftar opstions berikut ke dalam file App.js:

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,
}; 

Pada blok kode di atas, kita telah mendefinisikan beberapa options untuk menyesuaikan tampilan dan perilaku editor. Langkah berikutnya adalah meneruskan options ke editor, seperti yang ditunjukkan di bawah ini:

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

Menambahkan tema ke code editor

Monaco Editor menyediakan tema untuk digunakan dalam editor. Sebagian tema ini termasuk light theme (default), dark theme, dan high-contrast theme. Mari kita lihat, bagaimana cara menambahkan tema dalam editor:

import React, { useState } from 'react';

......

function App() {
  // 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');
  };

  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>
      )}
    </div>
    <hr />
    <MonacoEditor
      height="500"
      options={options}
      theme={theme}
    />
  </div>
  );
}

Pada kode di atas, kita membuat dua fungsi: satu untuk menetapkan light theme dan yang lainnya untuk menetapkan dark theme. Dalam fungsi dark theme, kita mendapatkan kondisi tema sebelumnya dan kemudian mengaturnya ke tema yang lain. Kita juga menyiapkan tombol-tombol yang akan digunakan untuk mengubah tema code editor dan kemudian meneruskan tema tersebut ke editor.

Penutup

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