fix: send "new lines as breaks" option to the renderer

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

frontend/src/components/editor-page/renderer-pane/hooks/use-send-additional-configuration-to-renderer.ts

@@ -20,6 +20,7 @@ export const useSendAdditionalConfigurationToRenderer = (
   forcedDarkMode: DarkModePreference = DarkModePreference.AUTO
 ): void => {
   const darkModePreference = useApplicationState((state) => state.darkMode.darkModePreference)
+  const newlinesAreBreaks = useApplicationState((state) => state.noteDetails.frontmatter.newlinesAreBreaks)
 
   const darkMode = useMemo(() => {
     return forcedDarkMode === DarkModePreference.AUTO ? darkModePreference : forcedDarkMode
@@ -29,9 +30,10 @@ export const useSendAdditionalConfigurationToRenderer = (
     useMemo(
       () => ({
         type: CommunicationMessageType.SET_ADDITIONAL_CONFIGURATION,
-        darkModePreference: darkMode
+        darkModePreference: darkMode,
+        newLinesAreBreaks: newlinesAreBreaks
       }),
-      [darkMode]
+      [darkMode, newlinesAreBreaks]
     ),
     rendererReady
   )

frontend/src/components/render-page/iframe-markdown-renderer.tsx

@@ -25,6 +25,7 @@ export const IframeMarkdownRenderer: React.FC = () => {
   const [scrollState, setScrollState] = useState<ScrollState>({ firstLineInView: 1, scrolledPercentage: 0 })
   const [baseConfiguration, setBaseConfiguration] = useState<BaseConfiguration | undefined>(undefined)
   const [slideOptions, setSlideOptions] = useState<SlideOptions>()
+  const [newLinesAreBreaks, setNewLinesAreBreaks] = useState<boolean>(true)
 
   const communicator = useRendererToEditorCommunicator()
 
@@ -54,7 +55,10 @@ export const IframeMarkdownRenderer: React.FC = () => {
 
   useRendererReceiveHandler(
     CommunicationMessageType.SET_ADDITIONAL_CONFIGURATION,
-    useCallback((values) => setDarkModePreference(values.darkModePreference), [])
+    useCallback((values) => {
+      setNewLinesAreBreaks(values.newLinesAreBreaks)
+      setDarkModePreference(values.darkModePreference)
+    }, [])
   )
 
   useRendererReceiveHandler(
@@ -123,6 +127,7 @@ export const IframeMarkdownRenderer: React.FC = () => {
             onScroll={onScroll}
             baseUrl={baseConfiguration.baseUrl}
             onHeightChange={onHeightChange}
+            newLinesAreBreaks={newLinesAreBreaks}
           />
         )
       case RendererType.SLIDESHOW:
@@ -132,6 +137,7 @@ export const IframeMarkdownRenderer: React.FC = () => {
             baseUrl={baseConfiguration.baseUrl}
             scrollState={scrollState}
             slideOptions={slideOptions}
+            newlinesAreBreaks={newLinesAreBreaks}
           />
         )
       case RendererType.SIMPLE:
@@ -142,12 +148,22 @@ export const IframeMarkdownRenderer: React.FC = () => {
             baseUrl={baseConfiguration.baseUrl}
             disableToc={true}
             onHeightChange={onHeightChange}
+            newLinesAreBreaks={newLinesAreBreaks}
           />
         )
       default:
         return null
     }
-  }, [baseConfiguration, markdownContentLines, onHeightChange, onMakeScrollSource, onScroll, scrollState, slideOptions])
+  }, [
+    baseConfiguration,
+    markdownContentLines,
+    newLinesAreBreaks,
+    onHeightChange,
+    onMakeScrollSource,
+    onScroll,
+    scrollState,
+    slideOptions
+  ])
 
   const extensionEventEmitter = useMemo(() => new EventEmitter2({ wildcard: true }), [])
 

frontend/src/components/render-page/markdown-document.tsx

@@ -24,6 +24,7 @@ export interface MarkdownDocumentProps extends RendererProps {
   additionalRendererClasses?: string
   disableToc?: boolean
   baseUrl: string
+  newLinesAreBreaks?: boolean
 }
 
 /**
@@ -38,6 +39,7 @@ export interface MarkdownDocumentProps extends RendererProps {
  * @param scrollState The current {@link ScrollState}
  * @param onHeightChange The callback to call if the height of the document changes
  * @param disableToc If the table of contents should be disabled.
+ * @param newLinesAreBreaks Defines if the provided markdown content should treat new lines as breaks
  * @see https://markdown-it.github.io/
  */
 export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
@@ -49,7 +51,8 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
   onScroll,
   scrollState,
   onHeightChange,
-  disableToc
+  disableToc,
+  newLinesAreBreaks
 }) => {
   const rendererRef = useRef<HTMLDivElement | null>(null)
   const [rendererSize, setRendererSize] = useState<DOMRectReadOnly>()
@@ -64,8 +67,6 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
     setInternalDocumentRenderPaneSize(entry.contentRect)
   )
 
-  const newlinesAreBreaks = useApplicationState((state) => state.noteDetails.frontmatter.newlinesAreBreaks)
-
   const contentLineCount = useMemo(() => markdownContentLines.length, [markdownContentLines])
   const [recalculateLineMarkers, onUserScroll] = useDocumentSyncScrolling(
     internalDocumentRenderPaneRef,
@@ -91,7 +92,7 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
           markdownContentLines={markdownContentLines}
           onLineMarkerPositionChanged={recalculateLineMarkers}
           baseUrl={baseUrl}
-          newlinesAreBreaks={newlinesAreBreaks}
+          newlinesAreBreaks={newLinesAreBreaks}
         />
       </div>
       <DocumentTocSidebar

frontend/src/components/render-page/window-post-message-communicator/rendering-message.ts

@@ -3,10 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { DarkModePreference } from '../../../redux/dark-mode/types';
-import type { ScrollState } from '../../editor-page/synced-scroll/scroll-props';
-import type { SlideOptions } from '@hedgedoc/commons';
-
+import type { DarkModePreference } from '../../../redux/dark-mode/types'
+import type { ScrollState } from '../../editor-page/synced-scroll/scroll-props'
+import type { SlideOptions } from '@hedgedoc/commons'
 
 export enum CommunicationMessageType {
   SET_MARKDOWN_CONTENT = 'SET_MARKDOWN_CONTENT',
@@ -31,6 +30,7 @@ export interface NoPayloadMessage<TYPE extends CommunicationMessageType> {
 export interface SetAdditionalConfigurationMessage {
   type: CommunicationMessageType.SET_ADDITIONAL_CONFIGURATION
   darkModePreference: DarkModePreference
+  newLinesAreBreaks: boolean
 }
 
 export interface ExtensionEvent {

frontend/src/redux/note-details/raw-note-frontmatter-parser/parser.ts

@@ -38,7 +38,7 @@ const parseRawNoteFrontmatter = (rawData: RawNoteFrontmatter): NoteFrontmatter =
     title: rawData.title ?? initialState.frontmatter.title,
     description: rawData.description ?? initialState.frontmatter.description,
     robots: rawData.robots ?? initialState.frontmatter.robots,
-    newlinesAreBreaks: rawData.breaks ?? initialState.frontmatter.newlinesAreBreaks,
+    newlinesAreBreaks: parseBoolean(rawData.breaks) ?? initialState.frontmatter.newlinesAreBreaks,
     GA: rawData.GA ?? initialState.frontmatter.GA,
     disqus: rawData.disqus ?? initialState.frontmatter.disqus,
     lang: parseLanguage(rawData),