I am trying the add font size on Quill js but the all names is seem 'normal'

I am using the quill text editor in a javascript. I want to add custom font size and I am do this but all font size's name are seem 'normal'.

This is my active code parts:

This part is HTML code for running quill

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>

This part is my configuration

<script>
    const fontSizeArr = ['8px', '9px', '10px', '12px', '14px', '16px', '20px', '24px', '32px'];

    var Size = Quill.import('attributors/style/size');
    Size.whitelist = fontSizeArr;
    Quill.register(Size, true);


    var toolbarOptions = [
        [{ 'font': [] },],
        [{ 'size': fontSizeArr }],
        ['bold', 'italic', 'underline', 'strike']
    ];


    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: toolbarOptions,
        },
        theme: 'snow'
    });
</script>

I tried different usages this time the font size's name seen but font sizes didn't change

Code 2:

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>
<script>
const fontSizeArr = [
    { value: '8px', name: '8px' },
    { value: '9px', name: '9px' },
    { value: '10px', name: '10px' },
    { value: '12px', name: '12px' },
    { value: '14px', name: '14px' },
    { value: '16px', name: '16px' },
    { value: '20px', name: '20px' },
    { value: '24px', name: '24px' },
    { value: '32px', name: '32px' }
];

var Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

 var toolbarOptions = [
    [{ 'font': [] },],
    [{ 'size': fontSizeArr.map(size => size.value)}],
    ['bold', 'italic', 'underline', 'strike']
];



 var quill = new Quill('#editor-container', {
        modules: {
            toolbar: toolbarOptions,
        },
        theme: 'snow'
 });


function updateToolbarSizeNames() {
    const sizeSelect = document.querySelector('.ql-size');
    sizeSelect.innerHTML = ''; 

    fontSizeArr.forEach(size => {
        const option = document.createElement('option');
        option.value = size.value; 
        option.innerText = size.name; 
        sizeSelect.appendChild(option);
    });
}

updateToolbarSizeNames();
</script>

Solution

This style will help you get the font size's name.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  <style>
    .ql-snow {
      .ql-picker {
        &.ql-size {

          .ql-picker-label,
          .ql-picker-item {
            &::before {
              content: attr(data-value) !important;
            }
          }
        }
      }
    }
  </style>
</head>

<body>
  <div id="editor-container">
    <p></p>
  </div>
  <script>
    const fontSizeArr = ['8px', '9px', '10px', '12px', '14px', '16px', '20px', '24px', '32px'];

    var Size = Quill.import('attributors/style/size');
    Size.whitelist = fontSizeArr;
    Quill.register(Size, true);


    var toolbarOptions = [
      [{ 'font': [] },],
      [{ 'size': fontSizeArr }],
      ['bold', 'italic', 'underline', 'strike']
    ];


    var quill = new Quill('#editor-container', {
      modules: {
        toolbar: toolbarOptions,
      },
      theme: 'snow'
    });

  </script>

</body>

</html>