Customize toolbar buttons

[hernanvicente]

Hello, thank you for the useful plugin, it works pretty well.

I would like to custimize the toolbar hidding some buttons/icons, for example: 'image upload'. I've checked the documentation of SimpleMDE and it seems to be that it can be done via an attribute in the editor initialization.

new SimpleMDE(
  {
    element: el,
    hideIcons: ["guide", "heading"]
  }
);

Is there any way to achieve this with this plugin? I did try to change my manifest.js to pass hideIcons to the editor but Sprockets throws an exception

// link administrate-field-simple_markdown/application.js

document.addEventListener('DOMContentLoaded', setup);
document.addEventListener('turbolinks:load', setup);

function setup() {
  initSimpleMDE(document);
  initObserver(document.querySelector('.field-unit--nested'));
}

function initObserver(element) {
  if (!element) return;

  const observer = new MutationObserver(function (mutations) {
    for (let mutation of mutations) {
      if (mutation.addedNodes.length) {
        mutation.addedNodes.forEach(function(node) {
          initSimpleMDE(node);
        });
      }
    }
  });

  function initSimpleMDE(element) {
    if (!element) return;

    element.querySelectorAll('[data-simplemde="false"]').forEach(function(el) {
      new SimpleMDE({ element: el, hideIcons: ["guide", "heading"] }); // My change
      el.setAttribute('data-simplemde', true);
    });
  }

  observer.observe(element, { childList: true });
}

Thanks!

[michelegera]

Hey @hernanvicente, thanks for your feedback.

Not sure why it’s throwing that error, as it looks like your manifest.js is including the plugin’s JS asset correctly.

However, I just pushed a new branch with support for a hide_icons option that will get passed straight to the SimpleMDE configuration object.

You can try it by fetching the plugin directly from this repo:

# Gemfile

# Make sure you have the following line at the top of your Gemfile
# git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'administrate-field-simple_markdown', github: 'zooppa/administrate-field-simple_markdown', branch: 'hide-icons'

And then you would configure your dashboard like that:

# app/dashboards/foo_dashboard.rb

ATTRIBUTE_TYPES = {
  description: Field::SimpleMarkdown.with_options(hide_icons: ['guide', 'link', 'image'])
}.freeze

Let me know if that works!

[hernanvicente]

Hello @michelegera, it works like a charm.

I did quickly read your changes and I think, I could try to implement something more dynamic following your initial approach. Let me know if you consider it a good idea. I would be glad to create a pull request later.

Thanks a lot!

[michelegera]

Hey @hernanvicente, I’ve just released a new version of the gem that adds the full configuration object for EasyMDE (we switched to this library from SimpleMDE since) as per your idea/PR.

Thank you very much for your contribution!