Move and rename files (2/4) (#987)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/document-read-only-page/document-infobar.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

src/components/document-read-only-page/document-infobar.tsx

@@ -12,7 +12,7 @@ import { ShowIf } from '../common/show-if/show-if'
 import {
   DocumentInfoLineWithTimeMode,
   DocumentInfoTimeLine
-} from '../editor/document-bar/document-info/document-info-time-line'
+} from '../editor-page/document-bar/document-info/document-info-time-line'
 import './document-infobar.scss'
 
 export interface DocumentInfobarProps {

src/components/document-read-only-page/document-read-only-page.tsx

@@ -15,18 +15,18 @@ import { ApplicationState } from '../../redux'
 import { setNoteFrontmatter, updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
 import { MotdBanner } from '../common/motd-banner/motd-banner'
 import { ShowIf } from '../common/show-if/show-if'
-import { AppBar, AppBarMode } from '../editor/app-bar/app-bar'
-import { DocumentIframe } from '../editor/document-renderer-pane/document-iframe'
-import { EditorPathParams } from '../editor/editor'
-import { useLoadNoteFromServer } from '../editor/useLoadNoteFromServer'
+import { AppBar, AppBarMode } from '../editor-page/app-bar/app-bar'
+import { EditorPagePathParams } from '../editor-page/editor-page'
+import { useLoadNoteFromServer } from '../editor-page/hooks/useLoadNoteFromServer'
+import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
 import { DocumentInfobar } from './document-infobar'
 import { ErrorWhileLoadingNoteAlert } from './ErrorWhileLoadingNoteAlert'
 import { LoadingNoteAlert } from './LoadingNoteAlert'
 
-export const PadViewOnly: React.FC = () => {
+export const DocumentReadOnlyPage: React.FC = () => {
 
   useTranslation()
-  const { id } = useParams<EditorPathParams>()
+  const { id } = useParams<EditorPagePathParams>()
 
   useApplyDarkMode()
   useDocumentTitleWithNoteTitle()
@@ -55,10 +55,10 @@ export const PadViewOnly: React.FC = () => {
           noteId={id}
           viewCount={noteDetails.viewCount}
         />
-        <DocumentIframe extraClasses={"flex-fill"}
-                        markdownContent={markdownContent}
-                        onFirstHeadingChange={onFirstHeadingChange}
-                        onFrontmatterChange={onFrontmatterChange}/>
+        <RenderIframe extraClasses={"flex-fill"}
+                      markdownContent={markdownContent}
+                      onFirstHeadingChange={onFirstHeadingChange}
+                      onFrontmatterChange={onFrontmatterChange}/>
       </ShowIf>
     </div>
   )

src/components/editor-page/app-bar/app-bar.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button, Nav, Navbar } from 'react-bootstrap'
@@ -15,7 +15,7 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../../common/show-if/show-if'
 import { SignInButton } from '../../landing-layout/navigation/sign-in-button'
 import { UserDropdown } from '../../landing-layout/navigation/user-dropdown'
-import { EditorPathParams } from '../editor'
+import { EditorPagePathParams } from '../editor-page'
 import { DarkModeButton } from './dark-mode-button'
 import { EditorViewMode } from './editor-view-mode'
 import { HelpButton } from './help-button/help-button'
@@ -33,7 +33,7 @@ export interface AppBarProps {
 
 export const AppBar: React.FC<AppBarProps> = ({ mode }) => {
   const { t } = useTranslation()
-  const { id } = useParams<EditorPathParams>()
+  const { id } = useParams<EditorPagePathParams>()
   const userExists = useSelector((state: ApplicationState) => !!state.user)
 
   return (

src/components/editor-page/app-bar/dark-mode-button.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'

src/components/editor-page/app-bar/editor-view-mode.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'

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

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

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

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useMemo } from 'react'
 import { Table } from 'react-bootstrap'

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

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useState } from 'react'
 import { Button, Modal } from 'react-bootstrap'

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

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Col, Row } from 'react-bootstrap'

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

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment } from 'react'
 import { Card, ListGroup, Row } from 'react-bootstrap'

src/components/editor-page/app-bar/navbar-branding.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Navbar } from 'react-bootstrap'

src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'

src/components/editor-page/document-bar/document-info/document-info-line.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'

src/components/editor-page/document-bar/document-info/document-info-time-line.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DateTime } from 'luxon'
 import React from 'react'

src/components/editor-page/document-bar/document-info/time-from-now.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DateTime } from 'luxon'
 

src/components/editor-page/document-bar/document-info/unitalic-bold-text.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 

