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 |