Suporte a <span data-attribute> no editor rico

Se eu selecionar algum texto em uma única linha e aplicar um wrap através do botão do editor, um wrap inline é aplicado. Isso funciona, embora a última letra do texto selecionado fique parcialmente cortada:

image

Essa é uma maneira de criar wraps inline, e ela será automaticamente convertida em um wrap de bloco se não houver outro conteúdo escrito na mesma linha.

A outra maneira é <span data-attribute>, que não é suportada no editor rico (o data-attribute é removido), embora seja totalmente suportada no editor Markdown. Curiosamente, essa sintaxe permitida não está listada em discourse/frontend/pretty-text/addon/allow-lister.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub, mas sim em discourse/frontend/discourse-markdown-it/src/features/d-wrap.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub :slight_smile:

<span data-attribute> está documentado no meta e provavelmente é usado fora do meu fórum. Ele tem a vantagem de nunca ser convertido em um elemento de bloco, mesmo que não haja outro conteúdo na mesma linha.

Um wrap regular sozinho em uma linha, como este:

[wrap="fish"]texto[/wrap]

Será renderizado como um bloco:

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

As únicas maneiras, que eu saiba, de evitar esse comportamento são:

  • Usar <span data-attribute>:

    <span data-fish>texto</span>
    

    é renderizado como:

    <span data-fish="">texto</span>
    
  • Adicionar um espaço não recortado (idealmente de largura zero) como &ZeroWidthSpace; no início ou no final da linha.

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

    é renderizado como:

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

A última opção é um pouco malandra.

Eu preferiria poder usar a primeira solução no editor rico. De forma mais geral, qualquer maneira fácil de criar um wrap inline seria boa.