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
All checks were successful
Release to Staging / build_and_release (push) Successful in 50s
This commit is contained in:
parent
26dcd5463d
commit
c429dfa322
2321
package-lock.json
generated
2321
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||||
},
|
},
|
||||||
|
@ -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
|
||||||
|
@ -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'>
|
||||||
|
@ -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 {
|
||||||
@ -274,7 +274,6 @@ h6 {
|
|||||||
|
|
||||||
.dropdownMainMenu.dropdownMainMenuAlt {
|
.dropdownMainMenu.dropdownMainMenuAlt {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdownMainMenu.dropdownMainMenuAlt > div {
|
.dropdownMainMenu.dropdownMainMenuAlt > div {
|
||||||
@ -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);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user