Editor wrapped in pre?

[amolpatel]

For some reason, the editor is wrapped in a pre and I can't find anywhere to disable that in the props. I'm using NextJS and tailwind. I followed the instructions on how to install using Next. Any help would be appreciated!

Rendered HTML:

React code:

import "@uiw/react-markdown-preview/markdown.css";
import "@uiw/react-md-editor/markdown-editor.css";
import dynamic from "next/dynamic";
import React from "react";

interface Props {
  value: string;
  onChange: (value: string) => void;
}

const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });

export default function MarkdownEditor({ value, onChange }: Props): JSX.Element {
  return (
    <div className="container">
      <MDEditor value={value} onChange={(text) => onChange(text ?? "")} />
    </div>
  );```

[dukesx]

@amolpatel do you have any issue with editor reloading on state change ?

[amolpatel]

@dukesx nope, I don't think so

[dukesx]

@amolpatel strangely , whenever i enter a value inside the editor, the damn thing just resets itself, like the state, its like the state change triggers it to reset for some reason

[nickscamara]

Happening to me as well. @amolpatel what was the fix?

[amolpatel]

@nickscamara You just need to re-render the textarea:

<MDEditor
    value={value}
    onChange={(text) => onChange(text ?? "")}
    components={{
      textarea: (props) => {
        return (
          // @ts-ignore
          <textarea {...props} />
        );
      },
    }}
  />

[nickscamara]

@amolpatel Thank you very much. That and upgrading to the latest version fixed.