How to use tab key to indent/outdent a list item in q-editor

[kirschkern]

In my q-editor element I want to use the tab key to indent my unordered list item.
However instead of indenting the current line/list item, the focus switches to the next button outside the q-editor element.

I've tried adding @keydown.tab.prevent="" to the q-editor element which prevents the focus to switch but it doesn't indent the text oder the current list element.

Any idea?

[aleksander237]

Hello,

maybe something like this: https://codepen.io/aleksander237/pen/poLVbOp

Best regards,
A

[kirschkern]

Who is "Richard"?
Thanks a lot Aleksander. Great starting point and so easy! I'm now going to find out how to indent list items.

[kirschkern]

This is my current solution based on your pen.

onKeydown(e) {
    if (e.code === "Tab") {
        e.preventDefault();
        var cmd = e.shiftKey ? "outdent" : "indent";
        document.execCommand(cmd, false, "")
    }
}

[aleksander237]

Richard from the Silicon Valley. My pleasure!