New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
how to add underline option in the toolbar #204
Comments
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 |
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:- |
@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>
);
} |
Thanks @jaywcjlove :) |
Can anyone tell me how to add underline option in toolbar
The text was updated successfully, but these errors were encountered: