Office Word JS API: How to change font for current caret position

I'm new to Office Add-ins and I'm trying to realize the following behavior on MS Word with Office Word addin, but I could not find any way to realize it.

• if a user changes checkbox status on task pane to checked, the font at current caret position on MS Word is changed to red color and underlined and the font is applied to the user's new input text

i.e. I want to switch the font of new input text while the radio button status is being checked.

I think the following code is close to my goal, but does not change the font.

Office.onReady((info) => {
    if (info.host === Office.HostType.Word) {
      document.getElementById("status-changing-chkbox").onclick = () => chkboxOnClicked;
    }
});

function chkboxOnClicked() {
  const chkbox = document.getElementById("status-changing-chkbox");
  const doc = Office.context.document;
  if (chkbox.checked === true) {
    doc.addHandlerAsync(
      Office.EventType.DocumentSelectionChanged,
      changeFont
    );
  } else {
    doc.removeHandlerAsync(
      Office.EventType.DocumentSelectionChanged
    );
  }
}

async function changeFont(eventArgs) {
    await Word.run(async (context) => {
        const doc = context.document;
        const range = doc.getSelection();
        range.font.set({underline: Word.UnderlineType.single});

        await context.sync();
    });
}

• My expectation:
  • If the user inputs new text on the caret position, the font of the new text is underlined.
  • On the other hand, the font of already-existed text is not changed.
• Actual behavior:
  • New text is not underlined even if the user inputs new text on the caret position. This behavior IS NOT my expectation.
  • The font of already-existed text is not changed. This behavior IS my expectation.

What is wrong in this code? I don't know how I should modify this.

Could you give me some advice if you know anything?

Thanks,

Here is ScriptLab code I tried.

HTML:

<div>
  <input type="checkbox" id="underline-toggle-chkbox"/><label>underline</label>
</div>

Script:

$('#underline-toggle-chkbox').on('click', () => tryCatch(changeUnderlineToggle));

async function tryCatch(callback) {
  try {
    await callback();
  } catch (error) {
    console.error(error);
  }
}

async function changeUnderlineToggle() {
  const $chkbox = $("#underline-toggle-chkbox");
  const isChecked = $chkbox.is(":checked");
  const doc = Office.context.document;
  if (isChecked === true) {
    doc.addHandlerAsync(Office.EventType.DocumentSelectionChanged, handleFocusChanged);
  } else {
    doc.removeHandlerAsync(Office.EventType.DocumentSelectionChanged);
  }
  console.log("called changeUnderlineToggle: isChecked = " + isChecked);
}

async function handleFocusChanged(eventArgs) {
  const type = eventArgs.type;

  await Word.run(async (context) => {
    const doc = context.document;
    const range = doc.getSelection();

    // range.insertText("", Word.InsertLocation.start);
    range.font.set({bold:true, underline: Word.UnderlineType.single});
    // range.select(Word.SelectionMode.end);
    await context.sync();    
  });

  console.log("called handleFocusChanged : " + type);
}

My expectation:

• When a user checks underline checkbox on the task pane and the user clicks on the Word document, the Bold toggle on the Font ribbon becomes ON and the Underline toggle on the Font ribbon becomes ON, and the user's next input text is bold and underlined.