EditorJS Text Style Tool

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

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.