hata6502 / editorjs-layout

Layout block tool for Editor.js.

editorjs-layout

Layout block tool for Editor.js.

Alternative solution: editorjs-inline

✨ Demo

Install

$ npm i editorjs-layout

or

<script src="https://cdn.jsdelivr.net/npm/editorjs-layout@latest"></script>

Usage

Please see demo HTML.

Config params

Please see type declaration of LayoutBlockToolConfig.

Output data

Please see type declaration of ValidatedLayoutBlockToolData.

Copied data

Please see type declaration of LayoutBlockToolData.

NOTE: Copied block data by ctrl+c are not validated. So copied block data and output block data may be different. Please see also this comment.

Disclaimer

The following creations are included in this product:

• ionic-team/ionicons

editorjs-layout's Issues

describe savedData and validatedData in README

paste link to editor.js

dialog

ref style data structure

deprecate saved

es6 import

Hello,
how to import this plugin in ES6?

import EditorJSLayout from 'editorjs-layout'; - this return undefined.

How to add more block clicking on settings?

Hello,

I want to know how:

• Add new items clicking on settings. For example:

    renderSettings(): HTMLElement {
        const wrapper: HTMLElement = el('div');

        const selectTypeButton: HTMLSpanElement = el('span', null, {
            innerHTML: 'Add FAQ',
        });
        selectTypeButton.addEventListener('click', () => {
            const nextBlockId = this.$config.initialData.layout.children.length + 1;
            this.$config.initialData.itemContent[nextBlockId] = {
                blocks: [
                    {
                        data: {
                            text: 'Test' + nextBlockId,
                            level: 2,
                        },
                        type: 'Header',
                    },
                    {
                        data: {
                            text: 'Test' + nextBlockId,
                        },
                        type: 'paragraph',
                    },
                ],
            };
            this.$config.initialData.layout.children.push({
                type: "item",
                id: "",
                className: "",
                style: "border: 1px solid #000000; display: inline-block; ",
                itemContentId: nextBlockId,
            });

            this.renderWrapper();
            console.log(this.$config);
        });

        wrapper.appendChild(selectTypeButton);

        return wrapper;
    }

• Item disable add more editor elements. I want on item can have for example Header and Text blocks. User should can not add more.

What I'm doing. I extending base class and making own:

import LayoutBlock from './layout-block';
import {el} from './block';
import EditorJS from "@editorjs/editorjs";
// @ts-ignore
import Header from '@editorjs/header';

class FaqBlock extends LayoutBlock {
    /**
     * @override
     */
    static get toolbox() {
        return {
            title: 'FAQ',
            icon: '<svg width="25" height="25" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/editor/faq.svg#faq"></use></svg>',
        };
    }

    renderSettings(): HTMLElement {
        const wrapper: HTMLElement = el('div');

        const selectTypeButton: HTMLSpanElement = el('span', null, {
            innerHTML: 'Add FAQ',
        });
        selectTypeButton.addEventListener('click', () => {
            const nextBlockId = this.$config.initialData.layout.children.length + 1;
            this.$config.initialData.itemContent[nextBlockId] = {
                blocks: [
                    {
                        data: {
                            text: 'Test' + nextBlockId,
                            level: 2,
                        },
                        type: 'Header',
                    },
                    {
                        data: {
                            text: 'Test' + nextBlockId,
                        },
                        type: 'paragraph',
                    },
                ],
            };
            this.$config.initialData.layout.children.push({
                type: "item",
                id: "",
                className: "",
                style: "border: 1px solid #000000; display: inline-block; ",
                itemContentId: nextBlockId,
            });

            this.renderWrapper();
            console.log(this.$config);
        });

        wrapper.appendChild(selectTypeButton);

        return wrapper;
    }
}

// @ts-ignore
const editorJSConfig = typeof editorjsConfigs !== 'undefined' ? editorjsConfigs : null;
editorJSConfig.tools = {Header};

export default {
    class: FaqBlock,
    config: {
        EditorJS,
        editorJSConfig,
        enableLayoutEditing: false,
        enableLayoutSaving: true,
        initialData: {
            itemContent: {
                1: {
                    blocks: [
                        {
                            data: {
                                text: 'Test',
                                level: 2,
                            },
                            type: 'Header',
                        },
                        {
                            data: {
                                text: 'Test',
                            },
                            type: 'paragraph',
                        },
                    ],
                },
            },
            layout: {
                type: "container",
                id: "",
                className: "",
                style: "border: 1px solid #000000; ",
                children: [
                    {
                        type: "item",
                        id: "",
                        className: "",
                        style: "border: 1px solid #000000; display: inline-block; ",
                        itemContentId: "1",
                    },
                ],
            },
        },
    },
};

safari dialog polyfill

modal edit

dialog: margin bottom

flex styling -> class styling

Add Editor layout to Editor Layout

Would you know of a way to add at least another level of Editor Layout to editor layout other than creating a bunch of copy's of the same object?

remove unused files

CMS Views Possible Improvements

I close #425 because the improvement parts should be in a larger scope instead of just the content list. So I reopen this one.

Possible improvements:

1. Make choice field orderable (involves DB changes?)
2. Text search 1s debounce (pure UI stuff)
3. More pagination options (DB, UI)

i18n

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

tooltip is hidden by edit modal

enableLayoutEditing

Add option to change dialog element

H! there !

Is it possible to add an option to set the dialog elements ? For example to add a div instead of dialog ?

The problem is that with dialog, any new modals with z-index can't go above the dialog html element. We can't use bootstrap modals or other libraries....

Many thanks !

Why need dialog?

Couldn't the editor be directly inside the layout instead of having a dialog popup? Or would it be some conflicts, for example it is difficult to know if it is the layout or the content inside I edit?

modal close ui

https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop

readonly mode

prevent layout shift when dispatch data