fix: wrapper md operators
This commit is contained in:
Joshua Shoemaker
parent
84a2b6bec2
commit
47cda8d0c8
@ -4,7 +4,7 @@ import { useProject } from '../../context/Project/provider'
|
||||
import type { DiffOnMount } from '@monaco-editor/react/'
|
||||
import TextEditorButtons from './TextEditorButtons'
|
||||
import createDiffEditorInteractions from '../../useCases/createDiffEditorInteractions'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import TextPreview from './TextPreview'
|
||||
|
||||
let editorInteractions: ReturnType<typeof createDiffEditorInteractions>
|
||||
|
||||
@ -34,24 +34,27 @@ const TextEditor = () => {
|
||||
}
|
||||
|
||||
const requestProcessedArea = async () => {
|
||||
let response
|
||||
try {
|
||||
response = await getProcessedAreasByDocumentId(selectedDocumentId)
|
||||
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) }
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setEditorValue('# No Areas on Document were textualized')
|
||||
}
|
||||
}
|
||||
requestProcessedArea()
|
||||
}, [selectedDocumentId, getProcessedAreasByDocumentId])
|
||||
}, [selectedDocumentId, getProcessedAreasByDocumentId])
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
setEditorHeight(window.innerHeight - 200)
|
||||
})
|
||||
|
||||
return <div className='relative m-0 p-0'>
|
||||
{ isEditorReady
|
||||
return <div className='relative m-0 p-0'>
|
||||
{isEditorReady
|
||||
? <TextEditorButtons
|
||||
isPreviewOpen={isPreviewOpen}
|
||||
togglePreview={() => setIsPreviewOpen(!isPreviewOpen)}
|
||||
editorInteractions={editorInteractions}
|
||||
/>
|
||||
@ -65,28 +68,8 @@ return <div className='relative m-0 p-0'>
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
|
||||
{isPreviewOpen
|
||||
? <div
|
||||
className='absolute w-1/2 top-[30px] bg-white overflow-y-scroll p-0 m-0'
|
||||
style={{'height': `${editorHeight}px`}}>
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
h1: ({node, ...props}) => <h1 {...props} className='font-extrabold text-2xl' />,
|
||||
h2: ({node, ...props}) => <h2 {...props} className='font-extrabold text-xl' />,
|
||||
h3: ({node, ...props}) => <h3 {...props} className='font-extrabold text-lg' />,
|
||||
h4: ({node, ...props}) => <h4 {...props} className='font-extrabold text-base' />,
|
||||
h5: ({node, ...props}) => <h5 {...props} className='font-bold text-base' />,
|
||||
h6: ({node, ...props}) => <h6 {...props} className='font-semibold text-base' />,
|
||||
ul: ({node, ...props}) => <ul {...props} className='list-disc list-inside ml-2' />,
|
||||
ol: ({node, ...props}) => <ol {...props} className='list-decimal list-inside ml-2' />,
|
||||
}}
|
||||
>
|
||||
{modifiedEditorValue}
|
||||
</ReactMarkdown>
|
||||
{ isPreviewOpen ? <TextPreview markdown={modifiedEditorValue} height={editorHeight} /> : '' }
|
||||
</div>
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
export default TextEditor
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ListBulletIcon } from '@heroicons/react/20/solid'
|
||||
import { EyeIcon } from '@heroicons/react/24/outline'
|
||||
import { ListBulletIcon, MinusIcon } from '@heroicons/react/20/solid'
|
||||
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline'
|
||||
import createDiffEditorInteractions, { MarkdownOperator } from '../../useCases/createDiffEditorInteractions'
|
||||
|
||||
function classNames(...classes: any[]) {
|
||||
@ -8,6 +8,7 @@ function classNames(...classes: any[]) {
|
||||
|
||||
type Props = {
|
||||
editorInteractions: ReturnType<typeof createDiffEditorInteractions>
|
||||
isPreviewOpen: boolean
|
||||
togglePreview: () => void
|
||||
}
|
||||
|
||||
@ -17,16 +18,20 @@ const TextEditorButtons = (props: Props) => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePreview}
|
||||
className="relative -ml-px inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-0 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
className={classNames(
|
||||
'relative -ml-px inline-flex items-center rounded-l-md border',
|
||||
'border-gray-300 bg-white px-2 py-0 text-sm font-medium text-gray-500',
|
||||
'hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none',
|
||||
'focus:ring-1 focus:ring-indigo-500'
|
||||
)}>
|
||||
<span className="sr-only">Next</span>
|
||||
<EyeIcon className="h-5 w-5" aria-hidden="true" />
|
||||
{props.isPreviewOpen ? <EyeSlashIcon className="h-5 w-5" aria-hidden="true" /> : <EyeIcon className="h-5 w-5" aria-hidden="true" />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editorInteractions.insertMarkdownOperator(MarkdownOperator.H1)}
|
||||
className={classNames(
|
||||
'text-lg relative inline-flex items-center rounded-l-md border',
|
||||
'text-lg relative inline-flex items-center border',
|
||||
'border-gray-300 bg-white px-2 py-0 text-gray-700 hover:bg-gray-50',
|
||||
'focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1',
|
||||
'focus:ring-indigo-500 font-extrabold',
|
||||
@ -75,7 +80,7 @@ const TextEditorButtons = (props: Props) => {
|
||||
type="button"
|
||||
onClick={() => editorInteractions.insertMarkdownOperator(MarkdownOperator.ITALLICS)}
|
||||
className={classNames(
|
||||
'text-sm relative inline-flex items-center rounded-r-md border',
|
||||
'text-sm relative inline-flex items-center border',
|
||||
'border-gray-300 bg-white px-2 py-0 text-gray-700 hover:bg-gray-50',
|
||||
'focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1',
|
||||
'focus:ring-indigo-500 italic font-serif',
|
||||
@ -88,7 +93,7 @@ const TextEditorButtons = (props: Props) => {
|
||||
type="button"
|
||||
onClick={() => editorInteractions.insertMarkdownOperator(MarkdownOperator.BOLD)}
|
||||
className={classNames(
|
||||
'text-sm relative inline-flex items-center rounded-r-md border',
|
||||
'text-sm relative inline-flex items-center border',
|
||||
'border-gray-300 bg-white px-2 py-0 text-gray-700 hover:bg-gray-50',
|
||||
'focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1',
|
||||
'focus:ring-indigo-500 font-extrabold',
|
||||
@ -101,7 +106,7 @@ const TextEditorButtons = (props: Props) => {
|
||||
type="button"
|
||||
onClick={() => editorInteractions.insertMarkdownOperator(MarkdownOperator.BULLET)}
|
||||
className={classNames(
|
||||
'text-sm relative inline-flex items-center rounded-r-md border',
|
||||
'text-sm relative inline-flex items-center border',
|
||||
'border-gray-300 bg-white px-2 py-0 text-gray-700 hover:bg-gray-50',
|
||||
'focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1',
|
||||
'focus:ring-indigo-500 italic',
|
||||
@ -109,6 +114,19 @@ const TextEditorButtons = (props: Props) => {
|
||||
<span className="sr-only">Bullet</span>
|
||||
<ListBulletIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editorInteractions.insertMarkdownOperator(MarkdownOperator.DIVIDER)}
|
||||
className={classNames(
|
||||
'text-sm relative inline-flex items-center rounded-r-md border',
|
||||
'border-gray-300 bg-white px-2 py-0 text-gray-700 hover:bg-gray-50',
|
||||
'focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1',
|
||||
'focus:ring-indigo-500 italic',
|
||||
)}>
|
||||
<span className="sr-only">Divider</span>
|
||||
<MinusIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
|
||||
|
||||
28
frontend/components/workspace/TextPreview.tsx
Normal file
28
frontend/components/workspace/TextPreview.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
|
||||
|
||||
type Props = { markdown: string, height: number }
|
||||
|
||||
const TextPreview = (props: Props) => (
|
||||
<div
|
||||
className='absolute w-1/2 top-[30px] bg-white overflow-y-scroll p-0 m-0'
|
||||
style={{ 'height': `${props.height}px` }}>
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
h1: ({ node, ...props }) => <h1 {...props} className='font-extrabold text-2xl' />,
|
||||
h2: ({ node, ...props }) => <h2 {...props} className='font-extrabold text-xl' />,
|
||||
h3: ({ node, ...props }) => <h3 {...props} className='font-extrabold text-lg' />,
|
||||
h4: ({ node, ...props }) => <h4 {...props} className='font-extrabold text-base' />,
|
||||
h5: ({ node, ...props }) => <h5 {...props} className='font-bold text-base' />,
|
||||
h6: ({ node, ...props }) => <h6 {...props} className='font-semibold text-base' />,
|
||||
ul: ({ node, ...props }) => <ul {...props} className='list-disc list-inside ml-2' />,
|
||||
ol: ({ node, ...props }) => <ol {...props} className='list-decimal list-inside ml-2' />,
|
||||
em: ({ node, ...props }) => <em {...props} className='italic font-light' />,
|
||||
p: ({ node, ...props }) => <p {...props} className='text-base mb-2' />,
|
||||
}}
|
||||
>
|
||||
{props.markdown}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default TextPreview
|
||||
@ -5,9 +5,10 @@ export enum MarkdownOperator {
|
||||
H2 = '## ',
|
||||
H3 = '### ',
|
||||
H4 = '#### ',
|
||||
ITALLICS = '__',
|
||||
ITALLICS = '_',
|
||||
BOLD = '**',
|
||||
BULLET = '* ',
|
||||
DIVIDER = '\n\n---\n\n'
|
||||
}
|
||||
|
||||
const wrapperOperators = [
|
||||
@ -15,7 +16,7 @@ const wrapperOperators = [
|
||||
MarkdownOperator.BOLD
|
||||
]
|
||||
|
||||
const createDiffEditorInteractions = (editor: monaco.editor.IStandaloneDiffEditor)=> {
|
||||
const createDiffEditorInteractions = (editor: monaco.editor.IStandaloneDiffEditor) => {
|
||||
const modifiedEditor = editor.getModifiedEditor()
|
||||
const originalEditor = editor.getOriginalEditor()
|
||||
|
||||
@ -30,35 +31,41 @@ const createDiffEditorInteractions = (editor: monaco.editor.IStandaloneDiffEdito
|
||||
|
||||
const doesSelectionHaveRange = (endLineNumber > startLineNumber) || (endColumn > startColumn)
|
||||
|
||||
const lineOfCursor = startLineNumber
|
||||
const lengthOfLine = (modifiedEditor.getModel()?.getLineLength(lineOfCursor) || 1) + 1
|
||||
|
||||
let range: monaco.IRange = { startColumn, startLineNumber, endColumn, endLineNumber, }
|
||||
let newText = modifiedEditor.getModel()?.getValueInRange(range) || ''
|
||||
|
||||
if (wrapperOperators.includes(operator)) {
|
||||
if (!doesSelectionHaveRange) {
|
||||
range = {
|
||||
startLineNumber: lineOfCursor,
|
||||
endLineNumber: lineOfCursor,
|
||||
startColumn: 0,
|
||||
endColumn: lengthOfLine
|
||||
}
|
||||
}
|
||||
const lineOfCursor = startLineNumber
|
||||
const lengthOfLine = (modifiedEditor.getModel()?.getLineLength(lineOfCursor) || 1) + 1
|
||||
|
||||
newText = `${operator}${modifiedEditor.getModel()?.getValueInRange(range)}${operator}`
|
||||
} else {
|
||||
const wordAtStartPosition = modifiedEditor.getModel()?.getWordAtPosition({
|
||||
column:startColumn, lineNumber: startLineNumber
|
||||
column: startColumn, lineNumber: startLineNumber
|
||||
})
|
||||
|
||||
if (!doesSelectionHaveRange && wordAtStartPosition) {
|
||||
if (operator == MarkdownOperator.DIVIDER) {
|
||||
console.log('lineOfCursor:', lineOfCursor)
|
||||
console.log('lengthOfLine:', lengthOfLine)
|
||||
range = {
|
||||
startLineNumber,
|
||||
startColumn: lengthOfLine,
|
||||
endLineNumber,
|
||||
endColumn: lengthOfLine,
|
||||
}
|
||||
|
||||
newText = `${operator}`
|
||||
} else if (wrapperOperators.includes(operator)) {
|
||||
if (!doesSelectionHaveRange && wordAtStartPosition) range = {
|
||||
startLineNumber,
|
||||
startColumn: wordAtStartPosition.startColumn,
|
||||
endLineNumber,
|
||||
endColumn: wordAtStartPosition.endColumn
|
||||
}
|
||||
newText = `${operator}${modifiedEditor.getModel()?.getValueInRange(range)}${operator}`
|
||||
} else {
|
||||
range = {
|
||||
startLineNumber,
|
||||
startColumn: 0,
|
||||
endLineNumber,
|
||||
endColumn: 0
|
||||
}
|
||||
|
||||
newText = `${operator}${modifiedEditor.getModel()?.getValueInRange(range)}`
|
||||
@ -68,6 +75,8 @@ const createDiffEditorInteractions = (editor: monaco.editor.IStandaloneDiffEdito
|
||||
range,
|
||||
text: newText
|
||||
}])
|
||||
|
||||
modifiedEditor.pushUndoStop()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user