Merge pull request 'new text editor added (tiptap)' (#24) from staging into master
All checks were successful
Release to Staging / build_and_release (push) Successful in 46s

Reviewed-on: #24
This commit is contained in:
freakoverse 2024-08-27 12:59:11 +00:00
commit e06a8d6e96
7 changed files with 999 additions and 452 deletions

1035
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,6 +13,10 @@
"@getalby/lightning-tools": "5.0.3", "@getalby/lightning-tools": "5.0.3",
"@nostr-dev-kit/ndk": "2.10.0", "@nostr-dev-kit/ndk": "2.10.0",
"@reduxjs/toolkit": "2.2.6", "@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", "axios": "1.7.3",
"bech32": "2.0.0", "bech32": "2.0.0",
"buffer": "6.0.3", "buffer": "6.0.3",
@ -27,7 +31,6 @@
"react": "^18.3.1", "react": "^18.3.1",
"react-countdown": "2.3.5", "react-countdown": "2.3.5",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-quill": "2.0.0",
"react-redux": "9.1.2", "react-redux": "9.1.2",
"react-router-dom": "^6.24.1", "react-router-dom": "^6.24.1",
"react-toastify": "10.0.5", "react-toastify": "10.0.5",

View File

@ -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 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/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 { interface InputFieldProps {
label: string label: string
@ -77,13 +48,9 @@ export const InputField = React.memo(
onChange={handleChange} onChange={handleChange}
></textarea> ></textarea>
) : type === 'richtext' ? ( ) : 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 <input
@ -138,3 +105,164 @@ export const CheckboxField = React.memo(
</div> </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>
)

View File

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

View File

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

View File

@ -47,27 +47,27 @@ h6 {
} }
h1 { h1 {
font-size: 38px font-size: 38px;
} }
h2 { h2 {
font-size: 32px font-size: 32px;
} }
h3 { h3 {
font-size: 24px font-size: 24px;
} }
h4 { h4 {
font-size: 20px font-size: 20px;
} }
h5 { h5 {
font-size: 18px font-size: 18px;
} }
h6 { h6 {
font-size: 16px font-size: 16px;
} }
.IBMSecMain { .IBMSecMain {
@ -273,17 +273,16 @@ h6 {
/* the 4 classes below here are a temp fix for the games dropdown stylings */ /* the 4 classes below here are a temp fix for the games dropdown stylings */
.dropdownMainMenu.dropdownMainMenuAlt { .dropdownMainMenu.dropdownMainMenuAlt {
max-height: unset!important; max-height: unset !important;
} }
.dropdownMainMenu.dropdownMainMenuAlt > div { .dropdownMainMenu.dropdownMainMenuAlt > div {
height: unset!important; height: unset !important;
} }
.dropdownMainMenu.dropdownMainMenuAlt > div > div { .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;
@ -293,9 +292,9 @@ h6 {
} }
.dropdownMainMenu.dropdownMainMenuAlt > div > div > div { .dropdownMainMenu.dropdownMainMenuAlt > div > div > div {
position: relative!important; position: relative !important;
left: unset!important; left: unset !important;
top: unset!important; top: unset !important;
} }
.dropdownMainMenuItem { .dropdownMainMenuItem {
@ -346,6 +345,38 @@ h6 {
border: solid 1px rgba(255, 255, 255, 0.2); 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 { .labelMain {
margin: 0; margin: 0;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);

104
src/styles/tiptap.scss Normal file
View File

@ -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;
}