MD Composer extras

Theme component
41

I’ve done as you suggested and suppressed my unwanted ones like this:

// Hides unneeded buttons from the MD Composer Extras TC 
.d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

However, it would be really nice to be able to choose which buttons to include in the TC settings for this. I wonder if this could be done by simply making it so that if there is no text in the setting for a button then it would not be created.

I had a go doing this but it was beyond my meagre skills; I just couldn’t manage to make each bit conditional upon the relevant setting.

1 Like
42

Hi Steven# Very nice component but have found a minor bug. Superscript has a minor error. see below.

Screenshots_2023-01-16-06-18-41
Screenshots_2023-01-16-06-18-41806×703 30.8 KB

Closing with /sub instead of /sup

2 Likes
43

Just a thought you could likely have an all in one that uses settings toggles on the advanced version.

ie a Toggle if using bbcode plugin and both could have options to hide buttons or add buttons to bar. With the same if admins want to exclude options in the :gear: dropdown.

I am still pretty green learning css. However a complimentary component could likely be made for extra bling to organise the dropdown with cascading dropdown…

ie Main dropdown gear with color option picker.

:gear: .
Insert Poll
Insert Table
Text COLOR. > Red
Green
Blue
Orange

One might be able to group other formatting options in the drop down and/or toolbar to have a menu to choose a formatting option.

1 Like
44

Thanks, I’ve pushed a fix on this issue.

2 Likes
45

Your very welcome and thank you very kindly for the speedy response and fix! :vulcan_salute::sunglasses::handshake:

46

I would recommend updating your Op Post to include how to use the optional branch install. I found your “color” and “simple” branch alternatives.

In your color branch I made a small change to the bbcode_color

in “Desktop\Head” - line 65 and “€Mobile\Head*” - line 96

“[color=##233]” to “[color=name]” As will be making a guide for my WiP site on changing name to colorname.

The hex value is not the one you had. Just put that as a ref to kind of what it was.

I am still green on things and will need to make a github and learn how-to fo pull requests sometime.

47

Thank you very much for this uncomplicated and featureful component! Very much appreciated.

And a small suggestion, would it be possible to use the Markdown convention of ~~this~~ for strikethrough instead of the more verbose <s></s> convention?

1 Like
48

Chiming in on this one :slight_smile:

It would be great to have a native option to display the MD composer extras only to specific groups. In our case, we would like to test the extra buttons only for our staff at this point.

For now I hid it by adding body:not(.staff) to nathan’s code:

// Hides unneeded buttons from the MD Composer Extras TC from non-staff users
body:not(.staff) .d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

Next level would be a permission setting for each individual button. :drooling_face:

2 Likes
49

@jrgong you can do this by adding this component and some CSS

can check out my group navigation menu sections TC for css example - link on my user card.

5 Likes
50

How is this not in core yet? :smiley: Thx for sharing, I really appreciate it.

3 Likes
51

Is this still the case that the Plugin has advantages over this Theme Component?

52

I still think the plugin is better, but if the options presented here suits you, it’s fine

2 Likes
53

Thank you for the quick answer. Can you please explain why?

54

Just a personal opinion, I think we added too many button in the component.

The plugin is more focused on basic functions, the bbcode system is more easy too ([center] instead of [wrap="center"]) but the component is clearly easier to install.

4 Likes
55

Just in case you haven’t seen this:

image

3 Likes
56

I made a PR :+1:

2 Likes
57

Would it be possible to add a md-composer-extras CSS class to all buttons? My goal is to hide all of them at once for non-staff users and that would make the CSS targeting much simpler.

58

I’m not sure this is possible, with the example code from the plugin api file, I don’t see a way to add sort of a root class for all these icons. I may be wrong tho

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
  id: 'pop-text',
  group: 'extras',
  icon: 'bolt',
  action: 'makeItPop',
  title: 'pop_format.title'
  });
 });
60

A staff class is applied to the <body> element.

So, you can target any buttons like:

body:not(.staff) .d-editor-button-bar {
    /* Hides everything 
     * (visible buttons, including the popup menu button) 
     */
    button, 
    .toolbar-popup-menu-options {
        display: none; 
    }
}

body:not(.staff) .d-editor-button-bar {
    /* Hide specific buttons */
    button {    
        /* Inline buttons */
        &.align_justify_button, 
        &.align_right_button 
        /* ... */
        {
            display: none;
        }
        
        /* Popup menu */
        &.toolbar-popup-menu-options {
            [data-name="Float left"],
            /* ... */ {
                display: none;
            }
        }
    }
}

Would that help?

On a side-note, you might be interested in this component:

61

Hey Arkshine! That definitely helps! Yet IMHO it would be a more efficient approach to add a CSS class md-composer-extras to each of the buttons. That way the CSS markup to hide all the elements is super simple :slight_smile:

Thx! We are in fact already using that :wink: