Type a tab character into a Gutenberg Code block

Question

The Gutenberg Code blocks are for display blocks of code within your WordPress posts and pages. In ideal situations, most people just copy and paste code directly into these blocks. But I'd like to be able to just type the code into the block.

How do I type a tab character? I want to be able to indent while entering code. If I copy and paste a block of code, it doesn't lose the tabs. But, I have been unable to type one in.

Typing the tab key changes the focus to the next block. Shift-tab changes the focus to the previous block. CTRL-tab does nothing.

I've searched and googled and I've only been able to find other people asking the same question, without answers.

Literary

Because the answer is there isn't currently a way to do it, beyond switching to the classic editor. It doesn't appear they are going to fix it either. – Candiecandied

Seems silly to have to write a whole plugin for something so simple. I wonder if there would be a way to make the CTRL-tab insert a tab character into an active line of text inside a block. – Literary

not yet possible in the core code block: there's an issue tracking this (indenting the code) at github.com/WordPress/gutenberg/issues/15791 – Staminody

Answer 1

Try adding the following into a script tag before the footer (by enqueueing it according to the correct procedure):

var codeAreas = document.querySelectorAll('code.block-editor-rich-text__editable');
if (codeAreas) {
    for (area of codeAreas) {
        area.addEventListener('keydown', (e) => {
            var TABKEY = 9;
            if (e.keyCode == TABKEY) {

                if (e.preventDefault) {
                    e.preventDefault();
                }

                var text = "\t";
                var selection = document.getSelection();
                var range = selection.getRangeAt(0);
                var startPos = range.startOffset;
                var endPos = range.endOffset;

                area.innerText = area.innerText.substring(0, startPos)
                    + text
                    + area.innerText.substring(endPos, area.innerText.length);

                range = document.createRange();
                range.setStart(area.firstChild, endPos + text.length);
                selection.removeAllRanges();
                selection.addRange(range);

                return false;
            }
        }
            , false);
    }
}

I'll try to break down what each part does.

First, of course we find any editable code tags if they exist and add a keydown event.

var codeAreas = document.querySelectorAll('code.block-editor-rich-text__editable');
if (codeAreas) {
    for (area of codeAreas) {
        area.addEventListener('keydown', (e) => {
...

We check if it's a tab

...
var TABKEY = 9;
    if(e.keyCode == TABKEY) {

...

if it is, first we prevent the default behavior of the keydown event (selecting the next element)

...
if (e.preventDefault) {
    e.preventDefault();
}
...

then set the text we want inserted – in this case a tab, but could be four spaces or anything else – and also get the position of the current selection. If nothing is highlighted, the start and end of the selection range will be the same

...
var text = "    ";
var selection = document.getSelection();
var range = selection.getRangeAt(0);
var startPos = range.startOffset;
var endPos = range.endOffset;
...

Now we insert our text at the cursor,

...
area.innerText = area.innerText.substring(0, startPos)
    + text
    + area.innerText.substring(endPos, area.innerText.length);
...

then we reset our selection to the end of the inserted text

...
range = document.createRange();
range.setStart(area.firstChild, endPos + text.length);
selection.removeAllRanges();
selection.addRange(range);
...

then we return false just in case, so the event surely doesn't fire other handlers

Nne

Answer 2

I have solved this issue through installing "Enlighter - Customizable Syntax Highlighter" plugin. My code is now well formatted as needed.

Him