Hiding Buttons doesnt work as expected

[CR34L]

I'm submitting a bug report

• Library Version:
  2.0.2

Please tell us about your environment:

• Operating System:
  OSX 10.14.1

• Browser:
  all | Chrome | Safari

• Language:
  TypeScript 3.1.6

Current behavior:
Unable to hide Buttons with provided options:
this.editorOptions = { hiddenButtons: ['cmdUrl', 'cmdImage', 'cmdCode', 'cmdPreview']};

Disable Buttons with options works as expected:
this.editorOptions = { disabledButtons: ['cmdUrl', 'cmdImage', 'cmdCode', 'cmdPreview']};

Expected/desired behavior:
Hide Buttons as expected

[ghiscoding]

If you have time to debug it, that would help because I don't currently have the time to look into it. What I could say though is that the problem might be on the line where it merge the editor default with your options, see this line, the merge of the editor options + your options, is supposed to result in your options still included. If you could troubleshoot that, it would help.

[CR34L]

Want to deploy the app on 1. of January. So I have to fix this issue by my own. I think it is just a minor issue...I will check this next week. Leaving you a message on progress. Cheers!

[stefanwalther]

Any solution you can share, @CR34L ?

[stefanwalther]

I found out in the meanwhile that when forking this repo, hiding buttons works in reactive-forms without any problems. But if you dynamically create forms (Dynamic Forms: https://angular.io/guide/dynamic-form), then hiding the buttons does not work anymore.

[ghiscoding]

@stefanwalther
I'll be more than happy to receive any PRs to fix the issue you mentioned.

[stefanwalther]

@ghiscoding Sure, if I find the issue ;-)
... working on it ...

[stefanwalther]

Weird thing is that even this does not work:

this.editorOptions = {
      autofocus: false,
      hiddenButtons: [],
      onShow: (e: EditorInstance) => {
        // @ts-ignore
        e.hideButtons(['cmdBold']);
      }
    };

And e.hideButtons excepts a string, not a string array ...?!

But Again

• Just an issue with dynamic forms, works like a charm with your forked repo.

[FelipeSanchezCalzada]

Hi, I'm experiencing the same problem.
It seems to be a problem with some bootstrap templates, I have tried with the bootstrap default template and everything works correctly with it.

Could you provide some way to change the color of the icons?

Good work with this project.

Edit: it seems that it is not the same problem, I proceed to open new issue.

sorry for the inconvenience

[stefanwalther]

The best workaround I have found so far is the following:

<angular-markdown-editor
   ... options
   class="angular-markdown-editor-minimalistic"
   ... other options
></angular-markdown-editor>

.angular-markdown-editor-minimalistic {

  // See here: https://css-tricks.com/almanac/selectors/a/attribute/
  ::ng-deep [data-handler$="cmdBold"] {
    display: none;
  }

}

---

Using then SCSS, I am doing the following, which always works to get a minimalistic version of the markdown-editor:

.angular-markdown-editor-minimalistic {

  $disabledButtons: cmdStrikethrough, cmdImage, cmdHeading, cmdUrl, cmdListO, cmdCode, cmdQuote, cmdTable, cmdPreview;

  @each $disabledButton in $disabledButtons {

    // See here: https://css-tricks.com/almanac/selectors/a/attribute/
    ::ng-deep [data-handler$="#{$disabledButton}"] {
      display: none;
    }
  }

}

Not ideal, but a well working workaround ;-)