Поддержка <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>
    

Второй вариант немного хакован.

Я бы предпочел иметь возможность использовать первое решение в визуальном редакторе. В целом, любой простой способ создания встроенной обертки был бы полезен.