Medium-editor: bold button seems broken, turns on, but cannot turn off (unbold)

[subatomicglue]

Using the angular2-medium-editor. Using mediumeditor options as:

options = {
      toolbar: {
        buttons: ['bold', 'italic', 'underline', 'orderedlist', 'unorderedlist', 'h1', 'h2', 'h3', 'anchor'],
    }

Every formatting button works on/off except for the B button for bold. I can click the B button, highlighted text goes bold, but B button doesn’t highlight, and clicking B again, the text doesn’t un-bold, it actually stays bolded.

I found this: https://github.com/yabwe/medium-editor/blob/9b511b2ae12f6481f6645b83d9878039e5ca8d0a/src/js/defaults/buttons.js which seems to define how bold is defined as a custom option, so I copied the bold option from here so I could tweak.

options = {
      toolbar: {
        buttons: [{
          name: 'bold',
          action: 'bold',
          aria: 'bold',
          tagNames: ['b', 'strong'],
          style: {
            prop: 'font-weight',
            value: '700|bold'
          },
          useQueryState: true,
          contentDefault: '<b>B</b>',
          contentFA: '<i class="fa fa-bold"></i>'
        }, 'italic', 'underline', 'orderedlist', 'unorderedlist', 'h1', 'h2', 'h3', 'anchor'],
    }

Same as above... (I can click the button, text goes bold, but button doesn’t highlight, and clicking again, the text doesn’t un-bold)...

I also did an inspect in Chrome on the bold text element. and found <b>highlightedtext</b> and with

b, strong {
    font-weight: bolder;
}

bolder instead of 700 or bold…. so I added that as value: '700|bold|bolder'. Didn’t work (same as above)… I saw in inspector that font-weight was 400… added that: value: '700|bold|bolder|400'. didn’t work (same as above)…

I set useQueryState: false, and now the button actually highlights. But clicking the button again doesn’t un-bold text, and the button stays highlighted.

Ideas?

[subatomicglue]

related: https://github.com/yabwe/medium-editor/issues/908

[subatomicglue]

If I change in Chrome inspector:

b, strong {
    font-weight: bolder;
}

to

b, strong {
    font-weight: 700;
}

then the toggle works. also, nowhere in our codebase is the word bolder, though we do use bootstrap4, just fyi..

Working now to set angular to use 700 for the .me-editable class set by angular2-medium-editor...

[subatomicglue]

Just noticed my useQueryState: false, was still false. Setting it to true and doing this in my angular component's scss file seems to do the trick, I can toggle B bold now!:

:host /deep/ .me-editable {
  b, strong {
    font-weight: 700 !important;
  };
}

.me-editable is the name of the class we use on the medium-editor <div class='me-editable'>... in angular2-medium-editor

[subatomicglue]

This is the type of gotcha that would be nice to have documented here: https://github.com/yabwe/medium-editor#button-options

1.) I think it would be useful to mention here, under style: how the document.execCommand mechanism works and that using style: value with anything other than 700|bold may not work, that you may need to specify the b, strong class styles as font-weight: 700. Or in shadow dom as I did above, for Angular

2.) Another suggestion to help improve this section: It's really hard to know what values I can choose for name, action... Adding a link to defaults/buttons.js may help as illustration of the options that build the built-in buttons. I find it much more useful than the link provided ( source code for buttons ) which points at extensions/button.js.