98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import { DiffEditor } from '@monaco-editor/react'
|
|
import { useEffect, useState } from 'react'
|
|
import { useProject } from '../../context/Project/provider'
|
|
import type { DiffOnMount } from '@monaco-editor/react/'
|
|
import TextEditorButtons from './TextEditorButtons'
|
|
import createDiffEditorInteractions from '../../useCases/createDiffEditorInteractions'
|
|
import TextPreview from './TextPreview'
|
|
import createDebounce from '../../utils/createDebounce'
|
|
|
|
let editorInteractions: ReturnType<typeof createDiffEditorInteractions>
|
|
|
|
const TextEditor = () => {
|
|
const { selectedDocumentId, getProcessedAreasByDocumentId, requestUpdateDocumentUserMarkdown, getUserMarkdownByDocumentId } = useProject()
|
|
const [editorHeight, setEditorHeight] = useState(window.innerHeight - 200)
|
|
const [editorValue, setEditorValue] = useState('')
|
|
const [isEditorReady, setIsEditorReady] = useState(false)
|
|
const [isPreviewOpen, setIsPreviewOpen] = useState(false)
|
|
const [modifiedEditorValue, setModifiedEditorValue] = useState('')
|
|
|
|
const handleEditorDidMount: DiffOnMount = async (editor, monaco) => {
|
|
const currentDocumentId = selectedDocumentId
|
|
|
|
editorInteractions = createDiffEditorInteractions(editor)
|
|
const modifiedEditor = editor.getModifiedEditor()
|
|
const originalEditor = editor.getOriginalEditor()
|
|
|
|
setModifiedEditorValue(originalEditor.getValue())
|
|
|
|
try {
|
|
const initialStoredUserMarkdownResponse = await getUserMarkdownByDocumentId(selectedDocumentId)
|
|
if (initialStoredUserMarkdownResponse.value) {
|
|
setModifiedEditorValue(initialStoredUserMarkdownResponse.value)
|
|
modifiedEditor.getModel()?.setValue(initialStoredUserMarkdownResponse.value)
|
|
}
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
|
|
modifiedEditor.onDidChangeModelContent(createDebounce(async () => {
|
|
const modifiedMarkdown = modifiedEditor.getValue()
|
|
requestUpdateDocumentUserMarkdown(currentDocumentId, modifiedMarkdown)
|
|
setModifiedEditorValue(modifiedMarkdown)
|
|
}))
|
|
|
|
setIsEditorReady(true)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!selectedDocumentId) {
|
|
setEditorValue('# No Document Selected')
|
|
return
|
|
}
|
|
|
|
const requestProcessedArea = async () => {
|
|
try {
|
|
const response = await getProcessedAreasByDocumentId(selectedDocumentId)
|
|
if (!response || response.length === 0) return
|
|
const fullTextOfAreas = response.map(area => area.fullText + '\n').join('\n')
|
|
setEditorValue(fullTextOfAreas)
|
|
} catch (err) {
|
|
console.error(err)
|
|
setEditorValue('# No Areas on Document were textualized')
|
|
}
|
|
}
|
|
requestProcessedArea()
|
|
}, [selectedDocumentId, getProcessedAreasByDocumentId])
|
|
|
|
window.addEventListener('resize', () => {
|
|
setEditorHeight(window.innerHeight - 200)
|
|
})
|
|
|
|
return <div className='relative m-0 p-0'>
|
|
{isEditorReady
|
|
? <TextEditorButtons
|
|
isPreviewOpen={isPreviewOpen}
|
|
togglePreview={() => setIsPreviewOpen(!isPreviewOpen)}
|
|
editorInteractions={editorInteractions}
|
|
/>
|
|
: ''
|
|
}
|
|
<DiffEditor
|
|
original={editorValue}
|
|
modified={modifiedEditorValue}
|
|
language='markdown'
|
|
height={`${editorHeight}px`}
|
|
onMount={handleEditorDidMount}
|
|
options={{
|
|
renderMarginRevertIcon: true,
|
|
enableSplitViewResizing: false,
|
|
}}
|
|
/>
|
|
|
|
{isPreviewOpen ? <TextPreview markdown={modifiedEditorValue} height={editorHeight} /> : ''}
|
|
</div>
|
|
}
|
|
|
|
export default TextEditor
|