fix(frontend): migrate type changes

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

frontend/src/components/application-loader/application-loader.tsx

@@ -42,6 +42,8 @@ export const ApplicationLoader: React.FC<PropsWithChildren> = ({ children }) =>
           For further information look into the browser console.
         </Fragment>
       )
+    } else {
+      return null
     }
   }, [error])
 

frontend/src/components/application-loader/loading-screen/loading-screen.tsx

@@ -11,7 +11,7 @@ import React from 'react'
 import { Alert } from 'react-bootstrap'
 
 export interface LoadingScreenProps {
-  errorMessage?: string | ReactElement
+  errorMessage?: string | ReactElement | null
 }
 
 /**

frontend/src/components/common/highlighted-code/hooks/use-attach-line-numbers.tsx

@@ -14,13 +14,12 @@ import { Fragment, useMemo } from 'react'
  * @param lines The elements to wrap
  * @param startLineNumber The line number to start with. Will default to 1 if omitted.
  */
-export const useAttachLineNumbers = (
+export const useAttachLineNumbers = (lines: ReactElement[] | null, startLineNumber = 1): ReactElement | null => {
-  lines: undefined | ReactElement[],
+  return useMemo(() => {
-  startLineNumber = 1
+    if (lines === null) {
-): undefined | ReactElement[] =>
+      return null
-  useMemo(
+    }
-    () =>
+    const adjustedLines = lines.map((line, index) => (
-      lines?.map((line, index) => (
       <Fragment key={index}>
         <span {...cypressId('linenumber')} className={styles['linenumber']}>
           {startLineNumber + index}
@@ -29,6 +28,7 @@ export const useAttachLineNumbers = (
           {line}
         </div>
       </Fragment>
-      )),
+    ))
-    [startLineNumber, lines]
+    return <Fragment>{adjustedLines}</Fragment>
-  )
+  }, [startLineNumber, lines])
+}

frontend/src/components/common/highlighted-code/hooks/use-code-dom.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { HtmlToReact } from '../../../../components/common/html-to-react/html-to-react'
+import { HtmlToReact } from '../../html-to-react/html-to-react'
 import type { HLJSApi } from 'highlight.js'
 import type { ReactElement } from 'react'
 import React, { useMemo } from 'react'
@@ -16,10 +16,10 @@ import React, { useMemo } from 'react'
  * @param language The language of the code to use for highlighting
  * @return The react elements that represent the highlighted code
  */
-export const useCodeDom = (code: string, hljs: HLJSApi | undefined, language?: string): ReactElement[] | undefined => {
+export const useCodeDom = (code: string, hljs: HLJSApi | undefined, language?: string): ReactElement[] | null => {
   return useMemo(() => {
     if (!hljs) {
-      return
+      return null
     }
     if (!!language && hljs.listLanguages().includes(language)) {
       const highlightedHtml = hljs.highlight(code, { language }).value

frontend/src/components/common/renderer-iframe/hooks/use-send-additional-configuration-to-renderer.ts

@@ -20,7 +20,7 @@ export const useSendAdditionalConfigurationToRenderer = (rendererReady: boolean)
   useSendToRenderer(
     useMemo(() => {
       return newlinesAreBreaks === undefined
-        ? undefined
+        ? null
         : {
             type: CommunicationMessageType.SET_ADDITIONAL_CONFIGURATION,
             darkModePreference: darkModePreference,

frontend/src/components/common/renderer-iframe/hooks/use-send-scroll-state.ts

@@ -15,13 +15,13 @@ import { useMemo, useRef } from 'react'
  * @param scrollState The scroll state to send
  * @param rendererReady Defines if the target renderer is ready
  */
-export const useSendScrollState = (scrollState: ScrollState | undefined, rendererReady: boolean): void => {
+export const useSendScrollState = (scrollState: ScrollState | null, rendererReady: boolean): void => {
   const oldScrollState = useRef<ScrollState | undefined>(undefined)
 
   useSendToRenderer(
     useMemo(() => {
       if (!scrollState || equal(scrollState, oldScrollState.current)) {
-        return
+        return null
       }
       oldScrollState.current = scrollState
       return { type: CommunicationMessageType.SET_SCROLL_STATE, scrollState }

frontend/src/components/common/renderer-iframe/renderer-iframe.tsx

@@ -112,7 +112,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
     CommunicationMessageType.EXTENSION_EVENT,
     useMemo(() => {
       return eventEmitter === undefined
-        ? undefined
+        ? null
         : (values: ExtensionEvent) => eventEmitter.emit(values.eventName, values.payload)
     }, [eventEmitter])
   )
@@ -159,7 +159,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
   useSendAdditionalConfigurationToRenderer(rendererReady)
   useSendMarkdownToRenderer(markdownContentLines, rendererReady)
 
-  useSendScrollState(scrollState, rendererReady)
+  useSendScrollState(scrollState ?? null, rendererReady)
   useEditorReceiveHandler(
     CommunicationMessageType.SET_SCROLL_STATE,
     useCallback((values: SetScrollStateMessage) => onScroll?.(values.scrollState), [onScroll])

frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx

@@ -40,9 +40,7 @@ export const changeEditorContent = (view: EditorView, formatter: ContentFormatte
 export const useChangeEditorContentCallback = () => {
   const [codeMirrorRef] = useCodemirrorReferenceContext()
   return useMemo(() => {
-    if (codeMirrorRef) {
+    return !codeMirrorRef ? null : (callback: ContentFormatter) => changeEditorContent(codeMirrorRef, callback)
-      return (callback: ContentFormatter) => changeEditorContent(codeMirrorRef, callback)
-    }
   }, [codeMirrorRef])
 }
 

frontend/src/components/editor-page/editor-pane/editor-pane.tsx

@@ -59,14 +59,14 @@ export type EditorPaneProps = ScrollProps
  */
 export const EditorPane: React.FC<EditorPaneProps> = ({ scrollState, onScroll, onMakeScrollSource }) => {
   const { dispatchUiNotification } = useUiNotifications()
-  useApplyScrollState(scrollState)
+  useApplyScrollState(scrollState ?? null)
 
   const messageTransporter = useRealtimeConnection()
 
   useDisconnectOnUserLoginStatusChange(messageTransporter)
 
   const realtimeDoc = useRealtimeDoc()
-  const editorScrollExtension = useCodeMirrorScrollWatchExtension(onScroll)
+  const editorScrollExtension = useCodeMirrorScrollWatchExtension(onScroll ?? null)
   const tablePasteExtensions = useCodeMirrorTablePasteExtension()
   const fileInsertExtension = useCodeMirrorFileInsertExtension()
   const spellCheckExtension = useCodeMirrorSpellCheckExtension()

frontend/src/components/editor-page/editor-pane/hooks/codemirror-extensions/use-code-mirror-scroll-watch-extension.ts

@@ -35,7 +35,7 @@ export const extractScrollState = (view: EditorView): ScrollState => {
  * @param onScroll The callback that is used to post {@link ScrollState scroll states} when the editor view is scrolling.
  * @return The extensions that watches the scrolling in the editor.
  */
-export const useCodeMirrorScrollWatchExtension = (onScroll: OnScrollCallback): Extension => {
+export const useCodeMirrorScrollWatchExtension = (onScroll: OnScrollCallback | null): Extension => {
   const onEditorScroll = useCallback(
     (view: EditorView) => {
       if (!onScroll || !view) {

frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts

@@ -35,7 +35,7 @@ const applyScrollState = (view: EditorView, scrollState: ScrollState): void => {
  *
  * @param scrollState The scroll state that should be monitored
  */
-export const useApplyScrollState = (scrollState?: ScrollState): void => {
+export const useApplyScrollState = (scrollState: ScrollState | null): void => {
   const lastScrollPosition = useRef<ScrollState>()
   const [codeMirrorRef] = useCodemirrorReferenceContext()
 

frontend/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts

@@ -23,13 +23,13 @@ const calculateLineBasedPosition = (absolutePosition: number, lineStartIndexes:
 /**
  * Returns the line+character based position of the to-cursor, if available.
  */
-export const useLineBasedToPosition = (): LineBasedPosition | undefined => {
+export const useLineBasedToPosition = (): LineBasedPosition | null => {
   const lineStartIndexes = useApplicationState((state) => state.noteDetails?.markdownContent.lineStartIndexes ?? [])
   const selectionTo = useApplicationState((state) => state.noteDetails?.selection.to)
 
   return useMemo(() => {
     if (selectionTo === undefined) {
-      return undefined
+      return null
     }
     return calculateLineBasedPosition(selectionTo, lineStartIndexes)
   }, [selectionTo, lineStartIndexes])

frontend/src/components/editor-page/editor-pane/hooks/yjs/use-websocket-url.ts

@@ -13,7 +13,7 @@ const LOCAL_FALLBACK_URL = 'ws://localhost:8080/realtime/'
 /**
  * Provides the URL for the realtime endpoint.
  */
-export const useWebsocketUrl = (): URL | undefined => {
+export const useWebsocketUrl = (): URL | null => {
   const noteId = useApplicationState((state) => state.noteDetails?.id)
   const baseUrl = useBaseUrl()
 
@@ -34,7 +34,7 @@ export const useWebsocketUrl = (): URL | undefined => {
 
   return useMemo(() => {
     if (noteId === '' || noteId === undefined) {
-      return
+      return null
     }
     const url = new URL(websocketUrl)
     url.search = `?noteId=${noteId}`

frontend/src/components/editor-page/editor-pane/status-bar/selected-characters.tsx

@@ -16,7 +16,7 @@ export const SelectedCharacters: React.FC = () => {
 
   const selection = useApplicationState((state) => state.noteDetails?.selection)
   const count = useMemo(
-    () => (selection === undefined || selection.to === undefined ? undefined : selection.to - selection.from),
+    () => (selection === undefined || selection.to === undefined ? null : selection.to - selection.from),
     [selection]
   )
   const countTranslationOptions = useMemo(() => ({ count }), [count])

frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-text.tsx

@@ -20,7 +20,7 @@ export const TableSizeText: React.FC<TableSizeProps> = ({ tableSize }) => {
   useTranslation()
 
   const translationValues = useMemo(() => {
-    return tableSize ? { cols: tableSize.columns, rows: tableSize.rows } : undefined
+    return tableSize ? { cols: tableSize.columns, rows: tableSize.rows } : null
   }, [tableSize])
 
   if (!translationValues) {

frontend/src/components/editor-page/renderer-pane/hooks/use-on-scroll-with-line-offset.ts

@@ -13,15 +13,15 @@ import { useMemo } from 'react'
  * @param onScroll The callback that posts a scroll state
  * @return the modified callback that posts the same scroll state but with line offset
  */
-export const useOnScrollWithLineOffset = (onScroll: ScrollCallback | undefined): ScrollCallback | undefined => {
+export const useOnScrollWithLineOffset = (onScroll: ScrollCallback | null): ScrollCallback | null => {
   return useMemo(() => {
-    if (onScroll === undefined) {
+    if (onScroll === null) {
-      return undefined
+      return null
     } else {
       return (scrollState: ScrollState) => {
         const noteDetails = getGlobalState().noteDetails
         if (noteDetails === null) {
-          return undefined
+          return null
         }
         onScroll({
           firstLineInView: scrollState.firstLineInView + noteDetails.startOfContentLineOffset,

frontend/src/components/editor-page/renderer-pane/hooks/use-scroll-state-without-line-offset.ts

@@ -13,11 +13,11 @@ import { useMemo } from 'react'
  * @param scrollState The original scroll state with the line offset
  * @return the adjusted scroll state without the line offset
  */
-export const useScrollStateWithoutLineOffset = (scrollState: ScrollState | undefined): ScrollState | undefined => {
+export const useScrollStateWithoutLineOffset = (scrollState: ScrollState | null): ScrollState | null => {
   const lineOffset = useApplicationState((state) => state.noteDetails?.startOfContentLineOffset)
   return useMemo(() => {
-    return scrollState === undefined || lineOffset === undefined
+    return scrollState === null || lineOffset === undefined
-      ? undefined
+      ? null
       : {
           firstLineInView: scrollState.firstLineInView - lineOffset,
           scrolledPercentage: scrollState.scrolledPercentage

frontend/src/components/editor-page/renderer-pane/renderer-pane.tsx

@@ -29,8 +29,8 @@ export type RendererPaneProps = Omit<
 export const RendererPane: React.FC<RendererPaneProps> = ({ scrollState, onScroll, ...props }) => {
   const trimmedContentLines = useTrimmedNoteMarkdownContentWithoutFrontmatter()
   const noteType = useApplicationState((state) => state.noteDetails?.frontmatter.type)
-  const adjustedOnScroll = useOnScrollWithLineOffset(onScroll)
+  const adjustedOnScroll = useOnScrollWithLineOffset(onScroll ?? null)
-  const adjustedScrollState = useScrollStateWithoutLineOffset(scrollState)
+  const adjustedScrollState = useScrollStateWithoutLineOffset(scrollState ?? null)
 
   if (!noteType) {
     return null

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-created-at.tsx

@@ -18,7 +18,7 @@ export const NoteInfoLineCreatedAt: React.FC = () => {
   useTranslation()
   const noteCreateTime = useApplicationState((state) => state.noteDetails?.createdAt)
   const noteCreateDateTime = useMemo(
-    () => (noteCreateTime === undefined ? undefined : DateTime.fromSeconds(noteCreateTime)),
+    () => (noteCreateTime === undefined ? null : DateTime.fromSeconds(noteCreateTime)),
     [noteCreateTime]
   )
 

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-updated-at.tsx

@@ -18,7 +18,7 @@ export const NoteInfoLineUpdatedAt: React.FC = () => {
   useTranslation()
   const noteUpdateTime = useApplicationState((state) => state.noteDetails?.updatedAt)
   const noteUpdateDateTime = useMemo(
-    () => (noteUpdateTime === undefined ? undefined : DateTime.fromSeconds(noteUpdateTime)),
+    () => (noteUpdateTime === undefined ? null : DateTime.fromSeconds(noteUpdateTime)),
     [noteUpdateTime]
   )
 

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx

@@ -40,8 +40,8 @@ export const PermissionEntryUser: React.FC<PermissionEntryUserProps & Permission
 
   const permissionInconsistent = useMemo(
     () =>
-      (everyonePermission && everyonePermission.canEdit && !entry.canEdit) ||
+      (!!everyonePermission && everyonePermission.canEdit && !entry.canEdit) ||
-      (loggedInPermission && loggedInPermission.canEdit && !entry.canEdit),
+      (!!loggedInPermission && loggedInPermission.canEdit && !entry.canEdit),
     [everyonePermission, loggedInPermission, entry]
   )
 

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/note-url-field.tsx

@@ -28,7 +28,7 @@ export const NoteUrlField: React.FC<LinkFieldProps> = ({ type }) => {
 
   const url = useMemo(() => {
     if (noteId === undefined) {
-      return undefined
+      return null
     }
     const url = new URL(baseUrl)
     url.pathname += `${type}/${noteId}`

frontend/src/components/editor-page/synced-scroll/scroll-props.ts

@@ -7,8 +7,8 @@
 export type ScrollCallback = (scrollState: ScrollState) => void
 
 export interface ScrollProps {
-  scrollState?: ScrollState
+  scrollState?: ScrollState | null
-  onScroll?: ScrollCallback
+  onScroll?: ScrollCallback | null
   onMakeScrollSource?: () => void
 }
 

frontend/src/components/global-dialogs/motd-modal/motd-modal.tsx

@@ -30,7 +30,7 @@ export const MotdModal: React.FC = () => {
   const { error, loading, value } = useAsync(fetchMotd)
   const [dismissed, setDismissed] = useState(false)
 
-  const lines = useMemo(() => value?.motdText.split('\n'), [value?.motdText])
+  const lines = useMemo(() => value?.motdText.split('\n') ?? [], [value?.motdText])
 
   const dismiss = useCallback(() => {
     if (value?.lastModified) {
@@ -51,7 +51,7 @@ export const MotdModal: React.FC = () => {
 
   return (
     <CommonModal
-      show={!!lines && !loading && !error && !dismissed}
+      show={lines.length > 0 && !loading && !error && !dismissed}
       titleI18nKey={'motd.title'}
       {...cypressId('motd-modal')}>
       <Modal.Body>
@@ -59,7 +59,7 @@ export const MotdModal: React.FC = () => {
           <RendererIframe
             frameClasses={'w-100'}
             rendererType={RendererType.SIMPLE}
-            markdownContentLines={lines as string[]}
+            markdownContentLines={lines}
             adaptFrameHeightToContent={true}
             showWaitSpinner={true}
           />

frontend/src/components/global-dialogs/settings-dialog/global/language-option.tsx

@@ -17,7 +17,7 @@ interface LanguageOptionProps {
  */
 export const LanguageOption: React.FC<LanguageOptionProps> = ({ languageCode }) => {
   const displayName = useMemo(
-    () => new Intl.DisplayNames([languageCode], { type: 'language' }).of(languageCode),
+    () => new Intl.DisplayNames([languageCode], { type: 'language' }).of(languageCode) ?? null,
     [languageCode]
   )
 

frontend/src/components/markdown-renderer/markdown-to-react/markdown-to-react.tsx

@@ -41,12 +41,14 @@ export const MarkdownToReact: React.FC<MarkdownToReactProps> = ({
 
   useMemo(() => {
     nodeToReactTransformer.setReplacers(markdownRenderExtensions.flatMap((extension) => extension.buildReplacers()))
+    return null //todo: replace usememo hack
   }, [nodeToReactTransformer, markdownRenderExtensions])
 
   useMemo(() => {
     measurePerformance('markdown-to-react: update-line-mapping', () => {
       nodeToReactTransformer.setLineIds(lineNumberMapper.updateLineMapping(markdownContentLines))
     })
+    return null
   }, [nodeToReactTransformer, lineNumberMapper, markdownContentLines])
 
   const nodePreProcessor = useCombinedNodePreprocessor(markdownRenderExtensions)

frontend/src/components/register-page/register-error.tsx

@@ -17,7 +17,7 @@ export const RegisterError: React.FC<RegisterErrorProps> = ({ error }) => {
 
   const errorI18nKey = useMemo(() => {
     if (!error) {
-      return undefined
+      return null
     }
     return new ErrorToI18nKeyMapper(error, 'login.register.error')
       .withHttpCode(409, 'usernameExisting')
@@ -28,7 +28,7 @@ export const RegisterError: React.FC<RegisterErrorProps> = ({ error }) => {
 
   return (
     <Alert className='small' show={!!errorI18nKey} variant='danger'>
-      <Trans i18nKey={errorI18nKey} />
+      <Trans i18nKey={errorI18nKey ?? ''} />
     </Alert>
   )
 }

frontend/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts

@@ -26,10 +26,10 @@ export const useDocumentSyncScrolling = (
   outerContainerRef: React.RefObject<HTMLElement>,
   rendererRef: React.RefObject<HTMLElement>,
   numberOfLines: number,
-  scrollState?: ScrollState,
+  scrollState: ScrollState | null,
-  onScroll?: (scrollState: ScrollState) => void
+  onScroll: null | ((scrollState: ScrollState) => void)
 ): [(lineMarkers: LineMarkerPosition[]) => void, React.UIEventHandler<HTMLElement>] => {
-  const [lineMarks, setLineMarks] = useState<LineMarkerPosition[]>()
+  const [lineMarks, setLineMarks] = useState<LineMarkerPosition[]>([])
 
   const recalculateLineMarkerPositions = useCallback(
     (linkMarkerPositions: LineMarkerPosition[]) => {

frontend/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts

@@ -19,7 +19,7 @@ import { useCallback } from 'react'
 export const useOnUserScroll = (
   lineMarks: LineMarkerPosition[] | undefined,
   scrollContainer: React.RefObject<HTMLElement>,
-  onScroll: ((newScrollState: ScrollState) => void) | undefined
+  onScroll: ((newScrollState: ScrollState) => void) | null
 ): React.UIEventHandler<HTMLElement> => {
   return useCallback(() => {
     if (!scrollContainer.current || !lineMarks || lineMarks.length === 0 || !onScroll) {

frontend/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts

@@ -18,8 +18,8 @@ import { useCallback, useEffect, useRef } from 'react'
  * @param scrollContainer The container to scroll in
  */
 export const useScrollToLineMark = (
-  scrollState: ScrollState | undefined,
+  scrollState: ScrollState | null,
-  lineMarks: LineMarkerPosition[] | undefined,
+  lineMarks: LineMarkerPosition[],
   contentLineCount: number,
   scrollContainer: RefObject<HTMLElement>
 ): void => {

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

@@ -57,8 +57,8 @@ export const DocumentMarkdownRenderer: React.FC<DocumentMarkdownRendererProps> =
     internalDocumentRenderPaneRef,
     rendererRef,
     contentLineCount,
-    scrollState,
+    scrollState ?? null,
-    onScroll
+    onScroll ?? null
   )
 
   const markdownBodyRef = useRef<HTMLDivElement>(null)

frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts

@@ -16,7 +16,7 @@ import { useEffect } from 'react'
  */
 export const useEditorReceiveHandler = <R extends RendererToEditorMessageType>(
   messageType: R,
-  handler?: Handler<CommunicationMessages, R>
+  handler: Handler<CommunicationMessages, R> | null
 ): void => {
   const editorToRendererCommunicator = useEditorToRendererCommunicator()
   useEffect(() => {

frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts

@@ -15,7 +15,7 @@ import { useEffect } from 'react'
  * @param rendererReady Defines if the target renderer is ready
  */
 export const useSendToRenderer = (
-  message: undefined | Extract<CommunicationMessages, MessagePayload<EditorToRendererMessageType>>,
+  message: null | Extract<CommunicationMessages, MessagePayload<EditorToRendererMessageType>>,
   rendererReady: boolean
 ): void => {
   const iframeCommunicator = useEditorToRendererCommunicator()

frontend/src/components/slide-show-page/slide-show-page-content.tsx

@@ -27,7 +27,7 @@ export const SlideShowPageContent: React.FC = () => {
   useSendToRenderer(
     useMemo(() => {
       return !slideOptions
-        ? undefined
+        ? null
         : {
             type: CommunicationMessageType.SET_SLIDE_OPTIONS,
             slideOptions

frontend/src/extensions/essential-app-extensions/csv/csv-table.tsx

@@ -38,7 +38,7 @@ export const CsvTable: React.FC<CsvTableProps> = ({
   }, [code, delimiter, showHeader])
 
   const renderTableHeader = useMemo(() => {
-    return headerRow.length === 0 ? undefined : (
+    return headerRow.length === 0 ? null : (
       <thead>
         <tr>
           {headerRow.map((column, columnNumber) => (

frontend/src/hooks/common/use-single-string-url-parameter.ts

@@ -16,7 +16,6 @@ import { useMemo } from 'react'
 export const useSingleStringUrlParameter = <T>(parameter: string, fallback: T): string | T => {
   const router = useSearchParams()
 
-  return useMemo(() => {
+  const value = useMemo(() => router?.get(parameter) ?? null, [parameter, router])
-    return router?.get(parameter) ?? fallback
+  return value ?? fallback
-  }, [fallback, parameter, router])
 }

frontend/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts

@@ -29,7 +29,7 @@ export const useTrimmedNoteMarkdownContentWithoutFrontmatter = (): string[] => {
 
   const trimmedLines = useMemo(() => {
     if (!markdownContent) {
-      return undefined
+      return null
     }
     if (markdownContent.content.length > maxLength) {
       return markdownContent.content.slice(0, maxLength).split('\n')
@@ -39,6 +39,6 @@ export const useTrimmedNoteMarkdownContentWithoutFrontmatter = (): string[] => {
   }, [markdownContent, maxLength])
 
   return useMemo(() => {
-    return trimmedLines === undefined || lineOffset === undefined ? [] : trimmedLines.slice(lineOffset)
+    return trimmedLines === null || lineOffset === undefined ? [] : trimmedLines.slice(lineOffset)
   }, [lineOffset, trimmedLines])
 }