how to add underline option in the toolbar

[IntelligaiaVivek]

Can anyone tell me how to add underline option in toolbar

[jaywcjlove]

import React from "react";
import MDEditor, { commands } from "@uiw/react-md-editor";

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <div className="container">
      <MDEditor
        value={value}
        commands={[
          // Custom Toolbars
          commands.strikethrough
        ]}
      />
    </div>
  );
}

https://codesandbox.io/s/react-md-editor-custom-toolbars-underline-204-wb946?file=/src/App.tsx:0-386

@IntelligaiaVivek

[IntelligaiaVivek]

Thanks @jaywcjlove for your reply as i can see the strikethrough going throught the text but can we have underline below the text like below screenshot example:-

[jaywcjlove]

@IntelligaiaVivek Example Preview: https://codesandbox.io/s/react-md-editor-custom-toolbars-underline-204-wb946?file=/src/App.tsx

import React from "react";
import MDEditor, {
  TextState,
  ICommand,
  TextAreaTextApi,
  selectWord
} from "@uiw/react-md-editor";

const underline: ICommand = {
  name: "underline",
  keyCommand: "underline",
  buttonProps: { "aria-label": "Insert underline" },
  icon: (
    <svg width="12" height="12" viewBox="0 0 1024 1024">
      <path
        fill="currentColor"
        d="M960 896V1024H64v-128zM256 0v448a256 256 0 1 0 512 0V0h128v448c0 212.0704-171.9296 384-384 384s-384-171.9296-384-384V0z"
      />
    </svg>
  ),
  execute: (state: TextState, api: TextAreaTextApi) => {
    // Adjust the selection to encompass the whole word if the caret is inside one
    const newSelectionRange = selectWord({
      text: state.text,
      selection: state.selection
    });
    const state1 = api.setSelectionRange(newSelectionRange);
    // Replaces the current selection with the strikethrough mark up
    const state2 = api.replaceSelection(`<u>${state1.selectedText}</u>`);
    // Adjust the selection to not contain the ~~
    api.setSelectionRange({
      start: state2.selection.end - 4 - state1.selectedText.length,
      end: state2.selection.end - 4
    });
  }
};

export default function App() {
  const [value, setValue] = React.useState("Hello world!!!");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={(val) => setValue(val!)}
        commands={[underline]}
      />
    </div>
  );
}

[IntelligaiaVivek]

Thanks @jaywcjlove :)