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

2323
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",
"@nostr-dev-kit/ndk": "2.10.0",
"@reduxjs/toolkit": "2.2.6",
"@uiw/react-md-editor": "4.0.4",
"axios": "1.7.3",
"bech32": "2.0.0",
"buffer": "6.0.3",
@ -27,11 +28,11 @@
"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",
"react-window": "1.8.10",
"rehype-sanitize": "6.0.0",
"uuid": "10.0.0",
"webln": "0.3.2"
},

View File

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

View File

@ -32,10 +32,11 @@ import {
getFilenameFromUrl,
log,
LogType,
sanitizeAndAddTargetBlank,
unformatNumber
} 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'
@ -366,10 +367,17 @@ const Body = ({
className='IBMSMSMBSSPostBody'
style={{ maxHeight: '250px', padding: '0 10px' }}
>
<div
<MDEditor.Markdown
source={body}
className='IBMSMSMBSSPostTitleText'
dangerouslySetInnerHTML={{
__html: sanitizeAndAddTargetBlank(body)
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'>

View File

@ -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 {
@ -273,29 +273,28 @@ h6 {
/* the 4 classes below here are a temp fix for the games dropdown stylings */
.dropdownMainMenu.dropdownMainMenuAlt {
max-height: unset!important;
max-height: unset !important;
}
.dropdownMainMenu.dropdownMainMenuAlt > div {
height: unset!important;
height: unset !important;
}
.dropdownMainMenu.dropdownMainMenuAlt > div > div {
height: unset!important;
width: 100%!important;
display: flex;
flex-direction: column;
gap: 5px;
max-height: 300px;
overflow: auto;
padding: 5px;
height: unset !important;
width: 100% !important;
display: flex;
flex-direction: column;
gap: 5px;
max-height: 300px;
overflow: auto;
padding: 5px;
}
.dropdownMainMenu.dropdownMainMenuAlt > div > div > div {
position: relative!important;
left: unset!important;
top: unset!important;
position: relative !important;
left: unset !important;
top: unset !important;
}
.dropdownMainMenuItem {
@ -342,6 +341,22 @@ h6 {
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 {
border: solid 1px rgba(255, 255, 255, 0.2);
}