How to customize core source?

[jalim12]

(Please understand that I am using a translator.)

hello.
I was previously using version 0.14.66.
We are trying to reflect it in the latest version (0.21.10).

Previously, 'grapes.js' was used with some modifications to customize the core source.
Currently, there is no such file, only 'grapes.min.js'.
What should I do if I want to customize the core source?

[artf]

You should use plugins to extend editor capabilities...

[jalim12]

Thanks for your answer.
I have more questions.
I checked the plugin link and there weren't many examples.
There are two cases of customization I would like to do.

1. When processing hidden, I would like to change the method of processing 'hidden' by using 'addClass' instead of processing 'display:hidden' in 'style'. ('setVisible' method)
   I think it would be possible if it means redefining an already declared function. Or is it possible another way?

2. I want to add a trigger at a certain point in time.

Can these two cases be solved with a custom plugin?
Do you have an example if possible?
If not possible, how can I customize it?

[artf]

Please read the documentation of the specific module, you can also find all the public APIs here.

1. When processing hidden, I would like to change the method of processing 'hidden...

It's not clear to me what exactly you want to customize here, please provide some examples.

2. I want to add a trigger at a certain point in time.

What trigger and what would be the condition? Please be more specific.

[jalim12]

I will explain examples 1 and 2 in detail.

I will explain based on the GrapesJS Demo site.
The setVisible method is executed when an item is hidden.

Depending on whether it is hidden, the style display value is set to the previous display value or is set to none.

I would like to control this part not with display, but with class.
I also want to provide a separate trigger for setVisible.

Please refer to the code below.
I have added examples 1 and 2 as comments.

  setVisible(component: Component, value: boolean) {
    const prevDspKey = '__prev-display';
    const style: any = component.getStyle(styleOpts);
    const { display } = style;

    // if (value) {
    //   const prevDisplay = component.get(prevDspKey);
    //   delete style.display;

    //   if (prevDisplay) {
    //     style.display = prevDisplay;
    //     component.unset(prevDspKey);
    //   }
    // } else {
    //   display && component.set(prevDspKey, display);
    //   style.display = 'none';
    // }

    // component.setStyle(style, styleOpts);

    // start modify.
    if (value) {
      component.addClass('component-hidden');
    } else {
      component.removeClass('component-hidden');
    }
    // end modify.

    this.updateLayer(component);
    this.em.trigger('component:toggled'); // Updates Style Manager #2938

    this.em.trigger('component:visibility', component, value); // modify. add trigger
  }

[artf]

Ok, thanks for the clarification.
I think here you can monkey patch setVisible/isVisible with your own logic.

editor.Layers.setVisible = (cmp, value) => {...};
editor.Layers.isVisible = (cmp) => {...};

[jalim12]

Thank you for answer!
I'll try as you suggested.