Merge pull request 'new text editor added (tiptap)' (#24) from staging into master

Reviewed-on: #24

package.json

@@ -13,6 +13,10 @@
     "@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",
@@ -27,7 +31,6 @@
     "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,38 +1,9 @@
+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
@@ -77,13 +48,9 @@ export const InputField = React.memo(
             onChange={handleChange}
           ></textarea>
         ) : type === 'richtext' ? (
-          <ReactQuill
+          <RichTextEditor
-            className='inputMain'
+            content={value}
-            formats={editorFormats}
+            updateContent={(content) => onChange(name, content)}
-            modules={editorModules}
-            placeholder={placeholder}
-            value={value}
-            onChange={(content) => onChange(name, content)}
           />
         ) : (
           <input
@@ -138,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 btnMainTipTap ${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'
@@ -32,13 +37,9 @@ 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>()
@@ -349,6 +350,12 @@ const Body = ({
     }
   }
 
+  const editor = useEditor({
+    content: body,
+    extensions: [StarterKit, Link],
+    editable: false
+  })
+
   return (
     <div className='IBMSMSMBSSPost'>
       <div
@@ -366,12 +373,7 @@ const Body = ({
           className='IBMSMSMBSSPostBody'
           style={{ maxHeight: '250px', padding: '0 10px' }}
         >
-          <div
+          <EditorContent editor={editor} />
-            className='IBMSMSMBSSPostTitleText'
-            dangerouslySetInnerHTML={{
-              __html: sanitizeAndAddTargetBlank(body)
-            }}
-          />
           <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
             <p onClick={viewFullPost}>View</p>
           </div>

src/styles/post.css

@@ -40,6 +40,10 @@
   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 {
@@ -274,7 +274,6 @@ h6 {
 
 .dropdownMainMenu.dropdownMainMenuAlt {
   max-height: unset !important;
-
 }
 
 .dropdownMainMenu.dropdownMainMenuAlt > div {
@@ -346,6 +345,38 @@ 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

@@ -0,0 +1,104 @@
+/* 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;
+}