[Question] How to work with Custom Components
Question
Hello,
I have some questions and issues about and with the grapes editor
Problem 1
In a component, which class is there extended? Is it really this class?
Problem 2
I have created a codesandbox which shows which issues I currently have. It is oriented on the mjml-plugin
Steps to reproduce
- Drag the Button block into the editor
- See that there are no classes
- Modify the width
- The size is not changing
- Reload the page
- The size is now applied because now a class has been added
- Now when there is a class width modifications are shown live.
- Reload the page
- Another class was added.
This does not behave like that if the class name is manually set. The manually set class name is always pre-selected. I don't know yet whether this comes from my messy code, from a bug or whether this is intentionally done.
Problem 3
Still in the codesandbox
If the model is extended from the model in problem 1 then it appears like all properties are ignored. I am certain that there is something wrong with my code. But what could cause the editor to flip out because of that?
Thanks in advance for any help and have a nice day :)
Answers (3)
Problem 1
It depends (you can extend other types), but that is the base for all the components
Problem 2
Here you should point out only issues related to the core library and not its plugins
Problem 3
Please read carefully this https://grapesjs.com/docs/modules/Components.html
Please read carefully this https://grapesjs.com/docs/modules/Components.html
Yeah, forgot an important line
defaults: { ...defaultModel.prototype.defaults, ...props }
Here you should point out only issues related to the core library and not its plugins
Well that was not really a problem with the mjml plugin. I was looking for
editor.getConfig().forceClass = false
Now it is behaving mostly like it is intended to. Except for the flickering resize indicator. But thats another topic.
What are the steps of importing a customised component?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4735
BUG: resetId types mismatch
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? n/a Reproducible demo link n/a Describe th...
Issue #2204
[Feature] custom processor callback for components generated from Vue
Hello there! i recently ran into this new awesome feature introduced here here you can have some processing done on the react generated ele...
Issue #3596
BUG: Values are not escaped
GrapesJS code is open to XSS issues because values are inserted into DOM without escaping, e.g. https://github.com/artf/grapesjs/blob/dev/s...
Issue #2894
[Question]: How Do I Hide / Disable Dropzone in AM Modal
Hello, I've been reviewing the documentation and this link, trying to find the right configuration setting to disable the dropzone in the A...
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.