fix: use @uiw/react-md-editor as rich text editor and displaying markdown
All checks were successful
Release to Staging / build_and_release (push) Successful in 50s

This commit is contained in:
daniyal 2024-08-27 00:35:37 +05:00
parent 26dcd5463d
commit c429dfa322
5 changed files with 2031 additions and 413 deletions

2321
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,6 +13,7 @@
"@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",
"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,11 +28,11 @@
"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",
"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,39 +1,8 @@
import MDEditor from '@uiw/react-md-editor'
import React from 'react' import React from 'react'
import ReactQuill from 'react-quill' import rehypeSanitize from 'rehype-sanitize'
import 'react-quill/dist/quill.snow.css'
import '../styles/customQuillStyles.css'
import '../styles/styles.css' import '../styles/styles.css'
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
description?: string description?: string
@ -77,13 +46,13 @@ export const InputField = React.memo(
onChange={handleChange} onChange={handleChange}
></textarea> ></textarea>
) : type === 'richtext' ? ( ) : type === 'richtext' ? (
<ReactQuill <MDEditor
className='inputMain'
formats={editorFormats}
modules={editorModules}
placeholder={placeholder}
value={value} value={value}
onChange={(content) => onChange(name, content)} onChange={(content) => onChange(name, content || '')}
previewOptions={{
rehypePlugins: [[rehypeSanitize]]
}}
preview='edit'
/> />
) : ( ) : (
<input <input

View File

@ -32,10 +32,11 @@ import {
getFilenameFromUrl, getFilenameFromUrl,
log, log,
LogType, LogType,
sanitizeAndAddTargetBlank,
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 { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
import { getModsEditPageRoute } from '../routes' import { getModsEditPageRoute } from '../routes'
@ -366,10 +367,17 @@ const Body = ({
className='IBMSMSMBSSPostBody' className='IBMSMSMBSSPostBody'
style={{ maxHeight: '250px', padding: '0 10px' }} style={{ maxHeight: '250px', padding: '0 10px' }}
> >
<div <MDEditor.Markdown
source={body}
className='IBMSMSMBSSPostTitleText' className='IBMSMSMBSSPostTitleText'
dangerouslySetInnerHTML={{ style={{ backgroundColor: 'inherit', whiteSpace: 'pre-wrap' }}
__html: sanitizeAndAddTargetBlank(body) 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'>

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 {
@ -342,6 +341,22 @@ 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);
} }