با react-monaco-editor یک ویرایشگر وب بسازید

نوشته شده توسط ایزاک اوکورو✏️

ویرایشگرهای وب آنلاین برنامه های کاربردی مبتنی بر وب هستند که به کاربران اجازه می دهند کد را در مرورگر بنویسند و ویرایش کنند. آنها بدون نیاز به محیط‌ها یا تنظیمات محلی کار می‌کنند و دسترسی، همکاری و سادگی را تشویق می‌کنند.

ویرایشگرهای آنلاین یک رابط کاربری ساده برای نوشتن و ویرایش کد و ابزارهای صرفه جویی در زمان مانند برجسته کردن نحو، شماره گذاری خطوط و تکمیل خودکار ارائه می دهند. برخی از نمونه‌های ویرایشگرهای وب آنلاین عبارتند از Repl.it، CodePen و CodeSandbox. در این مقاله به نحوه ساخت یک ویرایشگر وب با React و بسته react-monaco-editor خواهیم پرداخت.

پرش به جلو:

ویرایشگر موناکو چیست؟

Monaco Editor یک ویرایشگر کد مبتنی بر مرورگر است که توسط مایکروسافت توسعه یافته و در چندین محصول مایکروسافت از جمله VS Code، Azure DevOps و Visual Studio Online استفاده می‌شود. ویرایشگر Monaco برای ارائه یک تجربه کدنویسی سریع و کارآمد، با ویژگی هایی مانند برجسته سازی نحو و تکمیل خودکار طراحی شده است. همچنین دارای پشتیبانی داخلی از زبان ها و فناوری های برنامه نویسی مختلف از جمله جاوا اسکریپت، تایپ اسکریپت، HTML، CSS و غیره است.

دو بسته برای استفاده از React with Monaco Editor موجود است: react-monaco-editor و @monaco-editor/react. React-monaco-editor شش سال پیش با بیش از 114000 بارگیری هفتگی npm ایجاد شد، در حالی که بسته @monaco-editor/react چهار سال پیش طراحی شد و بیش از 380000 بارگیری هفتگی npm داشت.

react-monaco-editor در مقابل @monaco-editor/react

بسته react-monaco-editor اولین بسته موجود برای جاسازی با React بود و هنوز به طور فعال نگهداری می شود. با این حال، به شما نیاز دارد که تغییرات مختلفی در بسته وب ایجاد کنید که بسیار ناخوشایند هستند، به خصوص هنگام کار با React. این باعث کاهش محبوبیت بسته شده است، همانطور که تعداد بارگیری های هفتگی در مقایسه با بسته @monaco-editor/react نشان داده شده است.

بسته @monaco-editor/react با React قابل جاسازی است و برای شروع استفاده از آن نیازی به پیکربندی ندارد. در اینجا نموداری است که بسته‌های react-monaco-editor و @monaco-editor/react را مقایسه می‌کند:

ایجاد یک برنامه جدید و نصب وابستگی ها

اولین قدم این است که با اجرای دستور زیر یک برنامه React جدید ایجاد کنید:

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

سپس بسته react-monaco-editor را با دستور زیر اضافه کنید:

yarn add react-monaco-editor

همچنین برای کار با react-monaco-edit باید برخی از وابستگی ها را نصب کنیم. آنها را با اجرای دستور زیر نصب کنید:

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

افزونه وب پک موناکو را نیز به عنوان یک نصب می کنیم devDependency با دستور زیر وارد برنامه React ما شوید:

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

سیم کشی مجدد برنامه React برای کار با Monaco Editor

گام بعدی پس از دانلود وابستگی ها این است که تغییرات مختلف بسته وب را انجام دهید تا ویرایشگر Monaco با برنامه React ما کار کند. با این حال، ایجاد تغییرات در بسته وب بسیار چالش برانگیز است زیرا تنظیمات بسته وب برای کاربران در Create React App در دسترس نیست، مگر اینکه آنها تصمیم بگیرند با اجرای برنامه React را خارج کنند. yarn eject.

خارج کردن یک برنامه React ایده بدی است زیرا برنامه ما تمام پیکربندی های React را از دست می دهد و از به روز رسانی های CRA بهره نمی برد. برخی از راه حل ها برای خارج کردن برنامه ما شامل استفاده از بسته هایی مانند react-app-rewired یا rewire است. شما همچنین می توانید از CRACO برای خارج کردن برنامه React خود استفاده کنید، اما نیاز به نصب افزونه های اضافی دارد.

