Editorjs-laravel-picker NPM

EditorJS Laravel Picker Tool

Laravel Picker tool for Editor.js.

This tool allows you to display a modal of API-driven items from your Laravel application to search and add.

THIS IS A WIP

I have not updated the tests from the original project I forked, there is some cleanup that should also be done. Ideally Id like to find a way to pass in the toolbar/toolbox title so it can be custom via config.

Notes

This does require an API endpoint to fetch data. While this is meant for local API calls you could use this with any API endpoint if it returns the correct payloads.

Installation

Install via NPM

Get the package

$ npm i --save-dev editorjs-laravel-picker

Include module at your application

import LaravelPicker from 'editorjs-laravel-picker';

Usage

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

const editor = EditorJS({
  tools: {
      picker: {
        class: LaravelPicker,
        inlineToolbar: true,
        config: {
          toolboxTitle: 'Documents',
          api: {
            endpoint: 'https://example.com/api/v1/documents',
            search_param: 'term',
            results_key: 'items',
          }
        }
      }
  }
});

Config Params

Field	Type	Description
api	`{endpoint: string}`	Config for API. Contains 1 field: endpoint: API `Endpoint URL`.

Tool's tunes

None

Output data

Field	Type	Description
url	`string`	Item's url
name	`string`	Item's name
type	`string`	Item's type
image	`string`	Item's image
summary	`string`	Item's summary
size	`string`	Item's size

API Item Examples

{
    "type" : "item",
    "data" : {
      "file" : {
        "url" : "https://example.com/foobar",
        "name": "Foobar",
        "type": "link",
        "image": "https://ui-avatars.com/api/?name=Link&color=7F9CF5&background=EBF4FF",
        "summary": "A sample page url",
        "size": false,
      },
      "title": "Foobar"
    }
}

{
    "type" : "item",
    "data" : {
      "file": {
        "url" : "https://example.com/storage/files/project.pdf",
        "name": "Project.pdf",
        "type": "file",
        "image": "https://ui-avatars.com/api/?name=PDF&color=7F9CF5&background=EBF4FF",
        "summary": false,
        "size": "106.9 Kib",
      },
      "title": "Project.pdf"
    }
}