importReactfrom"react";importSimpleMDEfrom"react-simplemde-editor";import"easymde/dist/easymde.min.css";<SimpleMDE/>;

exportconstControlledUsage=()=>{const[value,setValue]=useState("Initial value");constonChange=useCallback((value: string)=>{setValue(value);},[]);return<SimpleMdeReactvalue={value}onChange={onChange}/>;};

exportconstUsingOptions=()=>{const[value,setValue]=useState("Initial");constonChange=useCallback((value: string)=>{setValue(value);},[]);constautofocusNoSpellcheckerOptions=useMemo(()=>{return{autofocus: true,spellChecker: false,}asSimpleMDE.Options;},[]);return(<SimpleMdeReactoptions={autofocusNoSpellcheckerOptions}value={value}onChange={onChange}/>);};

exportconstUpdateableByHotKeys=()=>{constextraKeys=useMemo<KeyMap>(()=>{return{Up: function(cm){cm.replaceSelection(" surprise. ");},Down: function(cm){cm.replaceSelection(" surprise again! ");},};},[]);const[value,setValue]=useState("initial");constonChange=(value: string)=>setValue(value);return(<SimpleMdeReactvalue={value}onChange={onChange}extraKeys={extraKeys}/>);};

importReactDOMServerfrom"react-dom/server";exportconstCustomPreview=()=>{constcustomRendererOptions=useMemo(()=>{return{previewRender(){returnReactDOMServer.renderToString(<ReactMarkdownsource={text}renderers={{CodeBlock: CodeRenderer,Code: CodeRenderer,}}/>);},}asSimpleMDE.Options;},[]);return(<div><h4>Custom preview</h4><SimpleMdeReactoptions={customRendererOptions}/></div>);};

import{SimpleMdeReact}from"react-simplemde-editor";importtype{SimpleMdeToCodemirrorEvents}from"react-simplemde-editor";exportconstCustomEventListeners=()=>{const[value,setValue]=useState("Initial value");constonChange=useCallback((value: string)=>{setValue(value);},[]);// Make sure to always `useMemo` all the `options` and `events` props to ensure best performance!constevents=useMemo(()=>{return{focus: ()=>console.log(value),}asSimpleMdeToCodemirrorEvents;},[]);return<SimpleMdeReactevents={events}value={value}onChange={onChange}/>;};

exportconstAutosaving=()=>{constdelay=1000;constautosavedValue=localStorage.getItem(`smde_demo`)||"Initial value";constanOptions=useMemo(()=>{return{autosave: {enabled: true,uniqueId: "demo", delay,},};},[delay]);return(<SimpleMdeReactid="demo"value={autosavedValue}options={anOptions}/>);};

exportconstGetDifferentInstances=()=>{// simple mdeconst[simpleMdeInstance,setMdeInstance]=useState<SimpleMDE|null>(null);constgetMdeInstanceCallback=useCallback((simpleMde: SimpleMDE)=>{setMdeInstance(simpleMde);},[]);useEffect(()=>{simpleMdeInstance&&console.info("Hey I'm editor instance!",simpleMdeInstance);},[simpleMdeInstance]);// codemirrorconst[codemirrorInstance,setCodemirrorInstance]=useState<Editor|null>(null);constgetCmInstanceCallback=useCallback((editor: Editor)=>{setCodemirrorInstance(editor);},[]);useEffect(()=>{codemirrorInstance&&console.info("Hey I'm codemirror instance!",codemirrorInstance);},[codemirrorInstance]);// line and cursorconst[lineAndCursor,setLineAndCursor]=useState<Position|null>(null);constgetLineAndCursorCallback=useCallback((position: Position)=>{setLineAndCursor(position);},[]);useEffect(()=>{lineAndCursor&&console.info("Hey I'm line and cursor info!",lineAndCursor);},[lineAndCursor]);return(<div><h4>Getting instance of Mde and codemirror and line and cursor info</h4><SimpleMdeReactvalue="Go to console to see stuff logged"getMdeInstance={getMdeInstanceCallback}getCodemirrorInstance={getCmInstanceCallback}getLineAndCursor={getLineAndCursorCallback}/></div>);};

import{act,render,screen}from"@testing-library/react";import{useState}from"react";import{SimpleMdeReact}from"react-simplemde-editor";importuserEventfrom"@testing-library/user-event";// @ts-ignoreDocument.prototype.createRange=function(){return{setEnd: function(){},setStart: function(){},getBoundingClientRect: function(){return{right: 0};},getClientRects: function(){return{length: 0,left: 0,right: 0,};},};};constEditor=()=>{const[value,setValue]=useState("");return<SimpleMdeReactvalue={value}onChange={setValue}/>;};describe("Renders",()=>{it("succesfully",async()=>{act(()=>{render(<Editor/>);});consteditor=awaitscreen.findByRole("textbox");userEvent.type(editor,"hello");expect(screen.getByText("hello")).toBeDefined();});});

exportinterfaceSimpleMDEReactPropsextendsOmit<React.HTMLAttributes<HTMLDivElement>,"onChange">{id?: string;onChange?: (value: string,changeObject?: EditorChange)=>void;value?: string;extraKeys?: KeyMap;options?: SimpleMDE.Options;events?: SimpleMdeToCodemirrorEvents;getMdeInstance?: GetMdeInstance;getCodemirrorInstance?: GetCodemirrorInstance;getLineAndCursor?: GetLineAndCursor;placeholder?: string;textareaProps?: Omit<React.HTMLAttributes<HTMLTextAreaElement>,"id"|"style"|"placeholder">;}