BUG:

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 = '<div>HTML</div>'
cssSection.innerHTML = '<div>CSS</div>'

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(<div class="accmodal"> <div class="accmodal__header"> <div class="accmodal__hitem"> <label class="accmodal__hlbl">Name</label> <input type="text" name="name" id="input-name" required="required" placeholder="eg. Button" class="accmodal__hinpt"> </div> <div class="accmodal__hitem"> <label class="accmodal__hlbl">Name</label> <input type="file" name="previewImage" id="PreviewImage" required="required" class="accmodal__hfile"> </div> <button id="SaveCustomBlockBtn" type="button" class="gjs-btn-prim accmodal__hsave" onclick="SaveCustomBlockBtn()"> Save </button> </div> <div class="accmodal__editor"> <div class="accmodal__editorbox accmodal__editorhtml"> <textarea id="editorHtml"></textarea> </div> <div class="accmodal__editorbox accmodal__editorcss"> <textarea id="editorCSS"></textarea> </div> </div> </div>);
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..



![image](https://user-images.githubusercontent.com/17553816/119516966-d453c000-bd94-11eb-9a48-d15e295f9c2a.png)

![image](https://user-images.githubusercontent.com/17553816/119517133-f9e0c980-bd94-11eb-9886-5b6e27f07799.png)