A component that inserts editable HTML

Hi @NorthstarTech,

I just created a plugin (very early, could use some more work) that you may find helpful: https://github.com/ryandeba/grapesjs-html-block.

You should just be able to include that file in your project and include the plugin in your grapesjs init config: grapesjs.init({ ..., plugins: ['html-block'] })

After doing that, you should see a new "HTML Code" block. Drag and drop it somewhere, select the element, and you should see a "code" button in the toolbar. Click the code button and you should get a modal that lets you edit the HTML content.

Let me know if you run into any issues.

@chiqui3d Change the isComponent function to this to prevent the initial internal html from getting parsed by grapesjs into components:

isComponent: function(el) {
	if (el.hasAttribute && el.hasAttribute("data-html-code")) {
		return {
			type: 'html-code',
			content: el.innerHTML,
			components: []
		};
	}
}

The other code I posted should prevent grapesjs from parsing the html after editing through the modal. The key to both is that you need to set the internal html into the content property instead of components.

I believe this issue has been resolved and could be closed based on the first comment here: https://github.com/ryandeba/grapesjs-html-block/issues/1. @NorthstarTech could you confirm or reply with additional details if you want to keep this issue open?