Font Size Attribute Number Value Does Not Get Rendered When Editor Loads HTML

[trymeouteh]

Version 2.0.3
Browser: Firefox

When I insert HTML inside the editor to have as the default value, I am able to get all of it be rendered except for when an element has a font size using a number. For some reason Quill will remove the font-size styling from the element when rendering the element, even though it is possible to create this styling on an element with the editor.

In the example below, you are able to set the font size to various numbers or to standard sizes such as x-small, medium, large, etc. And I have the editor output the HTML value into a textarea tag to show the raw HTML value for easy debugging.

Example code...

<link rel="stylesheet" href="node_modules/quill/dist/quill.snow.css" />

<style>
	textarea {
		width: 100%;
		height: 200px;
	}
</style>

<textarea></textarea>

<hr />

<div id="my-editor-toolbar">
	<div class="ql-formats">
		<select class="ql-size">
			<option value="8">8</option>
			<option value="10">10</option>
			<option selected>12</option>
			<option value="14">14</option>
			<option value="16">16</option>
			<option value="20">20</option>
			<option value="24">24</option>
			<option value="36">36</option>

			<option value="xx-small">XX Small</option>
			<option value="x-small">X Small</option>
			<option value="small"></option>
			<option value="medium">Medium</option>
			<option value="large"></option>
			<option value="x-large">X Large</option>
			<option value="xx-large">XX Large</option>
			<option value="xxx-large">XXX Large</option>
		</select>
	</div>
</div>
<div id="my-editor">
	<p>
		<span style="font-size: 16px">Hello&nbsp;World</span>
	</p>
	<p>
		<span style="font-size: large">Hello&nbsp;World</span>
	</p>
</div>

<script src="node_modules/quill/dist/quill.js"></script>

<script>
	//Generate the font sizes object from the Quill editor
	const fontSizes = Quill.import('attributors/style/size');

	//Add the font size options that you want in the editor
	fontSizes.whitelist = ['8', '10', '12', '14', '16', '20', '24', '36', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'xxx-large', 'normal'];

	//Apply the font sizes options to all the Quill editors
	Quill.register(fontSizes, true);

	const myEditor = new Quill('#my-editor', {
		theme: 'snow',
		modules: {
			toolbar: {
				container: '#my-editor-toolbar',
			},
		},
	});

	document.querySelector('textarea').value = myEditor.getSemanticHTML();
</script>

The results I expected...

<textarea>
	<p>
		<span style="font-size: 16px">Hello&nbsp;World</span>
	</p>
	<p>
		<span style="font-size: large">Hello&nbsp;World</span>
	</p>
</textarea>

The results I get...

<textarea>
	<p>Hello&nbsp;World</p>
	<p>
		<span style="font-size: large">Hello&nbsp;World</span>
	</p>
</textarea>