import {debounce} from 'lodash';
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import Paragraph from '@editorjs/paragraph';
import NestedList from '@editorjs/nested-list';
import Alert from 'editorjs-alert';

export default {
    'editor': null,
    'value': null,

    'x-init': function () {
        var tools = {
            paragraph: {
                class: Paragraph,
                shortcut: 'CTRL+P',
                inlineToolbar: true,
                config: {
                    preserveBlank: true,
                    placeholder: 'Absatz',
                },
            },
            alert: {
                class: Alert,
                inlineToolbar: true,
                config: {
                    defaultType: 'primary',
                },
            },
            heading: {
                class: Header,
                shortcut: 'CTRL+H',
                inlineToolbar: true,
                config: {
                    placeholder: 'Überschrift',
                    levels: [2, 3, 4],
                    defaultLevel: 2,
                },
            },
            list: {
                class: NestedList,
                shortcut: 'CTRL+L',
                inlineToolbar: true,
            },
        };

        this.editor = new EditorJS({
            placeholder: '',
            holder: this.$el.getAttribute('id'),
            minHeight: 0,
            defaultBlock: 'paragraph',
            data: this.value,
            tools: tools,
            onChange: debounce(async (api, event) => {
                const data = await this.editor.save();
                this.$dispatch('updated', data);
            }, 200),
        });
    },
};