fix: use @uiw/react-md-editor as rich text editor and displaying markdown

package.json

@@ -13,6 +13,7 @@
     "@getalby/lightning-tools": "5.0.3",
     "@nostr-dev-kit/ndk": "2.10.0",
     "@reduxjs/toolkit": "2.2.6",
+    "@uiw/react-md-editor": "4.0.4",
     "axios": "1.7.3",
     "bech32": "2.0.0",
     "buffer": "6.0.3",
@@ -27,11 +28,11 @@
     "react": "^18.3.1",
     "react-countdown": "2.3.5",
     "react-dom": "^18.3.1",
-    "react-quill": "2.0.0",
     "react-redux": "9.1.2",
     "react-router-dom": "^6.24.1",
     "react-toastify": "10.0.5",
     "react-window": "1.8.10",
+    "rehype-sanitize": "6.0.0",
     "uuid": "10.0.0",
     "webln": "0.3.2"
   },

src/components/Inputs.tsx

@@ -1,39 +1,8 @@
+import MDEditor from '@uiw/react-md-editor'
 import React from 'react'
-import ReactQuill from 'react-quill'
+import rehypeSanitize from 'rehype-sanitize'
-import 'react-quill/dist/quill.snow.css'
-import '../styles/customQuillStyles.css'
 import '../styles/styles.css'
 
-const editorFormats = [
-  'header',
-  'font',
-  'size',
-  'bold',
-  'italic',
-  'underline',
-  'strike',
-  'blockquote',
-  'list',
-  'bullet',
-  'indent',
-  'link'
-]
-
-const editorModules = {
-  toolbar: [
-    [{ header: '1' }, { header: '2' }, { font: [] }],
-    [{ size: [] }],
-    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
-    [
-      { list: 'ordered' },
-      { list: 'bullet' },
-      { indent: '-1' },
-      { indent: '+1' }
-    ],
-    ['link']
-  ]
-}
-
 interface InputFieldProps {
   label: string
   description?: string
@@ -77,13 +46,13 @@ export const InputField = React.memo(
             onChange={handleChange}
           ></textarea>
         ) : type === 'richtext' ? (
-          <ReactQuill
+          <MDEditor
-            className='inputMain'
-            formats={editorFormats}
-            modules={editorModules}
-            placeholder={placeholder}
             value={value}
-            onChange={(content) => onChange(name, content)}
+            onChange={(content) => onChange(name, content || '')}
+            previewOptions={{
+              rehypePlugins: [[rehypeSanitize]]
+            }}
+            preview='edit'
           />
         ) : (
           <input

src/pages/innerMod.tsx

@@ -32,10 +32,11 @@ import {
   getFilenameFromUrl,
   log,
   LogType,
-  sanitizeAndAddTargetBlank,
   unformatNumber
 } from '../utils'
 
+import MDEditor from '@uiw/react-md-editor'
+import rehypeSanitize from 'rehype-sanitize'
 import { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
 import { getModsEditPageRoute } from '../routes'
 
@@ -366,10 +367,17 @@ const Body = ({
           className='IBMSMSMBSSPostBody'
           style={{ maxHeight: '250px', padding: '0 10px' }}
         >
-          <div
+          <MDEditor.Markdown
+            source={body}
             className='IBMSMSMBSSPostTitleText'
-            dangerouslySetInnerHTML={{
+            style={{ backgroundColor: 'inherit', whiteSpace: 'pre-wrap' }}
-              __html: sanitizeAndAddTargetBlank(body)
+            rehypePlugins={[[rehypeSanitize]]}
+            components={{
+              a: ({ ...props }) => (
+                <a {...props} target='_blank' rel='noopener noreferrer'>
+                  {props.children}
+                </a>
+              )
             }}
           />
           <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>

src/styles/styles.css

@@ -47,27 +47,27 @@ h6 {
 }
 
 h1 {
-  font-size: 38px
+  font-size: 38px;
 }
 
 h2 {
-  font-size: 32px
+  font-size: 32px;
 }
 
 h3 {
-  font-size: 24px
+  font-size: 24px;
 }
 
 h4 {
-  font-size: 20px
+  font-size: 20px;
 }
 
 h5 {
-  font-size: 18px
+  font-size: 18px;
 }
 
 h6 {
-  font-size: 16px
+  font-size: 16px;
 }
 
 .IBMSecMain {
@@ -273,29 +273,28 @@ h6 {
 /* the 4 classes below here are a temp fix for the games dropdown stylings */
 
 .dropdownMainMenu.dropdownMainMenuAlt {
-  max-height: unset!important;
+  max-height: unset !important;
-
 }
 
 .dropdownMainMenu.dropdownMainMenuAlt > div {
-    height: unset!important;
+  height: unset !important;
 }
 
 .dropdownMainMenu.dropdownMainMenuAlt > div > div {
-    height: unset!important;
+  height: unset !important;
-    width: 100%!important;
+  width: 100% !important;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    gap: 5px;
+  gap: 5px;
-    max-height: 300px;
+  max-height: 300px;
-    overflow: auto;
+  overflow: auto;
-    padding: 5px;
+  padding: 5px;
 }
 
 .dropdownMainMenu.dropdownMainMenuAlt > div > div > div {
-    position: relative!important;
+  position: relative !important;
-    left: unset!important;
+  left: unset !important;
-    top: unset!important;
+  top: unset !important;
 }
 
 .dropdownMainMenuItem {
@@ -342,6 +341,22 @@ h6 {
   width: 100%;
 }
 
+.w-md-editor {
+  transition: ease 0.4s;
+  background-color: rgba(0, 0, 0, 0.1) !important;
+  outline: unset;
+  border-radius: 10px !important;
+  padding: 10px 15px !important;
+  border: solid 1px rgba(255, 255, 255, 0.1) !important;
+  box-shadow: inset 0 0 8px 0 rgb(0, 0, 0, 0.1) !important;
+  color: white !important;
+  width: 100%;
+}
+
+.w-md-editor-toolbar {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
 .inputMain:focus {
   border: solid 1px rgba(255, 255, 255, 0.2);
 }