package.json

@@ -13,10 +13,6 @@
     "@getalby/lightning-tools": "5.0.3",
     "@nostr-dev-kit/ndk": "2.10.0",
     "@reduxjs/toolkit": "2.2.6",
-    "@tiptap/core": "2.6.6",
-    "@tiptap/extension-link": "2.6.6",
-    "@tiptap/react": "2.6.6",
-    "@tiptap/starter-kit": "2.6.6",
     "axios": "1.7.3",
     "bech32": "2.0.0",
     "buffer": "6.0.3",
@@ -31,6 +27,7 @@
     "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",

src/components/Inputs.tsx

@@ -1,9 +1,38 @@
-import Link from '@tiptap/extension-link'
-import { EditorProvider, useCurrentEditor } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
+import ReactQuill from 'react-quill'
+import 'react-quill/dist/quill.snow.css'
+import '../styles/customQuillStyles.css'
 import '../styles/styles.css'
-import '../styles/tiptap.scss'
+
+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
@@ -48,9 +77,13 @@ export const InputField = React.memo(
             onChange={handleChange}
           ></textarea>
         ) : type === 'richtext' ? (
-          <RichTextEditor
+          <ReactQuill
-            content={value}
+            className='inputMain'
-            updateContent={(content) => onChange(name, content)}
+            formats={editorFormats}
+            modules={editorModules}
+            placeholder={placeholder}
+            value={value}
+            onChange={(content) => onChange(name, content)}
           />
         ) : (
           <input
@@ -105,164 +138,3 @@ export const CheckboxField = React.memo(
     </div>
   )
 )
