EditorJS Indent Tune

Indent feature for Editor.js.

Instalation

Install via NPM

npm i editorjs-indent-tune

Load from CDN

Require this script on a page with Editor.js.

<script src="https://cdn.jsdelivr.net/npm/editorjs-indent-tune/dist/bundle.js"><script>

Usage

import EditorJS from '@editorjs/editorjs'
import IndentTune from 'editorjs-indent-tune'

/**
 * Editor.js configuration
 */
const editor = new EditorJS({
    /**
     * Connect tool
     */
    tools: {
        indentTune: IndentTune,
    },

    /**
     * Apply to all the blocks
     */
    tunes: ['indentTune'],

    // ...
})

You can disable this tune for a specific block by not adding it in the tunes array

const editor = new EditorJS({
    tools: {
        someOtherTool: {
            //...
            tunes: [
                /* all other tunes except those you dont want*/
            ],
        },
    },
})

Apply a indent highlight

.indentHighlight {
    transition: background-color 0.4s;
}
[data-block-indent-wrapper][data-focused] .indentHighlight {
    background-color: red;
}

const editor = new EditorJS({
    tools: {
        indentTune: {
            class: IndentTune,
            config: {
                highlightIndent: {
                    className: 'indentHighlight',
                },
            },
        },
    },
})

Complete example:

import IndentTune, { type IndentTuneConfig } from 'editorjs-indent-tune'

const editor = new EditorJS({
    tools: {

        someOtherBlock: {
            //...
        },
        indentTune: {
            class: IndentTune,
            config: {
                customBlockIndentLimits: {
                    someOtherBlock: { max: 5 },
                },
                maxIndent: 10,
                indentSize: 30,
                multiblock: true,
                tuneName: 'indentTune',
                // If you use typescript
            } as IndentTuneConfig,
        },
    },
})

What if my editor also has a text alignment tune?

You can use the directionChangeHandler config field for that.

Here is one solution:

class MyAlignmentTuneClass /* extends maybe other class */ {
    private block
    constructor({ block }) {
        this.block = block
        // ...
    }

    private static listeners = new Set()
    public static addChangeListener(listener: (blockId: string, direction: 'ltr' | 'rtl') => void) {
        MyAlignmentTuneClass.listeners.add(l)
    }

    private onChange(alignment) {
        //...
        MyAlignmentTuneClass.listeners.forEach((l) => l(this.block.id, alignment == 'left' ? 'ltr' : 'rtl'))
        //...
    }

    public wrap(blockContent) {
        //...
        AlignmentBlockTune.listeners.forEach((l) => l(this.block.id, this.data.alignment == 'left' ? 'ltr' : 'rtl'))
        //...
    }
}

const editor = new EditorJS({
    tools: {
        alignmentTune: {
            class: MyAlignmentTuneClass,
        },
        indentTune: {
            class: IndentTune,
            config: {
                directionChangeHandler: MyAlignmentTuneClass.addChangeListener,
            },
        },
    },
})

You're free to use whatever implementation you wish.

Select elements

Selection of the IndentTuneWrapper can be done (in JS) using [${IndentTune.DATA_WRAPPER_NAME}] selector

Selection of the Focused state for the IndentTuneWrapper can be achieved (in JS) using [${IndentTune.DATA_FOCUSED}] selector

Selection of the IndentLevel can be accesed from the IndentTune.DATA_INDENT_LEVEL attribute

Config Params (optional)

Field	Type	Description	Default
indentSize	number	Size of one indent level (in pixels)	24
maxIndent	number	The upper indent limit of any block	8
minIndent	number	The lower indent limit of any block	0
orientation	'horizontal' | 'vertical'	The UI design for how you want the toolbox to be displayed	horizontal
customBlockIndentLimits	Record<string, Partial<Record<'min' | 'max', number>>>	A set of overrides of the indent limit for each type of block	{}
multiblock	boolean	Marks if you can indent multiple blocks at a time	false
tuneName	string | null	This is required for multiblock to work	null
handleShortcut	((e:KeyboardEvent, blockId:string) => 'unindent' | 'indent' | 'default' | void) | undefined | false	Custom shortcut function that allows overriding the default indenting using keyboard. If set as false no shortcut will be applied.	undefined
direction	'ltr' | 'rtl'	Specify the global direction of the indents	ltr
directionChangeHandler	null | (listener: (blockId: string, direction: TextDirection) => void): void	If provided will be used to apply visual changes (indent direction) based on the provided change value.	null
highlightIndent	null | { className?: string; tuneNames?: string[]; }	If provided will display a highlight for the indent. Provide a list of tuneNames for which it should be applied, applies to all by default. Can be customized with custom class using [data-focused] .myClass {}	null
autoIndent	null | boolean | { tuneNames?: string[]; }	If provided with a config object or true will automatically indent new blocks to same level as the previous block, if there are no indentation limit restrictions. Provide a list of tuneNames for which block types it should be applied, applies to all by default.	false