uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.12k stars 154 forks source link

When used preview model via React.lazy() cannot found MDEditor.Markdown #508

Open pccai opened 1 year ago

pccai commented 1 year ago

`const MDEditor = React.lazy(() => import('@uiw/react-md-editor')); ......

`

Compilation Error in MDEditor.Markdown

declare type Editor = React.FC<PropsWithRef<MDEditorProps>> & { Markdown: typeof MarkdownPreview; };

pccai commented 1 year ago

`//import MDEditor from '@uiw/react-md-editor'; const MarkdownPreview = React.lazy(() => import("@uiw/react-markdown-preview"));

return ()`

jaywcjlove commented 1 year ago

@pccai Example: https://codesandbox.io/embed/markdown-editor-for-react-https-github-com-uiwjs-react-md-editor-issues-508-bb9r6w?fontsize=14&hidenavigation=1&theme=dark

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
const MarkdownPreview = React.lazy(() => import("@uiw/react-markdown-preview"));

const MarkdownEditPreview = React.lazy(async () => {
  const mdx = await import("@uiw/react-md-editor");
  console.log("mdx:", mdx, mdx.default.Markdown);
  return {
    default: mdx.default.Markdown
  };
});
function App() {
  return (
    <div className="container">
      <Suspense fallback={<div>loading...</div>}>
        <MarkdownPreview source="## Hello World" />
      </Suspense>
      <Suspense fallback={<div>loading...</div>}>
        <MarkdownEditPreview source="## Hello World" />
      </Suspense>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));
jayeshchoudhary commented 1 week ago

@pccai Example: https://codesandbox.io/embed/markdown-editor-for-react-https-github-com-uiwjs-react-md-editor-issues-508-bb9r6w?fontsize=14&hidenavigation=1&theme=dark

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
const MarkdownPreview = React.lazy(() => import("@uiw/react-markdown-preview"));

const MarkdownEditPreview = React.lazy(async () => {
  const mdx = await import("@uiw/react-md-editor");
  console.log("mdx:", mdx, mdx.default.Markdown);
  return {
    default: mdx.default.Markdown
  };
});
function App() {
  return (
    <div className="container">
      <Suspense fallback={<div>loading...</div>}>
        <MarkdownPreview source="## Hello World" />
      </Suspense>
      <Suspense fallback={<div>loading...</div>}>
        <MarkdownEditPreview source="## Hello World" />
      </Suspense>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

thanks this worked