Is there any way to give custom tooltip text to toolbar ?

[IntelligaiaVivek]

Can we give custom tooltip text to toolbar like we have buttonProps: { "aria-label": "Insert bold text", "titile": "Insert bold text" } for group but needed for
single command.

example:-
commands.bold
tooltip text "Insert bold text"

[jaywcjlove]

@IntelligaiaVivek Welcome to submit PR, modify the tooltip

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={[
          {
            ...commands.bold,
            buttonProps: { title: "Test Title" }
          }
        ]}
        onChange={(val) => {
          setValue(val!);
        }}
      />
    </div>
  );
}

[jaywcjlove]

https://codesandbox.io/s/react-md-editor-custom-toolbars-213-c4g5h

@IntelligaiaVivek

[IntelligaiaVivek]

Thanks for this Wonderful 'react-md-editor' Awesome

[cmldk]

There is an issue with commands.link. I can not override the value as expected. It still returns default value [](url) . @jaywcjlove

{
   ...commands.link,
   value: '[Text Here](URL Here)',
}

[jaywcjlove]

@cmldk please give your example

[cmldk]

This was my first example when I was commenting on this. I was trying to create custom markdown commands. @jaywcjlove

{
  { ...commands.bold, buttonProps: { title: `${translate('addBold')} (Ctrl/Cmd + B)` } },
  { ...commands.italic, buttonProps: { title: `${translate('addItalic')} (Ctrl/Cmd + I)` } },
  commands.divider,
  {
   ...commands.link,
   value: '[Text Here](URL Here)',
  },
}

After considering the problem, I found out why this happens. [](url) text (value) is also generated while executing the function. And this is my solution as shown below.

{
    ...commands.link,
    buttonProps: { title: `${translate('addLink')} (Ctrl/Cmd + L)` },
    execute: (state, api) => {
      const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
      const state1 = api.setSelectionRange(newSelectionRange);
      let state2;
      let urlHereText = translate('urlHere');
      if (state1.selectedText) {
        // selection
        state2 = api.replaceSelection(`[${state1.selectedText}](${urlHereText})`);
      } else {
        // empty selection
        state2 = api.replaceSelection(`[${translate('textHere')}](${urlHereText})`);
      }
      api.setSelectionRange({
        start: state2.selection.end - urlHereText.length - 1,
        end: state2.selection.end - 1,
      });
    },
  },

Thanks

[jaywcjlove]

@IntelligaiaVivek Upgrade v3.20.5

[IntelligaiaVivek]

Thanks @jaywcjlove for the updates