Add prettier for codestyle and re-format everything (#1294)

src/components/render-page/hooks/use-image-click-handler.ts

@@ -9,15 +9,18 @@ import { ImageClickHandler } from '../../markdown-renderer/replace-components/im
 import { IframeRendererToEditorCommunicator } from '../iframe-renderer-to-editor-communicator'
 
 export const useImageClickHandler = (iframeCommunicator: IframeRendererToEditorCommunicator): ImageClickHandler => {
-  return useCallback((event: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
-    const image = event.target as HTMLImageElement
-    if (image.src === '') {
-      return
-    }
-    iframeCommunicator.sendClickedImageUrl({
-      src: image.src,
-      alt: image.alt,
-      title: image.title
-    })
-  }, [iframeCommunicator])
+  return useCallback(
+    (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
+      const image = event.target as HTMLImageElement
+      if (image.src === '') {
+        return
+      }
+      iframeCommunicator.sendClickedImageUrl({
+        src: image.src,
+        alt: image.alt,
+        title: image.title
+      })
+    },
+    [iframeCommunicator]
+  )
 }

src/components/render-page/iframe-communicator.ts

@@ -32,12 +32,11 @@ export abstract class IframeCommunicator<SEND, RECEIVE> {
 
   protected sendMessageToOtherSide(message: SEND): void {
     if (this.otherSide === undefined || this.otherOrigin === undefined) {
-      console.error('Can\'t send message because otherSide is null', message)
+      console.error("Can't send message because otherSide is null", message)
       return
     }
     this.otherSide.postMessage(message, this.otherOrigin)
   }
 
-  protected abstract handleEvent(event: MessageEvent<RECEIVE>): void;
+  protected abstract handleEvent(event: MessageEvent<RECEIVE>): void
 }
-

src/components/render-page/iframe-editor-to-renderer-communicator.ts

@@ -15,7 +15,10 @@ import {
   RenderIframeMessageType
 } from './rendering-message'
 
-export class IframeEditorToRendererCommunicator extends IframeCommunicator<EditorToRendererIframeMessage, RendererToEditorIframeMessage> {
+export class IframeEditorToRendererCommunicator extends IframeCommunicator<
+  EditorToRendererIframeMessage,
+  RendererToEditorIframeMessage
+> {
   private onSetScrollSourceToRendererHandler?: () => void
   private onTaskCheckboxChangeHandler?: (lineInMarkdown: number, checked: boolean) => void
   private onFirstHeadingChangeHandler?: (heading?: string) => void

src/components/render-page/iframe-renderer-to-editor-communicator.ts

@@ -15,11 +15,14 @@ import {
   RenderIframeMessageType
 } from './rendering-message'
 
-export class IframeRendererToEditorCommunicator extends IframeCommunicator<RendererToEditorIframeMessage, EditorToRendererIframeMessage> {
-  private onSetMarkdownContentHandler?: ((markdownContent: string) => void)
-  private onSetDarkModeHandler?: ((darkModeActivated: boolean) => void)
-  private onSetScrollStateHandler?: ((scrollState: ScrollState) => void)
-  private onSetBaseConfigurationHandler?: ((baseConfiguration: BaseConfiguration) => void)
+export class IframeRendererToEditorCommunicator extends IframeCommunicator<
+  RendererToEditorIframeMessage,
+  EditorToRendererIframeMessage
+> {
+  private onSetMarkdownContentHandler?: (markdownContent: string) => void
+  private onSetDarkModeHandler?: (darkModeActivated: boolean) => void
+  private onSetScrollStateHandler?: (scrollState: ScrollState) => void
+  private onSetBaseConfigurationHandler?: (baseConfiguration: BaseConfiguration) => void
 
   public onSetBaseConfiguration(handler?: (baseConfiguration: BaseConfiguration) => void): void {
     this.onSetBaseConfigurationHandler = handler

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

@@ -26,7 +26,7 @@ export interface RendererProps extends ScrollProps {
   onFrontmatterChange?: (frontmatter: NoteFrontmatter | undefined) => void
   onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
   documentRenderPaneRef?: MutableRefObject<HTMLDivElement | null>
-  markdownContent: string,
+  markdownContent: string
   baseUrl?: string
   onImageClick?: ImageClickHandler
   onHeightChange?: (height: number) => void
@@ -38,22 +38,21 @@ export interface MarkdownDocumentProps extends RendererProps {
   additionalRendererClasses?: string
 }
 
-export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
-  {
-    additionalOuterContainerClasses,
-    additionalRendererClasses,
-    onFirstHeadingChange,
-    onFrontmatterChange,
-    onMakeScrollSource,
-    onTaskCheckedChange,
-    baseUrl,
-    markdownContent,
-    onImageClick,
-    onScroll,
-    scrollState,
-    onHeightChange,
-    disableToc
-  }) => {
+export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
+  additionalOuterContainerClasses,
+  additionalRendererClasses,
+  onFirstHeadingChange,
+  onFrontmatterChange,
+  onMakeScrollSource,
+  onTaskCheckedChange,
+  baseUrl,
+  markdownContent,
+  onImageClick,
+  onScroll,
+  scrollState,
+  onHeightChange,
+  disableToc
+}) => {
   const rendererRef = useRef<HTMLDivElement | null>(null)
   const rendererSize = useResizeObserver({ ref: rendererRef.current })
 
@@ -73,41 +72,51 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
   }, [rendererSize.height, onHeightChange])
 
   const contentLineCount = useMemo(() => markdownContent.split('\n').length, [markdownContent])
-  const [onLineMarkerPositionChanged, onUserScroll] = useSyncedScrolling(internalDocumentRenderPaneRef, rendererRef, contentLineCount, scrollState, onScroll)
+  const [onLineMarkerPositionChanged, onUserScroll] = useSyncedScrolling(
+    internalDocumentRenderPaneRef,
+    rendererRef,
+    contentLineCount,
+    scrollState,
+    onScroll
+  )
 
   return (
-    <div className={ `markdown-document ${ additionalOuterContainerClasses ?? '' }` }
-         ref={ internalDocumentRenderPaneRef } onScroll={ onUserScroll } onMouseEnter={ onMakeScrollSource }>
-      <div className={ 'markdown-document-side' }/>
-      <div className={ 'markdown-document-content' }>
-        <YamlArrayDeprecationAlert/>
+    <div
+      className={`markdown-document ${additionalOuterContainerClasses ?? ''}`}
+      ref={internalDocumentRenderPaneRef}
+      onScroll={onUserScroll}
+      onMouseEnter={onMakeScrollSource}>
+      <div className={'markdown-document-side'} />
+      <div className={'markdown-document-content'}>
+        <YamlArrayDeprecationAlert />
         <BasicMarkdownRenderer
-          outerContainerRef={ rendererRef }
-          className={ `mb-3 ${ additionalRendererClasses ?? '' }` }
-          content={ markdownContent }
-          onFirstHeadingChange={ onFirstHeadingChange }
-          onLineMarkerPositionChanged={ onLineMarkerPositionChanged }
-          onFrontmatterChange={ onFrontmatterChange }
-          onTaskCheckedChange={ onTaskCheckedChange }
-          onTocChange={ setTocAst }
-          baseUrl={ baseUrl }
-          onImageClick={ onImageClick }
-          useAlternativeBreaks={ useAlternativeBreaks }/>
+          outerContainerRef={rendererRef}
+          className={`mb-3 ${additionalRendererClasses ?? ''}`}
+          content={markdownContent}
+          onFirstHeadingChange={onFirstHeadingChange}
+          onLineMarkerPositionChanged={onLineMarkerPositionChanged}
+          onFrontmatterChange={onFrontmatterChange}
+          onTaskCheckedChange={onTaskCheckedChange}
+          onTocChange={setTocAst}
+          baseUrl={baseUrl}
+          onImageClick={onImageClick}
+          useAlternativeBreaks={useAlternativeBreaks}
+        />
       </div>
-      <div className={ 'markdown-document-side pt-4' }>
-        <ShowIf condition={ !!tocAst && !disableToc }>
-          <ShowIf condition={ containerWidth >= 1100 }>
-            <TableOfContents ast={ tocAst as TocAst } className={ 'sticky' } baseUrl={ baseUrl }/>
+      <div className={'markdown-document-side pt-4'}>
+        <ShowIf condition={!!tocAst && !disableToc}>
+          <ShowIf condition={containerWidth >= 1100}>
+            <TableOfContents ast={tocAst as TocAst} className={'sticky'} baseUrl={baseUrl} />
           </ShowIf>
-          <ShowIf condition={ containerWidth < 1100 }>
-            <div className={ 'markdown-toc-sidebar-button' }>
-              <Dropdown drop={ 'up' }>
-                <Dropdown.Toggle id="toc-overlay-button" variant={ 'secondary' } className={ 'no-arrow' }>
-                  <ForkAwesomeIcon icon={ 'list-ol' }/>
+          <ShowIf condition={containerWidth < 1100}>
+            <div className={'markdown-toc-sidebar-button'}>
+              <Dropdown drop={'up'}>
+                <Dropdown.Toggle id='toc-overlay-button' variant={'secondary'} className={'no-arrow'}>
+                  <ForkAwesomeIcon icon={'list-ol'} />
                 </Dropdown.Toggle>
                 <Dropdown.Menu>
-                  <div className={ 'p-2' }>
-                    <TableOfContents ast={ tocAst as TocAst } baseUrl={ baseUrl }/>
+                  <div className={'p-2'}>
+                    <TableOfContents ast={tocAst as TocAst} baseUrl={baseUrl} />
                   </div>
                 </Dropdown.Menu>
               </Dropdown>

src/components/render-page/render-page.tsx

@@ -42,32 +42,47 @@ export const RenderPage: React.FC = () => {
   useEffect(() => iframeCommunicator.onSetDarkMode(setDarkMode), [iframeCommunicator])
   useEffect(() => iframeCommunicator.onSetScrollState(setScrollState), [iframeCommunicator, scrollState])
 
-  const onTaskCheckedChange = useCallback((lineInMarkdown: number, checked: boolean) => {
-    iframeCommunicator.sendTaskCheckBoxChange(lineInMarkdown, checked)
-  }, [iframeCommunicator])
+  const onTaskCheckedChange = useCallback(
+    (lineInMarkdown: number, checked: boolean) => {
+      iframeCommunicator.sendTaskCheckBoxChange(lineInMarkdown, checked)
+    },
+    [iframeCommunicator]
+  )
 
-  const onFirstHeadingChange = useCallback((firstHeading?: string) => {
-    iframeCommunicator.sendFirstHeadingChanged(firstHeading)
-  }, [iframeCommunicator])
+  const onFirstHeadingChange = useCallback(
+    (firstHeading?: string) => {
+      iframeCommunicator.sendFirstHeadingChanged(firstHeading)
+    },
+    [iframeCommunicator]
+  )
 
   const onMakeScrollSource = useCallback(() => {
     iframeCommunicator.sendSetScrollSourceToRenderer()
   }, [iframeCommunicator])
 
-  const onFrontmatterChange = useCallback((frontmatter?: NoteFrontmatter) => {
-    setNoteFrontmatter(frontmatter)
-    iframeCommunicator.sendSetFrontmatter(frontmatter)
-  }, [iframeCommunicator])
+  const onFrontmatterChange = useCallback(
+    (frontmatter?: NoteFrontmatter) => {
+      setNoteFrontmatter(frontmatter)
+      iframeCommunicator.sendSetFrontmatter(frontmatter)
+    },
+    [iframeCommunicator]
+  )
 
-  const onScroll = useCallback((scrollState: ScrollState) => {
-    iframeCommunicator.sendSetScrollState(scrollState)
-  }, [iframeCommunicator])
+  const onScroll = useCallback(
+    (scrollState: ScrollState) => {
+      iframeCommunicator.sendSetScrollState(scrollState)
+    },
+    [iframeCommunicator]
+  )
 
   const onImageClick: ImageClickHandler = useImageClickHandler(iframeCommunicator)
 
-  const onHeightChange = useCallback((height: number) => {
-    iframeCommunicator.sendHeightChange(height)
-  }, [iframeCommunicator])
+  const onHeightChange = useCallback(
+    (height: number) => {
+      iframeCommunicator.sendHeightChange(height)
+    },
+    [iframeCommunicator]
+  )
 
   if (!baseConfiguration) {
     return null
@@ -77,26 +92,28 @@ export const RenderPage: React.FC = () => {
     case RendererType.DOCUMENT:
       return (
         <MarkdownDocument
-          additionalOuterContainerClasses={ 'vh-100 bg-light' }
-          markdownContent={ markdownContent }
-          onTaskCheckedChange={ onTaskCheckedChange }
-          onFirstHeadingChange={ onFirstHeadingChange }
-          onMakeScrollSource={ onMakeScrollSource }
-          onFrontmatterChange={ onFrontmatterChange }
-          scrollState={ scrollState }
-          onScroll={ onScroll }
-          baseUrl={ baseConfiguration.baseUrl }
-          onImageClick={ onImageClick }/>
+          additionalOuterContainerClasses={'vh-100 bg-light'}
+          markdownContent={markdownContent}
+          onTaskCheckedChange={onTaskCheckedChange}
+          onFirstHeadingChange={onFirstHeadingChange}
+          onMakeScrollSource={onMakeScrollSource}
+          onFrontmatterChange={onFrontmatterChange}
+          scrollState={scrollState}
+          onScroll={onScroll}
+          baseUrl={baseConfiguration.baseUrl}
+          onImageClick={onImageClick}
+        />
       )
     case RendererType.INTRO:
       return (
         <MarkdownDocument
-          additionalOuterContainerClasses={ 'vh-100 bg-light overflow-y-hidden' }
-          markdownContent={ markdownContent }
-          baseUrl={ baseConfiguration.baseUrl }
-          onImageClick={ onImageClick }
-          disableToc={ true }
-          onHeightChange={ onHeightChange }/>
+          additionalOuterContainerClasses={'vh-100 bg-light overflow-y-hidden'}
+          markdownContent={markdownContent}
+          baseUrl={baseConfiguration.baseUrl}
+          onImageClick={onImageClick}
+          disableToc={true}
+          onHeightChange={onHeightChange}
+        />
       )
     default:
       return null

src/components/render-page/rendering-message.ts

@@ -25,7 +25,7 @@ export interface RendererToEditorSimpleMessage {
 }
 
 export interface SetDarkModeMessage {
-  type: RenderIframeMessageType.SET_DARKMODE,
+  type: RenderIframeMessageType.SET_DARKMODE
   activated: boolean
 }
 
@@ -36,60 +36,60 @@ export interface ImageDetails {
 }
 
 export interface SetBaseUrlMessage {
-  type: RenderIframeMessageType.SET_BASE_CONFIGURATION,
+  type: RenderIframeMessageType.SET_BASE_CONFIGURATION
   baseConfiguration: BaseConfiguration
 }
 
 export interface ImageClickedMessage {
-  type: RenderIframeMessageType.IMAGE_CLICKED,
+  type: RenderIframeMessageType.IMAGE_CLICKED
   details: ImageDetails
 }
 
 export interface SetMarkdownContentMessage {
-  type: RenderIframeMessageType.SET_MARKDOWN_CONTENT,
+  type: RenderIframeMessageType.SET_MARKDOWN_CONTENT
   content: string
 }
 
 export interface SetScrollStateMessage {
-  type: RenderIframeMessageType.SET_SCROLL_STATE,
+  type: RenderIframeMessageType.SET_SCROLL_STATE
   scrollState: ScrollState
 }
 
 export interface OnTaskCheckboxChangeMessage {
-  type: RenderIframeMessageType.ON_TASK_CHECKBOX_CHANGE,
-  lineInMarkdown: number,
+  type: RenderIframeMessageType.ON_TASK_CHECKBOX_CHANGE
+  lineInMarkdown: number
   checked: boolean
 }
 
 export interface OnFirstHeadingChangeMessage {
-  type: RenderIframeMessageType.ON_FIRST_HEADING_CHANGE,
+  type: RenderIframeMessageType.ON_FIRST_HEADING_CHANGE
   firstHeading: string | undefined
 }
 
 export interface OnFrontmatterChangeMessage {
-  type: RenderIframeMessageType.ON_SET_FRONTMATTER,
+  type: RenderIframeMessageType.ON_SET_FRONTMATTER
   frontmatter: NoteFrontmatter | undefined
 }
 
 export interface OnHeightChangeMessage {
-  type: RenderIframeMessageType.ON_HEIGHT_CHANGE,
+  type: RenderIframeMessageType.ON_HEIGHT_CHANGE
   height: number
 }
 
 export type EditorToRendererIframeMessage =
-  SetMarkdownContentMessage |
-  SetDarkModeMessage |
-  SetScrollStateMessage |
-  SetBaseUrlMessage
+  | SetMarkdownContentMessage
+  | SetDarkModeMessage
+  | SetScrollStateMessage
+  | SetBaseUrlMessage
 
 export type RendererToEditorIframeMessage =
-  RendererToEditorSimpleMessage |
-  OnFirstHeadingChangeMessage |
-  OnTaskCheckboxChangeMessage |
-  OnFrontmatterChangeMessage |
-  SetScrollStateMessage |
-  ImageClickedMessage |
-  OnHeightChangeMessage
+  | RendererToEditorSimpleMessage
+  | OnFirstHeadingChangeMessage
+  | OnTaskCheckboxChangeMessage
+  | OnFrontmatterChangeMessage
+  | SetScrollStateMessage
+  | ImageClickedMessage
+  | OnHeightChangeMessage
 
 export enum RendererType {
   DOCUMENT,