-
-
Notifications
You must be signed in to change notification settings - Fork 148
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
HTML Textbox input in preview #598
Comments
@SundaramMaheshkumar You can write your own rehype plugin to handle your own strings, like this: |
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. |
@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 |
Thank you so much @jaywcjlove. That's exactly what I needed. |
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")); |
NOT a bug. Could I please get clarification on how to achieve the below in the markdown preview.
In the
Checklist
section -> For the columnComments
& in the sectionOther 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
Automated Technical Check
Checklist
Other Comments
Any help would be appreciated! Thanks.
The text was updated successfully, but these errors were encountered: