Failed to read Font Size when the content is nested with other styling.

[Arik14]

Hello,

I have another problem here.
This is the content I put into the instance of Tiptap Editor. This is before the Editor open.

And this one is when the Editor is open. It seems like parseHTML fail to recognize value of font size, when the span has nested child with other styling (font-family in this case). font-size null is the default in my custom extension of Font Size.

But when I flip the nested order of those spans, it worked and the font size value is correct.

In previous version of Tiptap, it worked with nested span. I have text with similar structure html span of span with various styling generate by previous Tiptap. But when I apply new Tiptap, it seems like my custom extension fail to recognize font size if it nested and it's child of another span with different styling.
If you want to play with my code, here is my sandbox https://codesandbox.io/s/wandering-wood-etvm7?file=/src/components/HelloWorld.vue. You can click button Toggle Editor to see what happen.

Please kindly help me.
Thank you.

[WangHaohui-org]

plz , help me !

[WangHaohui-org]

I have the same problem as you

[CarlMenke]

did you ever find a solution?

[nperez0111]

nested spans do not work because prosemirror (our underlying library) strips it by default. The correct way to specify this would be with a single span tag like:

<span style="font-size: 40px; font-family: Arial">INNER TEXT</span>

[ghlLarney]

Even if there's text content in between nested tags?

<p>
    <span style="font-size: 14pt; font-family: arial, helvetica, sans-serif;">
        text1 <span style="color: #3366ff;">text2</span> text3<br />
        <br />
        text 4
    </span>
</p>

gets converted to this

<p>
    <span style="font-size: 14pt; font-family: arial, helvetica, sans-serif;">text1 
  	</span>
  	<span style="color: #3366ff;">text2
  	</span> 
  	to your analytics account as a ‘view only’ user that will enable us to view without you having to share any logins! :)<br />
    <br />
	text4
</p>