[feat] Markdown Help?

[rts-gordon]

Hi there,
Is it possible to add a help button for Markdown writing guide in UI?
It can be linked to https://www.markdownguide.org/basic-syntax/ or any markdown guide website you like.

Thank you.

[jaywcjlove]

@rts-gordon https://codesandbox.io/embed/markdown-editor-for-react-forked-fpnj22?fontsize=14&hidenavigation=1&theme=dark

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

const help = {
  name: "help",
  keyCommand: "help",
  buttonProps: { "aria-label": "Insert help" },
  icon: (
    <svg viewBox="0 0 16 16" width="12px" height="12px">
      <path
        d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm.9 13H7v-1.8h1.9V13Zm-.1-3.6v.5H7.1v-.6c.2-2.1 2-1.9 1.9-3.2.1-.7-.3-1.1-1-1.1-.8 0-1.2.7-1.2 1.6H5c0-1.7 1.2-3 2.9-3 2.3 0 3 1.4 3 2.3.1 2.3-1.9 2-2.1 3.5Z"
        fill="currentColor"
      />
    </svg>
  ),
  execute: (state, api) => {
    window.open("https://www.google.com", "_blank");
  }
};

const mkdStr = `## Markdown Editor`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        value={value}
        commands={[...commands.getCommands(), help]}
        onChange={setValue}
      />
      <h3>Light</h3>
      <div data-color-mode="light">
        <MDEditor
          height={200}
          commands={[...commands.getCommands(), help]}
          value={value}
          onChange={setValue}
        />
      </div>
      <h3>Light</h3>
      <div data-color-mode="dark">
        <MDEditor
          height={200}
          commands={[...commands.getCommands(), help]}
          value={value}
          onChange={setValue}
        />
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

[rts-gordon]

I think it would be better integrated into the base code than Customize.
Any way thanks a lot, I will try this.