src/components/editor-page/document-bar/permissions/permission-group-entry.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'

src/components/editor-page/document-bar/permissions/permission-list.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { ReactElement, useState } from 'react'
 import { Button, FormControl, InputGroup, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'

src/components/editor-page/document-bar/permissions/permission-modal.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useEffect, useState } from 'react'
 import { Alert, Modal } from 'react-bootstrap'

src/components/editor-page/document-bar/revisions/revision-modal-list-entry.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DateTime } from 'luxon'
 import React from 'react'

src/components/editor-page/document-bar/revisions/revision-modal.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

src/components/editor-page/document-bar/share/share-modal.tsx

@@ -15,7 +15,7 @@ import { ApplicationState } from '../../../../redux'
 import { CopyableField } from '../../../common/copyable/copyable-field/copyable-field'
 import { CommonModal } from '../../../common/modals/common-modal'
 import { ShowIf } from '../../../common/show-if/show-if'
-import { EditorPathParams } from '../../editor'
+import { EditorPagePathParams } from '../../editor-page'
 
 export interface ShareModalProps {
   show: boolean,
@@ -27,7 +27,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ show, onHide }) => {
   const noteFrontmatter = useSelector((state: ApplicationState) => state.noteDetails.frontmatter, equal)
   const editorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
   const baseUrl = useFrontendBaseUrl()
-  const { id } = useParams<EditorPathParams>()
+  const { id } = useParams<EditorPagePathParams>()
 
   return (
     <CommonModal

src/components/editor-page/editor-modals/max-length-warning-modal.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button, Modal } from 'react-bootstrap'

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

@@ -22,19 +22,19 @@ import {
 } from '../../redux/note-details/methods'
 import { MotdBanner } from '../common/motd-banner/motd-banner'
 import { ShowIf } from '../common/show-if/show-if'
-import { ErrorWhileLoadingNoteAlert } from '../pad-view-only/ErrorWhileLoadingNoteAlert'
-import { LoadingNoteAlert } from '../pad-view-only/LoadingNoteAlert'
+import { ErrorWhileLoadingNoteAlert } from '../document-read-only-page/ErrorWhileLoadingNoteAlert'
+import { LoadingNoteAlert } from '../document-read-only-page/LoadingNoteAlert'
 import { AppBar, AppBarMode } from './app-bar/app-bar'
 import { EditorMode } from './app-bar/editor-view-mode'
-import { DocumentIframe } from './document-renderer-pane/document-iframe'
 import { EditorPane } from './editor-pane/editor-pane'
+import { useLoadNoteFromServer } from './hooks/useLoadNoteFromServer'
 import { useViewModeShortcuts } from './hooks/useViewModeShortcuts'
-import { DualScrollState, ScrollState } from './scroll/scroll-props'
+import { RenderIframe } from './renderer-pane/render-iframe'
 import { Sidebar } from './sidebar/sidebar'
 import { Splitter } from './splitter/splitter'
-import { useLoadNoteFromServer } from './useLoadNoteFromServer'
+import { DualScrollState, ScrollState } from './synced-scroll/scroll-props'
 
-export interface EditorPathParams {
+export interface EditorPagePathParams {
   id: string
 }
 
@@ -43,7 +43,7 @@ export enum ScrollSource {
   RENDERER
 }
 
-export const Editor: React.FC = () => {
+export const EditorPage: React.FC = () => {
   useTranslation()
   const { search } = useLocation()
   const markdownContent = useNoteMarkdownContent()
@@ -121,7 +121,7 @@ export const Editor: React.FC = () => {
               }
               showRight={editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH}
               right={
-                <DocumentIframe
+                <RenderIframe
                   markdownContent={markdownContent}
                   onMakeScrollSource={setRendererToScrollSource}
                   onFirstHeadingChange={updateNoteTitleByFirstHeading}
@@ -139,4 +139,4 @@ export const Editor: React.FC = () => {
     </Fragment>
   )
 }
-export default Editor
+export default EditorPage

src/components/editor-page/editor-pane/editor-pane.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

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

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { Editor, EditorChange, EditorConfiguration, ScrollInfo } from 'codemirror'
 import 'codemirror/addon/comment/comment'
@@ -34,7 +34,7 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../redux'
 import { MaxLengthWarningModal } from '../editor-modals/max-length-warning-modal'
-import { ScrollProps, ScrollState } from '../scroll/scroll-props'
+import { ScrollProps, ScrollState } from '../synced-scroll/scroll-props'
 import { allHinters, findWordAtCursor } from './autocompletion'
 import './editor-pane.scss'
 import { defaultKeyMap } from './key-map'

src/components/editor-page/editor-pane/hints.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

src/components/editor-page/editor-pane/status-bar/status-bar.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

src/components/editor-page/editor-pane/status-bar/status-bar.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { Editor, Position } from 'codemirror'
 import React, { useMemo } from 'react'

src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-boolean-property.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { EditorConfiguration } from 'codemirror'
 import equal from "fast-deep-equal"

src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-number-property.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { EditorConfiguration } from 'codemirror'
 import equal from "fast-deep-equal"

src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-property.ts

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 export enum EditorPreferenceProperty {
   KEYMAP = 'keyMap',

src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-select-property.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { EditorConfiguration } from 'codemirror'
 import equal from "fast-deep-equal"

src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preferences.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import equal from "fast-deep-equal"
 import React, { Fragment, useState } from 'react'

src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import CodeMirror from 'codemirror'
 import React, { Fragment, useState } from 'react'

src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { Picker } from 'emoji-picker-element'
 import { CustomEmoji, EmojiClickEvent, EmojiClickEventDetail } from 'emoji-picker-element/shared'

src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

src/components/editor-page/editor-pane/tool-bar/tool-bar.scss

@@ -1,4 +1,4 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only

src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { Editor } from 'codemirror'
 import React from 'react'

src/components/editor-page/hooks/useLoadNoteFromServer.ts

@@ -6,12 +6,12 @@
 
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router'
-import { getNote } from '../../api/notes'
-import { setNoteDataFromServer } from '../../redux/note-details/methods'
-import { EditorPathParams } from './editor'
+import { getNote } from '../../../api/notes'
+import { setNoteDataFromServer } from '../../../redux/note-details/methods'
+import { EditorPagePathParams } from '../editor-page'
 
 export const useLoadNoteFromServer = (): [boolean, boolean] => {
-  const { id } = useParams<EditorPathParams>()
+  const { id } = useParams<EditorPagePathParams>()
 
   const [error, setError] = useState(false)
   const [loading, setLoading] = useState(true)

src/components/editor-page/note-frontmatter/note-frontmatter.test.ts

@@ -210,8 +210,8 @@ describe('yaml frontmatter tests', () => {
         }
       },
       {
-      opengraph: new Map<string, string>(Object.entries({ title: 'Testtitle' }))
-    })
+        opengraph: new Map<string, string>(Object.entries({ title: 'Testtitle' }))
+      })
   })
 
   it('opengraph more attributes', () => {
@@ -226,15 +226,15 @@ describe('yaml frontmatter tests', () => {
         opengraph: {
           title: 'Testtitle',
           image: 'https://dummyimage.com/48.png',
-        'image:type': 'image/png'
-      }
-    },
-    {
-      opengraph: new Map<string, string>(Object.entries({
-        title: 'Testtitle',
-        image: 'https://dummyimage.com/48.png',
-        'image:type': 'image/png'
-      }))
-    })
+          'image:type': 'image/png'
+        }
+      },
+      {
+        opengraph: new Map<string, string>(Object.entries({
+          title: 'Testtitle',
+          image: 'https://dummyimage.com/48.png',
+          'image:type': 'image/png'
+        }))
+      })
   })
 })

src/components/editor-page/note-frontmatter/note-frontmatter.ts

@@ -0,0 +1,271 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+// import { RevealOptions } from 'reveal.js'
+
+type iso6391 =
+  'aa'
+  | 'ab'
+  | 'af'
+  | 'am'
+  | 'ar'
+  | 'ar-ae'
+  | 'ar-bh'
+  | 'ar-dz'
+  | 'ar-eg'
+  | 'ar-iq'
+  | 'ar-jo'
+  | 'ar-kw'
+  | 'ar-lb'
+  | 'ar-ly'
+  | 'ar-ma'
+  | 'ar-om'
+  | 'ar-qa'
+  | 'ar-sa'
+  | 'ar-sy'
+  | 'ar-tn'
+  | 'ar-ye'
+  | 'as'
+  | 'ay'
+  | 'de-at'
+  | 'de-ch'
+  | 'de-li'
+  | 'de-lu'
+  | 'div'
+  | 'dz'
+  | 'el'
+  | 'en'
+  | 'en-au'
+  | 'en-bz'
+  | 'en-ca'
+  | 'en-gb'
+  | 'en-ie'
+  | 'en-jm'
+  | 'en-nz'
+  | 'en-ph'
+  | 'en-tt'
+  | 'en-us'
+  | 'en-za'
+  | 'en-zw'
+  | 'eo'
+  | 'es'
+  | 'es-ar'
+  | 'es-bo'
+  | 'es-cl'
+  | 'es-co'
+  | 'es-cr'
+  | 'es-do'
+  | 'es-ec'
+  | 'es-es'
+  | 'es-gt'
+  | 'es-hn'
+  | 'es-mx'
+  | 'es-ni'
+  | 'es-pa'
+  | 'es-pe'
+  | 'es-pr'
+  | 'es-py'
+  | 'es-sv'
+  | 'es-us'
+  | 'es-uy'
+  | 'es-ve'
+  | 'et'
+  | 'eu'
+  | 'fa'
+  | 'fi'
+  | 'fj'
+  | 'fo'
+  | 'fr'
+  | 'fr-be'
+  | 'fr-ca'
+  | 'fr-ch'
+  | 'fr-lu'
+  | 'fr-mc'
+  | 'fy'
+  | 'ga'
+  | 'gd'
+  | 'gl'
+  | 'gn'
+  | 'gu'
+  | 'ha'
+  | 'he'
+  | 'hi'
+  | 'hr'
+  | 'hu'
+  | 'hy'
+  | 'ia'
+  | 'id'
+  | 'ie'
+  | 'ik'
+  | 'in'
+  | 'is'
+  | 'it'
+  | 'it-ch'
+  | 'iw'
+  | 'ja'
+  | 'ji'
+  | 'jw'
+  | 'ka'
+  | 'kk'
+  | 'kl'
+  | 'km'
+  | 'kn'
+  | 'ko'
+  | 'kok'
+  | 'ks'
+  | 'ku'
+  | 'ky'
+  | 'kz'
+  | 'la'
+  | 'ln'
+  | 'lo'
+  | 'ls'
+  | 'lt'
+  | 'lv'
+  | 'mg'
+  | 'mi'
+  | 'mk'
+  | 'ml'
+  | 'mn'
+  | 'mo'
+  | 'mr'
+  | 'ms'
+  | 'mt'
+  | 'my'
+  | 'na'
+  | 'nb-no'
+  | 'ne'
+  | 'nl'
+  | 'nl-be'
+  | 'nn-no'
+  | 'no'
+  | 'oc'
+  | 'om'
+  | 'or'
+  | 'pa'
+  | 'pl'
+  | 'ps'
+  | 'pt'
+  | 'pt-br'
+  | 'qu'
+  | 'rm'
+  | 'rn'
+  | 'ro'
+  | 'ro-md'
+  | 'ru'
+  | 'ru-md'
+  | 'rw'
+  | 'sa'
+  | 'sb'
+  | 'sd'
+  | 'sg'
+  | 'sh'
+  | 'si'
+  | 'sk'
+  | 'sl'
+  | 'sm'
+  | 'sn'
+  | 'so'
+  | 'sq'
+  | 'sr'
+  | 'ss'
+  | 'st'
+  | 'su'
+  | 'sv'
+  | 'sv-fi'
+  | 'sw'
+  | 'sx'
+  | 'syr'
+  | 'ta'
+  | 'te'
+  | 'tg'
+  | 'th'
+  | 'ti'
+  | 'tk'
+  | 'tl'
+  | 'tn'
+  | 'to'
+  | 'tr'
+  | 'ts'
+  | 'tt'
+  | 'tw'
+  | 'uk'
+  | 'ur'
+  | 'us'
+  | 'uz'
+  | 'vi'
+  | 'vo'
+  | 'wo'
+  | 'xh'
+  | 'yi'
+  | 'yo'
+  | 'zh'
+  | 'zh-cn'
+  | 'zh-hk'
+  | 'zh-mo'
+  | 'zh-sg'
+  | 'zh-tw'
+  | 'zu'
+
+export interface RawNoteFrontmatter {
+  title: string | undefined
+  description: string | undefined
+  tags: string | string[] | undefined
+  robots: string | undefined
+  lang: string | undefined
+  dir: string | undefined
+  breaks: boolean | undefined
+  GA: string | undefined
+  disqus: string | undefined
+  type: string | undefined
+  slideOptions: unknown
+  opengraph: { [key: string]: string } | null
+}
+
+export class NoteFrontmatter {
+  title: string
+  description: string
+  tags: string[]
+  deprecatedTagsSyntax: boolean
+  robots: string
+  lang: iso6391
+  dir: 'ltr' | 'rtl'
+  breaks: boolean
+  GA: string
+  disqus: string
+  type: 'slide' | ''
+  // slideOptions: RevealOptions
+  opengraph: Map<string, string>
+
+  constructor (rawData: RawNoteFrontmatter) {
+    this.title = rawData?.title ?? ''
+    this.description = rawData?.description ?? ''
+    this.robots = rawData?.robots ?? ''
+    this.breaks = rawData?.breaks ?? true
+    this.GA = rawData?.GA ?? ''
+    this.disqus = rawData?.disqus ?? ''
+
+    this.type = (rawData?.type as NoteFrontmatter['type']) ?? ''
+    this.lang = (rawData?.lang as iso6391) ?? 'en'
+    this.dir = (rawData?.dir as NoteFrontmatter['dir']) ?? 'ltr'
+
+    /* this.slideOptions = (rawData?.slideOptions as RevealOptions) ?? {
+      transition: 'none',
+      theme: 'white'
+    } */
+    if (typeof rawData?.tags === 'string') {
+      this.tags = rawData?.tags?.split(',').map(entry => entry.trim()) ?? []
+      this.deprecatedTagsSyntax = true
+    } else if (typeof rawData?.tags === 'object') {
+      this.tags = rawData?.tags?.filter(tag => tag !== null) ?? []
+      this.deprecatedTagsSyntax = false
+    } else {
+      this.tags = []
+      this.deprecatedTagsSyntax = false
+    }
+    this.opengraph = rawData?.opengraph ? new Map<string, string>(Object.entries(rawData.opengraph)) : new Map<string, string>()
+  }
+}

src/components/editor-page/renderer-pane/hooks/use-on-iframe-load.ts

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { RefObject, useCallback, useRef } from 'react'
+import { IframeEditorToRendererCommunicator } from '../../../render-page/iframe-editor-to-renderer-communicator'
+
+export const useOnIframeLoad = (frameReference: RefObject<HTMLIFrameElement>, iframeCommunicator: IframeEditorToRendererCommunicator,
+                                rendererOrigin: string, renderPageUrl: string, onNavigateAway: () => void): () => void => {
+  const sendToRenderPage = useRef<boolean>(true)
+
+  return useCallback(() => {
+    const frame = frameReference.current
+    if (!frame || !frame.contentWindow) {
+      iframeCommunicator.unsetOtherSide()
+      return
+    }
+
+    if (sendToRenderPage.current) {
+      iframeCommunicator.setOtherSide(frame.contentWindow, rendererOrigin)
+      sendToRenderPage.current = false
+      return
+    } else {
+      onNavigateAway()
+      console.error("Navigated away from unknown URL")
+      frame.src = renderPageUrl
+      sendToRenderPage.current = true
+    }
+  }, [frameReference, iframeCommunicator, onNavigateAway, renderPageUrl, rendererOrigin])
+}

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

@@ -10,13 +10,13 @@ import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-a
 import { ApplicationState } from '../../../redux'
 import { isTestMode } from '../../../utils/is-test-mode'
 import { IframeEditorToRendererCommunicator } from '../../render-page/iframe-editor-to-renderer-communicator'
