Close Rich Text Toolbar when clicking outside

[Vanessa Otto]

Story

As a user I want to be able to close the rich text toolbar by clicking anywhere else on the button.

History

Right now an "x" button is implemented to close the toolbar

Technical notes

Here's an example Vue directive:

export default {
  mounted(el, binding) {
    el.clickOutsideEvent = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event, el);
      }
    };
    document.body.addEventListener("click", el.clickOutsideEvent);
  },

  unmounted(el) {
    document.body.removeEventListener("click", el.clickOutsideEvent);
  },
};