Markdown headings and the composer

Contribute Feature

AI-generated summary

The discussion revolves around adding a heading button to the Discourse composer, with a dropdown to select heading levels (H1, H2, etc.). nsuchy suggests this feature would be useful for users unfamiliar with Markdown. However, codinghorror believes it’s uncommon and points out that Gmail doesn’t offer this feature.

nsuchy disagrees, citing their experience with writing tutorials, and suggests implementing a button similar to Gmail’s “Tt” icon. codinghorror dismisses this idea and suggests creating a plugin instead.

Mittineague mentions that a plugin already exists, created by @Steven. sam suggests that a #theme-component would be sufficient instead of a full plugin.

Johani provides a possible implementation using a theme component, adding heading buttons to the current options menu. They share a code snippet in JavaScript and CSS to achieve this.

1

At the moment the composer has a button for bold and italics, I think it’d be nice if we added an “H” button which had a dropdown to select the type (1,2,3,etc) for people who have never used markdown before and might still want to add a heading. Thoughts?

2

Unless you see it in GMail, that’s unlikely – it is quite uncommon to need headers in the wild.

For example here’s what GMail offers today:

image
image1213×250 19.7 KB

3

My current community project is largely based on writing tutorials so headers are more common. Gmail has the whole " Tt" icon that achieves the same affect. Maybe try that?

12%20PM
12%20PM2560×1600 558 KB

4

No, we won’t be doing that. You could write a plugin to add it as a button if you like.

5

I don’t know if it still works, but there already is a plugin by @Steven that does headings.

5 Likes
6

For this case a Customization > Theme component will do just fine, no need to add a full on plugin for it.

5 Likes
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