new text editor added (tiptap) #24
2644
package-lock.json
generated
2644
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
|
)
|
||||||
|
@ -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>
|
||||||
|
@ -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
82
src/styles/tiptap.scss
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user