MD Composer extras

MD Composer Extras


This theme component adds few formatting options in the composer : underline, align center, align right, justify and strikethrough. You can customize the text of each button in the settings, making it compatible with every languages. Exist in rtl version (change align right to align left).

Repository link
https://github.com/iunctis/md-composer-extras


Preview


Preview the theme component on the theme creator forum


Compatibility


This theme component is an alternative of the Discourse Formatting Toolbar, I don’t recommend using both.

I recommend the plugin, but if you don’t want to (or can’t) install a plugin, this theme component might add enough options in the composer for you.

Also, to adapt the the component in mobile devices, I hid some buttons : bullet list, list and justify. They seemed the less helpful in this device.

For RTL languages forums, here is the rtl version : GitHub - iunctis/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version)

Let me know if there is some issue !


Thanks


I used some work done by @Johani in his theme components to add translations of the elements, and auto-integration of fa5 icons.

20 Likes

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

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

3 Likes

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

What are the disadvantages of using the theme-component?

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

2 Likes

Quite amazing what can be done with theme components! Well done.

2 Likes

Nicely done :slight_smile:
Do you think it’s possible to somehow to convert the HTML tags to some default tag like [Center] and something in the backend will convert it back (for UI reasons)? :slight_smile:

At the time, it wasn’t possible to create some bbcodes easily with theme components, I don’t know if it is now.

For now, if you want bbcode center and a button in the composer, the best way is to use the plugin : Formatting toolbar

1 Like

A tag like [center] will still require a plugin but you’re correct @Steven :+1:

At the time of this component’s creation you had to use HTML <div> tags. However, you can now use [wrap="foo"][/wrap] in themes / components.

You can read more about that here

Here’s a simple example

[wrap="center"] 
Some center aligned text 
[/wrap]

would create this markup when the post is cooked

<div class="d-wrap" data-wrap="center">
  <p>Some center aligned text</p>
</div>

which you can then target with a CSS attribute selector like so

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

and that would create something like this in both the composer preview and the rendered post

or

[wrap="right"] 
Some right aligned text 
[/wrap]

and that would result in this cooked markup

<div class="d-wrap" data-wrap="right">
  <p>Some center aligned text</p>
</div>

You can then add this CSS

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

for this result

Since the component currently uses the HTML align attribute, this change should be 100% backwards compatible.

Give it a go whenever you have the time and feel free to PM me if you have any questions about that.

6 Likes