mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-20 10:15:17 -04:00
Move markdown split into redux (#1681)
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
parent
71e668cd17
commit
6594e1bb86
30 changed files with 217 additions and 226 deletions
|
@ -4,11 +4,11 @@
|
|||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import React, { Suspense, useCallback } from 'react'
|
||||
import React, { Suspense, useCallback, useMemo } from 'react'
|
||||
import { WaitSpinner } from '../../../common/wait-spinner/wait-spinner'
|
||||
|
||||
export interface CheatsheetLineProps {
|
||||
code: string
|
||||
markdown: string
|
||||
onTaskCheckedChange: (newValue: boolean) => void
|
||||
}
|
||||
|
||||
|
@ -17,7 +17,8 @@ const HighlightedCode = React.lazy(
|
|||
)
|
||||
const DocumentMarkdownRenderer = React.lazy(() => import('../../../markdown-renderer/document-markdown-renderer'))
|
||||
|
||||
export const CheatsheetLine: React.FC<CheatsheetLineProps> = ({ code, onTaskCheckedChange }) => {
|
||||
export const CheatsheetLine: React.FC<CheatsheetLineProps> = ({ markdown, onTaskCheckedChange }) => {
|
||||
const lines = useMemo(() => markdown.split('\n'), [markdown])
|
||||
const checkboxClick = useCallback(
|
||||
(lineInMarkdown: number, newValue: boolean) => {
|
||||
onTaskCheckedChange(newValue)
|
||||
|
@ -37,13 +38,13 @@ export const CheatsheetLine: React.FC<CheatsheetLineProps> = ({ code, onTaskChec
|
|||
<tr>
|
||||
<td>
|
||||
<DocumentMarkdownRenderer
|
||||
content={code}
|
||||
markdownContentLines={lines}
|
||||
baseUrl={'https://example.org'}
|
||||
onTaskCheckedChange={checkboxClick}
|
||||
/>
|
||||
</td>
|
||||
<td className={'markdown-body'}>
|
||||
<HighlightedCode code={code} wrapLines={true} startLineNumber={1} language={'markdown'} />
|
||||
<HighlightedCode code={markdown} wrapLines={true} startLineNumber={1} language={'markdown'} />
|
||||
</td>
|
||||
</tr>
|
||||
</Suspense>
|
||||
|
|
|
@ -51,7 +51,7 @@ export const CheatsheetTabContent: React.FC = () => {
|
|||
</thead>
|
||||
<tbody>
|
||||
{codes.map((code) => (
|
||||
<CheatsheetLine code={code} key={code} onTaskCheckedChange={setChecked} />
|
||||
<CheatsheetLine markdown={code} key={code} onTaskCheckedChange={setChecked} />
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue