Issue #1341Opened August 6, 2018by HakuTheWolfSpirit0 reactions

[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

Sandbox Output Sandbox Code

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)

artfAugust 9, 20180 reactions

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

HakuTheWolfSpiritAugust 9, 20180 reactions

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.

adelliinaaJuly 10, 20190 reactions

What are the steps of importing a customised component?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.