Format result seems not meet user expection

1.Two texts are same abc with attribute A: abc<\A>
2.One text format abc with B and A:null:abc<\B>
3.One text insert xyz after a with no attribute:a<\B>xyzbc<\B>
After sync, result seems weird:
a<\B>xyzbc<\A>
Delta result for this: axyzbc has A, bc has B

const ydoc1 = new Y.Doc()
const ydoc2 = new Y.Doc()
const text1 = ydoc1.getText()
text1.insert(0, 'abc')
text1.format(0, 3, { bold: true })
console.log(text1.toDelta())
const text2 = ydoc2.getText()
Y.applyUpdate(ydoc2, Y.encodeStateAsUpdate(ydoc1))
console.log(text2.toDelta())

text1.format(0, 3, { color: '#cccccc', bold: null })
text2.insert(1, 'xyz', {})
console.log(text1.toDelta())
console.log(text2.toDelta())

Y.applyUpdate(ydoc2, Y.encodeStateAsUpdate(ydoc1))
Y.applyUpdate(ydoc1, Y.encodeStateAsUpdate(ydoc2))
console.log(text1.toDelta())
console.log(text2.toDelta())

result:
[
{ insert: ‘a’, attributes: { color: ‘#cccccc’ } },
{ insert: ‘xyz’, attributes: { color: ‘#cccccc’ } },
{ insert: ‘bc’, attributes: { color: ‘#cccccc’, bold: true } }
]

You may have to walk the CRDT algorithm to figure out why it’s merging the way it is. I haven’t gotten that low level on YTexts.