@uiw/react-codemirror è costruito su CodeMirror 6, l'ultima versione che offre un'architettura modulare, prestazioni migliorate e una maggiore flessibilità nella personalizzazione degli editor.

react-codemirror2 è basato su CodeMirror 5, una versione consolidata e ampiamente utilizzata che offre una vasta gamma di funzionalità e supporto per plugin, rendendola una scelta affidabile per molti progetti.

@uiw/react-codemirror offre un'eccellente personalizzazione grazie alla sua architettura modulare, che consente agli sviluppatori di caricare solo i moduli necessari, inclusi linguaggi, temi e componenti, riducendo il peso complessivo dell'applicazione.

react-codemirror2 consente la personalizzazione attraverso l'uso di temi e plugin, ma la sua struttura è meno modulare rispetto a CodeMirror 6, il che significa che potrebbe essere necessario caricare più codice del necessario per alcune personalizzazioni.

@uiw/react-codemirror supporta il caricamento dinamico dei linguaggi, il che significa che puoi aggiungere solo i linguaggi di cui hai bisogno quando ne hai bisogno, migliorando le prestazioni e riducendo il tempo di caricamento.

react-codemirror2 supporta una vasta gamma di linguaggi out-of-the-box grazie ai suoi numerosi plugin, ma il caricamento dei linguaggi è statico, il che può aumentare il peso dell'applicazione se non vengono utilizzati tutti i linguaggi.

@uiw/react-codemirror fornisce un'evidenziazione della sintassi avanzata grazie alle nuove funzionalità di CodeMirror 6, che consente una maggiore precisione e personalizzazione nell'evidenziazione del codice.

react-codemirror2 offre un'evidenziazione della sintassi robusta e collaudata, supportata da una vasta gamma di temi e plugin, rendendola una scelta affidabile per l'evidenziazione del codice in tempo reale.

Esempio di codice per @uiw/react-codemirror

import React from 'react';
import { CodeMirror } from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

const MyEditor = () => {
  return (
    <CodeMirror
      height="200px"
      theme="dark"
      extensions={[javascript()]}
      onChange={(value) => {
        console.log('Codice modificato:', value);
      }}
    />
  );
};

export default MyEditor;

Esempio di codice per react-codemirror2

import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/javascript/javascript';

const MyEditor = () => {
  const [code, setCode] = React.useState('// Scrivi il tuo codice qui...');

  return (
    <CodeMirror
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
      }}
      onBeforeChange={(editor, data, value) => {
        setCode(value);
      }}
      onChange={(editor, data, value) => {
        console.log('Codice modificato:', value);
      }}
    />
  );
};

export default MyEditor;