https://github.com/skchawala/editorjs-text-style
An EditorJS inline tool for customizing font size and font family — lightweight, configurable, and easy to use.
https://github.com/skchawala/editorjs-text-style
Last synced: 2 months ago
JSON representation
An EditorJS inline tool for customizing font size and font family — lightweight, configurable, and easy to use.
- Host: GitHub
- URL: https://github.com/skchawala/editorjs-text-style
- Owner: skchawala
- Created: 2025-09-12T15:12:29.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-09-12T16:30:40.000Z (2 months ago)
- Last Synced: 2025-09-12T18:07:03.548Z (2 months ago)
- Language: TypeScript
- Size: 19.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-editorjs - @skchawala/editorjs-text-style - inline tool for customizing font size and font family — lightweight, configurable, and easy to use. (Tools / Block Tools)
README
# 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:
```bash
npm install @skchawala/editorjs-text-style
```
### or
```bash
yarn add @skchawala/editorjs-text-style
```
## 🚀 Usage
```bash
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
```bash
This is styled text inside Editor.js.
```
## 📜 Changelog
You can find the full list of changes in the [CHANGELOG.md](./CHANGELOG.md).