Formatting toolbar

We have two different float bbcode in this plugin :

  • floatl : will place a content on the left of your text (like in this screen). The bbcode exists and there is a button on the toolbar.

  • floatr : will place the content on the right. The bbcode exists, the button has not been added on the toolbar.

My first message could explain that better, I’ll correct this :thinking:

3 Likes

The plugin is broken again. And seriously so. After the latest upgrade, I was no longer able to create posts or send emails and after hours of exploring various possible causes, it turns out that only uninstalling the plugin solved the problem (the plugin was deactivated all along, but that did not prevent it from breaking things).

2 Likes

I’ll check the plugin, I did not upgrade since tuesday, sorry for the trouble and thanks for the feedback

I’ll fix this as soon as possible

2 Likes

Hum tested it on a live forum. I didn’t have any issue. I’ll try on my own version of the plugin on my forum tonight, and on another to confirm this. I’ll have a close look on the logs too

What plugins do you have ?
I’ll try with the same plugins to see if I can reproduce

This plugin must be broken if you use the Discourse bbcode (or other bbcode plugins) since I mostly use the same code for the markdown engine. I can make a specific branch if someone needs to use both.

The plugin is considered broken here but in all my tests, it works fine…

:thinking:

If you can’t repro the brokenness, I’ll move it back. @tophee, you will need to provide better repro steps, but it seems this plugin works fine on latest.

2 Likes

Sorry, I forgot to reply. Not sure of it’s relevant anymore, but here we go:

These are the ones I have currently installed (and things are working fine):

History 0.1 Y
discourse-TL1-invites 0.0.2 Y
discourse-assign 0.1 N
Canned Replies 1.1 Y
discourse-data-explorer 0.2 Y
discourse-details 0.4 N
discourse-voting 0.4 Y Settings
discourse-narrative-bot 0.0.1 Y
discourse-nationalflags 1.0.0 N
discourse-nginx-performance-report 0.1 Y
discourse-ratings 0.2 Y
discourse-solved 0.1 Y
Spoiler Alert! 0.3 Y
staff-notes 0.0.2 Y
discourse-translator 0.2.0 Y
Watch Category 0.4 Y
docker_manager 0.1 Y
lazyYT 1.0.1 Y
poll 0.9 Y

Before that, I had these plus the formatting toolbar and it did not work. Removing the formatting toolbar fixed it. That’s all I can say. If it can’t be reproduced, could it be the interaction of two or more plugins that caused the problems? Or the problem was solved by something else (though I wouldn’t know what) that coincided with the removal of the plugin?

2 Likes

I’m sure it’s an incompatibility between one of these and the formatting toolbar. On a clean install with a few plugins, I couldn’t repro the issue

I’ll check these plugins to see which one is incompatible with mine, and see if I can make the formatting toolbar better

1 Like

Version 3.0 available. Big change, and I’m sure you’ll like it : you can now select which button will appear on the toolbar. You don’t like the color button ? Deactivate it in the settings !

Also, this version allows us to add a RTL (right to left) support, you can deactivate the right alignment button and activate the left one.

toolbar1

toolbar2

You can’t (yet?) change the order of the buttons on the toolbar, it’s above my abilities :yum:

Please let me know if you have any issue during the upgrade or performance wise.

9 Likes

Now this is absolutely awesome! I was even proposing something of a sorts to the :discourse: Team on discussion about composer and buttons in it, so I’m really happy to see it actually done by you!
Ha! I knew that I choose the best toolbar plugin :stuck_out_tongue_winking_eye:
Good work!

1 Like

Seems too wide for phone display.

I use a 1920*1080 android cell phone.

And if I open all the control tools, the cell phone display seems to be not wide enough to display all the tools. Is there any solutions?

Yours

Yes and no.

I use some css to hide some buttons I don’t use :

list, numbered list and the spacer after emphasis and upload buttons, it adds some space

button.ember-view.btn.no-text.list, button.ember-view.btn.no-text.bullet, .d-editor-spacer {
    display: none;
}

You can use the css customize section in admin to hide some button on mobile like color for example

button.color_ui_button {
    display: none;
}

I also changed to padding (space between each button) with something smaller on mobile

#reply-control .d-editor-button-bar .btn {
    padding: 0 4px;
}

With these little tweaks, it should be better. If not, you can still deactivate some buttons with the new options.

2 Likes

Great plugin, thanks!

To be honest, I uploaded it because I wanted a button that shows how to modify font size instead of writing ### text

Is it possible to add it?

Also, do you think it’s possible to show something like that when someone wants to change colors?

2 Likes

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 ?

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/lib/discourse-markdown/formatting_bbcode.js.es6

1 Like

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

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L140

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 https://github.com/discourse/discourse-bbcode plugin. Or maybe have a theme setting for “bbcode” mode which requires the plugin vs “div” mode that requires no plugin.