Skip to content

Latest commit

 

History

History
151 lines (118 loc) · 4.07 KB

README.md

File metadata and controls

151 lines (118 loc) · 4.07 KB
Raw

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"
    }
}

Development

Development mode

$ yarn build:dev

Production release

  1. Create a production bundle
$ yarn build
  1. Commit dist/bundle.js

Run tests

$ yarn test

Code of conduct

We welcome everyone to contribute. Make sure you have read the CODE_OF_CONDUCT before.

Contributing

For information on how to contribute, please refer to our CONTRIBUTING guide.

Changelog

Features and bug fixes are listed in the CHANGELOG file.

License

This library is licensed under an MIT license. See LICENSE for details.

Acknowledgements

Big thanks to https://github.com/kommitters/editorjs-inline-image I copied and modified their project to create this one as it was close to what I needed. You can find me at https://codypchristian.com and https://eruditestudios.com