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