Merge pull request #1501 from LenAnderson/qr-editor-tab-support

Add support for tab and shift-tab in QR editor
This commit is contained in:
Cohee
2023-12-10 16:50:30 +02:00
committed by GitHub
2 changed files with 34 additions and 3 deletions

View File

@@ -380,6 +380,7 @@ jQuery(function () {
$(document).on('click', '.editor_maximize', function () { $(document).on('click', '.editor_maximize', function () {
const broId = $(this).attr('data-for'); const broId = $(this).attr('data-for');
const bro = $(`#${broId}`); const bro = $(`#${broId}`);
const withTab = $(this).attr('data-tab');
if (!bro.length) { if (!bro.length) {
console.error('Could not find editor with id', broId); console.error('Could not find editor with id', broId);
@@ -392,11 +393,41 @@ jQuery(function () {
const textarea = document.createElement('textarea'); const textarea = document.createElement('textarea');
textarea.value = String(bro.val()); textarea.value = String(bro.val());
textarea.classList.add('height100p', 'wide100p'); textarea.classList.add('height100p', 'wide100p');
textarea.oninput = function () { textarea.addEventListener('input', function () {
bro.val(textarea.value).trigger('input'); bro.val(textarea.value).trigger('input');
}; });
wrapper.appendChild(textarea); wrapper.appendChild(textarea);
if (withTab) {
textarea.addEventListener('keydown', (evt) => {
if (evt.key == 'Tab' && !evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
evt.preventDefault();
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
if (end - start > 0 && textarea.value.substring(start, end).includes('\n')) {
const lineStart = textarea.value.lastIndexOf('\n', start);
const count = textarea.value.substring(lineStart, end).split('\n').length - 1;
textarea.value = `${textarea.value.substring(0, lineStart)}${textarea.value.substring(lineStart, end).replace(/\n/g, '\n\t')}${textarea.value.substring(end)}`;
textarea.selectionStart = start + 1;
textarea.selectionEnd = end + count;
} else {
textarea.value = `${textarea.value.substring(0, start)}\t${textarea.value.substring(end)}`;
textarea.selectionStart = start + 1;
textarea.selectionEnd = end + 1;
}
} else if (evt.key == 'Tab' && evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
evt.preventDefault();
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const lineStart = textarea.value.lastIndexOf('\n', start);
const count = textarea.value.substring(lineStart, end).split('\n\t').length - 1;
textarea.value = `${textarea.value.substring(0, lineStart)}${textarea.value.substring(lineStart, end).replace(/\n\t/g, '\n')}${textarea.value.substring(end)}`;
textarea.selectionStart = start - 1;
textarea.selectionEnd = end - count;
}
});
}
callPopup(wrapper, 'text', '', { wide: true, large: true }); callPopup(wrapper, 'text', '', { wide: true, large: true });
}); });

View File

@@ -639,7 +639,7 @@ function generateQuickReplyElements() {
<span class="drag-handle ui-sortable-handle">☰</span> <span class="drag-handle ui-sortable-handle">☰</span>
<input class="text_pole wide30p" id="quickReply${i}Label" placeholder="(Button label)"> <input class="text_pole wide30p" id="quickReply${i}Label" placeholder="(Button label)">
<span class="menu_button menu_button_icon" id="quickReply${i}CtxButton" title="Additional options: context menu, auto-execution">⋮</span> <span class="menu_button menu_button_icon" id="quickReply${i}CtxButton" title="Additional options: context menu, auto-execution">⋮</span>
<span class="menu_button menu_button_icon editor_maximize fa-solid fa-maximize" data-for="quickReply${i}Mes" id="quickReply${i}ExpandButton" title="Expand the editor"></span> <span class="menu_button menu_button_icon editor_maximize fa-solid fa-maximize" data-tab="true" data-for="quickReply${i}Mes" id="quickReply${i}ExpandButton" title="Expand the editor"></span>
<textarea id="quickReply${i}Mes" placeholder="(Custom message or /command)" class="text_pole widthUnset flex1" rows="2"></textarea> <textarea id="quickReply${i}Mes" placeholder="(Custom message or /command)" class="text_pole widthUnset flex1" rows="2"></textarea>
</div> </div>
`; `;