@phigoro/editorjs-toc

Table of contents for Editor.js.

Installation via NPM

Get the package

npm install --save-dev @phigoro/editorjs-toc

Include module at your application

const TOC = require('@phigoro/editorjs-toc');

Usage

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

const editor = EditorJS({
  ...
  
  tools: {
    ...
    toc: class: TOC,
  }
  
  ...
});

Output data

| Field | Type | Description | | ----- | ---- | ----------- | | id | string | TOC block id | | type | string | toc | | data | object | TOC data |

TOC data

| Field | Type | Description | | ----- | ---- | ----------- | | items | array | TOC items |

TOC item

| Field | Type | Description | | ----- | ---- | ----------- | | id | string | TOC item id | | reference | string | TOC item reference | | text | string | TOC item text | | level | number | TOC item level |

Example

{
  "id": "PYMEXBjCit",
  "type": "toc",
  "data": {
    "items": [
      {
        "id": "vdqt7oqrtm",
        "reference": "Jx6gz2I-OZ",
        "text": "Installation via NPM",
        "level": 2
      },
      {
        "id": "puyms4j4mg",
        "reference": "VVJ-XzT0sn",
        "text": "Usage",
        "level": 2
      },
      {
        "id": "d4xqj4j4mg",
        "reference": "Kx6gz2I-OZ",
        "text": "Output data",
        "level": 2
      },
      {
        "id": "luyms4j4mg",
        "reference": "fVJ-XzT0sn",
        "text": "TOC data",
        "level": 3
      },
      {
        "id": "d4xqj4j4mg",
        "reference": "dVJ-XzT0sn",
        "text": "TOC item",
        "level": 3
      }
    ]
  }
}

Translation

Use i18n property to translate the tool to your language. Pass an object with translation strings as a parameter.

i18n: {
    messages: {
        toolNames: {
            "TOC": "Table of contents",
        },
        tools: {
            "toc": {
                'Refresh': "Refresh",
                'No headings found': 'No headings found',
            }
        },
    }
},