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?
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:
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?
No, we won’t be doing that. You could write a plugin to add it as a button if you like.
I don’t know if it still works, but there already is a plugin by @Steven that does headings.
For this case a theme-component will do just fine, no need to add a full on plugin for it.
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.
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