Redesigned Toolbar Custom Definition API

[jaywcjlove]

There is no good way to define icon size. Because there needs to be an easier way to define toolbars. Unless we redesign the toolbar definition API.

Similar to the API design below:

<MDEditor.Markdown 
  source="...."
  commands={
    <Command>
      <Title3 />
      <CommandGroup>
        <Title1 />
        <Title2 />
        <Title3 width="12" height="12" buttonProps={{ 'aria-label': 'Insert title'}} />
      </CommandGroup>
    </Command>
  }
/>

This one has more work and can be considered for expansion in the next version. The only solution so far is as follows:

const title1: ICommand = {
  ...commands.title1,
  icon: (
    <svg width="23" height="23" viewBox="0 0 520 520">
      <path fill="currentColor" d="M15.708333..." />
    </svg>
  ),
};

@jeepers3327

Originally posted by @jaywcjlove in https://github.com/uiwjs/react-md-editor/issues/387#issuecomment-1133659574

[jaywcjlove]

Ideas for the next version

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

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <div className="container">
      <MDEditor value={value} onChange={setValue}>
        <Command>
          <Title3 name="title3" keyCommand="title3" />
          <Command>
            <Title1 />
            <Title2 />
            <Title3 name="title3" keyCommand="title3" width="12" height="12" buttonProps={{ 'aria-label': 'Insert title'}}>
              <Icon />
            </Title3>
          </Command>
        </Command>
      </MDEditor>

      <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
    </div>
  );
}

[am0029]

hello , this codes is for make bold work for persian language ? i mean like this picture .
picture is look like this

bold B option in toolbar not working in my language .

u mean i add all of this code to make this works for me right ?

i add new toolbar ? and name it B ?

[jaywcjlove]

@am0029 add new toolbar, can remove Blod https://github.com/uiwjs/react-md-editor/blob/14396863b9ca619638cab894a0df06b341c64168/core/src/commands/index.ts#L176-L198