Open am0029 opened 1 year ago
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.
This requires refactoring the toolbar which might better solve your problem. @am0029
@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>
);
}
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 ?
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>
);
}
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?
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 ?