2.3.1 • Published 10 months ago

editorjs-tool-latex v2.3.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

npm.io

LaTex Tool

LaTex Block for the Editor.js.

tool-screenshot

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:

FieldTypeDescription
placeholderstringPlaceholder for input field
featuresobjectAllows 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

FieldTypeDescription
mathstringraw input value
hideInputbooleanhide input field
withBorderbooleanadd border to preview section
stretchedbooleanstretch 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
    }
}
2.3.0

10 months ago

2.2.0

10 months ago

2.3.1

10 months ago

2.1.0

10 months ago

2.0.0

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago