دعم <span data-attribute> في محرر المحتوى الغني

إذا قمت بتحديد نص على سطر واحد وطبقت تغليفًا عبر زر المحرر، يتم تطبيق تغليف مضمن. هذا يعمل، لكن الحرف الأخير من النص المحدد يُقطع جزئيًا:

image

هذه إحدى طرق إنشاء تغليف مضمن، وسيتم تحويله تلقائيًا إلى تغليف كتلي إذا لم يكن هناك محتوى آخر مكتوب على نفس السطر.

الطريقة الأخرى هي <span data-attribute> ولا تُدعم في محرر النص الغني (يتم إزالة data-attribute)، رغم أنها مدعومة بالكامل في محرر Markdown. ومن المثير للاهتمام أن هذا الصيغة المسموح بها غير مدرجة في discourse/frontend/pretty-text/addon/allow-lister.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub بل موجودة في discourse/frontend/discourse-markdown-it/src/features/d-wrap.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub :slight_smile:

يُوثّق <span data-attribute> على منصة Meta، ويُستخدم على الأرجح في مواقع أخرى خارج منتداي. وميزته أنه لا يتم تحويله أبدًا إلى عنصر كتلي، حتى لو لم يكن هناك محتوى آخر على نفس السطر.

التغليف العادي وحده على سطر مثل هذا:

[wrap="fish"]text[/wrap]

سيُعرض كعنصر كتلي:

<div class="d-wrap" data-wrap="fish">
<p>text</p>
</div>

الطرق الوحيدة، حسب علمي، لتجنب هذا السلوك هي:

  • استخدام <span data-attribute>:

    <span data-fish>text</span>
    

    يُعرض كالتالي:

    <span data-fish="">text</span>
    
  • إضافة مسافة غير قابلة للقص (يفضل أن تكون عديمة العرض) مثل &ZeroWidthSpace; في بداية أو نهاية السطر.

    &ZeroWidthSpace;[wrap=fish]Fishyfishy[/wrap]
    

    يُعرض كالتالي:

    &ZeroWidthSpace;<span class="d-wrap" data-wrap="fish">Fishyfishy</span>
    

الأخيرة تعتبر طريقة ملتوية بعض الشيء.

أفضّل أن أتمكن من استخدام الحل الأول في محرر النص الغني. وبشكل عام، أي طريقة سهلة لإنشاء تغليف مضمن ستكون مفيدة.