RichText State Structure #771
Description
This ticket is just a proposal and looks for more opinions on the matter.
In order to have easier logic for splitting, merging, formatting and selection control, we could benefit form normalised content and selection state in the Editable component.
Here's what I have in mind:
Multi-line:
{
range: {
start: [ 0, 8 ],
start: [ 0, 12 ]
},
value: [
[ 'p', {
formats: [
{ type: 'em', start: 8, end: 12 },
{ type: 'a', href: 'http://w.org', start: 13, end: 17 }
],
text: 'This is some text.'
} ],
[ 'p', {
formats: [
// ...
],
text: 'More text.'
} ]
]
}Inline:
{
range: {
start: 8,
start: 12
},
value: {
formats: [
{ type: 'em', start: 8, end: 12 },
{ type: 'a', href: 'http://w.org', start: 13, end: 17 }
],
text: 'This is some text.'
}
}Note that these are just two examples, it would be flexible enough to allow deeper nesting.
There would be converters for DOM => state, state => DOM and state => HTML.