Inquiry About Customising Tab Behaviour in SunEditor

Question

I am using the SunEditor library in my project, specifically version 2.16.5, and I am exploring the possibility of altering the behavior of the tab key press.

As you may know, by default, pressing the tab key in SunEditor inserts four non-breaking space characters ( ). However, for my project's requirements, I am interested in replacing this behavior so that pressing the tab key inserts an em space ( ) instead.

I have attempted to achieve this by inserting the em space character (\u2003) directly when handling the tab key press event. However, it appears that the inserted em space is converted into blank white spaces internally in SunEditor, which is not the desired behavior.

const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'Tab' || e.keyCode === 9) {
        e.preventDefault();

        const editor = editorRef.current?.editor;
        if (editor) {
            const tabNode = editor.util.createTextNode('\u2003')
            const selection = editor.core.getSelectionNode();
            if (selection) {
                editor.core.insertNode(tabNode);
            }
        }
    }
};


    <SunEditor
        defaultValue={html}
        setContents={html}
        onChange={onChange}
        showToolbar={showToolbar}
        ref={editorRef}
        disable={readOnly}
        setOptions={{
            buttonList: buttonsList,
            customPlugins: [header, templateEditor, level1, level2, level3, level4, level5, level6, sectionSign],
            minHeight: "300px",
            resizingBar: showResizingBar,
            showPathLabel: false,
            tabDisable: true,
            textTags: {
                underline: 'u',
                bold: 'b',
                italic: 'em',
                strike: 's'
            },
            addTagsWhitelist: 'L1|L2|L3|L4|L5|L6|HEADING|T|t',
            pasteTagsBlacklist: 'div|p|span',
        }}
        onKeyDown={handleKeyDown}
    />