hata6502 / editorjs-layout Goto Github PK

View Code? Open in Web Editor NEW

66.0 4.0 23.0 459 KB

Layout block tool for Editor.js.

Home Page: https://hata6502.github.io/editorjs-layout/

License: MIT License

JavaScript 2.52% TypeScript 97.48%

codex-editor editorjs layout tool

editorjs-layout's Issues

tooltip is hidden by edit modal

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 !

es6 import

Hello,
how to import this plugin in ES6?

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

describe savedData and validatedData in README

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?

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?

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:

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 📦🚀

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",
                    },
                ],
            },
        },
    },
};

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

hata6502 / editorjs-layout Goto Github PK

editorjs-layout's Issues

🚨 The automated release from the main branch failed. 🚨

No npm token specified.

Recommend Projects

Recommend Topics

Recommend Org

🚨 The automated release from the `main` branch failed. 🚨