EditorJS Text Style Tool

✍️ An EditorJS inline tool for customizing font size and font family — lightweight, configurable, and easy to use.

Demo

EditorJS Text Style Demo

Features

🎨 Change font size inline
🅰️ Switch font family
⚡ Plug & Play with EditorJS
🔧 Fully configurable (define your own sizes and families)
🪶 Lightweight, no extra dependencies

Installation

Install via npm or yarn:

npm install @skchawala/editorjs-text-style

or

yarn add @skchawala/editorjs-text-style

🚀 Usage

import EditorJS from "@editorjs/editorjs";
import TextStyleTool from "@skchawala/editorjs-text-style";

const editor = new EditorJS({
  holder: "editorjs",
  autofocus: true,
  tools: {
    textStyle: {
      class: TextStyleTool,
      config: {
        fontSizeEnabled: true,
        fontFamilyEnabled: true,
        fontSizes: [
          { label: "12px", value: "12px" },
          { label: "14px", value: "14px" },
          { label: "16px", value: "16px" },
          { label: "18px", value: "18px" },
          { label: "20px", value: "20px" },
        ],
        fontFamilies: [
          { label: "Arial", value: "Arial" },
          { label: "Georgia", value: "Georgia" },
          { label: "Courier New", value: "Courier New" },
          { label: "Verdana", value: "Verdana" },
        ],
        defaultFontSize: "20px",
        defaultFontFamily: "Verdana",
      },
    },
  },
});

⚙️ Configuration Options

Option	Type	Default	Description
`fontSizeEnabled`	`boolean`	`true`	Enable or disable font size dropdown
`fontFamilyEnabled`	`boolean`	`true`	Enable or disable font family dropdown
`fontSizes`	`FontSizeOption[]`	Predefined set	Custom array of font size options `{ label, value }`
`fontFamilies`	`FontFamilyOption[]`	Predefined set	Custom array of font family options `{ label, value }`
`defaultFontSize`	`string`	`"16px"`	Default font size applied when no selection is made
`defaultFontFamily`	`string`	`"Inter, sans-serif"`	Default font family applied

🛠️ Output Data

<p>
  This is <span class="cdx-text-style" style="font-size: 20px; font-family: Verdana;">styled text</span> inside Editor.js.
</p>

📜 Changelog

You can find the full list of changes in the CHANGELOG.md.