Bold just working with english language problem

[am0029]

Hello my dear friend .

thanks for answering all of questions . u are amazing

there is a problem that when i click on B(bold button) . it is not working for my language persian .

but it working with just english .

what do u suggest ?

[jaywcjlove]

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

const title3 = {
  ...commands.title3,
  buttonProps: { 'aria-label': 'Insert title3', title: '插入代码 (ctrl + j)' },
};

<MDEditor
  value={value}
  onChange={setValue}
  commands={[
    title3, title2,
    commands.group([commands.title1, commands.title2, commands.title3, commands.title4, commands.title5, commands.title6], {
      name: 'title',
      groupName: 'title',
      buttonProps: { 'aria-label': 'Insert title'}
    }),
    commands.divider,
    commands.group([], subChild),
  ]}
/>

@am0029 Customize the toolbar, this is by far the easiest way to solve your problem.

[jaywcjlove]

• https://github.com/uiwjs/react-md-editor/issues/388#issuecomment-1565655931

This requires refactoring the toolbar which might better solve your problem. @am0029

[jaywcjlove]

@am0029

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

export default function App() {
  const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
        preview="edit"
        components={{
          toolbar: (command, disabled, executeCommand) => {
            if (command.keyCommand === 'code') {
              return (
                <button 
                  aria-label="Insert code"
                  disabled={disabled}
                  onClick={(evn) => {
                    evn.stopPropagation();
                    executeCommand(command, command.groupName)
                  }}
                >
                  Code
                </button>
              )
            }
          }
        }}
      />
    </div>
  );
}

[am0029]

this file u gave me is typescript . but my file is .js

u mean i go to node_modules . and change the code of package ?

[jaywcjlove]

@am0029 https://codesandbox.io/embed/markdown-editor-for-react-https-github-com-uiwjs-react-md-editor-issues-527-b32woh?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";

const mkdStr = `
# Markdown Editor

---

**Hello world!!!**

[![](https://avatars.githubusercontent.com/u/1680273?s=80&v=4)](https://avatars.githubusercontent.com/u/1680273?v=4)

\`\`\`javascript
import React from "react";
import ReactDOM from "react-dom";
import MEDitor from '@uiw/react-md-editor';

\`\`\`
`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        value={value}
        onChange={setValue}
        commandsFilter={(item) => {
          switch (item.keyCommand) {
            case "bold":
              item.buttonProps.title = "添加粗体文本 (ctrl + b)";
              break;
            case "code":
              item.buttonProps.title = "插入代码（ctrl + j）";
              break;
            case "italic":
              item.buttonProps.title = "添加斜体文本 (ctrl + i)";
              break;
            default:
              break;
          }
          return item;
        }}
      />
    </div>
  );
}

• 296

• 299

[Tripletri]

I faced the same problem. I think this problem can be solved separately from #388 and users won't have to wait for a redesign.

Here is my idea: We can use event.code as a fallback when searching for a shortcut in commands: https://github.com/uiwjs/react-md-editor/blob/c7d5acdf26e437973b826e914fb7b15493641c43/core/src/components/TextArea/shortcuts.ts#L36-L47

It will be possible to specify key codes in shortcuts that would work on any layout. For example ctrl+KeyQ, and those who use old shortcuts such as ctrl+A will not be affected.

What do you think @jaywcjlove?