uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.13k stars 155 forks source link

Not getting the checked list from preview mode ? #214

Open IntelligaiaVivek opened 3 years ago

IntelligaiaVivek commented 3 years ago

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

Example:-

image

jaywcjlove commented 3 years ago

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

IntelligaiaVivek commented 3 years ago

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

Fakh94 commented 2 years ago

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

jaywcjlove commented 2 years ago

@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"));