added tons of features

components/shared/editor/jodit.tsx

@@ -0,0 +1,56 @@
+'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}
+		/>
+	)
+}