I’m not sure if I’m approaching something in the right way.
Essentially, the user should have the ability to underline/strikethrough text and color that text and text adjacent to the underline/strikethrough without interference. My approach to this is to have a span mark that can accept changes depending on the command fired by the user. However, things get sticky when marks overlap. I think it best to show you what I mean with a video:
What would need to happen in the example above is that - when the colour is applied - the command should create a new blue mark and split the underlined mark so that half of it is blue (and underlined) and the rest is just black and underlined. I can see a potential way to deal with this using one span tag but it’s going to take a LOT of iterating over Selection objects to find out the POS of different marks within the selection.
here’s the schema for that object:
export default {
attrs: {
class: { default: '' },
style: { default: 'color: rgba(0,0,0,255)' }
},
group: 'inline',
parseDOM: [{
tag: 'span',
getAttrs: node => {
return {
style: node.attributes.style.value
}
}
}],
toDOM: (mark) => {
console.log(mark.attrs.class)
return [
'span',
Object.assign(
{},
mark.attrs.style ? { style: mark.attrs.style } : {},
{
class: mark && mark.attrs && mark.attrs.class
? mark.attrs.class
: ''
}),
0]
}
}
Ideally, I’d like to have a span mark that handles underline, another for strikethrough and another for colour (etc.) but is that even possible?
Alternatively, have I missed a trick? Or can you think of a way to handle this problem in a painless way! I’ve been fiddling with it all night!