Customize completion item

Hey there,

In v5 , I used ‘render’ property in Hint in order to customize a hint item. this method gave me the current element and hint item.
So assuming that I need to modify a specific element based on the data it holds, what is the equivalent method to do it in v6?

I saw render in addToOptions but it gives me only the completion without the element. adding optionClass won’t help since it seems that the class is not attached to the element when rendering.

thank you in advance :pray:

What kind of customization are you trying to do? addToOptions adds additional content, optionClass can be used to add CSS classes to the item elements.

@marijn Well, I am trying to add an additional content, so addToOptions sounds interesting.
Can you please provide a small example how to use it? thanks

Ok got it. I am using it like that:

              addToOptions: [{
                render: (completion: Completion, state: EditorState) => {
                  const element = document.createElement("span");
                  element.innerText = "some content before detail:";
                  return element;
                },
                position: 60,
              }],