Markdown headings and the composer

Contribute Feature
7

In the context of a theme, creating a separate popup menu for headings probably involves more work, but you can add heading buttons to the current options menu.

headingButtons
headingButtons2708×1034 341 KB

Try something like this (quickly put together)

<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
  // edit the text of the buttons here
  I18n.translations.en.js.composer.headingOne = I18n.translations.en.js.headingOne =
    "Header 1";
  I18n.translations.en.js.composer.headingTwo = I18n.translations.en.js.headingTwo =
    "Header 2";
  I18n.translations.en.js.composer.headingThree = I18n.translations.en.js.headingThree =
    "Header 3";
  I18n.translations.en.js.composer.headingFour = I18n.translations.en.js.headingFour =
    "Header 4";
});

// no need to edit anything here
api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "headingOne",
    icon: "header",
    label: "headingOne"
  };
});
api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "headingTwo",
    icon: "header",
    label: "headingTwo"
  };
});
api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "headingThree",
    icon: "header",
    label: "headingThree"
  };
});
api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "headingFour",
    icon: "header",
    label: "headingFour"
  };
});

// no need to edit anything here
api.modifyClass("controller:composer", {
  actions: {
    headingOne() {
      this.get("toolbarEvent").applySurround("# ", " ", "headingOne");
    },
    headingTwo() {
      this.get("toolbarEvent").applySurround("## ", " ", "headingTwo");
    },
    headingThree() {
      this.get("toolbarEvent").applySurround("### ", " ", "headingThree");
    },
    headingFour() {
      this.get("toolbarEvent").applySurround("#### ", " ", "headingFour");
    }
  }
});
</script>

And use a little bit of CSS to change a few things:

.options .select-kit-collection {
    display: flex;
    flex-direction: column;
}

[data-value*="heading"] {
    order: -1;
}

#reply-control .fa-gear:before {
    content:"\f142";
}

And you’d be pretty close to what you wanted

10 Likes