https://github.com/EmersonMatias/title-editorjs

https://github.com/EmersonMatias/title-editorjs

Last synced: 26 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/EmersonMatias/title-editorjs
• Owner: EmersonMatias
• Created: 2023-11-18T20:33:22.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-18T22:27:34.000Z (about 1 year ago)
• Last Synced: 2024-07-11T19:36:38.909Z (5 months ago)
• Language: TypeScript
• Size: 15.6 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-editorjs - title-editorjs - Provides Title (headings) Blocks for the Editor.js with various settings like H1...H6, colors (red, pink, purple...) and text-align. It is compatible with react and typescript, without causing typing errors. (Tools / Block Tools)

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   

|  Blue  | Change the title color to blue   

| Pink  | Change the title color to pink    

| Green| Change the title color to green   

| Purple  | Change the title color to purple    

| Orange  | Change the title color to orange   

| Black   |Change the title color to black   

|  Yellow | Change the title color to yellow 

| 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. 💁🏾💁🏼💁🏿