Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Custom Code unable to be used if user clicks save without entering any text #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Wayne-Mather opened this issue Jan 14, 2024 · 1 comment

Comments

@Wayne-Mather
Copy link

Wayne-Mather commented Jan 14, 2024

If a user drags the custom code block onto the canvas, and then clicks save without entering any text - the component can no longer be edited - The only choice is to delete and start again (assuming the user understands the layers).

Would it be possible in the onceclose() function to not exit if the content is currently empty?

@Baki995
Copy link

Baki995 commented Nov 26, 2024

I fixed it on this way

const editor = grapesjs.init({

`plugins: [
    'grapesjs-custom-code'
],
pluginsOpts: {
    'grapesjs-custom-code': {
            propsCustomCode: {
                components: {},
            },
            commandCustomCode: {
                handleSave() {
                    const keyCustomCode = 'custom-code-plugin__code';
                    const { target, em } = this;
                    const code = this.getCodeViewer().getContent();
                    target?.set(keyCustomCode, code);
                    // eslint-disable-next-line
                    editor.Modal.close();
                    em.getSelected().view.render(); // this is important part
                },
            }
    }
}

});

And created the new type with the same id to rewrite logic

editor.Components.addType('custom-code', {

    `view: {
        onRender({ el }) {
            setTimeout(() => {
                if (el.offsetHeight === 0) { // no content or without height. It should be clickable 
                    const defaultEl = document.createElement('p');
                    defaultEl.classList.add('p-4', 'border', 'border-dark');
                    defaultEl.textContent = 'Default embed code placeholder';
                    el.appendChild(defaultEl);
                }
            }, 500); // If we have some script with src, then we should wait for load
        },
    },
});`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants