react-md-editor icon indicating copy to clipboard operation
react-md-editor copied to clipboard

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

Open pccai opened this issue 2 years ago • 3 comments

const MDEditor = React.lazy(() => import('@uiw/react-md-editor')); ...... <Suspense fallback="..."> <MDEditor.**Markdown** source="Hello Markdown!" /> </Suspense>

Compilation Error in MDEditor.Markdown

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

pccai avatar Apr 19 '23 02:04 pccai

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

return (<Suspense fallback="..."><MarkdownPreview source={source} className={styles.mdEditor} /></Suspense>)`

pccai avatar Apr 19 '23 03:04 pccai

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

jaywcjlove avatar Apr 19 '23 05:04 jaywcjlove