Move markdown split into redux (#1681)

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/app-bar/help-button/cheatsheet-line.tsx

@@ -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>

src/components/editor-page/app-bar/help-button/cheatsheet-tab-content.tsx

@@ -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>

src/components/editor-page/editor-document-renderer/editor-document-renderer.tsx

@@ -7,10 +7,10 @@
 import React from 'react'
 import type { RenderIframeProps } from '../renderer-pane/render-iframe'
 import { RenderIframe } from '../renderer-pane/render-iframe'
-import { useNoteMarkdownContentWithoutFrontmatter } from '../../../hooks/common/use-note-markdown-content-without-frontmatter'
 import { useSendFrontmatterInfoFromReduxToRenderer } from '../renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
+import { useTrimmedNoteMarkdownContentWithoutFrontmatter } from '../../../hooks/common/use-trimmed-note-markdown-content-without-frontmatter'
 
-export type EditorDocumentRendererProps = Omit<RenderIframeProps, 'markdownContent'>
+export type EditorDocumentRendererProps = Omit<RenderIframeProps, 'markdownContentLines'>
 
 /**
  * Renders the markdown content from the global application state with the iframe renderer.
@@ -18,9 +18,8 @@ export type EditorDocumentRendererProps = Omit<RenderIframeProps, 'markdownConte
  * @param props Every property from the {@link RenderIframe} except the markdown content.
  */
 export const EditorDocumentRenderer: React.FC<EditorDocumentRendererProps> = (props) => {
-  const markdownContent = useNoteMarkdownContentWithoutFrontmatter()
-
   useSendFrontmatterInfoFromReduxToRenderer()
+  const trimmedContentLines = useTrimmedNoteMarkdownContentWithoutFrontmatter()
 
-  return <RenderIframe markdownContent={markdownContent} {...props} />
+  return <RenderIframe {...props} markdownContentLines={trimmedContentLines} />
 }

src/components/editor-page/renderer-pane/hooks/use-send-markdown-to-renderer.ts

@@ -11,16 +11,16 @@ import { CommunicationMessageType } from '../../../render-page/window-post-messa
 /**
  * Sends the given markdown content to the renderer.
  *
- * @param markdownContent The markdown content to send.
+ * @param markdownContentLines The markdown content to send.
  */
-export const useSendMarkdownToRenderer = (markdownContent: string): void => {
+export const useSendMarkdownToRenderer = (markdownContentLines: string[]): void => {
   return useSendToRenderer(
     useMemo(
       () => ({
         type: CommunicationMessageType.SET_MARKDOWN_CONTENT,
-        content: markdownContent
+        content: markdownContentLines
       }),
-      [markdownContent]
+      [markdownContentLines]
     )
   )
 }

src/components/editor-page/renderer-pane/render-iframe.tsx

@@ -37,7 +37,7 @@ export interface RenderIframeProps extends RendererProps {
 const log = new Logger('RenderIframe')
 
 export const RenderIframe: React.FC<RenderIframeProps> = ({
-  markdownContent,
+  markdownContentLines,
   onTaskCheckedChange,
   scrollState,
   onFirstHeadingChange,
@@ -133,7 +133,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
   useEffectOnRenderTypeChange(rendererType, onIframeLoad)
   useSendScrollState(scrollState)
   useSendDarkModeStatusToRenderer(forcedDarkMode)
-  useSendMarkdownToRenderer(markdownContent)
+  useSendMarkdownToRenderer(markdownContentLines)
 
   return (
     <Fragment>