Extras do MD Composer

[Steven]

Este componente de tema adiciona algumas opções de formatação no editor: sublinhado, alinhamento central, alinhamento à direita, justificado e tachado. Você pode personalizar o texto de cada botão nas configurações, tornando-o compatível com todos os idiomas. Existe uma versão RTL (altera o alinhamento à direita para alinhamento à esquerda).

Compatibilidade

Este componente de tema é uma alternativa à Barra de Ferramentas de Formatação do Discourse, não recomendo usar ambos.

Recomendo o plugin, mas se você não quiser (ou não puder) instalar um plugin, este componente de tema pode adicionar opções suficientes no editor para você.

Além disso, para adaptar o componente em dispositivos móveis, escondi alguns botões: lista com marcadores, lista e justificado. Eles pareciam os menos úteis neste dispositivo.

Para fóruns em idiomas RTL, aqui está a versão RTL: GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub

Avise-me se houver algum problema!

	Pré-visualização	md-composer-extras - Pré-visualização
	Repositório	md-composer-extras
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo nos Temas do Discourse?	Guia para iniciantes sobre o uso de temas do Discourse

[Anatolia]

It becomes like this if I use alignin together with underline.

[Steven]

That’s a limitation of the div align code, you need to add a line between the div align and your text

<div align="center">

[u]underline[/u]
</div>

That’s why I used a bbcode in my formatting toolbar, but I could only use the div in this theme component.

I’ll probably add an extra line by default and a little explanation

[Steven]

I upgraded the component to add those extra lines by default, now, when you use a align button and the underline button, you’ll have something like this

[tophee (Christoph)]

@Steven

I recommend the plugin

What are the disadvantages of using the theme-component?

[Steven]

The plugin is easier to customize, we can choose which buttons will appear or not, and there are some additional options like color or a float button that can do something like this with the image

[jtbayly]

É realmente impressionante o que se pode fazer com componentes de tema! Muito bem feito.

[verilog15 (verilog)]

Bem feito
Acha que é possível converter as tags HTML para alguma tag padrão como [Center] e algo no backend as converteria de volta (por motivos de interface)?

[Steven]

Na época, não era possível criar alguns bbcodes facilmente com componentes de tema; não sei se agora é. Por enquanto, se você deseja bbcode de centralização e um botão no editor, a melhor maneira é usar o plugin: Formatting toolbar

[Johani (Joe)]

Uma tag como [center] ainda exigirá um plugin, mas você está correto @Steven

No momento da criação deste componente, era necessário usar tags HTML <div>. No entanto, agora você pode usar [wrap="foo"][/wrap] em temas e componentes.

Você pode ler mais sobre isso aqui:

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Aqui está um exemplo simples:

[wrap="center"] 
Algum texto centralizado 
[/wrap]

Isso geraria a seguinte marcação quando a postagem for processada:

<div class="d-wrap" data-wrap="center">
  <p>Algum texto centralizado</p>
</div>

que você pode então selecionar usando um seletor de atributo CSS da seguinte forma:

[data-wrap="center"] {
  text-align: center;
}

E isso resultaria em algo como isto tanto na pré-visualização do compositor quanto na postagem renderizada:

ou

[wrap="right"] 
Algum texto alinhado à direita 
[/wrap]

E isso resultaria na seguinte marcação processada:

<div class="d-wrap" data-wrap="right">
  <p>Algum texto centralizado</p>
</div>

Você pode então adicionar este CSS:

[data-wrap="right"] {
  text-align: right;
}

para obter este resultado:

Como o componente atualmente usa o atributo HTML align, essa alteração deve ser 100% compatível com versões anteriores.

Experimente quando tiver um tempo e fique à vontade para me enviar uma mensagem privada se tiver alguma dúvida sobre isso.

[thwright]

Acabei de enviar pull requests para os componentes de wrap.

https://github.com/iunctis/md-composer-extras/pull/1
https://github.com/iunctis/md-composer-extras/pull/2
https://github.com/iunctis/md-composer-extras/pull/3

[thwright]

Adicionei mais pull requests para alinhar à esquerda, com uma opção CSS para alinhar à direita, movi o botão de tachado para ficar junto aos botões de negrito, itálico e sublinhado, e criei um botão básico de colunas. Este último pode ser melhor como um componente independente ou movido para o menu suspenso.

Removi o pull request; ele precisa de mais modificações. Também estou procurando adicionar botões de sobrescrito e subscrito, mas, ao adicionar eventos de calendário, slick e tiles, há muitos botões no compositor no compositor vertical do mobile. Não deve ser um problema no horizontal, mas se todos os botões devem ser acessíveis em qualquer menu, então eles devem ser movidos para o menu suspenso.

Tenho alguma opinião, @Steven, sobre como você quer lidar com isso?

Vou apenas dividir o JS principal em dois arquivos e trabalhar em algum CSS responsivo.

Idealmente, também deveríamos adicionar configurações para desativar/ocultar os botões conforme desejado.

---

EDIT: Implementei as alterações mencionadas (mas os elementos não têm uma opção para serem ocultados fora do CSS) e só preciso testar as alterações antes de enviar um PR.

[thwright]

Aquele PR deve estar bom agora, @Steven.

https://github.com/iunctis/md-composer-extras/pull/8

Esse PR implementa responsividade, flutuação, colunas, sobrescrito e subscrito. Consulte o README para saber como as colunas funcionam.

[ondrej]

Olá,
Não faço ideia do porquê estou recebendo isso. Fiz o upload há alguns dias. Estou na versão mais recente, pelo menos é o que o sistema me diz.
Obrigado.

[Steven]

Fiz um upgrade recentemente, mas ele deve estar funcionando corretamente. Acabei de testar em um site no desktop e no mobile.

Você pode tentar excluir o componente e reinstalá-lo? Parece que está com problemas no seu fórum.

Ou você também usa o plugin da barra de ferramentas de formatação? Isso pode estar criando ícones duplicados.

[ondrej]

Ok, obrigado! Vou dar uma olhada e farei o que você disse. Feliz aniversário também!

[zuker (Matías)]

É possível ocultar alguns ícones?

[Steven]

Quais você quer esconder? Vou te ajudar com isso.

[zuker (Matías)]

Strike, sub, sup Obrigado!

[Steven]

A maneira mais fácil é adicionar essas linhas de CSS ao seu tema, em Comunidade > CSS

.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
    display: none;
}