در این آموزش، ما از react-app-rewired برای سیم کشی مجدد برنامه React خود استفاده خواهیم کرد. با اجرای دستور زیر بسته را نصب کنید:

yarn add --dev react-app-rewired

بعد، a ایجاد کنید config-overrides.js فایل را در ریشه پروژه قرار دهید و کد زیر را در آن قرار دهید:

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

اکنون، به مسیر بروید App.js فایل، تمام کدهای boilerplate را پاک کنید و ویرایشگر کد را بسازید.

ساخت ویرایشگر کد در React

برای شروع ساخت ویرایشگر کد در React، کد زیر را در آن قرار دهید App.js فایل:

import MonacoEditor from 'react-monaco-editor';

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

export default App;

بیایید مرور کنیم که چه کاری انجام می دهد. در کد بالا، ما آن را وارد کردیم MonacoEditor از جانب react-monaco-editor. در مرحله بعد، ما آن ویرایشگر وب را در برنامه جاسازی کردیم و در آن ارسال کردیم height که می خواستیم ویرایشگر رندر شود.

توجه داشته باشید، ما هیچ زبانی را به ویرایشگر منتقل نکردیم. را MonacoEditor زمانی که هیچ زبانی مشخص نشده باشد از جاوا اسکریپت به عنوان زبان پیش فرض استفاده می کند. این بدان معناست که شما می توانید تمام قابلیت های برجسته سازی نحوی و هوشمندی جاوا اسکریپت را دریافت کنید.

حالا، فرار کن yarn start برای مشاهده تغییراتی که در مرورگر ایجاد کرده اید، که باید مانند تصویر زیر باشد:

گذراندن options به سردبیر

شما می توانید لیستی از options به سردبیر monaco. دامنه گزینه ها از تنظیم است font size و font family به انتخاب cursor style و انتخاب می کنیم که آیا می خواهیم آن را قرار دهیم minimap در ویرایشگر اکنون لیستی را کپی و پیست کنید options به درون 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,
  }; 

در بلوک کد بالا تعدادی را تعریف کردیم options برای سفارشی کردن ظاهر و رفتار ویرایشگر. مرحله بعدی پاس کردن است options به ویرایشگر، همانطور که در زیر نشان داده شده است:

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

باز کردن فایل ها در ویرایشگر

تا به حال زبان ویرایشگر را با جاوا اسکریپت کدگذاری کرده ایم و می بینیم که ویرایشگر کد کار می کند. وقتی سعی می کنیم کدی بنویسیم که نحو جاوا اسکریپت ندارد چه اتفاقی می افتد؟ به تصویر زیر نگاه کنید تا متوجه شوید: در تصویر بالا مقداری کد پایتون نوشتیم. می‌بینید که ویرایشگر نحو را نمی‌شناسد، و این دلیل خطاها و خطوط squiggle است. راه حل این است که فایل‌ها را از ماشین محلی خود آپلود کنیم، زبان هر فایل را بررسی کنیم و زبان را به صورت پویا به ویرایشگر منتقل کنیم. بیایید این کار را در بلوک کد زیر انجام دهیم:

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;

در بلوک کد بالا، دو مورد ایجاد کردیم useState Hooks – یکی برای دریافت و تنظیم زبان ویرایشگر و دیگری برای مدیریت وضعیت فایل. بعد، یک را ساختیم useEffect برای بررسی وجود فایل، هوک کنید. اگر فایلی وجود دارد، پسوند را دریافت می کنیم و از آن برای تنظیم زبان ویرایشگر به زبان فایلی که بارگذاری شده است استفاده می کنیم.

مرحله بعدی ایجاد یک input دکمه دریافت فایل ها از دستگاه ما. در نهایت، ما یک تابع برای مدیریت تغییرات فایل ایجاد کردیم و آن را به فایل ارسال کردیم onChange کنترل کننده در input دکمه. وقتی تغییرات را ذخیره می کنیم و به مرورگر می رویم، تمام خطاها و خطوط squiggly ناپدید می شوند زیرا اکنون به صورت پویا زبان ویرایشگر را تنظیم می کنیم. در اینجا به نظر می رسد:

اضافه كردن themes به ویرایشگر کد

