ما ActionText؟

ActionText أحدث إضافة إلى إطار Rails. يتيح لنا إنشاء محتوى نصي منسّق (rich text)، وتخزينه في جدول، ثم ربطه بأي model من نماذجنا. إعداده بسيط جدًا، ونتائجه رائعة. يستخدم ActionText المحرر Trix للمساعدة في إنشاء المحتوى المنسّق. وTrix محرر من نوع WYSIWYG يعيد تصميم طريقة عمل محررات WYSIWYG على الويب. فمعظم محررات WYSIWYG مبنية على واجهات API غير موثقة من Microsoft، جرى تفكيكها هندسيًا (reverse-engineered) لتعمل في المتصفحات الأخرى، ما أدى إلى سلوك غير متسق بين المتصفحات. وبدلًا من اتباع هذا النهج، يستخدم Trix عنصر contenteditable كجهاز إدخال وإخراج (IO). فحين يضغط المستخدم على مفتاح، يحوّل Trix المُدخل إلى عملية تعديل على النموذج الداخلي للمحرر، ثم يعيد عرض عنصر contenteditable لإظهار التغييرات. وهذا يلغي الحاجة إلى استخدام واجهات API غير متسقة، ويمنح المطورين أيضًا تحكمًا أكبر بكثير في الناتج.

لماذا قد ترغبون في استخدام ActionText؟

يمكن استخدام النص المنسّق في مجموعة واسعة من السيناريوهات بنتائج رائعة، فأنا أكتب هذا المقال الآن باستخدام ActionText. ويمكنكم أيضًا استخدامه لإنشاء نظام دردشة غني، أو لتدوين ملاحظات مفصّلة، أو للسماح بكتل الكود والاقتباسات داخل التعليقات. بل يمكنكم إنشاء CMS بسيط لتوليد صفحات ثابتة لموقع إلكتروني باستخدام ActionText، وبما أننا نستطيع ربطه بـ model من نوع AR، يمكننا أيضًا تخزين خصائص أخرى في السجل مثل عنوان الصفحة ووسوم SEO الوصفية وغيرها. إعداد ActionText بسيط جدًا، ويوفر ميزات كافية تجعله خيارًا رائعًا لكثير من الاستخدامات. ويمكنكم استخدام ActionText::Attachment لبناء تجارب مخصصة. أنشأنا عددًا من المرفقات المخصصة، منها الرابط إلى صفحة الوظائف لدينا مثل هذا الرابط أدناه (غمزة غمزة)

كيف نجعله يعمل؟

أولًا نحتاج إلى تثبيت Trix وتضمين ملفات JS وCSS

$ bin/rails action_text:install

// application.js
require("trix")
require("@rails/actiontext")

<pre>// actiontext.scss
@import "trix/dist/trix";

<pre><em>// application.scss</em>
@import "./actiontext.scss";

الآن يمكننا ربطه بـ model، وعرض rich_text_area في النموذج (form)، ثم عرض المحتوى، وبهذا ننتهي

<em># app/models/blog_post.rb</em>
class BlogPost <strong><</strong> ApplicationRecord
  has_rich_text :content
end

<em><%# app/views/blog_post/_form.html.erb %></em>
<strong><%=</strong> form_with model: blog_post do <strong>|</strong>form<strong>|</strong> <strong>%></strong>
  <div class="field">
    <strong><%=</strong> form.<strong>label</strong> :content <strong>%></strong>
    <strong><%=</strong> form.<strong>rich_text_area</strong> :content <strong>%></strong>
  </div>
<strong><%</strong> end <strong>%></strong>

<em><%# app/views/blog_post/_form.html.erb %></em>
<%= @blog_post.content %>

يتولى ActiveStorage رفع الصور، لذا لا شيء علينا فعله هنا سوى ضبط مزوّد التخزين. ومن الأمور التي يجب تذكّرها مع ActiveStorage وActionText كليهما التحميل المسبق (preload) للعلاقات (associations)، لأنها تُخزَّن في جداولها الخاصة. ويوفر ActionText نطاقين مسمّيين (named scopes) للتحميل المسبق للعلاقات.

BlogPost.with_rich_text_content.find(params[:id])
BlogPost.with_rich_text_content_and_embeds.find(params[:id])

هل هناك أي مشكلات في ActiveStorage؟

ActionText ليس مثاليًا. فهو لا يدعم الجداول افتراضيًا، لكن المطورين في timelapse توصلوا إلى طريقة ذكية للالتفاف على ذلك، بتضمين الجداول كمرفقات Trix وتحريرها في واجهة مستخدم خاصة بها

هناك مشكلتان أجدهما مزعجتين. فلأننا نستخدم عنصر contenteditable بدلًا من حقل إدخال أصلي (textarea أو input) لعرض المحتوى، نفقد بعض السلوك المعتاد. إذا أغلقتم النافذة عن طريق الخطأ أثناء تحرير المحتوى، تضيع بياناتكم. أما مع textarea فيمكنكم غالبًا إعادة فتح النافذة المغلقة، وستجدون كل ما كتبتموه لا يزال محفوظًا في الذاكرة. لكن Trix يستخدم المتصفح بطريقة "غير متوقعة"، لذا لا تعمل التحسينات التي طبّقتها المتصفحات لحفظ هذه البيانات. ومن الغرائب الأخرى أن اختصار ⌘Del (على mac) لحذف سطر كامل لا يعمل بشكل موثوق. فكثيرًا ما يحذف أكثر أو أقل من السطر الحالي. وأعتقد أن السبب أيضًا هو استخدام Trix لعنصر contenteditable بدلًا من حقل HTML عادي يعرف نظام التشغيل كيف يتعامل معه.

هل أنصح باستخدام ActionText؟

بالتأكيد... بحسب حالة الاستخدام لديكم. إذا كنتم تبنون شيئًا يستفيد من النص المنسّق، وتريدونه بسرعة، وتريدونه أن يعمل، فنعم، ActionText رائع. أما إذا كنتم تريدون تحكمًا دقيقًا جدًا، فقد لا يكون الخيار الأفضل لكم، وقد تؤدي أداة مثل SlateJS المهمة بشكل أفضل. لكن نسبة التكلفة إلى القيمة واضحة: تحصلون على الكثير مقابل وقتكم. فمنذ البداية يكون لديكم محرر رائع حقًا، قادر تمامًا على تقديم UX ممتازة. والآن بعد أن أصبح Trix جزءًا من Rails، سيستخدمه عدد أكبر بكثير من الناس، ما يعني أن مزيدًا من التحسينات قادم، ومن المرجح أنه باقٍ. يمكنكم استثمار الوقت في تطبيق ActionText في تطبيقكم بأمان نسبي، من دون خوف من أن يتوقف القائمون عليه عن دعمه. وأنا على يقين بأننا سنرى كثيرًا من التحسينات والطرق المبتكرة لتخصيصه في السنوات القادمة.