react-md-editor icon indicating copy to clipboard operation
react-md-editor copied to clipboard

Not getting the checked list from preview mode ?

Open IntelligaiaVivek opened this issue 3 years ago • 4 comments

I am not able to get the checked and unchecked state from preview, whether we have selected any checklist or not?

Example:-

image

IntelligaiaVivek avatar Jul 28 '21 11:07 IntelligaiaVivek

You can use rehype plugins to solve this problem.

import React from "react";
import ReactDOM from "react-dom";
import MDEditor 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}
        previewOptions={{
            rehypePlugins: [yourPlugins]
        }}
      />
    </div>
  );
}

This is just an idea, not sure to solve your problem. @IntelligaiaVivek

jaywcjlove avatar Jul 28 '21 16:07 jaywcjlove

ok no problem @jaywcjlove Again thanks for this Awesome editor :)

IntelligaiaVivek avatar Jul 28 '21 16:07 IntelligaiaVivek

Which plugin we need to use to achieve the select in the checklist ?

Fakh94 avatar Sep 07 '22 10:09 Fakh94

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

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

const mkdStr = `
- [ ] TODO
`;

function App() {
  const [value, setValue] = React.useState(mkdStr);

  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        previewOptions={{
          rehypePlugins: [
            [
              rehypeRewrite,
              {
                rewrite: (node, index, parent) => {
                  console.log(node);
                }
              }
            ]
          ]
        }}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

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

jaywcjlove avatar Sep 07 '22 11:09 jaywcjlove