+import { MarkdownDocumentProps } from '../../render-page/markdown-document'
 import { ImageDetails } from '../../render-page/rendering-message'
-import { ScrollState } from '../scroll/scroll-props'
-import { DocumentRenderPaneProps } from './document-render-pane'
+import { ScrollState } from '../synced-scroll/scroll-props'
 import { useOnIframeLoad } from './hooks/use-on-iframe-load'
 import { ShowOnPropChangeImageLightbox } from './show-on-prop-change-image-lightbox'
 
-export const DocumentIframe: React.FC<DocumentRenderPaneProps> = (
+export const RenderIframe: React.FC<MarkdownDocumentProps> = (
   {
     markdownContent,
     onTaskCheckedChange,

src/components/editor-page/renderer-pane/show-on-prop-change-image-lightbox.tsx

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback, useEffect, useState } from 'react'
+import { ImageLightboxModal } from '../../markdown-renderer/replace-components/image/image-lightbox-modal'
+import { ImageDetails } from '../../render-page/rendering-message'
+
+export interface ShowOnPropChangeImageLightboxProps {
+  details?: ImageDetails
+}
+
+export const ShowOnPropChangeImageLightbox: React.FC<ShowOnPropChangeImageLightboxProps> = ({ details }) => {
+  const [show, setShow] = useState<boolean>(false)
+
+  const hideLightbox = useCallback(() => {
+    setShow(false)
+  }, [])
+
+  useEffect(() => {
+    if (details) {
+      setShow(true)
+    }
+  }, [details])
+
+  return (
+    <ImageLightboxModal show={show} onHide={hideLightbox} src={details?.src}
+                        alt={details?.alt} title={details?.title}/>
+  )
+}