Open sc0rp10n-py opened 2 years ago
@jaywcjlove hey this is still buggy, when i type because of state updates, there is lag and many times the cursor shifts to starting of line 1.
Usually when the value is coming from state in an input or text area field, then this doesn't happen, why is this happening with this markdown editor then?
@sc0rp10n-py Please give me an example that reproduces the error.
My Code
Error Video
Framework Next.js
I have attached my code and error video @jaywcjlove
@sc0rp10n-py Please give me an example using codesandbox.io.
This allows me to quickly see where the problem is.
👇👇👇👇👇👇👇👇👇👇👇👇
https://codesandbox.io/embed/react-markdown-editor-ybpce?fontsize=14&hidenavigation=1&theme=dark
@jaywcjlove My project is in nextjs and codesandbox wasn't allowing me to make a nextjs sandbox so here is the github repo link and deployed link
@sc0rp10n-py The following changes will solve your problem.
import dynamic from "next/dynamic";
import "@uiw/react-markdown-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import { useState } from "react";
+ const MarkdownEditor = dynamic(
+ (e) => import("@uiw/react-markdown-editor").then((mod) => mod.default),
+ { ssr: false }
+ );
const Index = () => {
const txt = `# Hello World\n\n Hi, there!!!`;
const [mark, setMark] = useState(txt);
const [visible, setVisible] = useState(true);
- const MarkdownEditor = dynamic(
- (e) => import("@uiw/react-markdown-editor").then((mod) => mod.default),
- { ssr: false }
- );
console.log(mark);
return (
<>
<div className="container mx-auto">
<div className="my-20">
<h1 className="heading text-2xl">Create</h1>
<div className="border border-[#3330E4] rounded-xl py-5 px-24 my-14">
<form>
<div>
<label htmlFor="title">Title:</label>
<input
type="text"
name="title"
placeholder="Enter Title"
className="ml-5 border border-[#3330E4] rounded-xl py-2 px-4 my-2 w-2/3"
/>
</div>
<div>
<label htmlFor="body">Body:</label>
<MarkdownEditor
value={mark}
visible={visible}
onChange={(value) => {
setMark(value);
}}
height="500px"
/>
</div>
<div>
<button className="bg-[#00FFC6] text-black font-bold rounded-full px-7 py-1 m-5">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</>
);
};
export default Index;
@jaywcjlove can you explain the reason behind it as well?
My English is really bad so I can't explain this very well. Although I would love to help you.
I have an example to help you understand the problem. @sc0rp10n-py
const MarkdownEditor = useCallback(dynamic(
(e) => import("@uiw/react-markdown-editor").then((mod) => mod.default),
{ ssr: false }
), []);
In the above code, when ever I start typing because of state update, the cursor moves out of the markdown window, so how can i type continuously?