/**
 * background: '#f0f2f5'
 */
import { Button, Menu } from "antd";
import React from "react";
import JMarkdown from "@jzo/markdown";

export default () => {
  const value = `## 展示菜单
  | 参数          | 说明                                                    | 类型      | 默认值 |
| ------------- | ------------------------------------------------------- | --------- | ------ |
| value         | 输入框的值                                              | string  | -      |
| theme         | 皮肤                                                    | string  | -      |
| components    | 将标记名映射到组件的对象                                | object  | {}     |
| remarkPlugins | 输入框默认是否显示，只有第一次生效                      | boolean | -      |
| 其他          | 组件参数 [https://github.com/remarkjs/react-markdown]() | -       | -      |
  ~~~jsx
  import { Button, Menu } from 'antd';
  import React from 'react';
  import HeaderDropdown from '@/components/HeaderDropdown';

  export default () => {
    const menuHeaderDropdown = (
      <Menu selectedKeys={[]}>
        <Menu.Item key="center">个人中心</Menu.Item>
        <Menu.Item key="settings">个人设置</Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">退出登录</Menu.Item>
      </Menu>
    );
    return (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <Button>hover 展示菜单</Button>
      </HeaderDropdown>
    );
  };
  </JMarkdown> ~~~

  ### 个人中心
  `;
  return <JMarkdown>{value}</JMarkdown>;
};

import JMarkdown , { Plugins } from "@jzo/markdown";
JMarkdown.unuse(Plugins.Header); // header
JMarkdown.unuse(Plugins.FontBold); // font-bold

import React from 'react';
import JMarkdown from "@jzo/markdown";

const Counter = ({editor, editorConfig, config, pluginName}) => {
  console.log(editor,editorConfig,config,pluginName)

  const [num, setNum] = React.useState(config.start);

  const handleClick = () => {
    // 调用API，往编辑器中插入一个数字
    editor.insertText(num);
    // 更新一下自身的state
    setNum(num + 1);
  }
  return (
    <span
      className="button button-type-counter"
      title="Counter"
      onClick={handleClick}
    >
      123213213
    </span>
  );
}
// 如果需要的话，可以在这里定义默认选项
Counter.defaultConfig = {
  start: 0
}
// 定义按钮被防止在哪个位置，默认为左侧，还可以放置在右侧（right）
Counter.align = 'left';
// 这里定义插件名称，注意不能重复
Counter.pluginName = 'counter';


// 使用：
JMarkdown.Editor.use(Counter, {
  start: 10
});