EditorJS Indent Tune

Indentation support for Editor.js blocks.

editorjs-indent-tune adds indent / unindent controls, keyboard shortcuts, auto-indent, visual highlighting, RTL/LTR support, and optional multi-block indentation.

Instalation

NPM

npm i editorjs-indent-tune

CDN

Require this script on a page with Editor.js.

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

Basic Usage

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

const editor = new EditorJS({
    tools: {
        indentTune: {
                class: IndentTune,
                // Recommended: pass Editor.js version for style & older compatibility
                version: EditorJS.version,
            },
    },
     // Apply indent tune globally
    tunes: ['indentTune'],
})

That’s it 🎉 No extra configuration is required — all other options are fully optional and can be added later as needed.

What This Does

• Enables indent / unindent controls
• Adds keyboard shortcuts (Tab / Shift + Tab)
• Works for all blocks by default
• Respects built-in indent limits

Enable / Disable Per Block

If you don’t want indentation for a specific block, simply omit the tune from that block’s tunes list.

const editor = new EditorJS({
    tools: {
        paragraph: {
            class: Paragraph,
            tunes: [
                // intentionally no indentTune
            ],
        },
    },
})

Highlight Indent Level

You can visually highlight the indent area when a block is focused.

CSS

.indentHighlight {
    transition: background-color 0.4s ease;
}
[data-block-indent-wrapper][data-focused] .indentHighlight {
    background-color: rgba(255, 0, 0, 0.1);
}

Config

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

Complete Example (TypeScript)

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

const editor = new EditorJS({
    tools: {
        paragraph: {
            class: Paragraph,
        },
        indentTune: {
            class: IndentTune,
            config: {
                version: EditorJS.version,

                indentSize: 30,
                maxIndent: 10,
                minIndent: 0,

                multiblock: true,
                tuneName: 'indentTune',

                customBlockIndentLimits: {
                paragraph: { max: 5 },
                },
            } as IndentTuneConfig,
        },
    },
})

Keyboard Shortcuts

By default, EditorJS Indent Tune enables keyboard-based indentation.

Default Behavior

Shortcut	Action
Tab	Indent block
Shift + Tab	Unindent block

✅ Works on the currently focused block

✅ Supports multi-block selection if multiblock is enabled

✅ Automatically respects minIndent / maxIndent limits

Custom Keyboard Handling

You can override the default keyboard behavior using the handleShortcut option.

handleShortcut?: (
  e: KeyboardEvent,
  blockId: string
) => 'indent' | 'unindent' | 'default' | void

Interpretation

Return value	Effect
'indent'	Forces indentation
'unindent'	Forces un-indentation
'default'	Uses built-in behavior
undefined	Uses build-in behavior
false (as config value)	Disabled shortcuts completely

Example: Custom Shortcut Logic

const editor = new EditorJS({
  tools: {
    indentTune: {
      class: IndentTune,
      config: {
        handleShortcut(e, blockId) {
          // Use Ctrl + ] / Ctrl + [
          if (e.ctrlKey && e.key === ']') return 'indent'
          if (e.ctrlKey && e.key === '[') return 'unindent'

          return 'default'
        },
      },
    },
  },
})

Notes

• Auto-indent and keyboard indent respect block-specific limits
• Direction (ltr / rtl) does not affect shortcut logic — only visual placement

Using With an Alignment Tune (RTL / LTR)

If your editor also supports text alignment, you may want indentation to react to direction changes (LTR ↔ RTL). This can be done using directionChangeHandler.

Example Alignment Tune

class MyAlignmentTune {
  private block

  constructor({ block }) {
    this.block = block
  }

  private static listeners = new Set<
    (blockId: string, direction: 'ltr' | 'rtl') => void
  >()

  static addChangeListener(
    listener: (blockId: string, direction: 'ltr' | 'rtl') => void
  ) {
    MyAlignmentTune.listeners.add(listener)
  }

  private onChange(alignment: 'left' | 'right') {
    const direction = alignment === 'left' ? 'ltr' : 'rtl'
    MyAlignmentTune.listeners.forEach(l =>
      l(this.block.id, direction)
    )
  }

  wrap(blockContent: HTMLElement) {
    const direction = this.data.alignment === 'left' ? 'ltr' : 'rtl'
    MyAlignmentTune.listeners.forEach(l =>
      l(this.block.id, direction)
    )
    return blockContent
  }
}

Editor Setup

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

✅ You’re free to implement this however you prefer — this is just one approach.

Selecting Indent Elements (DOM)

These static constants are exposed for easier quering:

IndentTune.DATA_WRAPPER_NAME
IndentTune.DATA_FOCUSED
IndentTune.DATA_INDENT_LEVEL

Examples

// Wrapper
document.querySelector(`[${IndentTune.DATA_WRAPPER_NAME}]`)

// Focused wrapper
document.querySelector(`[${IndentTune.DATA_FOCUSED}]`)

// Indent level
element.getAttribute(IndentTune.DATA_INDENT_LEVEL)

Configuration Options

All config fields are optional.

Field	Type	Description	Default
version	string	Recommended to pass editor version for seamless style adjustments	2.29
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