HTML Textbox input in preview about react-md-editor

[jaywcjlove]

https://codesandbox.io/p/sandbox/markdown-editor-for-react-598-q2mtp4?file=%2Findex.js%3A1%2C1-42%2C1

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import MDEditor, { selectWord } from "@uiw/react-md-editor";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";

const mkdStr = `
# Markdown Editor

<input type="text" />

`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <MDEditor
        height={200}
        value={value}
        previewOptions={{
          components: {
            input: (props) => {
              return (
                <input
                  {...props}
                  onChange={(ev) => {
                    console.log("xx", ev.target.value);
                  }}
                />
              );
            },
          },
        }}
        onChange={setValue}
      />
    </div>
  );
}

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

[jaywcjlove]

@SundaramMaheshkumar You can write your own rehype plugin to handle your own strings, like this:

https://github.com/uiwjs/react-markdown-preview/blob/dbbf2566834f15211d9f5d55aa7b7b9601b7e1d9/core/src/plugins/reservedMeta.ts#L1-L15

[SundaramMaheshkumar]

@jaywcjlove

Thank you. I tried to look into rehype plugins but couldn't figure out how to achieve my use case. Currently, I cannot type or change the value inside that HTML input box in preview. What I want is to allow free typing in those input boxes!

Sorry. Could you please guide me with an example? Thank you so much.

[jaywcjlove]

@SundaramMaheshkumar I don't know what you're going to do, like this:

https://codesandbox.io/p/sandbox/markdown-editor-for-react-598-q2mtp4?file=%2Findex.js%3A28%2C54

[SundaramMaheshkumar]

Thank you so much @jaywcjlove. That's exactly what I needed.