# title-editorjs

> Title Tool for Editor.js

Latest version **1.0.2** (published 2023-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install title-editorjs
pnpm add title-editorjs
yarn add title-editorjs
bun add title-editorjs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-11-18 |
| First published | 2023-11-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 28.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Emerson Matias |
| Maintainers | emersonmatthias |
| Keywords | header, title, tool, editor.js, editorjs |

## Links

- npm: https://www.npmjs.com/package/title-editorjs
- Repository: https://github.com/EmersonMatias/title-editorjs
- Homepage: https://github.com/EmersonMatias/title-editorjs#readme
- Issues: https://github.com/EmersonMatias/title-editorjs/issues
- npm.io page: https://npm.io/package/title-editorjs

## Dependencies (2)

- [@editorjs/editorjs](https://npm.io/package/@editorjs/editorjs.md) ^2.28.2
- [vite-plugin-css-injected-by-js](https://npm.io/package/vite-plugin-css-injected-by-js.md) ^3.3.0

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-11-18
- 1.0.1 — 2023-11-18
- 1.0.0 — 2023-11-18

## README

# Title Tool - Editor.js (React-TS)

Provides Title (headings) Blocks for the [Editor.js](https://github.com/codex-team/editor.js). It is compatible with react and typescript, without causing typing errors.

## Installation
Get the package

```shell
npm i title-editorjs
```

## Usage
Include module at your application

```javascript
import Title from "title-editorjs";
```

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

```javascript
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 |

 ```json
{
    "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. 💁🏾💁🏼💁🏿

---
_Source: https://npm.io/package/title-editorjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._