diff --git a/frontend/src/components/editor-page/renderer-pane/hooks/use-send-additional-configuration-to-renderer.ts b/frontend/src/components/editor-page/renderer-pane/hooks/use-send-additional-configuration-to-renderer.ts index da970de77..58fb103a0 100644 --- a/frontend/src/components/editor-page/renderer-pane/hooks/use-send-additional-configuration-to-renderer.ts +++ b/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 ) diff --git a/frontend/src/components/render-page/iframe-markdown-renderer.tsx b/frontend/src/components/render-page/iframe-markdown-renderer.tsx index 131cdb814..518d58d7d 100644 --- a/frontend/src/components/render-page/iframe-markdown-renderer.tsx +++ b/frontend/src/components/render-page/iframe-markdown-renderer.tsx @@ -25,6 +25,7 @@ export const IframeMarkdownRenderer: React.FC = () => { const [scrollState, setScrollState] = useState({ firstLineInView: 1, scrolledPercentage: 0 }) const [baseConfiguration, setBaseConfiguration] = useState(undefined) const [slideOptions, setSlideOptions] = useState() + const [newLinesAreBreaks, setNewLinesAreBreaks] = useState(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 }), []) diff --git a/frontend/src/components/render-page/markdown-document.tsx b/frontend/src/components/render-page/markdown-document.tsx index 1a6505ce1..9429b4655 100644 --- a/frontend/src/components/render-page/markdown-document.tsx +++ b/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 = ({ @@ -49,7 +51,8 @@ export const MarkdownDocument: React.FC = ({ onScroll, scrollState, onHeightChange, - disableToc + disableToc, + newLinesAreBreaks }) => { const rendererRef = useRef(null) const [rendererSize, setRendererSize] = useState() @@ -64,8 +67,6 @@ export const MarkdownDocument: React.FC = ({ 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 = ({ markdownContentLines={markdownContentLines} onLineMarkerPositionChanged={recalculateLineMarkers} baseUrl={baseUrl} - newlinesAreBreaks={newlinesAreBreaks} + newlinesAreBreaks={newLinesAreBreaks} /> { export interface SetAdditionalConfigurationMessage { type: CommunicationMessageType.SET_ADDITIONAL_CONFIGURATION darkModePreference: DarkModePreference + newLinesAreBreaks: boolean } export interface ExtensionEvent { diff --git a/frontend/src/redux/note-details/raw-note-frontmatter-parser/parser.ts b/frontend/src/redux/note-details/raw-note-frontmatter-parser/parser.ts index b3f58ff46..322ab6f94 100644 --- a/frontend/src/redux/note-details/raw-note-frontmatter-parser/parser.ts +++ b/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),