HTML Textbox input in preview

[SundaramMaheshkumar]

NOT a bug. Could I please get clarification on how to achieve the below in the markdown preview.

In the Checklist section -> For the column Comments & in the section Other Comments, I made a textbox using html which gets displayed in the preview with HTML input box (Not visible here due to sanitization I suppose).

But I can't input anything in that box. How to make those displayed textboxes to allow inputs in the preview, instead of editing the markdown itself. Is this achievable?

My Markdown:

Plan Checklist

Demographics

Key	Value
Name	Tom
ID	78147831

Automated Technical Check

Key	Value	Another column
Name	Daniel
Operator Name	Laura
Beam ID	234jtr2mtr42

Checklist

Item	Planner	Checker	Comments
Distribution
Scorecard

Other Comments

Any help would be appreciated! Thanks.

[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.

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