Registry / productivity / editorjs-inline-formatter

editorjs-inline-formatter

library0.1.0jsnpmunverified

A lightweight inline tool for Editor.js (v2.x) that lets you add custom text formatting tags like `<strong>`, `<em>`, `<u>`, or any HTML inline element without writing a full inline tool plugin. Version 0.1.0 provides a factory function `createGenericInlineTool` and three pre-built tools (ItalicInlineTool, UnderlineInlineTool, StrongInlineTool). Configure tag name, sanitize rules, keyboard shortcut, and toolbar icon. Ideal for extending Editor.js with custom inline formatting or replacing default bold/italic with different tags. Ships TypeScript types. Limited adoption; low release cadence.

productivity

npm install editorjs-inline-formatter

package ↗

INSTALL

IMPORT

SIG · EDITORJS-INLINE-FO

editorjs-inline-formatter

productivityjavascriptv0.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createGenericInlineTool

✓ import createGenericInlineTool from 'editorjs-inline-formatter'

✗ import { createGenericInlineTool } from 'editorjs-inline-formatter'

Default export, not named. Named imports are for pre-built tools.

ItalicInlineTool

✓ import { ItalicInlineTool } from 'editorjs-inline-formatter'

✗ import ItalicInlineTool from 'editorjs-inline-formatter'

Named export for pre-defined tool.

UnderlineInlineTool

✓ import { UnderlineInlineTool } from 'editorjs-inline-formatter'

✗ import UnderlineInlineTool from 'editorjs-inline-formatter'

Named export for pre-defined tool.

StrongInlineTool

✓ import { StrongInlineTool } from 'editorjs-inline-formatter'

✗ import StrongInlineTool from 'editorjs-inline-formatter'

Named export for pre-defined tool.

Shows how to initialize EditorJS with a custom bold tool using createGenericInlineTool and a pre-defined italic tool.

import createGenericInlineTool, { ItalicInlineTool } from 'editorjs-inline-formatter'; import EditorJS from '@editorjs/editorjs'; const editor = new EditorJS({ holder: 'editorjs', tools: { bold: { class: createGenericInlineTool({ tagName: 'STRONG', sanitize: { strong: {} }, shortcut: 'CMD+B', toolboxIcon: '<svg width="12" height="14"><text>B</text></svg>', }), }, italic: ItalicInlineTool, }, });

Debug

Known issues

gotchaMissing sanitize config can cause XSS or broken output when users paste HTML.

fix

Always provide a sanitize object with allowed attributes for the tag, e.g., { a: { href: true } }.

affects: >=0.0.0

gotchaIf you name your tool 'bold' or 'italic', you must manually configure the inline toolbar to include it, otherwise Editor.js may not display it.

fix

In the tool config, set inlineToolbar: true or add the tool name to the inlineToolbar array of a block tool.

affects: >=0.0.0

gotchaThe toolboxIcon SVG string must be valid XML. Using inline <use> with external references may break in some environments.

fix

Embed full SVG markup inline or use an icon library component.

affects: >=0.0.0

gotchaPre-built tools (ItalicInlineTool, UnderlineInlineTool) use specific tag names; overwriting them via createGenericInlineTool with the same name may cause conflicts.

fix

Use createGenericInlineTool with a unique tagName or avoid mixing pre-built and custom tools for the same purpose.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: createGenericInlineTool is not a function

Importing createGenericInlineTool as a named import instead of default.

fix

Use `import createGenericInlineTool from 'editorjs-inline-formatter'` instead of `import { createGenericInlineTool } from 'editorjs-inline-formatter'`.

Error: Inline Tool: tagName is required

Missing tagName option in configuration object passed to createGenericInlineTool.

fix

Ensure the config object includes `tagName: 'YOUR_TAG'`.

Cannot read property 'sanitize' of undefined

Using a pre-built tool (e.g., ItalicInlineTool) as a class directly without wrapping in an object.

fix

Set the tool config as `italic: ItalicInlineTool` not `italic: { class: ItalicInlineTool }` (unless you need additional options).

Upgrade

Version history

0.1.0latest on npm

Audit

Dependencies

@editorjs/editorjsoptionalPeer dependency - required to use as an inline tool plugin

Agent activity

45 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

packageeditorjs-inline-formatter ↗