-
-type RichTextEditorProps = {
-  content: string
-  updateContent: (updatedContent: string) => void
-}
-
-const RichTextEditor = ({ content, updateContent }: RichTextEditorProps) => {
-  return (
-    <div className='inputMain'>
-      <EditorProvider
-        slotBefore={<MenuBar />}
-        extensions={[StarterKit, Link]}
-        content={content}
-        onUpdate={({ editor }) => {
-          // Update the state when the editor content changes
-          updateContent(editor.getHTML())
-        }}
-      ></EditorProvider>
-    </div>
-  )
-}
-
-const MenuBar = () => {
-  const { editor } = useCurrentEditor()
-
-  if (!editor) {
-    return null
-  }
-
-  const setLink = () => {
-    const url = prompt('URL')
-    if (url) {
-      return editor.chain().focus().setLink({ href: url }).run()
-    }
-
-    return false
-  }
-
-  const unsetLink = () => editor.chain().focus().unsetLink().run()
-
-  const buttons: MenuBarButtonProps[] = [
-    {
-      label: 'Bold',
-      disabled: !editor.can().chain().focus().toggleBold().run(),
-      isActive: editor.isActive('bold'),
-      onClick: () => editor.chain().focus().toggleBold().run()
-    },
-    {
-      label: 'Italic',
-      disabled: !editor.can().chain().focus().toggleItalic().run(),
-      isActive: editor.isActive('italic'),
-      onClick: () => editor.chain().focus().toggleItalic().run()
-    },
-    {
-      label: 'Strike',
-      disabled: !editor.can().chain().focus().toggleStrike().run(),
-      isActive: editor.isActive('strike'),
-      onClick: () => editor.chain().focus().toggleStrike().run()
-    },
-    {
-      label: 'Clear marks',
-      onClick: () => editor.chain().focus().unsetAllMarks().run()
-    },
-    {
-      label: 'Clear nodes',
-      onClick: () => editor.chain().focus().clearNodes().run()
-    },
-    {
-      label: 'Paragraph',
-      isActive: editor.isActive('paragraph'),
-      onClick: () => editor.chain().focus().toggleStrike().run()
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ...[1, 2, 3, 4, 5, 6].map((level: any) => ({
-      label: `H${level}`,
-      isActive: editor.isActive('heading', { level }),
-      onClick: () => editor.chain().focus().toggleHeading({ level }).run()
-    })),
-    {
-      label: 'Bullet list',
-      isActive: editor.isActive('bulletList'),
-      onClick: () => editor.chain().focus().toggleBulletList().run()
-    },
-    {
-      label: 'Ordered list',
-      isActive: editor.isActive('orderedList'),
-      onClick: () => editor.chain().focus().toggleOrderedList().run()
-    },
-    {
-      label: 'Code block',
-      isActive: editor.isActive('codeBlock'),
-      onClick: () => editor.chain().focus().toggleCodeBlock().run()
-    },
-    {
-      label: 'Blockquote',
-      isActive: editor.isActive('blockquote'),
-      onClick: () => editor.chain().focus().toggleBlockquote().run()
-    },
-    {
-      label: 'Link',
-      isActive: editor.isActive('link'),
-      onClick: editor.isActive('link') ? unsetLink : setLink
-    },
-    {
-      label: 'Horizontal rule',
-      onClick: () => editor.chain().focus().setHorizontalRule().run()
-    },
-    {
-      label: 'Hard break',
-      onClick: () => editor.chain().focus().setHardBreak().run()
-    },
-    {
-      label: 'Undo',
-      disabled: !editor.can().chain().focus().undo().run(),
-      onClick: () => editor.chain().focus().undo().run()
-    },
-    {
-      label: 'Redo',
-      disabled: !editor.can().chain().focus().redo().run(),
-      onClick: () => editor.chain().focus().redo().run()
-    }
-  ]
-
-  return (
-    <div className='control-group'>
-      <div className='button-group'>
-        {buttons.map(({ label, disabled, isActive, onClick }) => (
-          <MenuBarButton
-            key={label}
-            label={label}
-            disabled={disabled}
-            isActive={isActive}
-            onClick={onClick}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-interface MenuBarButtonProps {
-  label: string
-  isActive?: boolean
-  disabled?: boolean
-  onClick: () => boolean
-}
-
-const MenuBarButton = ({
-  label,
-  isActive = false,
-  disabled = false,
-  onClick
-}: MenuBarButtonProps) => (
-  <button
-    onClick={onClick}
-    disabled={disabled}
-    className={`btn btnMain btnMainTipTap ${isActive ? 'is-active' : ''}`}
-  >
-    {label}
-  </button>
-)

src/pages/innerMod.tsx

@@ -1,6 +1,3 @@
-import Link from '@tiptap/extension-link'
-import { EditorContent, useEditor } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
 import { formatDate } from 'date-fns'
 import { Filter, nip19 } from 'nostr-tools'
 import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react'
@@ -9,14 +6,12 @@ import { toast } from 'react-toastify'
 import { BlogCard } from '../components/BlogCard'
 import { LoadingSpinner } from '../components/LoadingSpinner'
 import { ProfileSection } from '../components/ProfileSection'
-import { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
 import {
   MetadataController,
   RelayController,
   ZapController
 } from '../controllers'
 import { useAppSelector, useDidMount } from '../hooks'
-import { getModsEditPageRoute } from '../routes'
 import '../styles/comments.css'
 import '../styles/downloads.css'
 import '../styles/innerPage.css'
@@ -37,9 +32,13 @@ import {
   getFilenameFromUrl,
   log,
   LogType,
+  sanitizeAndAddTargetBlank,
   unformatNumber
 } from '../utils'
 
+import { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
+import { getModsEditPageRoute } from '../routes'
+
 export const InnerModPage = () => {
   const { naddr } = useParams()
   const [modData, setModData] = useState<ModDetails>()
@@ -350,12 +349,6 @@ const Body = ({
     }
   }
 
-  const editor = useEditor({
-    content: body,
-    extensions: [StarterKit, Link],
-    editable: false
-  })
-
   return (
     <div className='IBMSMSMBSSPost'>
       <div
@@ -373,7 +366,12 @@ const Body = ({
           className='IBMSMSMBSSPostBody'
           style={{ maxHeight: '250px', padding: '0 10px' }}
         >
-          <EditorContent editor={editor} />
+          <div
+            className='IBMSMSMBSSPostTitleText'
+            dangerouslySetInnerHTML={{
+              __html: sanitizeAndAddTargetBlank(body)
+            }}
+          />
           <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
             <p onClick={viewFullPost}>View</p>
           </div>

src/styles/post.css

@@ -40,10 +40,6 @@
   overflow: hidden;
 }
 
-.IBMSMSMBSSPostBody > div {
-  width: 100%;
-}
-
 .IBMSMSMBSSPostTitleHeading {
   width: 100%;
 }

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,28 +273,29 @@ 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 {
@@ -345,38 +346,6 @@ h6 {
   border: solid 1px rgba(255, 255, 255, 0.2);
 }
 
-.ProseMirror-focused {
-  outline: none !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-
-.control-group {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 10px;
-  padding: 10px;
-  border-radius: 5px;
-}
-
-.button-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.button-group button:disabled {
-  background-color: #cccccc;
-  cursor: not-allowed;
-}
-
-.button-group button.is-active {
-  background-color: rgb(255 255 255 / 15%);
-  color: rgb(255 255 255 / 85%);
-  font-weight: bold;
-  transform: scale(1);
-}
-
 .labelMain {
   margin: 0;
   color: rgba(255, 255, 255, 0.5);

src/styles/tiptap.scss

@@ -1,104 +0,0 @@
-/* Basic editor styles */
-.tiptap {
-  /* List styles */
-  p {
-    margin: 5px 0px;
-  }
-  ul,
-  ol {
-    padding: 0 1rem;
-    margin: 1.25rem 1rem 1.25rem 0.4rem;
-
-    li p {
-      margin-top: 0.25em;
-      margin-bottom: 0.25em;
-    }
-  }
-
-  /* Heading styles */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-    margin: 10px 0px;
-    text-wrap: pretty;
-  }
-
-  h1,
-  h2 {
-
-  }
-
-  h1 {
-    font-size: 1.4rem;
-  }
-
-  h2 {
-    font-size: 1.2rem;
-  }
-
-  h3 {
-    font-size: 1.1rem;
-  }
-
-  h4,
-  h5,
-  h6 {
-    font-size: 1rem;
-  }
-
-  code {
-    background-color: var(--purple-light); // todo: fix the color
-    border-radius: 0.4rem;
-    color: var(--black);
-    font-size: 0.85rem;
-    padding: 0.25em 0.3em;
-  }
-
-  pre {
-    background: var(--black); // todo: fix the color
-    color: var(--white);
-    font-family: 'JetBrainsMono', monospace;
-    margin: 1.5rem 0;
-    padding: 0.75rem 1rem;
-    background: #00000030;
-    border-radius: 5px;
-    border: solid 2px rebeccapurple;
-
-    code {
-      background: none;
-      color: inherit;
-      font-size: 0.8rem;
-      padding: 0;
-    }
-  }
-
-  blockquote {
-    border-radius: 0 10px 10px 0;
-    border-left: solid 6px rgba(255, 255, 255, 0.1);
-    padding: 25px;
-    background: #232323;
-    color: rgba(255, 255, 255, 0.75);
-    margin: 10px 0;
-  }
-}
-
-/* Toolbar Styling */
-.control-group {
-    padding: 5px 0px 15px 0px;
-    border-radius: 0px;
-    border-bottom: solid 1px rgb(255 255 255 / 10%);
-}
-
-.ProseMirror {
-  min-height: 75px;
-  }
-
-.btnMain.btnMainTipTap {
-    padding: 5px 10px;
-    height: 35px;
-    font-size: 14px;
-}