new text editor added (tiptap) #24

Merged
freakoverse merged 15 commits from staging into master 2024-08-27 12:59:11 +00:00
6 changed files with 945 additions and 2042 deletions
Showing only changes of commit 4de54f7688 - Show all commits

2644
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,7 +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",
"@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", "axios": "1.7.3",
"bech32": "2.0.0", "bech32": "2.0.0",
"buffer": "6.0.3", "buffer": "6.0.3",
@ -32,7 +35,6 @@
"react-router-dom": "^6.24.1", "react-router-dom": "^6.24.1",
"react-toastify": "10.0.5", "react-toastify": "10.0.5",
"react-window": "1.8.10", "react-window": "1.8.10",
"rehype-sanitize": "6.0.0",
"uuid": "10.0.0", "uuid": "10.0.0",
"webln": "0.3.2" "webln": "0.3.2"
}, },

View File

@ -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 React from 'react'
import rehypeSanitize from 'rehype-sanitize'
import '../styles/styles.css' import '../styles/styles.css'
import '../styles/tiptap.scss'
interface InputFieldProps { interface InputFieldProps {
label: string label: string
@ -46,13 +48,9 @@ export const InputField = React.memo(
onChange={handleChange} onChange={handleChange}
></textarea> ></textarea>
) : type === 'richtext' ? ( ) : type === 'richtext' ? (
<MDEditor <RichTextEditor
value={value} content={value}
onChange={(content) => onChange(name, content || '')} updateContent={(content) => onChange(name, content)}
previewOptions={{
rehypePlugins: [[rehypeSanitize]]
}}
preview='edit'
/> />
) : ( ) : (
<input <input
@ -107,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 ${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'
@ -35,11 +40,6 @@ import {
unformatNumber unformatNumber
} from '../utils' } 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 = () => { export const InnerModPage = () => {
const { naddr } = useParams() const { naddr } = useParams()
const [modData, setModData] = useState<ModDetails>() const [modData, setModData] = useState<ModDetails>()
@ -350,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
@ -367,19 +373,7 @@ const Body = ({
className='IBMSMSMBSSPostBody' className='IBMSMSMBSSPostBody'
style={{ maxHeight: '250px', padding: '0 10px' }} 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'> <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
<p onClick={viewFullPost}>View</p> <p onClick={viewFullPost}>View</p>
</div> </div>

View File

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

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

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