57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
// https://xdsoft.net/jodit/play.html?spellcheck=true&language=ua&direction=ltr&saveHeightInStorage=true&saveModeInStorage=true&defaultActionOnPaste=insert_as_text&disablePlugins=ai-assistant%2Cmobile%2Cprint%2Cspeech-recognize%2Ctable%2Ctable-keyboard-navigation%2Cpowered-by-jodit%2Ciframe&minHeight=360&maxHeight=NaN&maxWidth=NaN&buttons=bold%2Citalic%2Cunderline%2Cstrikethrough%2Ceraser%2Cul%2Col%2Cfont%2Cfontsize%2Cparagraph%2ClineHeight%2Csuperscript%2Csubscript%2CclassSpan%2Cfile%2Cimage%2Cvideo%2Cspellcheck%2Ccut
|
|
//import JoditEditor from 'jodit-react'
|
|
import dynamic from 'next/dynamic'
|
|
import React, {useMemo, useRef, useState} from 'react'
|
|
|
|
const JoditEditor = dynamic(() => import('jodit-react'), {ssr: false})
|
|
|
|
export default function BasicEditor({
|
|
placeholder,
|
|
maxHeight,
|
|
handleChange
|
|
}: {
|
|
placeholder: string
|
|
maxHeight: number
|
|
handleChange: any
|
|
}) {
|
|
const editor = useRef(null)
|
|
const [content, setContent] = useState('')
|
|
|
|
const config = useMemo(
|
|
() => ({
|
|
readonly: false, // all options from https://xdsoft.net/jodit/docs/,
|
|
placeholder: placeholder || 'Start typings...',
|
|
spellcheck: true,
|
|
language: 'ua',
|
|
saveHeightInStorage: true,
|
|
saveModeInStorage: true,
|
|
//defaultActionOnPaste: 'insert_as_text',
|
|
disablePlugins:
|
|
'ai-assistant,mobile,print,speech-recognize,table,table-keyboard-navigation,powered-by-jodit,iframe',
|
|
minHeight: maxHeight || 320,
|
|
maxHeight: 1100,
|
|
// maxWidth: 992,
|
|
uploader: {
|
|
insertImageAsBase64URI: true,
|
|
imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'svg', 'webp']
|
|
},
|
|
buttons:
|
|
'bold,italic,underline,strikethrough,eraser,ul,ol,font,fontsize,paragraph,lineHeight,superscript,subscript,classSpan,file,image,video,spellcheck,cut'
|
|
}),
|
|
[placeholder, maxHeight]
|
|
)
|
|
|
|
return (
|
|
<JoditEditor
|
|
ref={editor}
|
|
value={content}
|
|
config={config}
|
|
tabIndex={1} // tabIndex of textarea
|
|
onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
|
|
onChange={handleChange}
|
|
/>
|
|
)
|
|
}
|