Formatting toolbar

With the latest option (we can choose which buttons can appear), I can add the size button, it’s a good idea, I’ll make an update very soon. It will be hidden by default I think.

For the color window, it’s above my capability to be honest. If someone can do something like this, I know there are a lot of people interested, I’ll gladly accept any pull request :pray:

3 Likes

It makes enormous amount of sense now to move this to a theme component, it makes adoption tons easier and there is nothing specific about the plugin that can not be done in a theme component.

8 Likes

The toolbar per se can be done as a theme, and I’m open to it, but is it the case for the bbcode implementation in the markdown engine ?

1 Like

Thinking about this a bit more, I would recommend moving to a <div> based solution with data- attribute per:

That has a bunch of advantages cause even without your theme something sane will display, as opposed to ugle bbcode tags.

It also opens a general question which we should do elsewhere about how to get this formatting into emails, can you open one? Kind of open to having themes be allowed to add email.scss or something like that but there will be a lot of magic we need to add.

4 Likes

Would this limit the ability to use markdown/bbcodes inside the html divs with data-* attribute tags? I was just trying to do something like this on a discourse instance:
<div data-floatr> ![image|283x72](upload://xD5khjH5UtWWvUnlvO5ZRA1aCw7.png)</div>

and it doesn’t seem to work. The following text

<div data-shadow>[u]hello world[/u]</div> ends up as:

[u]hello world[/u]

whereas bbcodes can be nested
[b][u]hello world[/u][/b] >> hello world

1 Like

Does this plugin interfere with Tiles Image Gallery and Slick Image Gallery at all? I can’t seem to get all three showing in the composer. If so, would moving it to a theme component allow the three to function together?

Yeah this is a bit tricky, but I guess the correct thing to do here if we want fancy bbcode is just to add a dependency on the official GitHub - discourse/discourse-bbcode: vBulletin BBCode plugin plugin. Or maybe have a theme setting for “bbcode” mode which requires the plugin vs “div” mode that requires no plugin.

From a purely selfish standpoint it’d be nice to have this plugin’s [floatl] and [floatr] baked into Discourse BBcode plugin. That might be a stretch as it’s not a standard BBCode, but it would resolve a few issues.

2 Likes

I am fine to pull that into the plugin

I had an issue with the slick gallery since the last weekend but it did work before. I thought it was an incompatibility with the latest Discourse update.

It should work together, but there is maybe an issue, I’ll look into it if I can.

I’ve done some more testing. I can’t seem to get any theme component working besides Tiger Stripes. I will see if I can find what’s happening.

Update: I bumped the install to 2.0.0.beta6 and all is working. I haven’t seen anything stating that that is the minimum version. Either way, things appear to be working.

I don’t see all the icons on mobile

There is a hamburger menu on the right that will display the icons.

1 Like

Perfect. It will be visible soon?

Click the hamburger menu. It will display immediately.

Yes the hamburger menu is to display the icons but there are too many icons so it needs anither hamburger menu?

There are some solutions :

Either some css customization or deactivate some buttons. I don’t really have a better solution for now

5 Likes

After the latest update the css here might no longer work?

1 Like

I bookmarked this commit : Making toolbar option menu button padding consistent · discourse/discourse@5f2f36f · GitHub

I’ll check tonight (probably) and give an update if this css trick is different now

Ok little update

If you want to hide the bulleted list:

#reply-control .d-editor-button-bar .bullet {
    display: none;
}

The numbered list:

#reply-control .d-editor-button-bar .list {
    display: none;
}

The spacer between categories of buttons:

.d-editor-spacer {
    display: none;
}

To hide a specific button of the formatting toolbar on desktop or mobile:

Example with the center button:

#reply-control .d-editor-button-bar .center_ui_button {
    display: none;
}

Another example with the color button:

#reply-control .d-editor-button-bar .color_ui_button {
    display: none;
}

For now, the existing buttons are:

  • underline_ui_button
  • addimg_ui_button
  • floatl_ui_button
  • left_ui_button
  • center_ui_button
  • right_ui_button
  • justify_ui_button
  • color_ui_button
  • size_ui_button

With the options to activate/deactive each button and these css tricks, it should be easy to make the toolbar you want.

I might rewrite the plugin in the future to make these things easier, but it’s not a priority right now, as long as it works well with the latest version of Discourse

Anyone is free to use, fork, recreate, rewrite this plugin to make the best version you need

4 Likes