‏Wordgard؛ ساخت ادیتور متنی ماژولار با جاوااسکریپت

این مثال از مستندات Wordgard نشون می‌ده که چطور با این کتابخونهٔ جاوااسکریپت یه ادیتور متنی بسازی. به گفتهٔ مستندات، برای یه ادیتور کارراه‌انداز حداقل به یه اسکیمای سند (document schema) نیاز داری و معمولاً هم می‌خوای تاریخچهٔ undo و یه منو بهش اضافه کنی.

نکتهٔ اصلی Wordgard اینه که همه‌چی از راه ترکیب افزونه‌ها ساخته می‌شه. مثلاً basicSchema یه مجموعهٔ پایه از عناصر سند (پاراگراف، عنوان، تأکید، لینک) رو می‌ده و تو می‌تونی عناصر بیشتر مثل لیست رو تیکه‌تیکه بهش اضافه کنی. اگه همه‌چی رو یکجا بخوای، fullSchema هست.

این کد یه ادیتور ساده رو می‌سازه و به عنصری با آی‌دی مشخص وصلش می‌کنه:

import {Wordgard, menuBar} from "wordgard/editor"
import {basicSchema} from "wordgard/schema"
import {history} from "wordgard/history"

const wg = Wordgard.create({
  parent: document.querySelector("#editor-parent"),
  doc: `<p>A starting document.</p>`,
  config: [basicSchema(), history(), menuBar()]
})

پیکربندی ادیتور از همین درخت افزونه‌ها ساخته می‌شه. Wordgard.label هم یه صفت aria-label به عنصر قابل‌ویرایش اضافه می‌کنه تا screen reader‌ها بتونن توصیفش کنن؛ مستندات پیشنهاد می‌کنه همیشه اینو بذاری. خود ادیتور دوتا عنصر DOM مهم داره: پوستهٔ بیرونی از طریق dom و عنصر قابل‌ویرایش از طریق contentDOM.

وضعیت ادیتور زیر خصوصیت state قرار داره و مهم‌ترین چیزی که ازش می‌گیری، شکل فعلی سنده که تو doc هست. برای گرفتن محتوا به‌صورت HTML می‌تونی این‌طوری عمل کنی:

import {serialize} from "wordgard/doc"
console.log(serialize(wg.state.doc).toHTML())

اگه بخوای سند رو به‌جای HTML به شکل JSON نگه داری، از wg.state.doc.toJSON() استفاده می‌کنی. نکتهٔ مهم اینه که state تغییرناپذیره؛ با هر ویرایش، ادیتور یه شیء state جدید می‌سازه و قبلی دست‌نخورده می‌مونه، پس نگه‌داشتن یه state قدیمی به امید هماهنگ‌موندنش با ادیتور کار نمی‌کنه.

مستندات تأکید می‌کنه که برای نشون‌دادن یه سند جدید، نباید محتوای ادیتور فعلی رو عوض کنی، چون این کار حالت‌های جانبی مثل تاریخچهٔ undo رو خراب می‌کنه. به‌جاش یه ادیتور تازه با state جدید بساز، عنصر DOM قدیمی رو بردار و ادیتور نو رو جاش بذار.

نکات کلیدی:

• Wordgard یه ادیتور متنی رو از راه ترکیب افزونه‌ها (اسکیما، تاریخچه، منو) می‌سازه
• با basicSchema شروع می‌کنی و عناصر بیشتر رو تیکه‌تیکه اضافه می‌کنی
• محتوا رو با serialize(...).toHTML() یا doc.toJSON() بیرون می‌کشی
• state تغییرناپذیره؛ هر ویرایش یه شیء جدید می‌سازه
• برای سند جدید، ادیتور رو از نو بساز، نه اینکه محتوای قبلی رو عوض کنی