چگونه یک ویرایشگر متن غنی را در واکنش با SlateJS

ساختیم

عکس پروفایل نویسنده

ksimonsKevin Simons

Kitemaker (https://kitemaker.co)

ساخت یک ویرایشگر عالی برای برنامه وب مبتنی بر React خود به هیچ وجه آسان نیست. اما با SlateJS کارها بسیار راحت تر می شوند. حتی با کمک Slate ، ساخت یک ویرایشگر با امکانات کامل بیشتر از آن است که بتوانیم در یک پست وبلاگ آن را پوشش دهیم ، بنابراین این پست تصویر بزرگی به شما می دهد و پست های بعدی به جزئیات کثیف فرو می روند. < p class = "paragraf"> توجه: این پست بر اساس بحث اخیر در نشست جاوا اسکریپت NYC است. می توانید ویدئو را در اینجا تماشا کنید:

[محتوای جاسازی شده]

SlateJS

ما در حال ساخت Kitemaker هستیم ، جدید ، سریع و گزینه ای بسیار مشارکتی برای انتشار ردیاب هایی مانند Jira ، Trello و Clubhouse. ما معتقد به کارهای از راه دور و به ویژه کار غیرهمزمان هستیم تا اعضای تیم زمان طولانی و بدون وقفه ای برای انجام کار داشته باشند. نکته اصلی در حمایت از این نوع کارها داشتن یک ویرایشگر بسیار عالی است تا تیم ها از همکاری در زمینه مسائل و اطمینان از هم ترازی الهام بگیرند. و ما فکر می کنیم بهترین ویرایشگر را در اختیار داریم:

کلید های میانبر نشانه دار، بلوک های کد با نحو برجسته، تصاویر ، جاسازی طرح ها از Figma ، عبارات ریاضی با LaTex ، نمودارهای MermaidJS و البته شکلک ها ♥. همه کارها کاملاً با Slate انجام شده است.

پس چرا اولاً تصمیم گرفتیم که با Slate همراه شویم؟ این قطعاً تنها چارچوب ویرایشگر موجود نیست. برای ما ، مواردی که ما را به سمت تخته سنگ سوق داد:

  • درباره چگونگی ساختار سند شما نظر ندارد و این انعطاف پذیری لازم را به ما می دهد
  • این کار هر نوار ابزار داخلی یا سایر تصاویر را به شما تحمیل نکنید
  • با در نظر گرفتن React ساخته شده است و تفاوت زیادی در هنگام ارائه اسناد پیچیده ایجاد می کند
  • این اساس همکاری را ایجاد می کند ویرایش که چیزی است که به اعتقاد ما برای Kitemaker مهم است
  • ما فلسفه موجود در آن را واقعاً دوست داریم
  • این یک جامعه پر رونق است ، به ویژه در Slack

چگونه Slate اسناد را نمایندگی می کند

یکی از بهترین قسمت های Slate این است که چگونه نظرات کمی درباره نحوه ساختار اسناد ارائه می دهد. این فقط چند مفهوم دارد:

  • ویرایشگر – ظرف سطح بالای سند شما
  • عناصر سطح بلوک – “بخش” های خاص دامنه که اسناد شما را تشکیل می دهند ، مانند پاراگراف ها ، بلوک های کد و لیست ها. اینها مواردی است که می توانید در سند خود بین آنها خطوط افقی بکشید
  • عناصر درون خطی – عناصر ویژه ای که متناسب با متن سند شما جریان دارند ، مانند پیوندها
  • گره های متنی – اینها حاوی متن واقعی در سند
  • علائم – حاشیه نویسی هایی که روی متن قرار می گیرند ، مانند علامت گذاری متن به صورت پررنگ یا مورب

خوانندگان تیزبین متوجه می شوند که این ساختار آن بسیار شبیه به DOM است و متن ، بلوک و خطوط داخلی Slate بسیار شبیه به همتایان خود در DOM رفتار می کنند. بصری:

تخته سنگ از قالب JSON بسیار ساده ای برای نمایش اسناد استفاده می کند و سند بالا به این شکل است من n نمایندگی تخته سنگ:

[ { “نوع” : “بند” ، “کودکان” : [ { “متن” : “متن دارای پیوند” } ، { “type” : “link” ، “url” : “https://kitemaker.co” ، “کودکان” : [ { “متن” : “https://kitemaker.co” } ] } ، { “متن” : “اینجا” } ] } ، { “نوع” : “بند” ، “کودکان” : [ { “متن” : “نوشتار با” } ، { “متن” : “پررنگ” ، “پررنگ” : درست است } ، { “متن” : “و” } ، { “متن” : “ایتالیک” ، “ایتالیک” : درست است } ، { “متن” : “اینجا” } ] }
]

همانطور که قبلاً گفتیم ، اسلیت در مورد نحوه ساختار اسناد واقعاً نظری ندارد در لکه JSON در بالا ، تنها موردی که Slate به آن اهمیت می دهد این است که آرایه ای از عناصر بلوک با خاصیت کودکان بدست می آورد و این کودکان یا عناصر بلوک دیگری هستند یا مخلوطی از گره های متنی و عناصر درون خطی هستند. خودشه. Slate به نوع ، url یا مشخصات پررنگ اهمیت نمی دهد و همچنین به نحوه ارائه این گره های مختلف اهمیتی نمی دهد. این کار کار با آن را واقعاً انعطاف پذیر و قدرتمند می کند.

سلام ویراستار جهان

پس زمینه کافی. بیایید چند کد را بررسی کنیم! بیایید ببینیم یک م Sلفه ویرایشگر ساده با استفاده از Slate به نظر می رسد:

function < span> MyEditor ( ) { ساختار ویرایشگر = useMemo ( () => withReact (createEditor ()) ، []]؛ ساختار [value، setValue] = React.useState ([ { کودکان : [{ متن : ‘در حال آزمایش’ }] ، } ، ]) ؛ بازگشت ( < تخته سنگ ویرایشگر = {ویرایشگر} مقدار = {ارزش} onChange = {(v) = > setValue (v)}> <قابل ویرایش /> تخته > )
}
  • و همین. این یک م componentلفه کاملاً مفید با Slate است!
  • ما از createEditor () برای ایجاد ویرایشگر استفاده می کنیم (فعلا نگران نباشید withReact () – این یک افزونه است که در زیر به آن خواهیم پرداخت)
  • ما یک یک آرایه ساده از گره ها برای ذخیره سند (دقیقاً همانطور که در بالا نگاه کردیم)
  • ما یک م <لفه را ارائه می دهیم که به عنوان یک ارائه دهنده زمینه عمل می کند ، ویرایشگر ایجاد شده در بالا را برای تمام اجزای زیر آن ارائه می دهیم . این واقعاً جالب است زیرا به عنوان مثال می توانید در زیر م toolلفه نوار ابزار و سایر م componentsلفه ها را اضافه کنید که می تواند ویرایشگر را گرفته و سند را با آن دستکاری کند. ما همچنین مقدار و ویژگی های onChange را سیم کشی می کنیم ، شبیه هر ورودی در React
  • ما یک م <لفه اضافه می کنیم که ویرایشگر واقعی است که کاربر با آن در صفحه ارتباط برقرار می کند

خسته کننده است. چگونه کارها را گسترش دهیم؟

بنابراین ، در حالی که نوشتن آن مثال قبلی پیش پا افتاده بود ، ما هنوز فقط یک ویرایشگر داریم که در مورد آن کار می کند و همچنین