Alla fine ho dovuto creare anche KuroEditor (Lacrime) Vol. 1

Aspetta, non c'è nessun editor?!

A circa metà dello sviluppo di KuroCMS, Kuroto ha improvvisamente ricordato l'immenso sforzo e il tempo spesi per configurare un editor decente in Strapi, e si è bloccato. Se i miei capelli fossero diventati bianchi, sarei potuto diventare un coniglio panda.

Sebbene quegli editor non funzionassero per Strapi, ho iniziato a fare ricerche nella speranza di trovare un editor che soddisfacesse i miei requisiti altrove... ma non sono riuscito a trovarne uno. Impossibile, dimmi che non è vero, Chappy! (ChatGPT)

Ricerca esclusiva sotto licenza MIT

Poiché avevo intenzione di pacchettizzarlo e distribuirlo con KuroCMS, avere un editor con licenza MIT era ovviamente l'opzione più conveniente.

In base alle mie ricerche, sembra che l'attuale tendenza per gli editor web sia completamente dominata dalle opzioni headless, in cui si prende in prestito solo la logica e si costruisce l'interfaccia utente da soli. Proprio come i CMS headless.

I 5 editor più votati al mondo

【TipTap】

1. Secondo quanto riferito, il numero uno indiscusso. Estremamente flessibile, supporta React/Vue e genera HTML / JSON.
2. Un editor headless. Puoi abbinare completamente il design dei pulsanti e il layout della barra degli strumenti all'interfaccia utente della tua app. È basato sul potente motore ProseMirror.
3. Base utenti: oltre 37.000 stelle su GitHub e oltre 8 milioni di download settimanali. Praticamente lo standard globale.
4. Come integrare: installa tramite `npm install @tiptap/react` e controllalo utilizzando l'hook `useEditor`.

【Editor.js】

1. Base di fan entusiasta, ritenuto intuitivo con una sensazione simile a Notion, basato su plugin, genera JSON (dati struttur組).
2. Caratteristiche: considera tutto come un blocco (paragrafi, immagini, intestazioni). Sensazione di funzionamento simile a Notion.
3. Genera JSON pulito anziché HTML, rendendolo ideale per visualizzare gli stessi dati su web, app mobili, smartwatch, etc.
4. Come integrare: carica il pacchetto principale e i singoli strumenti (Immagine, Intestazione, ecc.) separatamente, quindi inizializza con `new EditorJS()`.

【Lexical】

1. In rapida crescita, veloce, leggero, robusto, creato da Meta, focalizzato sul design, genera HTML / JSON.
2. Specializzato in prestazioni e accessibilità. Estremamente leggero, mantiene veloci anche le app su larga scala.
3. Base utenti: in rapido aumento. Funziona bene con i contenuti generati dall'IA ed è spesso adottato per gli editor di intelligenza artificiale.
4. Caratteristiche: offre una gestione avanzata dello stato e un modello di dati basato su albero. Completamente conforme alle linee guida WCAG (standard di accessibilità).
5. Come integrare: integra come plugin React. Definisci i "nodi" con nome per creare l'editor.

【Slate】 (Il framework più potente esclusivo per React)

1. Progettato per gli sviluppatori, massima personalizzazione, solo per React, genera JSON (arbitrario).
2. Caratteristiche: più che un editor, è una libreria per creare editor. Puoi definire completamente il tuo modello di documento.
3. Base utenti: forte supporto all'interno della community React (oltre 31.000 stelle su GitHub).
4. Caratteristiche: forte nella gestione di documenti con strutture nidificate complesse (ad es. elenchi all'interno di tabelle, immagini all'interno di elenchi).
5. Come integrare: costruisci utilizzando un approccio orientato ai componenti. Scrivi funzioni personalizzate come `renderElement` per controllare il rendering.

【Milkdown】 (WYSIWYG specializzato per Markdown)

1. Forte in casi d'uso specifici | Combina Markdown con il funzionamento visivo | Difficoltà medio-bassa | Genera Markdown / HTML
2. Caratteristiche: offre un'esperienza simile a Typora in cui il Markdown viene formattato in tempo reale durante la scrittura.
3. Base utenti: specializzato per sviluppatori e documentazione tecnica.
4. Caratteristiche: potenti estensioni Markdown tramite plugin. Supporta simboli matematici (LaTeX) e diagrammi (Mermaid).
5. Come integrare: sviluppato con TypeScript; inizializza passando i plugin richiesti in un array.

Quindi, cosa ne è di questi cinque?

Ho provato a utilizzare TipTap e Lexical come editor per Strapi, ma non hanno funzionato affatto... Lexical non gestiva correttamente le immagini e anche TipTap ha avuto problemi. Nessuno di loro si è avvicinato al WYSIWYG (ovvero la possibilità di modificare nell'editor esattamente come apparirà nel risultato finale) che Kuroto desiderava. Editor.js era fondamentalmente lo stesso; un editor solo JSON non può offrire un vero WYSIWYG. Potrebbero andare bene se si inseriscono solo testo e codice in modo continuo. Per quanto riguarda Milkdown, non menziona nemmeno le immagini: tanto vale usare LaTeX. E onestamente, a Kuroto non piace proprio React. Scuse a Meta (sudore). Al massimo potrei usare Vue se fosse necessario un framework, ma io preferisco di gran lunga Astro! Ora che ci penso, una volta c'era un manga chiamato Astro Kyudan.

Alla fine, ho ricordato che Quill + better-table, che avevo usato in Strapi, era l'opzione migliore. Tuttavia, non riuscivo proprio ad accettare l'implementazione delle tabelle lol. Fu allora che il piccolo diavolo nella mia mente disse: "Se devi lamentarti così tanto, costruitelo da solo!". In effetti, hai ragione. Le mie scuse.

E così è iniziato lo sviluppo di KuroEditor

Non avevo bisogno di un editor ad alte prestazioni. Volevo solo il WYSIWYG e uno strumento per le tabelle che potesse essere utilizzato senza stress, simile a Dropbox Paper! Spinto da questo grido interiore, ho deciso di costruirlo da solo. Condividerò i dettagli dell'editor realizzato da Kuroto nel prossimo articolo. È quasi completo e, una volta terminati i test durante la scrittura di questi articoli e organizzato il repository per GitHub, lo pubblicherò.