new markdown editor

[jigglyjams]

currently we are using tinyMCE which outputs its content in HTML which we them have to convert to markdown

this leads to many issues like having html tags inserted into the content unintentionally

must have:

• ctrl-v image upload handling
• drag and drop image upload handling
• drag and drop .md upload
• code tagging
• gui table creator

Lets explore some other markdown editors:

1. https://simplemde.com/ (6 years old but looks good) --> react wrapper: https://github.com/RIP21/react-simplemde-editor

2. https://github.com/portive/wysimark: had to edit webpack config to get it to import correctly

   webpack: (config) => {
   // Add the alias for @wysimark/react to use the ESM version
   config.resolve.alias['@wysimark/react'] = path.resolve(__dirname, 'node_modules/@wysimark/react/.dist/node/index.esm.js');
   return config;
   },

   preview

3. https://stackedit.io

4. https://github.com/outline/rich-markdown-editor (archived by Outline, a notion alt, but could be good)

5. Fork things from jbm editor: https://github.com/jbx-protocol/juice-interface/blob/a96086a69ab1c97bb4682fa6d8bf734f1d204561/src/components/Markdown/MarkdownEditor.tsx#L23

6. https://mdxeditor.dev

7. https://github.com/Milkdown/milkdown

8. https://github.com/microvoid/marktion

9. https://github.com/remirror/remirror

10. list of many: https://github.com/JefMari/awesome-wysiwyg-editors (thanks filipv)

[twodam]

Milkdown integration TODOs:

• [ ] Readonly option so it won't be editable in proposal page
• [ ] onChange event handler so it can be used with react-hook-form Controller
• [ ] Add toolbar and plugins we need

[twodam]

working PR: https://github.com/nance-eth/nance-interface/pull/112

[jigglyjams]

https://github.com/nance-eth/nance-interface/commit/e83c4df7c03dcb8d5b31b94ac40cf247ed579fda