Custom Tab Spacing in Text Blocks

[Lo-kith]

Hi GrapesJS team,

I’d like to suggest a small feature that could improve the text editing experience inside text blocks.

Currently, pressing the Tab key inside a text component doesn’t provide consistent spacing control. It would be helpful to have a built-in option to insert a configurable number of spaces when the user presses the Tab key.

Suggested behavior

When the user presses Tab inside a text block, insert a defined number of spaces.

The tab size should be configurable (for example: 2, 4, or 5 spaces).

This would make it easier to align text and create consistent indentation.

Example implementation

Below is a simple logic that inserts a configurable number of spaces when the Tab key is pressed:

const TAB_SIZE = 4;

export const handleTabKey = (e: KeyboardEvent) => {
if (e.key !== "Tab") return;

e.preventDefault();
e.stopPropagation();

const target = e.currentTarget as HTMLElement;
if (!target) return;

const win = target.ownerDocument?.defaultView;
if (!win) return;

const selection = win.getSelection();
if (!selection || selection.rangeCount === 0) return;

const range = selection.getRangeAt(0);

const tabSpan = win.document.createElement("span");
tabSpan.textContent = "\u00A0".repeat(TAB_SIZE);
tabSpan.style.display = "inline-block";
tabSpan.style.width = ${TAB_SIZE * 0.6}em;
tabSpan.style.whiteSpace = "pre";

range.deleteContents();
range.insertNode(tabSpan);

range.setStartAfter(tabSpan);
range.setEndAfter(tabSpan);

selection.removeAllRanges();
selection.addRange(range);
};