Mark tags are appended on top of custom text color mark

I’m building wrapper on top of prosemirror and now I’m implementing to create function to give the text a color (similar to Confluence).

This is my schema :

const mySchema = new Schema({
			nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
			marks: schema.spec.marks.append({
				u: {
					textDecoration: 'underline',
					toDOM: () => ['u'],
				s: {
					textDecoration: 'line-through',
					toDOM: () => ['s'],
				textColor: {
					attrs: {
						color: {},
						customColor: {},
					parseDOM: [
							tag: 'span.text-color-mark',
							getAttrs: (dom: HTMLElement) => {
								const fallbackColor = dom.getAttribute('datatextcolor');
								const designColor = dom.getAttribute('datatextcustomcolor');
								return { color: fallbackColor, customColor: designColor };
					toDOM: (mark: Mark) => [
							class: 'text-color-mark',
							style: `--custom-palette-color:rgba(var(${mark.attrs.customColor}));color:var(--custom-palette-color,${mark.attrs.color})`,
							datatextcustomcolor: mark.attrs.customColor,
							datatextcolor: mark.attrs.color,

Below are my custom toggle mark and toggle text color option functions:

public toggleMark(markType: 'strong' | 'em' | 'u' | 's'): boolean {
		const state = this.view?.state;
		const dispatch = this.view?.dispatch;
		const mark = state.schema.marks[markType];
		return toggleMark(mark)(state, dispatch);
	public toggleTextColor(color: string, customColor: string) {
		const { state, dispatch } = this.view;
		const { from, to } = state.selection;
		const textColorMark = state.schema.marks.textColor;

		let tr =;

		// Create the mark with specified color and designSystemColor attributes
		const markAttributes = { color, customColor };
		const textColorMarkWithAttributes = textColorMark.create(markAttributes);

		// Apply the textColor mark with the specified color
		if (from !== to) {
			tr = tr.addMark(from, to, textColorMarkWithAttributes);
		} else {
			tr = tr.addStoredMark(textColorMarkWithAttributes);


when i add color to text using this function it works fine. But when I try adding underline or strike-through on top of colored text, the color of text-decoration is still black instead of text color. I think the reason is the tags of marks are added on top of custom span element of colored text. This is HTML markup of colored text with underline:

      <span class="text-color-mark" style="--custom-palette-color:rgba(var(--primary));color:var(--custom-palette-color,red)" datatextcustomcolor="--primary" datatextcolor="red">Sample text</span>

I think the markup tag should on wrapped around text instead of wrapping around span element. I’m not sure what is causing this kind of behaviour and any leads on how to fix it would be great.

You may be looking for this mark option, which controls whether multiple instances can cover the same text.

Still same issue, I tried setting excludes:' ', excludes to empty string in schema for underline,strike-through and textColor to allow markup tag co-exist with with colored text markup tag.