ویرایشگر موناکو تم هایی را برای استفاده در ویرایشگر ارائه می دهد. برخی از این موضوعات عبارتند از a light theme (پیش فرض)، الف dark theme، و الف high-contrast theme. بیایید ببینیم که چگونه تم ها را در ویرایشگر قرار دهیم:

// 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');
  };

در کد بالا، دو تابع ایجاد می کنیم: یکی برای تنظیم light theme و دیگری برای تنظیم dark theme. در dark theme تابع، حالت قبلی تم را دریافت می کنیم و سپس آن را به دیگری تنظیم می کنیم. مرحله بعدی این است که توابع را به buttons که برای تغییر تم استفاده خواهد شد. از کد زیر استفاده کنید:

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

در بلوک کد بالا، ما را راه اندازی کردیم buttons که برای تغییر تم ویرایشگر کد استفاده می شود و سپس آن را پاس می کند theme به سردبیر نتایج باید مانند GIF زیر باشد:

ایجاد یک Diff ویرایشگر با ویرایشگر موناکو

آ Diff ویرایشگر برای مقایسه دو فایل استفاده می شود. خوشبختانه، ویرایشگر موناکو عملکردی را برای ایجاد یک ارائه می دهد Diff ویرایشگر بیایید به کدی بپردازیم و ببینیم که چگونه a را ایجاد کنیم Diff ویرایشگر در بلوک کد زیر:

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;

در بلوک کد بالا، ما آن را وارد کردیم MonacoDiffEditor از بسته react-monaco-edit. سپس دو خط کد برای مقایسه ایجاد کردیم و آنها را به کد ارسال کردیم MonacoDiffEditor به عنوان لوازم جانبی برای value اموال و original ویژگی. را original دارایی دارای ارزش اصلی و value ویژگی دارای کد مقایسه شده است. نتیجه در پاین نشان داده شده است:

نتیجه

این مقاله به ایجاد یک ویرایشگر وب با React و بسته react-monaco-editor پرداخته است. استفاده از React و بسته react-monaco-editor می تواند فرآیند ایجاد یک ویرایشگر کد مبتنی بر وب را تا حد زیادی ساده کند. ویرایشگر react-monaco یک مؤلفه ویرایشگر قدرتمند و کارآمد با برجسته‌سازی نحو، تکمیل خودکار و طیف وسیعی از ویژگی‌های مفید دیگر ارائه می‌کند.

LogRocket: مشاهده کامل برنامه های React تولیدی شما

اشکال زدایی برنامه های React می تواند دشوار باشد، به خصوص زمانی که کاربران مشکلاتی را تجربه می کنند که بازتولید آن دشوار است. اگر به نظارت و ردیابی وضعیت Redux، نمایش خودکار خطاهای جاوا اسکریپت، و ردیابی درخواست‌های کند شبکه و زمان بارگذاری مؤلفه علاقه دارید، LogRocket را امتحان کنید.

LogRocket پخش مجدد جلسه، تجزیه و تحلیل محصول و ردیابی خطا را ترکیب می کند – تیم های نرم افزاری را برای ایجاد تجربه ایده آل وب و محصول تلفن همراه توانمند می کند. این برای شما چه معنایی دارد؟

LogRocket به جای حدس زدن چرایی خطاها یا درخواست از کاربران برای اسکرین شات‌ها و گزارش‌ها، به شما این امکان را می‌دهد تا مشکلات را طوری تکرار کنید که گویی در مرورگر خودتان اتفاق افتاده‌اند تا به سرعت متوجه شوید که چه اشتباهی رخ داده است.

دیگر خبری از هشدار پر سر و صدا نیست. ردیابی هوشمند خطا به شما امکان می دهد مسائل را تریاژ و دسته بندی کنید، سپس از این موضوع درس بگیرید. از مشکلات تأثیرگذار کاربر مطلع شوید، نه موارد مثبت کاذب. هشدارهای کمتر، سیگنال بسیار مفیدتر.

بسته میان افزاری LogRocket Redux یک لایه دید اضافی را به جلسات کاربر شما اضافه می کند. LogRocket تمام اقدامات و وضعیت ها را از فروشگاه های Redux شما ثبت می کند.

نحوه اشکال زدایی برنامه های React خود را مدرن کنید — نظارت را به صورت رایگان شروع کنید.