Rendering Custom Trait in Grapesjs React

[RakulAgn]

Has anyone tried using a custom trait in a React wrapper? I'm having trouble accessing the value inside the custom trait.

The value comes from a React component, and I'm using onChange to set the value in the trait like this:

onChange: (value: boolean) => trait.setValue(value),

If this is correct, the value should be set in the trait.

Here’s how I've defined the trait:

traits: [
  {
    label: "Background Color Full Width",
    type: "full-width-bg-color",
    id: "full-width-bg-color",
    name: "full-width-bg-color",
  },
],

I should be able to access the trait during an onEvent change, right? Here's my onEvent implementation:

tm.addType("full-width-bg-color", {
  onEvent({ component, trait }) {
    console.log(trait, component);
  },
});

Any ideas on why I might not be getting the value? expecting something like creating only the functionality of the trait inside the plugin but the ui should be react component

@artf

[parthrc]

Hello @RakulAgn , I am also going through a similar problem, have you managed to solve this issue? I can update the traists from inside the react component but dont know how to rerender the component with the updated trait value.

[RakulAgn]

@parthrc I have not yet figured out. but its possible i think so in studio they have used some traits through react but its not custom trait with custom ui they have created with input type select type with that we can pass the data but for custom trait i think we cant do with that yet to confirm

[parthrc]

@artf
@RakulAgn , working on it, will update if I figure out

[RakulAgn]

Yeah Sure Looking forward @parthrc

[RakulAgn]

@parthrc Hey I Figured Out to Use Custom Trait

[maxming2333]

I am using Custom Trait today. After debugging it for a day, I found that it cannot be used.

Finally, I found this issue. We have a strong demand for it. Please support it.

@artf

[maxming2333]

Can this PR solve the problem?
GrapesJS/react#7

[RakulAgn]

@maxming2333 Have you tried like this below we can pass the trait values from traits provider in react that values will be captured in components setvalue and getvalue

function getSwapValue(component: Component) {
  try {
    const styles = component.getStyle();
    const direction = styles["direction"];
    return direction;
  } catch (error) {
    return "ltr";
  }
}

function setSwapValue(
  value: string,
  component: Component,
  callback: () => void
) {
  try {
    if (value === "rtl") {
      component.addStyle({ direction: "rtl" });
    } else if (value === "ltr") {
      component.addStyle({ direction: "ltr" });
    }

    callback();
  } catch (error) {
    console.log("ajksfn");
  }
}

[maxming2333]

@RakulAgn OK, I'll give it a try.
I tried this way before, but unfortunately it didn't work properly.

  editor.Traits?.addType('news-id', {
    onEvent(...args) {
      console.log('xxxx-------->onEvent', ...args);
    },
    onUpdate(...args) {
      console.log('xxxx-------->onUpdate', ...args);
    },
  });

[RakulAgn]

No This Wont Work I tried Before Like this and Finally Figured it out.