[QUESTION] Minimal requirements to create a custom component
Question
I've been reading the docs all day on creating a custom component. I've also looked at grapesjs-mjml for an example. I'm trying to create a base type for react components that can be extended as needed, but at the moment all I want to see is which lifecycle methods are called and when. I'm trying to work out the difference between render and toHTML specifically. I've created just a bare bones component with some logging, and it doesn't seem to be working. Here is my code
import React from 'react';
export default editor => {
var comps = editor.DomComponents;
var defaultType = comps.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;
// The `input` will be the Component type ID
comps.addType('react-base', {
// Define the Model
model: defaultModel.extend({
toHTML() {
// we'll have to do some custom processing here
console.log('toHTML')
},
},
// The second argument of .extend are static methods and we'll put inside our
// isComponent() method. As you're putting a new Component type on top of the stack,
// not declaring isComponent() might probably break stuff, especially if you extend
// the default one.
{
isComponent(el) {
console.log(el);
},
}),
// Define the View
view: defaultView.extend({
render() {
// Extend the original render method
// we'll need to add some custom processing here too
console.log('render');
},
}),
});
// A block for the custom component
editor.BlockManager.add('react-base', {
label: 'Test',
content: (<div>Foo</div>),
});
};
I'm passing a React component as the content, which I expect not to render currently, but I'm not getting a single log in my console either. I do see the custom block though so I know that editor is defined and exactly what I expect it to be.
I'm sure there is something very simple that I am missing but I don't know what it is.
Answers (2)
First of all, start using the improved definition of components.
In your example, the content: (<div>Foo</div>), will be compiled to an object, and when you add an object/array of objects to the editor, it means you don't need the parsing process anymore so you never hit isComponent, therefore that type is not initialized.
BTW it's not that clear what would you like to achieve with your editor
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1966
[QUESTION] Loop over all components
Hi all, I want to create a socket for every button that I add to the canvas. This is working just fine. However, when I reload (using stora...
Issue #1959
[Question] Edit innerHTML in a custom button
Hi All, I am trying to change the text in a button component, but I am not able to edit it. I added this type: I included the editable: tru...
Issue #429
custom component save
hi @artf sorry to be a pain i really didn't want to open a issue ticket but i have been stuck for days trying to achieve my end goal i have...
Issue #460
When the component's view modifies the HTML, text components are no longer editable
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.