Override the indicator style

[lord007tn]

I didn't know how I can override the indicator and make a custom one maybe have the shape of the dragged component besides that green or red line.

in Docs indicator can only have success color and error color passed from the editor as a string. maybe the indicator can be a whole HTML element. where you can make your custom one and pass it to the editor state to use it.

[RaGreen]

Render indicator? Sadly it's hard coded inside packages/utils/RenderIndicator.tsx

IMHO all indicators should be divs with classes like 'craftjs-render-indicator' to support some customization.

[oc-Design]

Can setProp add other attributes to an element?

[lord007tn]

Can setProp add other attributes to an element?

nope, setProp is more of a useState function where you can change the initial state using it. so when you use setProp you actually setting the value of the declared props of your component.

but you can add other attributes to the element take a look at this where i add the transformation prop from the element state: transformation are inside the useNode() hook

I hope this answers your question

[MarkLyck]

🙏please make this a function.

That is probably the biggest improvement craft.js could get, actually rendering the correct space for the component you are dragging as react-beautiful-dnd does it: https://github.com/atlassian/react-beautiful-dnd

I was hoping I could at the very least make it a custom component.

[devinivy]

This also applies in our project— we would like to use a custom indicator. Ideally for us the indicator component would receive some geometry information through props, and a custom component/element would be defined to render it. It might look something like this:

const MyCustomIndicator = ({ error, top, left, width, height, ...props }) => (
  <div style={{ top, left, width, height, position: 'fixed', /* ... */ }} />;
);

// ...

<Editor Indicator={MyCustomIndicator} resolver={/* ... */}>
  {/* ... */}
</Editor>

If you would be open to receiving a PR for this, we may be able to aid with the implementation 👍

[trulysinclair]

Personally, without complicating things, I'd like to be able to customize the indicator and transitions. The indicator warping all over the place is unnecessary to me I'd prefer it just snap to the next available drop zone.

EDIT: It turns out this is an available feature that's not documented to my knowledge. The indicator actually has success, error, thickness, and above all transition! All of which are simple strings except thickness which is a number.