mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-10-31 06:21:11 +00:00
d483dc674a
The primary goal is to balance having the editor work as expected by developers (with Tab key affecting indentation) while also not impeding keyboard navigation. * Tab indents, Shift+Tab unindents, but only when that indent would be valid. E.g. moving existing list items down or up one level. * Indenting a selection always works. * When an "invalid" indent is attempted, nothing happens and a toast is shown with a hint to press again to leave the editor. * Attempting the same action again allows the textarea lose focus by allowing the browser's default key handler. * Pressing Esc also loses focus immediately. * No tab handling happens until the text editor has been interacted with (other than just having been focused). * Changing indentation in block quotes adds or removes quote levels instead. Screenshot of the toast being shown: https://codeberg.org/forgejo/forgejo/attachments/a6287d29-4ce0-4977-aae8-ef1aff2ac89f Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6813 Reviewed-by: Otto <otto@codeberg.org> Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-authored-by: Danko Aleksejevs <danko@very.lv> Co-committed-by: Danko Aleksejevs <danko@very.lv>
64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
import {htmlEscape} from 'escape-goat';
|
|
import {svg} from '../svg.js';
|
|
import Toastify from 'toastify-js'; // don't use "async import", because when network error occurs, the "async import" also fails and nothing is shown
|
|
|
|
const levels = {
|
|
hint: {
|
|
icon: 'octicon-light-bulb',
|
|
background: 'var(--color-black-light)',
|
|
duration: 2500,
|
|
},
|
|
info: {
|
|
icon: 'octicon-check',
|
|
background: 'var(--color-green)',
|
|
duration: 2500,
|
|
},
|
|
warning: {
|
|
icon: 'gitea-exclamation',
|
|
background: 'var(--color-orange)',
|
|
duration: -1, // requires dismissal to hide
|
|
},
|
|
error: {
|
|
icon: 'gitea-exclamation',
|
|
background: 'var(--color-red)',
|
|
duration: -1, // requires dismissal to hide
|
|
},
|
|
};
|
|
|
|
// See https://github.com/apvarun/toastify-js#api for options
|
|
function showToast(message, level, {gravity, position, duration, useHtmlBody, ...other} = {}) {
|
|
const {icon, background, duration: levelDuration} = levels[level ?? 'info'];
|
|
const toast = Toastify({
|
|
text: `
|
|
<div class='toast-icon'>${svg(icon)}</div>
|
|
<div class='toast-body'>${useHtmlBody ? message : htmlEscape(message)}</div>
|
|
<button class='toast-close'>${svg('octicon-x')}</button>
|
|
`,
|
|
escapeMarkup: false,
|
|
gravity: gravity ?? 'top',
|
|
position: position ?? 'center',
|
|
duration: duration ?? levelDuration,
|
|
style: {background},
|
|
...other,
|
|
});
|
|
|
|
toast.showToast();
|
|
toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast());
|
|
return toast;
|
|
}
|
|
|
|
export function showHintToast(message, opts) {
|
|
return showToast(message, 'hint', opts);
|
|
}
|
|
|
|
export function showInfoToast(message, opts) {
|
|
return showToast(message, 'info', opts);
|
|
}
|
|
|
|
export function showWarningToast(message, opts) {
|
|
return showToast(message, 'warning', opts);
|
|
}
|
|
|
|
export function showErrorToast(message, opts) {
|
|
return showToast(message, 'error', opts);
|
|
}
|