import { Link } from 'react-router-dom'; import { useCallback, useEffect, useMemo, useState } from 'react'; import CodeHighlight from '../../components/Highlight'; import SimpleMdeReact from 'react-simplemde-editor'; import 'easymde/dist/easymde.min.css'; import { setPageTitle } from '../../store/themeConfigSlice'; import { useDispatch } from 'react-redux'; const MarkDownEditor = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Markdown Editor')); }); const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const [value, setValue] = useState( `# Basic Example Go ahead, play around with the editor! Be sure to check out **bold** and *italic* styling, or even[links](https://google.com). You can type the Markdown syntax, use the toolbar, or use shortcuts like 'cmd-b' or 'ctrl-b'. ## Lists Unordered lists can be started using the toolbar or by typing '*', '-', or '+'. Ordered lists can be started by typing '1.'. #### Unordered * Lists are a piece of cake * They even auto continue as you type * A double enter will end them * Tabs and shift - tabs work too #### Ordered 1. Numbered lists... 2. ...work too! ## What about images? ![Yes](https://i.imgur.com/sZlktY7.png) ` ); const onChange = useCallback((value: string) => { setValue(value); }, []); const delay = 1000; const autosavedValue = localStorage.getItem(`smde_demo`) || `# Autosaving! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. By default, it saves every 10 seconds, but this can be changed. When this textarea is included in a form, it will automatically forget the saved value when the form is submitted.`; const anOptions = useMemo(() => { return { autosave: { enabled: true, uniqueId: 'demo', delay, }, }; }, [delay]); return (
Documentation: https://www.npmjs.com/package/react-simplemde-editor
{/* Basic */}
Basic
{codeArr.includes('code1') && ( 
{`import { useCallback, useMemo, useState } from 'react';
import SimpleMdeReact from 'react-simplemde-editor';
import 'easymde/dist/easymde.min.css';

const [value, setValue] = useState(
    \`# Basic Example
Go ahead, play around with the editor! Be sure to check out **bold** and *italic* styling, or even[links](https://google.com). You can type the Markdown syntax, use the toolbar, or use shortcuts like 'cmd-b' or 'ctrl-b'.

## Lists
Unordered lists can be started using the toolbar or by typing '*', '-', or '+'. Ordered lists can be started by typing '1.'.

#### Unordered
* Lists are a piece of cake
* They even auto continue as you type
* A double enter will end them
* Tabs and shift - tabs work too

#### Ordered
1. Numbered lists...
2. ...work too!

## What about images?
![Yes](https://i.imgur.com/sZlktY7.png)
\`
);

const onChange = useCallback((value: string) => {
    setValue(value);
}, []);

`}
 )}
{/* Autosaving */}
Autosaving
{codeArr.includes('code2') && ( 
{`import { useCallback, useMemo, useState } from 'react';
import SimpleMdeReact from 'react-simplemde-editor';
import 'easymde/dist/easymde.min.css';

const delay = 1000;
const autosavedValue =
    localStorage.getItem(\`smde_demo\`) ||
    \`# Autosaving!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

By default, it saves every 10 seconds, but this can be changed. When this textarea is included in a form, it will automatically forget the saved value when the form is submitted.\`;

const anOptions = useMemo(() => {
    return {
        autosave: {
            enabled: true,
            uniqueId: 'demo',
            delay,
        },
    };
}, [delay]);

`}
 )}
); }; export default MarkDownEditor;