LaTex Tool

LaTex Block for the Editor.js.

Features

• Render LaTex on input.
• Support read-only mode, input field is diabled on read-only mode.
• Allows adding a border, show/hide input filed.
• Allows stretching the preview to the container's full-width

Installation

Get the package

npm i editorjs-tool-latex

Include module at your application

import LaTexTool from 'editorjs-tool-latex';

Optionally, you can load this tool from JsDelivr CDN

Usage

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

import LaTexTool from 'editorjs-tool-latex';

var editor = EditorJS({
  ...

  tools: {
    ...
    math: {
      class: LaTexTool,
        config: {
            features: {
                border: true,
                stretch: true,
                hideInput: true,
            },
        },
    }
  }

  ...
});

Config Params

Latex Tool supports these configuration parameters:

| Field | Type | Description | | ----------- | -------- | ----------------------------------------------------------------------------------------------------------------- | | placeholder | string | Placeholder for input field | | features | object | Allows you to enable/disable additional features such as border, background tunes and caption. See details below. |

Tool's settings

1. Add border to preview section

2. Stretch to full-width

3. Hide input filed

Add extra setting-buttons by adding them to the actions-array in the configuration:

actions: [
    {
        name: 'new_button',
        icon: '<svg>...</svg>',
        title: 'New Button',
        toggle: true,
        action: (name) => {
            alert(`${name} button clicked`);
        }
    }
]

You can disable features such as border, stretch and hideInput tunes by defining features in the configuration:

features: {
  hideInput: true,
  border: false,
  stretch: false
}

NOTE: set caption to optional in order to configure caption as a tune.

Output data

This Tool returns data with following format

| Field | Type | Description | | ---------- | --------- | ----------------------------- | | math | string | raw input value | | hideInput | boolean | hide input field | | withBorder | boolean | add border to preview section | | stretched | boolean | stretch to screen's width |

{
    "type": "math",
    "data":
    {
        "math": "f(t) = \\frac{1}{2\\pi} \\int_{-\\infty}^{\\infty} F(\\omega) e^{i \\omega t} d\\omega",
        "withBorder": false,
        "stretched": false,
        "hideInput": false
    }
}