Awesome

Title Tool - Editor.js (React-TS)

Provides Title (headings) Blocks for the Editor.js. It is compatible with react and typescript, without causing typing errors.

Installation

Get the package

npm i title-editorjs

Usage

Include module at your application

import Title from "title-editorjs";

Add a new Tool to the tools property of the Editor.js initial config.

const editor = EditorJS({
  ...

  tools: {
    ...
    title: Title
  },

  ...
});

Tool's settings

Setting	Description
H1	Transform the title into an h1 header
H2	Transform the title into an h2 header
H3	Transform the title into an h3 header
H4	Transform the title into an h4 header
H5	Transform the title into an h5 header
H6	Transform the title into an h6 header
<img src="data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='20' fill='blue' /%3E%3C/svg%3E" alt="Ícone SVG" /> Blue	Change the title color to blue
<img src="data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='20' fill='pink' /%3E%3C/svg%3E" alt="Ícone SVG" /> Pink	Change the title color to pink
<img src="data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='20' fill='green' /%3E%3C/svg%3E" alt="Ícone SVG" /> Green	Change the title color to green
<img src="data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='20' fill='purple' /%3E%3C/svg%3E" alt="Ícone SVG" /> Purple	Change the title color to purple
<img src="data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='20' fill='orange' /%3E%3C/svg%3E" alt="Ícone SVG" /> Orange	Change the title color to orange
<img src="data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='20' fill='black' /%3E%3C/svg%3E" alt="Ícone SVG" /> Black	Change the title color to black
<img src="data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='20' fill='yellow' /%3E%3C/svg%3E" alt="Ícone SVG" /> Yellow	Change the title color to yellow
<img src="data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='20' fill='red' /%3E%3C/svg%3E" alt="Ícone SVG" /> Red	Change the title color to red
Text-Align-Center	Change text alignment to center
Text-Align-Right	Change text alignment to right
Text-Align-Left	Change text alignment to left

Config Params

For now the package doesn´t have any configuration parameters 😔. But it's coming...😌

Output data

Field	Type	Description
text	`string`	titles's text
titleType	`string`	type of title: H1, H2 ... H6
color	`string or undefined`	color of the title
alignText	`string or undefined`	align of the title

{
   "id": "9V7e_m3ao4",
   "type": "title",
   "data": {
       "text": "H1",
       "color": "Red",
       "alignText": "Text-Align-Center",
       "titleType": "H1"
   }
}

And...

🌠🌠🌠 If the package was useful to you give it a star. 🌠🌠🌠

💁💁🏾💁🏼 Feel free to propose improvements. 💁🏾💁🏼💁🏿