76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
|
|
|
|
import { useApp } from '../../contexts/AppContext'
|
|
import { useDarkModeContext } from '../../contexts/DarkModeContext'
|
|
import { openMarkdownFile, readTFileContent } from '../../utils/obsidian'
|
|
|
|
import { MemoizedSyntaxHighlighterWrapper } from './SyntaxHighlighterWrapper'
|
|
|
|
export default function MarkdownReferenceBlock({
|
|
filename,
|
|
startLine,
|
|
endLine,
|
|
language,
|
|
}: PropsWithChildren<{
|
|
filename: string
|
|
startLine: number
|
|
endLine: number
|
|
language?: string
|
|
}>) {
|
|
const app = useApp()
|
|
const { isDarkMode } = useDarkModeContext()
|
|
const [blockContent, setBlockContent] = useState<string | null>(null)
|
|
|
|
const wrapLines = useMemo(() => {
|
|
return !language || ['markdown'].includes(language)
|
|
}, [language])
|
|
|
|
useEffect(() => {
|
|
async function fetchBlockContent() {
|
|
const file = app.vault.getFileByPath(filename)
|
|
if (!file) {
|
|
setBlockContent(null)
|
|
return
|
|
}
|
|
const fileContent = await readTFileContent(file, app.vault)
|
|
const content = fileContent
|
|
.split('\n')
|
|
.slice(startLine - 1, endLine)
|
|
.join('\n')
|
|
setBlockContent(content)
|
|
}
|
|
|
|
fetchBlockContent()
|
|
}, [filename, startLine, endLine, app.vault])
|
|
|
|
const handleClick = () => {
|
|
openMarkdownFile(app, filename, startLine)
|
|
}
|
|
|
|
// TODO: Update styles
|
|
return (
|
|
blockContent && (
|
|
<div
|
|
className={`infio-chat-code-block ${filename ? 'has-filename' : ''}`}
|
|
onClick={handleClick}
|
|
>
|
|
<div className={'infio-chat-code-block-header'}>
|
|
{filename && (
|
|
<div className={'infio-chat-code-block-header-filename'}>
|
|
{filename}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<MemoizedSyntaxHighlighterWrapper
|
|
isDarkMode={isDarkMode}
|
|
language={language}
|
|
hasFilename={!!filename}
|
|
wrapLines={wrapLines}
|
|
>
|
|
{blockContent}
|
|
</MemoizedSyntaxHighlighterWrapper>
|
|
</div>
|
|
)
|
|
)
|
|
}
|