import MarkdownEditor from '@uiw/react-markdown-editor'; import React from 'react'; import ReactDOM from 'react-dom'; const Dome = () => ( <MarkdownEditor value={this.state.markdown} onChange={this.updateMarkdown} /> ); ReactDOM.render(<Dome />, document.getElementById('app'));

import MarkdownEditor from '@uiw/react-markdown-editor'; import React, { useState } from 'react'; import ReactDOM from 'react-dom'; function App() { const [markdown, setMarkdown] = useState(""); return ( <MarkdownEditor value="# This is a H1 \n## This is a H2 \n###### This is a H6" onChange={(editor, data, value) => setMarkdown(value)} /> ); } ReactDOM.render(<App />, document.getElementById('app'));

import React from "react"; import ReactDOM from "react-dom"; import MarkdownEditor from '@uiw/react-markdown-editor'; const title2 = { name: 'title2', keyCommand: 'title2', icon: ( <svg width="12" height="12" viewBox="0 0 512 512"> <path fill="currentColor" d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z" /> </svg> ), execute: (editor, selection, position) => { const value = selection ? `## ${selection}` : '## '; editor.replaceSelection(value); position.ch = !!selection ? position.ch : position.ch + 3; editor.setCursor(position.line, position.ch); editor.focus(); }, }; const Dome = () => ( <MarkdownEditor value="Hello Markdown!" toolbars={[ 'bold', 'italic', 'header', title2 ]} /> ); ReactDOM.render(<Dome />, document.getElementById('app'));

// next.config.js const removeImports = require('next-remove-imports')(); module.exports = removeImports({});

import dynamic from 'next/dynamic'; import '@uiw/react-markdown-editor/markdown-editor.css'; import '@uiw/react-markdown-preview/markdown.css'; const MarkdownEditor = dynamic( () => import("@uiw/react-markdown-editor").then((mod) => mod.default), { ssr: false } ); function HomePage() { return ( <div> <MarkdownEditor value="Hello Markdown!" /> </div> ); } export default HomePage;