When adding style to marks, second span is created after editing

1

Hello there, I am currently working on a university project, and ran into the following issue:

I defined a MarkSpec, and I want to set the background color of this mark dynamically. This is my code:

const myMark: MarkSpec = {
  attrs: {
    originalObject: {default: null}
  },
  contentEditable : false,
  toDOM(mark: Mark): DOMOutputSpec {
    return [
      'span',
      {
        class: `testclass ${mark.attrs.originalObject.value.serialize().type as string}`,
        contenteditable: 'false',
        style: `color: ${mark.attrs.originalObject.value.Color as string}`
      },
      0,
    ];
  },
};

This initially works like expected and creates for example this HTML:

<span class="testclass myclass" contenteditable="false" style="color: #FFFFFF">shuf1</span>

However, as soon as I try to edit something in the editor, it creates a second span around this:

<span style="color:#FFFFFF;"><span class="testclass myclass" contenteditable="false" style="color: #FFFFFF">shuf1</span></span>

Because I want to reload the color dynamically, I end up with something like this:

<span style="color:#FFFFFF;"><span class="testclass myclass" contenteditable="false" style="color: #123123">shuf1</span></span>

This breaks my formatting. Why is the second span created? Unfortunately, I am kind of new to this editor, but can’t seem to find answers to this problem.

Thank you in advance!

2

What does your document look like when the second span is created (state.doc.toString())? Is there any other plugin creating inline decorations that might add that color?

3

Thank you for your reply! Before editing it looks like this: myMark(“shuf1”) After editing, it seems like a text_color mark is added: text_color(myMark(“shuf1”))

Can i prevent this? Or alternatively, what is a better way to dynamically assign background-color to marks? Currently, whenever the background-color changes, I force reload all of the editor content, so that the new background-color gets set when applying the new mark

4

I think it’ll help to set up your parseDOM rules to avoid the one for your color mark matching this span.

Marks setting their content uneditable is not something that the library expects, by the way. It may happen to work, but it hasn’t really been tested.

5

Okay, I will try that. Thanks for the heads up, I will look out for any pitfalls, currently it seems to work :slight_smile: