feat: use tiptap for rich text editor

package.json

@@ -13,7 +13,10 @@
     "@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",
+    "@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",
@@ -32,7 +35,6 @@
     "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,7 +1,9 @@
-import MDEditor from '@uiw/react-md-editor'
+import Link from '@tiptap/extension-link'
+import { EditorProvider, useCurrentEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
-import rehypeSanitize from 'rehype-sanitize'
 import '../styles/styles.css'
+import '../styles/tiptap.scss'
 
 interface InputFieldProps {
   label: string
@@ -46,13 +48,9 @@ export const InputField = React.memo(
             onChange={handleChange}
           ></textarea>
         ) : type === 'richtext' ? (
-          <MDEditor
+          <RichTextEditor
-            value={value}
+            content={value}
-            onChange={(content) => onChange(name, content || '')}
+            updateContent={(content) => onChange(name, content)}
-            previewOptions={{
-              rehypePlugins: [[rehypeSanitize]]
-            }}
-            preview='edit'
           />
         ) : (
           <input
@@ -107,3 +105,164 @@ 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 ${isActive ? 'is-active' : ''}`}
+  >
+    {label}
+  </button>
+)

src/pages/innerMod.tsx

@@ -1,3 +1,6 @@
+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'
@@ -6,12 +9,14 @@ 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'
@@ -35,11 +40,6 @@ import {
   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'
-
 export const InnerModPage = () => {
   const { naddr } = useParams()
   const [modData, setModData] = useState<ModDetails>()
@@ -350,6 +350,12 @@ const Body = ({
     }
   }
 
+  const editor = useEditor({
+    content: body,
+    extensions: [StarterKit, Link],
+    editable: false
+  })
+
   return (
     <div className='IBMSMSMBSSPost'>
       <div
@@ -367,19 +373,7 @@ const Body = ({
           className='IBMSMSMBSSPostBody'
           style={{ maxHeight: '250px', padding: '0 10px' }}
         >
-          <MDEditor.Markdown
+          <EditorContent editor={editor} />
-            source={body}
-            className='IBMSMSMBSSPostTitleText'
-            style={{ backgroundColor: 'inherit', whiteSpace: 'pre-wrap' }}
-            rehypePlugins={[[rehypeSanitize]]}
-            components={{
-              a: ({ ...props }) => (
-                <a {...props} target='_blank' rel='noopener noreferrer'>
-                  {props.children}
-                </a>
-              )
-            }}
-          />
           <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
             <p onClick={viewFullPost}>View</p>
           </div>

src/styles/styles.css

@@ -341,26 +341,42 @@ 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);
 }
 
+.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: #4caf50;
+  color: #ffffff;
+  font-weight: bold;
+  transform: scale(1.05);
+}
+
 .labelMain {
   margin: 0;
   color: rgba(255, 255, 255, 0.5);

src/styles/tiptap.scss

@@ -0,0 +1,82 @@
+/* Basic editor styles */
+.tiptap {
+  /* List styles */
+  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-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  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
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    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);
+  }
+}