Put this in your Custom Javascript in the ACP:
$(() => app.require('hooks').then((hooks) => { hooks.on('action:composer.enhanced', ({ postContainer }) => { postContainer.find('textarea.write').on('keydown', function (e) { if (e.key == 'Tab') { e.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; // set textarea value to: text before caret + tab + text after caret this.value = this.value.substring(0, start) + "\t" + this.value.substring(end); // put caret at right position again this.selectionStart = this.selectionEnd = start + 1; } }); }); }));Reorder default composer icons?
-
You can reorder them using some CSS. You have to set the order for each icon individually though. They are ordered from lowest to highest
order
value, and have a default of 0. You can use negetive values to pull to the left also..formatting-bar > ul { display: flex !important; flex-direction: row; } .formatting-bar > ul > li[data-format="list"] { order: -2; } .formatting-bar > ul > li[data-format="strikethrough"] { order: -1; } .formatting-bar > ul > li[data-format="emoji-add-emoji"] { order: 1; }
-
@yariplus probably the best way to select is with the
data-format
attribute -
@tlinden You don't need
!important
, you just need more specificity.The following arranges the composer buttons for this forum in alphabetic order:
.composer .formatting-bar .formatting-group { display: inline-flex; } .composer .formatting-bar .formatting-group [data-format="bold"] { order: 0; } .composer .formatting-bar .formatting-group [data-format="canned-responses"] { order: 1; } .composer .formatting-bar .formatting-group [data-format="emoji-add-emoji"] { order: 2; } .composer .formatting-bar .formatting-group [data-format="gif"] { order: 3; } .composer .formatting-bar .formatting-group [data-format="italic"] { order: 4; } .composer .formatting-bar .formatting-group [data-format="link"] { order: 5; } .composer .formatting-bar .formatting-group [data-format="list"] { order: 6; } .composer .formatting-bar .formatting-group [data-format="picture"] { order: 7; } .composer .formatting-bar .formatting-group [data-format="picture-o"] { order: 8; } .composer .formatting-bar .formatting-group [data-format="strikethrough"] { order: 9; } .composer .formatting-bar .formatting-group [data-format="upload"] { order: 10; } .composer .formatting-bar .formatting-group [data-format="zen"] { order: 11; }
You can clean it up by using less, which does work in the ACP:
.composer .formatting-bar .formatting-group { display: inline-flex; [data-format="bold"] { order: 0; } [data-format="canned-responses"] { order: 1; } [data-format="emoji-add-emoji"] { order: 2; } [data-format="gif"] { order: 3; } [data-format="italic"] { order: 4; } [data-format="link"] { order: 5; } [data-format="list"] { order: 6; } [data-format="picture"] { order: 7; } [data-format="picture-o"] { order: 8; } [data-format="strikethrough"] { order: 9; } [data-format="upload"] { order: 10; } [data-format="zen"] { order: 11; } }
-
I inspiring referenced this topic on