[SOLVED] Issue with setting the font size of the Telerik <ol> list

Issue with setting the font size of the Telerik <ol> list

Actually the <ol> tag font-size is getting as 1 after received the output even the <li><font>listItem01</font></li> font size is bigger (1,, 2, 3, 4, 5, 6, 0r 7), so here using RadEdior from Telerik, actually Telerik have 1 to 7 font sizes so as per the Telerik solution I tried to set the font-size for <ol> with the first

item font-size of that particular <ol>.

So this is what I tried

function OnClientCommandExecuting(sender, args) {
    let commandName = args.get_commandName();
    if (commandName === "InsertOrderedList") {
        let doc = sender.get_document();

        setTimeout(function () {
            let olElements = doc.getElementsByTagName("ol");

            if (olElements.length > 0) {
                let getLastOrderList = olElements[olElements.length - 1];
                let firstListOfOrderList = getLastOrderList.getElementsByTagName("li")[0];

                if (firstListOfOrderList) {
                    let fontElements = firstListOfOrderList.getElementsByTagName("font");
                    let firstLiFontSize = 'small'; 

                    if (fontElements.length > 0) {
                        let firstFontTag = fontElements[0];
                        let fontSize = firstFontTag.getAttribute("size");

                        if (fontSize) {
                            fontSize = parseInt(fontSize, 10);
                            switch (fontSize) {
                                case 1: firstLiFontSize = 'x-small'; break;
                                case 2: firstLiFontSize = 'small'; break;
                                case 3: firstLiFontSize = 'medium'; break;
                                case 4: firstLiFontSize = 'large'; break;
                                case 5: firstLiFontSize = 'x-large'; break;
                                case 6: firstLiFontSize = 'xx-large'; break;
                                case 7: firstLiFontSize = 'xxx-large'; break;
                                default: firstLiFontSize = 'small'; 
                            }
                        }
                    }
                    getLastOrderList.style.fontSize = firstLiFontSize;
                }
            }
        }, 0);
    }
}

Actually the above code generate the output as I expected but I need get the output as different manner

So, I need to modify the code to achieve my expected output I need to

remove the hard-coded switch case statement
remove the setTimeOut Method, without effecting current function
get the output html code without implementing wrapped functionality like below

test

below I attached the screenshot of editor view

screenshot of editor view

The output of the editor view is below

<ol style="font-size: small;">
    <li>test</li>
    <li>s</li>
</ol>
<p>&nbsp;</p>
<ol style="font-size: x-small;">
    <li>
        <font size="1">sds</font>
    </li>
    <li>
        <font size="1">f</font>
    </li>
    <li>
        <font size="1">ff</font>
    </li>
</ol>
<p>
    <font size="1">&nbsp;</font>
</p>
<ol style="font-size: medium;">
    <li>
        <font size="3">sdssds</font>
    </li>
    <li>
        <font size="3">d</font>
    </li>
    <li>
        <font size="3">sd</font>
    </li>
</ol>
<p>
    <font size="3">&nbsp;</font>
</p>
<ol style="font-size: x-large;">
    <li>
        <font size="5">sd</font>
    </li>
    <li>
        <font size="5">sd</font>
    </li>
    <li>
        <font size="5">ds</font>
    </li>
</ol>

Let's see the output clearly every <ol> element takes the font size from first li of that <ol> so this output is exactly correct, so same as i need to get the output with the help of Telerik Solution with my above mentioned requirements

so please checkout and let me know if you have idea about this

Solution

I got the answer from Telerik Official Side, so please use this below code to fix the issue

  function OnClientCommandExecuting(editor, args) {
      let commandName = args.get_commandName();

      if (commandName == "RealFontSize" || commandName == "FontSize") {
          let selElem = editor.getSelectedElement(); 

          if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL") {
               selElem.style.fontSize = fontSizeIntoPixels(args.get_value());
          } else selElem.style.fontSize = fontSizeIntoPixels(args.get_value());
          args.set_cancel(true);
      }
  }

  function fontSizeIntoPixels(fsValue) {
      switch (fsValue) {
          case 1:
              return "10px";
              break;
          case 2:
              return "13px";
              break;
          case 3:
              return "16px";
              break;
          case 4:
              return "18px";
              break;
          case 5:
              return "24px";
              break;
          case 6:
              return "32px";
              break;
          case 7:
              return "48px";
              break;
      }
  }