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) => [
'span',
{
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,
},
0,
],
},
}),
});
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];
this.view.focus();
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;
this.view.focus();
let tr = state.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);
}
dispatch(tr);
}
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:
<p>
<u>
<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>
</u>
</p>
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.