BUG:

[Palash-Mandal]

Hello @artf ,
Many Many Thanks for previous help. I am fresher in development. Please help me with below

I need a modal where I will get user input Like Block Name, Category, HTML, CSS, JS then click on save to store that as new block manager. Mean how to pass those data and store them as dragabe component

I have made the button to call modal and set title also content but editor not initiated

image

function buildCodeEditor(type) { var codeEditor = editor.CodeManager.getViewer('CodeMirror').clone(); codeEditor.set({ codeName: type === 'html' ? 'htmlmixed' : 'css', readOnly: false, theme: 'hopscotch', autoBeautify: true, autoCloseTags: true, autoCloseBrackets: true, styleActiveLine: true, smartIndent: true, }); return codeEditor; }

function setupHtmlAutoUpdates(htmlCodeEditor) { function update() { const htmlCode = htmlCodeEditor.editor.getValue() if (!htmlCode) return; editor.setComponents(htmlCode); } var delay; htmlCodeEditor.editor.on('change', function() { clearTimeout(delay); delay = setTimeout(update, 300); }); // htmlCodeEditor.editor.refresh(); }

function setupCssAutoUpdates(cssCodeEditor) { function update() { const cssCode = cssCodeEditor.editor.getValue() if (!cssCode) return; editor.setStyle(cssCode); } var delay; cssCodeEditor.editor.on('change', function() { clearTimeout(delay); delay = setTimeout(update, 300); }); }

function buildCodePanel(panel) { const codePanel = document.createElement('div'); codePanel.classList.add('code-panel');

const htmlSection = document.createElement('section'); const cssSection = document.createElement('section'); htmlSection.innerHTML = '

HTML

' cssSection.innerHTML = '

CSS

'

const htmlCodeEditor = buildCodeEditor('html') const cssCodeEditor = buildCodeEditor('css') const htmlTextArea = document.createElement('textarea'); const cssTextArea = document.createElement('textarea'); htmlSection.appendChild(htmlTextArea); cssSection.appendChild(cssTextArea);

codePanel.appendChild(htmlSection); codePanel.appendChild(cssSection); modal.set('appendContent', codePanel).trigger('change:appendContent'); htmlCodeEditor.init(htmlTextArea); cssCodeEditor.init(cssTextArea); htmlCodeEditor.setContent(editor.getHtml()); cssCodeEditor.setContent(editor.getCss({ avoidProtected: true }));

Split([htmlSection, cssSection], { direction: 'vertical', sizes: [50, 50], minSize: 100, gutterSize: 2, onDragEnd: () => { htmlCodeEditor.editor.refresh(); cssCodeEditor.editor.refresh(); } });

setupHtmlAutoUpdates(htmlCodeEditor); setupCssAutoUpdates(cssCodeEditor);

// make sure editor is aware of width change after the 300ms effect ends setTimeout(() => { htmlCodeEditor.editor.refresh(); cssCodeEditor.editor.refresh(); }, 320)

return codePanel }

function AddCustomBlockBtn() { var em = editor.Modal; document.querySelector('.gjs-mdl-dialog').style.maxWidth = '80%'; em.setTitle('Add Your Custom Component'); em.setContent(

Name

Name

Save

); em.open(); }

in index html

Add custom block editor.on('load', function() { var $ = grapesjs.$; // Add custom block button inside block section if (openBlocksBtn && openBlocksBtn.set('active', 1)) { var AddCtBlock = document.querySelector('.cmseditor__addctblock'); var gtBlockPanel = document.querySelector('.gjs-blocks-cs'); gtBlockPanel.appendChild(AddCtBlock).removeAttribute('style'); } else { gtBlockPanel.style.display = 'none'; } }

FYI..

[artf]

Please follow the issue template