TextField tool

Table Block for the Editor.js.

Installation

Install via NPM or Yarn

Get the package

npm i editorjs-plugin-textfield

Include module in your application

import TextField from 'editorjs-plugin-textfield';

Usage

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

const editor = EditorJS({
  ...
  
  tools: {
    ...
    textField: {
      class: TextField,
    }
  }
  
  ...
});

Or init Table Tool with additional settings

const editor = EditorJS({
  ...
  
  tools: {
    ...
    textField: {
      class: TextField,
      config: {
        placeholder: 'Enter something',
        type: 'text',
      },
    },
  },
  
  ...
});

Config Params

| Field | Type | Description | | ------------------ | -------- | ---------------------------------------- | | placeholder | text | Initial placeholder, default is Enter your text here | | type | TextFieldType | Inital input field type, default is text.|

Output data

This Tool returns data with following format

| Field | Type | Description | | --------- | ------------ | ----------------------------------------- | | value | string | the input field value | | placeholder | string | the placeholder value when it's set | | type | TextFieldType | the input field type | | width | TextFieldWidthSize | the input field width | | fontSize | TextFieldFontSize | the input field font size | | position | TextFieldPosition | the input field position |

{
    "type" : "textField",
    "data": {
        "value": "Hello World",
        "placeholder": "Enter text here",
        "type": "text",
        "width": "md",
        "fontSize": "md",
        "position": "right"
    }
}

i18n

const i18n = {
    messages: {
        tools: {
            textField: {
                'Style': 'Style',
                'Width': 'Width',
                'Full Width': 'Full Width',
                'Large': 'Large',
                'Medium': 'Medium',
                'Small': 'Small',
                'Font Size': 'Font Size',
                'X-Small': 'X-Small',
                'Small': 'Small',
                'Medium': 'Medium',
                'Large': 'Large',
                'X-Large': 'X-Large',
                'Position': 'Position',
                'Left': 'Left',
                'Center': 'Center',
                'Right': 'Right',
                'Type': 'Type',
                'Text': 'Text',
                'Password': 'Password',
                'Email': 'Email',
                'Number': 'Number',
                'Tel': 'Tel',
                'Url': 'Url',
                'Date': 'Date',
                'Time': 'Time',
                'Month': 'Month',
                'Week': 'Week',
                'Datetime-Local': 'Datetime-Local',
                'Placeholder': 'Placeholder',
            }
        }
    }
}

Theme

Since this library bundle some css for both of light and dark. If you want to apply dark theme, you can set dark class to the parent element of the editor.

<div id="editorjs" class="dark"></div>

License

This project is licensed under the MIT License