state update using react not working

[sc0rp10n-py]

const [mark, setMark] = useState('Enter Text Here');
const [visible, setVisible] = useState(true);
<div>
    <label htmlFor="body">
        Body:
    </label>
    <MarkdownEditor
        value={mark}
        visible={visible}
        onChange={(value, viewUpdate) => setMark(value)}
        height="500px"
    />
</div>

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?

[jaywcjlove]

https://codesandbox.io/embed/react-markdown-editor-ybpce?fontsize=14&hidenavigation=1&theme=dark

@sc0rp10n-py

[sc0rp10n-py]

@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?

[jaywcjlove]

@sc0rp10n-py Please give me an example that reproduces the error.

[sc0rp10n-py]

My Code

Error Video

Framework Next.js

[sc0rp10n-py]

I have attached my code and error video @jaywcjlove

[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

[sc0rp10n-py]

@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

https://github.com/sc0rp10n-py/markdown-nextjs

https://markdown-nextjs-omega.vercel.app//

[jaywcjlove]

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

[sc0rp10n-py]

@jaywcjlove can you explain the reason behind it as well?

[jaywcjlove]

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 }
), []);