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

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

src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.module.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

@@ -9,7 +9,7 @@ import type { CustomEmoji, EmojiClickEvent, EmojiClickEventDetail } from 'emoji-
 import React, { useEffect, useRef } from 'react'
 import { useClickAway } from 'react-use'
 import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated'
-import './emoji-picker.scss'
+import styles from './emoji-picker.module.scss'
 import forkawesomeIcon from './forkawesome.png'
 import { ForkAwesomeIcons } from '../../../../common/fork-awesome/fork-awesome-icons'
 
@@ -22,11 +22,11 @@ export interface EmojiPickerProps {
 export const customEmojis: CustomEmoji[] = ForkAwesomeIcons.map((name) => ({
   name: `fa-${name}`,
   shortcodes: [`fa-${name.toLowerCase()}`],
-  url: forkawesomeIcon,
+  url: forkawesomeIcon.src,
   category: 'ForkAwesome'
 }))
 
-export const EMOJI_DATA_PATH = '/static/js/emoji-data.json'
+export const EMOJI_DATA_PATH = '/_next/static/js/emoji-data.json'
 
 export const emojiPickerConfig = {
   customEmoji: customEmojis,
@@ -92,6 +92,9 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({ show, onEmojiSelected,
   }, [darkModeEnabled])
 
   return (
-    <div className={`position-absolute emoji-picker-container ${!show ? 'd-none' : ''}`} ref={pickerContainerRef} />
+    <div
+      className={`position-absolute ${styles['emoji-picker-container']} ${!show ? 'd-none' : ''}`}
+      ref={pickerContainerRef}
+    />
   )
 }

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

@@ -27,7 +27,7 @@ enum PickerMode {
 }
 
 /**
- * Toggles the visibility of a {@link TableSizePicker table size picker overlay} and inserts the result into the editor.
+ * Toggles the visibility of a table size picker overlay and inserts the result into the editor.
  *
  * @param editor The editor in which the result should get inserted
  */
@@ -72,12 +72,11 @@ export const TablePickerButton: React.FC<TablePickerButtonProps> = ({ editor })
       <TableSizePickerPopover
         onTableSizeSelected={onSizeSelect}
         onShowCustomSizeModal={onShowModal}
-        onDismiss={onDismiss}
         onRefUpdate={ref}
         {...popoverProps}
       />
     ),
-    [onDismiss, onShowModal, onSizeSelect]
+    [onShowModal, onSizeSelect]
   )
 
   return (

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

@@ -1,4 +1,4 @@
-/*!
+/*
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
@@ -6,7 +6,7 @@
 
 
 .table-picker-container {
-  @import "../../../../../style/variables.light";
+  @import "../../../../../../global-styles/variables.light";
 
   z-index: 1111;
 

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

@@ -13,12 +13,11 @@ import { cypressAttribute, cypressId } from '../../../../../utils/cypress-attrib
 import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
 import type { PopoverProps } from 'react-bootstrap/Popover'
 import { useOnRefChange } from '../../../../markdown-renderer/hooks/use-on-ref-change'
-import './table-picker.scss'
+import styles from './table-picker.module.scss'
 
 export interface TableSizePickerPopoverProps extends Omit<PopoverProps, 'id'> {
   onShowCustomSizeModal: () => void
   onTableSizeSelected: (rows: number, cols: number) => void
-  onDismiss: () => void
   onRefUpdate: (newRef: HTMLDivElement | null) => void
 }
 
@@ -30,7 +29,6 @@ export interface TableSize {
 export const TableSizePickerPopover: React.FC<TableSizePickerPopoverProps> = ({
   onShowCustomSizeModal,
   onTableSizeSelected,
-  onDismiss,
   onRefUpdate,
   ...props
 }) => {
@@ -55,8 +53,10 @@ export const TableSizePickerPopover: React.FC<TableSizePickerPopoverProps> = ({
           return (
             <div
               key={`${row}_${col}`}
-              className={`table-cell ${selected ? 'bg-primary border-primary' : ''}`}
+              className={`${styles['table-cell']} ${selected ? 'bg-primary border-primary' : ''}`}
               {...cypressAttribute('selected', selected ? 'true' : 'false')}
+              {...cypressAttribute('col', `${col + 1}`)}
+              {...cypressAttribute('row', `${row + 1}`)}
               onMouseEnter={onSizeHover(row + 1, col + 1)}
               title={t('editor.editorToolbar.table.size', { cols: col + 1, rows: row + 1 })}
               onClick={() => onTableSizeSelected(row + 1, col + 1)}
@@ -76,12 +76,12 @@ export const TableSizePickerPopover: React.FC<TableSizePickerPopoverProps> = ({
       ref={popoverRef}
       id={'table-picker'}
       {...cypressId('table-size-picker-popover')}
-      className={`table-picker-container bg-light`}>
+      className={`${styles['table-picker-container']} bg-light`}>
       <Popover.Title>
         <TableSizeText tableSize={tableSize} />
       </Popover.Title>
       <Popover.Content>
-        <div className={'table-container'} role='grid'>
+        <div className={styles['table-container']} role='grid'>
           {tableContainer}
         </div>
         <div className='d-flex justify-content-center mt-2'>

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

@@ -1,19 +1,19 @@
-/*!
+/*
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-.btn-toolbar {
+:global(.btn-toolbar).toolbar {
   border-bottom: 1px solid #ededed;
   border-top: 1px solid #ededed;
 
-  .btn {
+  :global(.btn) {
     padding: 0.1875rem 0.5rem;
     min-width: 30px;
   }
 
-  .btn-group:not(:last-of-type)::after {
+  :global(.btn-group):not(:last-of-type)::after {
     background-color: #e2e6ea;
     width: 2px;
     padding: 0.25rem 0;

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

@@ -12,7 +12,7 @@ import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import { EditorPreferences } from './editor-preferences/editor-preferences'
 import { EmojiPickerButton } from './emoji-picker/emoji-picker-button'
 import { TablePickerButton } from './table-picker/table-picker-button'
-import './tool-bar.scss'
+import styles from './tool-bar.module.scss'
 import { UploadImageButton } from './upload-image-button'
 import {
   addCodeFences,
@@ -47,7 +47,7 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
   }
 
   return (
-    <ButtonToolbar className='bg-light'>
+    <ButtonToolbar className={`bg-light ${styles.toolbar}`}>
       <ButtonGroup className={'mx-1 flex-wrap'}>
         <Button
           {...cypressId('format-bold')}

src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.test.ts

@@ -567,7 +567,6 @@ describe('test addQuotes', () => {
       }
     })
     addQuotes(editor)
-    done()
   })
 
   it('1st line', (done) => {