Switch the base framework from Create React App to Next.JS

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

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

@@ -28,7 +28,7 @@ export const IframeMarkdownRenderer: React.FC = () => {
   const communicator = useRendererToEditorCommunicator()
 
   const countWordsInRenderedDocument = useCallback(() => {
-    const documentContainer = document.querySelector('.markdown-body')
+    const documentContainer = document.querySelector('[data-word-count-target]')
     communicator.sendMessageToOtherSide({
       type: CommunicationMessageType.ON_WORD_COUNT_CALCULATED,
       words: documentContainer ? countWords(documentContainer) : 0

src/components/render-page/markdown-document.module.scss

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

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

@@ -13,7 +13,7 @@ import { useDocumentSyncScrolling } from './hooks/sync-scroll/use-document-sync-
 import type { ScrollProps } from '../editor-page/synced-scroll/scroll-props'
 import { DocumentMarkdownRenderer } from '../markdown-renderer/document-markdown-renderer'
 import type { ImageClickHandler } from '../markdown-renderer/markdown-extension/image/proxy-image-replacer'
-import './markdown-document.scss'
+import styles from './markdown-document.module.scss'
 import { WidthBasedTableOfContents } from './width-based-table-of-contents'
 import { ShowIf } from '../common/show-if/show-if'
 import { useApplicationState } from '../../hooks/common/use-application-state'
@@ -81,12 +81,12 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
 
   return (
     <div
-      className={`markdown-document ${additionalOuterContainerClasses ?? ''}`}
+      className={`${styles['markdown-document']} ${additionalOuterContainerClasses ?? ''}`}
       ref={internalDocumentRenderPaneRef}
       onScroll={onUserScroll}
       onMouseEnter={onMakeScrollSource}>
-      <div className={'markdown-document-side'} />
-      <div className={'markdown-document-content'}>
+      <div className={styles['markdown-document-side']} />
+      <div className={styles['markdown-document-content']}>
         <InvalidYamlAlert show={!!frontmatterInfo?.frontmatterInvalid} />
         <YamlArrayDeprecationAlert show={!!frontmatterInfo?.deprecatedSyntax} />
         <DocumentMarkdownRenderer
@@ -103,7 +103,7 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
           lineOffset={frontmatterInfo?.lineOffset}
         />
       </div>
-      <div className={'markdown-document-side pt-4'}>
+      <div className={`${styles['markdown-document-side']} pt-4`}>
         <ShowIf condition={!!tocAst && !disableToc}>
           <WidthBasedTableOfContents tocAst={tocAst as TocAst} baseUrl={baseUrl} width={containerWidth} />
         </ShowIf>

src/components/render-page/markdown-toc-button/markdown-toc-button.module.scss

@@ -1,4 +1,4 @@
-/*!
+/*
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
@@ -9,7 +9,7 @@
   right: 70px;
   bottom: 30px;
 
-  & > .dropup {
+  & > :global(.dropup) {
     position: sticky;
     bottom: 20px;
     right: 0;

src/components/render-page/markdown-toc-button/table-of-contents-hovering-button.tsx

@@ -9,7 +9,7 @@ import { Dropdown } from 'react-bootstrap'
 import type { TocAst } from 'markdown-it-toc-done-right'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { TableOfContents } from '../../editor-page/table-of-contents/table-of-contents'
-import './markdown-toc-button.scss'
+import styles from './markdown-toc-button.module.scss'
 
 export interface MarkdownTocButtonProps {
   tocAst: TocAst
@@ -25,7 +25,7 @@ export interface MarkdownTocButtonProps {
  */
 export const TableOfContentsHoveringButton: React.FC<MarkdownTocButtonProps> = ({ tocAst, baseUrl }) => {
   return (
-    <div className={'markdown-toc-sidebar-button'}>
+    <div className={styles['markdown-toc-sidebar-button']}>
       <Dropdown drop={'up'}>
         <Dropdown.Toggle id='toc-overlay-button' variant={'secondary'} className={'no-arrow'}>
           <ForkAwesomeIcon icon={'list-ol'} />

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

@@ -1,21 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import React from 'react'
-import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
-import { IframeMarkdownRenderer } from './iframe-markdown-renderer'
-import { RendererToEditorCommunicatorContextProvider } from '../editor-page/render-context/renderer-to-editor-communicator-context-provider'
-
-export const RenderPage: React.FC = () => {
-  useApplyDarkMode()
-
-  return (
-    <RendererToEditorCommunicatorContextProvider>
-      <IframeMarkdownRenderer />
-    </RendererToEditorCommunicatorContextProvider>
-  )
-}
-
-export default RenderPage