Issue #1964Opened April 13, 2019by richbai900 reactions

[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)

artfApril 13, 20190 reactions

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

lock[bot]April 15, 20200 reactions

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.

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.