How can I extend a new custom trait to all components?

[rainerregan]

Hello, could anyone help me? I need to extend a new custom trait that applicable to all components. I have tried using my code below but it just overrides every components' traits.

I have do some researching and reading the documentations, but I still have no idea on how to do it.

import { Editor } from "grapesjs";

export const customVisibilityTrait = (editor: Editor) => {
  editor.DomComponents.addType('visibility', {
    isComponent: (el) => true,
    model: {
      defaults: {
        traits: [
          {
            type: 'select',
            label: 'Visibility',
            name: 'visibility',
            options: [
              { id: 'visible', name: 'Visible' },
              { id: 'hidden', name: 'Hidden' }
            ],
            getValue: ({ component }) => {
              const display = component?.getStyle()?.display;
              return display === 'none' ? 'hidden' : 'visible';
            },
            setValue: ({ value, emitUpdate, component }) => {
              const displayValue = value === 'visible' ? 'block' : 'none';

              const previousDisplay = component?.getAttributes()['data-previous-display'];
              const currentDisplay = component?.getStyle()?.display || 'block';

              // Store the current display value before hiding
              if (currentDisplay !== 'none' && value === 'hidden') {
                component?.setAttributes({ 'data-previous-display': currentDisplay });
              }

              if (value === 'visible' && previousDisplay) {
                component?.setStyle({
                  ...(component.getStyle() ?? {}),
                  display: previousDisplay
                });

                component?.removeAttributes(['data-previous-display']);
              }

              component?.setStyle({
                ...(component.getStyle() ?? {}),
                display: displayValue
              });

              emitUpdate();
            }
          }
        ]
      },
    },
  });
}

[lexoyo]

Hello
Here is how I do this:
https://github.com/silexlabs/silex-lib/blob/main/src/ts/client/grapesjs/semantic.ts#L54

inspired by https://github.com/olivmonnier/grapesjs-plugin-header/blob/master/src/components.js

[rainerregan]

Thank you for the code, Now I understand the logic. Here is my full updated code:

import { Component, ComponentStackItem, ComponentView, Editor, TraitProperties } from "grapesjs";

export const customVisibilityTrait = (editor: Editor) => {
  function withExtraTraits(type: ComponentStackItem<Component, ComponentView<Component>>, extraTraits: TraitProperties[]) {
    const origTraits = editor.DomComponents.getType(type.id)?.model.prototype.defaults.traits
    return [
      ...origTraits,
      ...extraTraits,
    ]
  }

  const extraTraits: TraitProperties[] = [
    {
      type: 'select',
      label: 'Visibility',
      name: 'visibility',
      options: [
        { id: 'visible', name: 'Visible' },
        { id: 'hidden', name: 'Hidden' }
      ],
      getValue: ({ component }) => {
        const classes = component?.getClasses() || [];
        return classes.includes('hidden') ? 'hidden' : 'visible';
      },
      setValue: ({ value, emitUpdate, component }) => {
        if (value === 'hidden') {
          component?.addClass('hidden');
        } else {
          component?.removeClass('hidden');
        }
        emitUpdate();
      }
    }
  ];

  // Add to all components type 
  editor.DomComponents.getTypes().forEach((type) => {
    editor.DomComponents.addType(type.id, {
      model: {
        defaults: {
          traits: withExtraTraits(type, extraTraits),
        },
      },
    });
  });

  editor.onReady(() => {
    editor.CssComposer.addRules(`.hidden { display: none !important; }`);
  });
}