fix(frontend): reformat source files

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

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

@@ -3,14 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import type { PropsWithChildren } from 'react'
-import React, { Fragment, Suspense, useMemo } from 'react'
+import { Logger } from '../../utils/logger'
+import { ApplicationLoaderError } from './application-loader-error'
 import { createSetUpTaskList } from './initializers'
 import { LoadingScreen } from './loading-screen/loading-screen'
-import { Logger } from '../../utils/logger'
+import type { PropsWithChildren } from 'react'
+import React, { Fragment, Suspense, useMemo } from 'react'
 import { useAsync } from 'react-use'
-import { ApplicationLoaderError } from './application-loader-error'
 
 const log = new Logger('ApplicationLoader')
 

frontend/src/components/application-loader/initializers/fetch-frontend-config.ts

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import { getConfig } from '../../../api/config'
 import { setConfig } from '../../../redux/config/methods'
 

frontend/src/components/application-loader/initializers/index.ts

@@ -3,14 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { setUpI18n } from './setupI18n'
 import { refreshHistoryState } from '../../../redux/history/methods'
+import { Logger } from '../../../utils/logger'
+import { isDevMode, isTestMode } from '../../../utils/test-modes'
 import { fetchAndSetUser } from '../../login-page/auth/utils'
 import { fetchFrontendConfig } from './fetch-frontend-config'
 import { loadDarkMode } from './load-dark-mode'
-import { isDevMode, isTestMode } from '../../../utils/test-modes'
-import { Logger } from '../../../utils/logger'
+import { setUpI18n } from './setupI18n'
 
 const logger = new Logger('Application Loader')
 

frontend/src/components/application-loader/initializers/load-dark-mode.ts

@@ -3,11 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { setDarkModePreference } from '../../../redux/dark-mode/methods'
-import { Logger } from '../../../utils/logger'
-import { isClientSideRendering } from '../../../utils/is-client-side-rendering'
-import { DarkModePreference } from '../../../redux/dark-mode/types'
 import { DARK_MODE_LOCAL_STORAGE_KEY } from '../../../hooks/common/use-apply-dark-mode'
+import { setDarkModePreference } from '../../../redux/dark-mode/methods'
+import { DarkModePreference } from '../../../redux/dark-mode/types'
+import { isClientSideRendering } from '../../../utils/is-client-side-rendering'
+import { Logger } from '../../../utils/logger'
 
 const logger = new Logger('Dark mode initializer')
 

frontend/src/components/application-loader/initializers/setupI18n.ts

@@ -3,14 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { isDevMode } from '../../../utils/test-modes'
 import type { ResourceKey } from 'i18next'
 import i18n, { use as i18nUse } from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import resourcesToBackend from 'i18next-resources-to-backend'
 import { Settings } from 'luxon'
 import { initReactI18next } from 'react-i18next'
-import { isDevMode } from '../../../utils/test-modes'
 
 /**
  * Set up the internationalisation framework i18n.

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

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useMemo } from 'react'
 import { createNumberRangeArray } from '../../common/number-range/number-range'
-import { RandomIcon } from './random-icon'
 import styles from './animations.module.scss'
+import { RandomIcon } from './random-icon'
+import React, { useMemo } from 'react'
 
 /**
  * Shows a number of {@link RandomIcon random icons in a row}.

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

@@ -3,12 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useMemo } from 'react'
-import styles from './animations.module.scss'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
-import { IconRow } from './icon-row'
 import { createNumberRangeArray } from '../../common/number-range/number-range'
+import styles from './animations.module.scss'
+import { IconRow } from './icon-row'
+import React, { useMemo } from 'react'
 
 export interface HedgeDocLogoProps {
   error: boolean

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

@@ -3,13 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { ShowIf } from '../../common/show-if/show-if'
+import styles from '../application-loader.module.scss'
+import { LoadingAnimation } from './loading-animation'
 import type { ReactElement } from 'react'
 import React from 'react'
 import { Alert } from 'react-bootstrap'
-import { LoadingAnimation } from './loading-animation'
-import { ShowIf } from '../../common/show-if/show-if'
-import styles from '../application-loader.module.scss'
 
 export interface LoadingScreenProps {
   errorMessage?: string | ReactElement

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

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useEffect, useState } from 'react'
-import type { IconName } from '../../common/fork-awesome/types'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import type { IconName } from '../../common/fork-awesome/types'
 import styles from './animations.module.scss'
+import React, { useEffect, useState } from 'react'
 
 const elements: IconName[] = [
   'file-text',

frontend/src/components/common/async-loading-boundary.tsx

@@ -3,12 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { WaitSpinner } from './wait-spinner/wait-spinner'
 import type { PropsWithChildren, ReactNode } from 'react'
 import React, { Fragment } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import { WaitSpinner } from './wait-spinner/wait-spinner'
 import { Alert } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
 
 export interface AsyncLoadingBoundaryProps {
   loading: boolean

frontend/src/components/common/base-url/base-url-context-provider.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import React, { createContext, useState } from 'react'
 import type { PropsWithChildren } from 'react'
 

frontend/src/components/common/branding/branding.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useMemo } from 'react'
+import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { ShowIf } from '../show-if/show-if'
 import styles from './branding.module.scss'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
+import React, { useMemo } from 'react'
 
 export interface BrandingProps {
   inline?: boolean

frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.test.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
 import { CopyToClipboardButton } from './copy-to-clipboard-button'
 import { act, render, screen } from '@testing-library/react'

frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
+import { cypressId } from '../../../../utils/cypress-attribute'
+import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
+import { useCopyOverlay } from '../hooks/use-copy-overlay'
 import React, { Fragment, useRef } from 'react'
 import { Button } from 'react-bootstrap'
 import type { Variant } from 'react-bootstrap/types'
 import { useTranslation } from 'react-i18next'
-import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
-import { useCopyOverlay } from '../hooks/use-copy-overlay'
-import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
-import { cypressId } from '../../../../utils/cypress-attribute'
 
 export interface CopyToClipboardButtonProps extends PropsWithDataCypressId {
   content: string

frontend/src/components/common/copyable/copyable-field/copyable-field.tsx

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { isClientSideRendering } from '../../../../utils/is-client-side-rendering'
+import { Logger } from '../../../../utils/logger'
+import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../../show-if/show-if'
+import { CopyToClipboardButton } from '../copy-to-clipboard-button/copy-to-clipboard-button'
 import React, { useCallback, useMemo } from 'react'
 import { Button, FormControl, InputGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
-import { ShowIf } from '../../show-if/show-if'
-import { Logger } from '../../../../utils/logger'
-import { isClientSideRendering } from '../../../../utils/is-client-side-rendering'
-import { CopyToClipboardButton } from '../copy-to-clipboard-button/copy-to-clipboard-button'
 
 export interface CopyableFieldProps {
   content: string

frontend/src/components/common/copyable/hooks/use-copy-overlay.tsx

@@ -3,16 +3,15 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { isClientSideRendering } from '../../../../utils/is-client-side-rendering'
+import { Logger } from '../../../../utils/logger'
+import { ShowIf } from '../../show-if/show-if'
 import type { ReactElement, RefObject } from 'react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Overlay, Tooltip } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { v4 as uuid } from 'uuid'
-import { ShowIf } from '../../show-if/show-if'
-import { Logger } from '../../../../utils/logger'
-import { isClientSideRendering } from '../../../../utils/is-client-side-rendering'
 import { useTimeoutFn } from 'react-use'
+import { v4 as uuid } from 'uuid'
 
 const log = new Logger('useCopyOverlay')
 

frontend/src/components/common/countdown-button/countdown-button.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import React, { useState } from 'react'
 import type { ButtonProps } from 'react-bootstrap'
 import { Button } from 'react-bootstrap'

frontend/src/components/common/fields/current-password-field.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
 import type { CommonFieldProps } from './fields'
+import React from 'react'
 import { Form } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 

frontend/src/components/common/fields/display-name-field.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useMemo } from 'react'
 import type { CommonFieldProps } from './fields'
+import React, { useMemo } from 'react'
 import { Form } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 

frontend/src/components/common/fields/fields.ts

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import type { ChangeEvent } from 'react'
 
 export interface CommonFieldProps {

frontend/src/components/common/fields/new-password-field.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useMemo } from 'react'
 import type { CommonFieldProps } from './fields'
+import React, { useMemo } from 'react'
 import { Form } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 

frontend/src/components/common/fields/password-again-field.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useMemo } from 'react'
 import type { CommonFieldProps } from './fields'
+import React, { useMemo } from 'react'
 import { Form } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 

frontend/src/components/common/fields/username-field.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useMemo } from 'react'
 import type { CommonFieldProps } from './fields'
+import React, { useMemo } from 'react'
 import { Form } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 

frontend/src/components/common/fork-awesome/fork-awesome-icon.test.tsx

@@ -3,10 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { ForkAwesomeIcon } from './fork-awesome-icon'
 import type { IconName } from './types'
 import { render } from '@testing-library/react'
-import { ForkAwesomeIcon } from './fork-awesome-icon'
 
 describe('ForkAwesomeIcon', () => {
   const icon: IconName = 'heart'

frontend/src/components/common/fork-awesome/fork-awesome-icon.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
 import type { IconName, IconSize } from './types'
+import React from 'react'
 
 export interface ForkAwesomeIconProps {
   icon: IconName

frontend/src/components/common/fork-awesome/fork-awesome-stack.test.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { render } from '@testing-library/react'
-import { ForkAwesomeStack } from './fork-awesome-stack'
 import type { ForkAwesomeIconProps } from './fork-awesome-icon'
 import { ForkAwesomeIcon } from './fork-awesome-icon'
+import { ForkAwesomeStack } from './fork-awesome-stack'
+import { render } from '@testing-library/react'
 import type { ReactElement } from 'react'
 
 describe('ForkAwesomeStack', () => {

frontend/src/components/common/fork-awesome/fork-awesome-stack.tsx

@@ -3,12 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import type { ReactElement } from 'react'
-import React from 'react'
 import type { ForkAwesomeIconProps } from './fork-awesome-icon'
 import { ForkAwesomeIcon } from './fork-awesome-icon'
 import type { IconSize } from './types'
+import type { ReactElement } from 'react'
+import React from 'react'
 
 export interface ForkAwesomeStackProps {
   size?: IconSize

frontend/src/components/common/fork-awesome/types.d.ts

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import type { ForkAwesomeIcons } from './fork-awesome-icons'
 
 export type IconName = typeof ForkAwesomeIcons[number]

frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useMemo } from 'react'
 import LogoBwHorizontal from './logo_text_bw_horizontal.svg'
 import LogoColorVertical from './logo_text_color_vertical.svg'
 import LogoWbHorizontal from './logo_text_wb_horizontal.svg'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export enum HedgeDocLogoSize {

frontend/src/components/common/icon-button/icon-button.test.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import type { IconName } from '../fork-awesome/types'
 import { IconButton } from './icon-button'
 import { fireEvent, render, screen } from '@testing-library/react'

frontend/src/components/common/icon-button/icon-button.tsx

@@ -3,16 +3,15 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
-import type { ButtonProps } from 'react-bootstrap'
-import { Button } from 'react-bootstrap'
+import type { PropsWithDataTestId } from '../../../utils/test-id'
+import { testId } from '../../../utils/test-id'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 import type { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import styles from './icon-button.module.scss'
-import type { PropsWithDataTestId } from '../../../utils/test-id'
-import { testId } from '../../../utils/test-id'
+import React from 'react'
+import type { ButtonProps } from 'react-bootstrap'
+import { Button } from 'react-bootstrap'
 
 export interface IconButtonProps extends ButtonProps, PropsWithDataTestId {
   icon: IconName

frontend/src/components/common/icon-button/translated-icon-button.test.tsx

@@ -3,10 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
-import { render } from '@testing-library/react'
 import { TranslatedIconButton } from './translated-icon-button'
+import { render } from '@testing-library/react'
 
 describe('TranslatedIconButton', () => {
   it('renders heart icon with i18nKey', async () => {

frontend/src/components/common/icon-button/translated-icon-button.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
-import { Trans } from 'react-i18next'
 import type { IconButtonProps } from './icon-button'
 import { IconButton } from './icon-button'
+import React from 'react'
+import { Trans } from 'react-i18next'
 
 export interface TranslatedIconButtonProps extends IconButtonProps {
   i18nKey: string

frontend/src/components/common/links/external-link.test.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { render } from '@testing-library/react'
 import { ExternalLink } from './external-link'
+import { render } from '@testing-library/react'
 
 describe('ExternalLink', () => {
   const href = 'https://example.com'

frontend/src/components/common/links/external-link.tsx

@@ -3,12 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 import type { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import type { LinkWithTextProps } from './types'
+import React from 'react'
 
 /**
  * An external link.

frontend/src/components/common/links/internal-link.test.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { render } from '@testing-library/react'
 import { InternalLink } from './internal-link'
+import { render } from '@testing-library/react'
 
 describe('InternalLink', () => {
   const href = '/test'

frontend/src/components/common/links/internal-link.tsx

@@ -3,13 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import Link from 'next/link'
-import React from 'react'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 import type { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import type { LinkWithTextProps } from './types'
+import Link from 'next/link'
+import React from 'react'
 
 /**
  * An internal link.

frontend/src/components/common/links/translated-external-link.test.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { TranslatedExternalLink } from './translated-external-link'
 import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
+import { TranslatedExternalLink } from './translated-external-link'
 import { render } from '@testing-library/react'
 
 describe('TranslatedExternalLink', () => {

frontend/src/components/common/links/translated-external-link.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { ExternalLink } from './external-link'
 import type { TranslatedLinkProps } from './types'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 /**
  * An {@link ExternalLink external link} with translated text.

frontend/src/components/common/links/translated-internal-link.test.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { TranslatedInternalLink } from './translated-internal-link'
 import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
+import { TranslatedInternalLink } from './translated-internal-link'
 import { render } from '@testing-library/react'
 
 describe('TranslatedInternalLink', () => {

frontend/src/components/common/links/translated-internal-link.tsx

@@ -3,11 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { InternalLink } from './internal-link'
 import type { TranslatedLinkProps } from './types'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
 /**
  * An {@link InternalLink internal link} with translated text.
  *

frontend/src/components/common/links/types.d.ts

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import type { TOptions } from 'i18next'
 import type { IconName } from '../fork-awesome/fork-awesome-icon'
+import type { TOptions } from 'i18next'
 
 interface GeneralLinkProp {
   href: string

frontend/src/components/common/lock-button/lock-button.tsx

@@ -3,10 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 import React from 'react'
 import { Button } from 'react-bootstrap'
-import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 
 export interface LockButtonProps {
   locked: boolean

frontend/src/components/common/modals/common-modal.test.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { fireEvent, render, screen } from '@testing-library/react'
 import { CommonModal } from './common-modal'
+import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 
 describe('CommonModal', () => {

frontend/src/components/common/modals/common-modal.tsx

@@ -3,17 +3,16 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
+import { cypressId } from '../../../utils/cypress-attribute'
+import { testId } from '../../../utils/test-id'
+import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
+import type { IconName } from '../fork-awesome/types'
+import { ShowIf } from '../show-if/show-if'
 import type { PropsWithChildren } from 'react'
 import React, { useMemo } from 'react'
 import { Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
-import type { IconName } from '../fork-awesome/types'
-import { ShowIf } from '../show-if/show-if'
-import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
-import { cypressId } from '../../../utils/cypress-attribute'
-import { testId } from '../../../utils/test-id'
 
 export interface ModalVisibilityProps {
   show: boolean

frontend/src/components/common/modals/deletion-moadal.test.tsx

@@ -3,10 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
-import { render, screen } from '@testing-library/react'
 import { DeletionModal } from './deletion-modal'
+import { render, screen } from '@testing-library/react'
 
 describe('DeletionModal', () => {
   it('renders correctly with deletionButtonI18nKey', async () => {

frontend/src/components/common/modals/deletion-modal.tsx

@@ -3,14 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { cypressId } from '../../../utils/cypress-attribute'
+import type { CommonModalProps } from './common-modal'
+import { CommonModal } from './common-modal'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import type { CommonModalProps } from './common-modal'
-import { CommonModal } from './common-modal'
-import { cypressId } from '../../../utils/cypress-attribute'
 
 export interface DeletionModalProps extends CommonModalProps {
   onConfirm: () => void

frontend/src/components/common/motd-modal/fetch-motd.test.ts

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { Mock } from 'ts-mockery'
 import { fetchMotd } from './fetch-motd'
+import { Mock } from 'ts-mockery'
 
 describe('fetch motd', () => {
   const motdUrl = 'public/motd.md'

frontend/src/components/common/motd-modal/fetch-motd.ts

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { Logger } from '../../../utils/logger'
 import { defaultConfig } from '../../../api/common/default-config'
+import { Logger } from '../../../utils/logger'
 
 export const MOTD_LOCAL_STORAGE_KEY = 'motd.lastModified'
 const log = new Logger('Motd')

frontend/src/components/common/motd-modal/motd-modal.test.tsx

@@ -3,18 +3,17 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { MotdModal } from './motd-modal'
-import { act, render, screen } from '@testing-library/react'
-import * as fetchMotdModule from './fetch-motd'
+import * as UseBaseUrlModule from '../../../hooks/common/use-base-url'
+import { testId } from '../../../utils/test-id'
+import * as RenderIframeModule from '../../editor-page/renderer-pane/render-iframe'
+import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
 import type { CommonModalProps } from '../modals/common-modal'
 import * as CommonModalModule from '../modals/common-modal'
+import * as fetchMotdModule from './fetch-motd'
+import { MotdModal } from './motd-modal'
+import { act, render, screen } from '@testing-library/react'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
-import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
-import * as RenderIframeModule from '../../editor-page/renderer-pane/render-iframe'
-import { testId } from '../../../utils/test-id'
-import * as UseBaseUrlModule from '../../../hooks/common/use-base-url'
 
 jest.mock('./fetch-motd')
 jest.mock('../modals/common-modal')

frontend/src/components/common/motd-modal/motd-modal.tsx

@@ -3,19 +3,18 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useCallback, useMemo, useEffect, useState } from 'react'
-import { Button, Modal } from 'react-bootstrap'
-import { CommonModal } from '../modals/common-modal'
-import { Trans, useTranslation } from 'react-i18next'
-import { fetchMotd, MOTD_LOCAL_STORAGE_KEY } from './fetch-motd'
-import { useAsync } from 'react-use'
+import { cypressId } from '../../../utils/cypress-attribute'
 import { Logger } from '../../../utils/logger'
 import { testId } from '../../../utils/test-id'
+import { EditorToRendererCommunicatorContextProvider } from '../../editor-page/render-context/editor-to-renderer-communicator-context-provider'
 import { RenderIframe } from '../../editor-page/renderer-pane/render-iframe'
 import { RendererType } from '../../render-page/window-post-message-communicator/rendering-message'
-import { EditorToRendererCommunicatorContextProvider } from '../../editor-page/render-context/editor-to-renderer-communicator-context-provider'
-import { cypressId } from '../../../utils/cypress-attribute'
+import { CommonModal } from '../modals/common-modal'
+import { fetchMotd, MOTD_LOCAL_STORAGE_KEY } from './fetch-motd'
+import React, { useCallback, useMemo, useEffect, useState } from 'react'
+import { Button, Modal } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { useAsync } from 'react-use'
 
 const logger = new Logger('Motd')
 

frontend/src/components/common/note-loading-boundary/create-non-existing-note-hint.test.tsx

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import * as useSingleStringUrlParameterModule from '../../../hooks/common/use-single-string-url-parameter'
-import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
-import { act, render, screen, waitFor } from '@testing-library/react'
-import { CreateNonExistingNoteHint } from './create-non-existing-note-hint'
 import * as createNoteWithPrimaryAliasModule from '../../../api/notes'
 import type { Note, NoteMetadata } from '../../../api/notes/types'
-import { Mock } from 'ts-mockery'
+import * as useSingleStringUrlParameterModule from '../../../hooks/common/use-single-string-url-parameter'
 import { waitForOtherPromisesToFinish } from '../../../utils/wait-for-other-promises-to-finish'
+import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
+import { CreateNonExistingNoteHint } from './create-non-existing-note-hint'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import { Mock } from 'ts-mockery'
 
 jest.mock('../../../api/notes')
 jest.mock('../../../hooks/common/use-single-string-url-parameter')

frontend/src/components/common/note-loading-boundary/create-non-existing-note-hint.tsx

@@ -3,16 +3,15 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { Trans, useTranslation } from 'react-i18next'
+import { createNoteWithPrimaryAlias } from '../../../api/notes'
+import { useSingleStringUrlParameter } from '../../../hooks/common/use-single-string-url-parameter'
+import { testId } from '../../../utils/test-id'
+import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../show-if/show-if'
 import React, { useCallback, useEffect } from 'react'
 import { Alert, Button } from 'react-bootstrap'
-import { useSingleStringUrlParameter } from '../../../hooks/common/use-single-string-url-parameter'
-import { createNoteWithPrimaryAlias } from '../../../api/notes'
+import { Trans, useTranslation } from 'react-i18next'
 import { useAsyncFn } from 'react-use'
-import { ShowIf } from '../show-if/show-if'
-import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
-import { testId } from '../../../utils/test-id'
 
 export interface CreateNonExistingNoteHintProps {
   onNoteCreated: () => void

frontend/src/components/common/note-loading-boundary/hooks/use-load-note-from-server.ts

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { useAsyncFn } from 'react-use'
 import { getNote } from '../../../../api/notes'
-import { setNoteDataFromServer } from '../../../../redux/note-details/methods'
 import { useSingleStringUrlParameter } from '../../../../hooks/common/use-single-string-url-parameter'
+import { setNoteDataFromServer } from '../../../../redux/note-details/methods'
+import { useAsyncFn } from 'react-use'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
 
 /**

frontend/src/components/common/note-loading-boundary/note-loading-boundary.test.tsx

@@ -3,19 +3,19 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import * as useSingleStringUrlParameterModule from '../../../hooks/common/use-single-string-url-parameter'
 import * as getNoteModule from '../../../api/notes'
-import * as setNoteDataFromServerModule from '../../../redux/note-details/methods'
 import type { Note } from '../../../api/notes/types'
-import { Mock } from 'ts-mockery'
-import { render, screen } from '@testing-library/react'
-import { NoteLoadingBoundary } from './note-loading-boundary'
-import { testId } from '../../../utils/test-id'
-import { Fragment } from 'react'
-import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
-import * as CommonErrorPageModule from '../../error-pages/common-error-page'
 import * as LoadingScreenModule from '../../../components/application-loader/loading-screen/loading-screen'
+import * as useSingleStringUrlParameterModule from '../../../hooks/common/use-single-string-url-parameter'
+import * as setNoteDataFromServerModule from '../../../redux/note-details/methods'
+import { testId } from '../../../utils/test-id'
+import * as CommonErrorPageModule from '../../error-pages/common-error-page'
+import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
 import * as CreateNonExistingNoteHintModule from './create-non-existing-note-hint'
+import { NoteLoadingBoundary } from './note-loading-boundary'
+import { render, screen } from '@testing-library/react'
+import { Fragment } from 'react'
+import { Mock } from 'ts-mockery'
 
 jest.mock('../../../hooks/common/use-single-string-url-parameter')
 jest.mock('../../../api/notes')

frontend/src/components/common/note-loading-boundary/note-loading-boundary.tsx

@@ -3,14 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import type { PropsWithChildren } from 'react'
-import React, { Fragment, useEffect } from 'react'
-import { useLoadNoteFromServer } from './hooks/use-load-note-from-server'
 import { LoadingScreen } from '../../application-loader/loading-screen/loading-screen'
 import { CommonErrorPage } from '../../error-pages/common-error-page'
-import { CreateNonExistingNoteHint } from './create-non-existing-note-hint'
 import { ShowIf } from '../show-if/show-if'
+import { CreateNonExistingNoteHint } from './create-non-existing-note-hint'
+import { useLoadNoteFromServer } from './hooks/use-load-note-from-server'
+import type { PropsWithChildren } from 'react'
+import React, { Fragment, useEffect } from 'react'
 
 /**
  * Loads the note identified by the note-id in the URL.

frontend/src/components/common/number-range/number-range.test.ts

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import { createNumberRangeArray } from './number-range'
 
 describe('number range', () => {

frontend/src/components/common/pagination/pager-item.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import React from 'react'
 
 export interface PageItemProps {

frontend/src/components/common/pagination/pager-pagination.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useEffect, useMemo, useState } from 'react'
-import { Pagination } from 'react-bootstrap'
 import { ShowIf } from '../show-if/show-if'
 import { PagerItem } from './pager-item'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Pagination } from 'react-bootstrap'
 
 export interface PaginationProps {
   numberOfPageButtonsToShowAfterAndBeforeCurrent: number

frontend/src/components/common/pagination/pager.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import type { PropsWithChildren } from 'react'
 import React, { Fragment, useEffect, useMemo } from 'react'
 

frontend/src/components/common/redirect-back.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useEffect } from 'react'
 import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
 
 /**
  * Redirects the user back to the previous URL.

frontend/src/components/common/redirect.tsx

@@ -3,12 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import Link from 'next/link'
-import React, { useEffect } from 'react'
-import { useRouter } from 'next/router'
 import { Logger } from '../../utils/logger'
 import { testId } from '../../utils/test-id'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
 
 export interface RedirectProps {
   to: string

frontend/src/components/common/show-if/show-if.test.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { render } from '@testing-library/react'
 import { ShowIf } from './show-if'
+import { render } from '@testing-library/react'
 
 describe('ShowIf', () => {
   it('renders child if condition is true', () => {

frontend/src/components/common/show-if/show-if.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import type { PropsWithChildren } from 'react'
 import React, { Fragment } from 'react'
 

frontend/src/components/common/user-avatar/user-avatar-for-username.tsx

@@ -3,14 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React from 'react'
-import { useAsync } from 'react-use'
 import { getUser } from '../../../api/users'
+import type { UserInfo } from '../../../api/users/types'
+import { AsyncLoadingBoundary } from '../async-loading-boundary'
 import type { UserAvatarProps } from './user-avatar'
 import { UserAvatar } from './user-avatar'
-import type { UserInfo } from '../../../api/users/types'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AsyncLoadingBoundary } from '../async-loading-boundary'
+import { useAsync } from 'react-use'
 
 export interface UserAvatarForUsernameProps extends Omit<UserAvatarProps, 'user'> {
   username: string | null

frontend/src/components/common/user-avatar/user-avatar.test.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { UserAvatar } from './user-avatar'
-import { render } from '@testing-library/react'
 import type { UserInfo } from '../../../api/users/types'
 import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
+import { UserAvatar } from './user-avatar'
+import { render } from '@testing-library/react'
 
 describe('UserAvatar', () => {
   const user: UserInfo = {

frontend/src/components/common/user-avatar/user-avatar.tsx

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { useCallback, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ShowIf } from '../show-if/show-if'
-import styles from './user-avatar.module.scss'
 import type { UserInfo } from '../../../api/users/types'
+import { ShowIf } from '../show-if/show-if'
 import defaultAvatar from './default-avatar.png'
+import styles from './user-avatar.module.scss'
+import React, { useCallback, useMemo } from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import type { OverlayInjectedProps } from 'react-bootstrap/Overlay'
+import { useTranslation } from 'react-i18next'
 
 export interface UserAvatarProps {
   size?: 'sm' | 'lg'

frontend/src/components/common/wait-spinner/wait-spinner.tsx

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
+import React from 'react'
 
 /**
  * Renders a indefinitely spinning spinner.

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

@@ -3,14 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React from 'react'
-import { Trans, useTranslation } from 'react-i18next'
+import { useApplicationState } from '../../hooks/common/use-application-state'
 import { InternalLink } from '../common/links/internal-link'
 import { ShowIf } from '../common/show-if/show-if'
-import styles from './document-infobar.module.scss'
-import { useApplicationState } from '../../hooks/common/use-application-state'
 import { NoteInfoLineCreated } from '../editor-page/document-bar/note-info/note-info-line-created'
 import { NoteInfoLineUpdated } from '../editor-page/document-bar/note-info/note-info-line-updated'
+import styles from './document-infobar.module.scss'
+import React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Renders an info bar with metadata about the current note.

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

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { Fragment } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTrimmedNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-trimmed-note-markdown-content-without-frontmatter'
 import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
-import { DocumentInfobar } from './document-infobar'
+import { setRendererStatus } from '../../redux/renderer-status/methods'
 import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
 import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
-import { useTrimmedNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-trimmed-note-markdown-content-without-frontmatter'
-import { setRendererStatus } from '../../redux/renderer-status/methods'
+import { DocumentInfobar } from './document-infobar'
+import React, { Fragment } from 'react'
+import { useTranslation } from 'react-i18next'
 
 /**
  * Renders the read-only version of a note with a header bar that contains information about the note.

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

@@ -3,20 +3,19 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
-import { Nav, Navbar } from 'react-bootstrap'
+import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { NoteType } from '../../../redux/note-details/types/note-details'
 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 { SettingsButton } from '../../layout/settings-dialog/settings-button'
 import { HelpButton } from './help-button/help-button'
 import { NavbarBranding } from './navbar-branding'
-import { SlideModeButton } from './slide-mode-button'
-import { ReadOnlyModeButton } from './read-only-mode-button'
 import { NewNoteButton } from './new-note-button'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
-import { NoteType } from '../../../redux/note-details/types/note-details'
-import { SettingsButton } from '../../layout/settings-dialog/settings-button'
+import { ReadOnlyModeButton } from './read-only-mode-button'
+import { SlideModeButton } from './slide-mode-button'
+import React from 'react'
+import { Nav, Navbar } from 'react-bootstrap'
 
 export enum AppBarMode {
   BASIC,

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

@@ -3,13 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { Suspense, useEffect, useMemo } from 'react'
+import type { TaskCheckedEventPayload } from '../../../../extensions/extra-integrations/task-list/event-emitting-task-list-checkbox'
+import { TaskListCheckboxAppExtension } from '../../../../extensions/extra-integrations/task-list/task-list-checkbox-app-extension'
 import { WaitSpinner } from '../../../common/wait-spinner/wait-spinner'
 import { eventEmitterContext } from '../../../markdown-renderer/hooks/use-extension-event-emitter'
 import EventEmitter2 from 'eventemitter2'
-import type { TaskCheckedEventPayload } from '../../../../extensions/extra-integrations/task-list/event-emitting-task-list-checkbox'
-import { TaskListCheckboxAppExtension } from '../../../../extensions/extra-integrations/task-list/task-list-checkbox-app-extension'
+import React, { Suspense, useEffect, useMemo } from 'react'
 
 export interface CheatsheetLineProps {
   markdown: string

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

@@ -3,12 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { CheatsheetLine } from './cheatsheet-line'
+import styles from './cheatsheet.module.scss'
 import React, { useMemo, useState } from 'react'
 import { Table } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { CheatsheetLine } from './cheatsheet-line'
-import styles from './cheatsheet.module.scss'
 
 /**
  * Renders the content of the cheat sheet for the {@link HelpModal}.

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

@@ -3,14 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
+import { cypressId } from '../../../../utils/cypress-attribute'
+import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import { HelpModal } from './help-modal'
 import React, { Fragment } from 'react'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
-import { HelpModal } from './help-modal'
-import { cypressId } from '../../../../utils/cypress-attribute'
-import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
 
 /**
  * Renders the button to open the {@link HelpModal}.

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

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { Button, Modal } from 'react-bootstrap'
-import { Trans, useTranslation } from 'react-i18next'
-import React, { useMemo, useState } from 'react'
 import type { ModalVisibilityProps } from '../../../common/modals/common-modal'
 import { CommonModal } from '../../../common/modals/common-modal'
-import { ShortcutTabContent } from './shortcuts-tab-content'
-import { LinksTabContent } from './links-tab-content'
 import { CheatsheetTabContent } from './cheatsheet-tab-content'
+import { LinksTabContent } from './links-tab-content'
+import { ShortcutTabContent } from './shortcuts-tab-content'
+import React, { useMemo, useState } from 'react'
+import { Button, Modal } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
 
 export enum HelpTabStatus {
   Cheatsheet = 'cheatsheet.title',

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

@@ -3,13 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
-import { Col, Row } from 'react-bootstrap'
-import { Trans, useTranslation } from 'react-i18next'
 import links from '../../../../links.json'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
 import { TranslatedInternalLink } from '../../../common/links/translated-internal-link'
+import React from 'react'
+import { Col, Row } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Renders a bunch of links, where further help can be requested.

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

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { isMac } from '../../utils'
 import React, { Fragment, useMemo } from 'react'
 import { Card, ListGroup, Row } from 'react-bootstrap'
 import { Trans } from 'react-i18next'
-import { isMac } from '../../utils'
 
 /**
  * Renders a list of shortcuts usable in HedgeDoc.

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

@@ -3,10 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
-import { Navbar } from 'react-bootstrap'
-import Link from 'next/link'
 import { useDarkModeState } from '../../../hooks/common/use-dark-mode-state'
 import { Branding } from '../../common/branding/branding'
 import {
@@ -14,6 +10,9 @@ import {
   HedgeDocLogoType,
   HedgeDocLogoWithText
 } from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
+import Link from 'next/link'
+import React from 'react'
+import { Navbar } from 'react-bootstrap'
 
 /**
  * Renders the branding for the {@link AppBar}

frontend/src/components/editor-page/app-bar/new-note-button.tsx

@@ -3,12 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
-import { Trans, useTranslation } from 'react-i18next'
-import { Button } from 'react-bootstrap'
 import Link from 'next/link'
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Renders a button to create a new note.

frontend/src/components/editor-page/app-bar/read-only-mode-button.tsx

@@ -3,13 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import Link from 'next/link'
 import React from 'react'
 import { Button } from 'react-bootstrap'
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { useTranslation } from 'react-i18next'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
-import Link from 'next/link'
 
 /**
  * Button that links to the read-only version of a note.

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

@@ -3,13 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import Link from 'next/link'
 import React from 'react'
 import { Button } from 'react-bootstrap'
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { useTranslation } from 'react-i18next'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
-import Link from 'next/link'
 
 /**
  * Button that links to the slide-show presentation of the current note.

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

@@ -3,13 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import type { PropsWithChildren } from 'react'
-import React, { createContext, useContext, useState } from 'react'
-import { Optional } from '@mrdrogdrog/optional'
-import type { EditorView } from '@codemirror/view'
 import type { ContentEdits } from '../editor-pane/tool-bar/formatters/types/changes'
 import type { CursorSelection } from '../editor-pane/tool-bar/formatters/types/cursor-selection'
+import type { EditorView } from '@codemirror/view'
+import { Optional } from '@mrdrogdrog/optional'
+import type { PropsWithChildren } from 'react'
+import React, { createContext, useContext, useState } from 'react'
 
 export type CodeMirrorReference = EditorView | undefined
 type SetCodeMirrorReference = (value: CodeMirrorReference) => void

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

@@ -3,13 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { useMemo } from 'react'
-import { Optional } from '@mrdrogdrog/optional'
+import type { CursorSelection } from '../editor-pane/tool-bar/formatters/types/cursor-selection'
 import type { ContentFormatter } from './change-content-context'
 import { useCodeMirrorReference } from './change-content-context'
-import type { CursorSelection } from '../editor-pane/tool-bar/formatters/types/cursor-selection'
 import type { EditorView } from '@codemirror/view'
+import { Optional } from '@mrdrogdrog/optional'
+import { useMemo } from 'react'
 
 /**
  * Changes the content of the given CodeMirror view using the given formatter function.

frontend/src/components/editor-page/document-bar/aliases/aliases-add-form.test.tsx

@@ -3,16 +3,15 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import * as AliasModule from '../../../../api/alias'
+import * as useApplicationStateModule from '../../../../hooks/common/use-application-state'
+import * as NoteDetailsReduxModule from '../../../../redux/note-details/methods'
+import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
+import * as useUiNotificationsModule from '../../../notifications/ui-notification-boundary'
+import { AliasesAddForm } from './aliases-add-form'
 import { render, act, screen } from '@testing-library/react'
 import testEvent from '@testing-library/user-event'
 import React from 'react'
-import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
-import * as AliasModule from '../../../../api/alias'
-import * as NoteDetailsReduxModule from '../../../../redux/note-details/methods'
-import * as useApplicationStateModule from '../../../../hooks/common/use-application-state'
-import { AliasesAddForm } from './aliases-add-form'
-import * as useUiNotificationsModule from '../../../notifications/ui-notification-boundary'
 
 jest.mock('../../../../api/alias')
 jest.mock('../../../../redux/note-details/methods')

frontend/src/components/editor-page/document-bar/aliases/aliases-add-form.tsx

@@ -3,17 +3,17 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { addAlias } from '../../../../api/alias'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { useOnInputChange } from '../../../../hooks/common/use-on-input-change'
+import { updateMetadata } from '../../../../redux/note-details/methods'
+import { testId } from '../../../../utils/test-id'
+import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
 import type { FormEvent } from 'react'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Button, Form, InputGroup } from 'react-bootstrap'
-import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import { useTranslation } from 'react-i18next'
-import { useApplicationState } from '../../../../hooks/common/use-application-state'
-import { addAlias } from '../../../../api/alias'
-import { updateMetadata } from '../../../../redux/note-details/methods'
-import { useOnInputChange } from '../../../../hooks/common/use-on-input-change'
-import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
-import { testId } from '../../../../utils/test-id'
 
 const validAliasRegex = /^[a-z0-9_-]*$/
 

frontend/src/components/editor-page/document-bar/aliases/aliases-list-entry.test.tsx

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import * as AliasModule from '../../../../api/alias'
+import type { Alias } from '../../../../api/alias/types'
+import * as NoteDetailsReduxModule from '../../../../redux/note-details/methods'
+import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
+import * as useUiNotificationsModule from '../../../notifications/ui-notification-boundary'
+import { AliasesListEntry } from './aliases-list-entry'
 import { render, act, screen } from '@testing-library/react'
 import React from 'react'
-import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
-import type { Alias } from '../../../../api/alias/types'
-import { AliasesListEntry } from './aliases-list-entry'
-import * as AliasModule from '../../../../api/alias'
-import * as NoteDetailsReduxModule from '../../../../redux/note-details/methods'
-import * as useUiNotificationsModule from '../../../notifications/ui-notification-boundary'
 
 jest.mock('../../../../api/alias')
 jest.mock('../../../../redux/note-details/methods')

frontend/src/components/editor-page/document-bar/aliases/aliases-list-entry.tsx

@@ -3,16 +3,16 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React, { useCallback } from 'react'
+import { deleteAlias, markAliasAsPrimary } from '../../../../api/alias'
+import type { Alias } from '../../../../api/alias/types'
+import { updateMetadata } from '../../../../redux/note-details/methods'
+import { testId } from '../../../../utils/test-id'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../../../common/show-if/show-if'
+import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
+import React, { useCallback } from 'react'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { ShowIf } from '../../../common/show-if/show-if'
-import type { Alias } from '../../../../api/alias/types'
-import { deleteAlias, markAliasAsPrimary } from '../../../../api/alias'
-import { updateMetadata } from '../../../../redux/note-details/methods'
-import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
-import { testId } from '../../../../utils/test-id'
 
 export interface AliasesListEntryProps {
   alias: Alias

frontend/src/components/editor-page/document-bar/aliases/aliases-list.test.tsx

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { render } from '@testing-library/react'
-import React from 'react'
-import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
 import type { Alias } from '../../../../api/alias/types'
 import * as useApplicationStateModule from '../../../../hooks/common/use-application-state'
+import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
+import { AliasesList } from './aliases-list'
 import * as AliasesListEntryModule from './aliases-list-entry'
 import type { AliasesListEntryProps } from './aliases-list-entry'
-import { AliasesList } from './aliases-list'
+import { render } from '@testing-library/react'
+import React from 'react'
 
 jest.mock('../../../../hooks/common/use-application-state')
 jest.mock('./aliases-list-entry')

frontend/src/components/editor-page/document-bar/aliases/aliases-list.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React, { Fragment, useMemo } from 'react'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 import type { ApplicationState } from '../../../../redux/application-state'
 import { AliasesListEntry } from './aliases-list-entry'
+import React, { Fragment, useMemo } from 'react'
 
 /**
  * Renders the list of aliases.

frontend/src/components/editor-page/document-bar/aliases/aliases-modal.test.tsx

@@ -3,16 +3,16 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import type { CommonModalProps } from '../../../common/modals/common-modal'
+import * as CommonModalModule from '../../../common/modals/common-modal'
+import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
+import * as useUiNotificationsModule from '../../../notifications/ui-notification-boundary'
+import * as AliasesAddFormModule from './aliases-add-form'
+import * as AliasesListModule from './aliases-list'
+import { AliasesModal } from './aliases-modal'
 import { render } from '@testing-library/react'
 import React from 'react'
 import type { PropsWithChildren } from 'react'
-import type { CommonModalProps } from '../../../common/modals/common-modal'
-import * as CommonModalModule from '../../../common/modals/common-modal'
-import * as AliasesListModule from './aliases-list'
-import * as AliasesAddFormModule from './aliases-add-form'
-import * as useUiNotificationsModule from '../../../notifications/ui-notification-boundary'
-import { AliasesModal } from './aliases-modal'
-import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
 
 jest.mock('./aliases-list')
 jest.mock('./aliases-add-form')

frontend/src/components/editor-page/document-bar/aliases/aliases-modal.tsx

@@ -3,13 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React from 'react'
-import { ListGroup, ListGroupItem, Modal } from 'react-bootstrap'
 import type { CommonModalProps } from '../../../common/modals/common-modal'
 import { CommonModal } from '../../../common/modals/common-modal'
-import { Trans, useTranslation } from 'react-i18next'
-import { AliasesList } from './aliases-list'
 import { AliasesAddForm } from './aliases-add-form'
+import { AliasesList } from './aliases-list'
+import React from 'react'
+import { ListGroup, ListGroupItem, Modal } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Component that holds a modal containing a list of aliases associated with the current note.

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

@@ -3,12 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { NoteInfoLine } from './note-info-line'
+import { UnitalicBoldContent } from './unitalic-bold-content'
 import React from 'react'
 import { Trans } from 'react-i18next'
-import { UnitalicBoldContent } from './unitalic-bold-content'
-import { NoteInfoLine } from './note-info-line'
-import { useApplicationState } from '../../../../hooks/common/use-application-state'
 
 /**
  * Renders an info line about the number of contributors for the note.

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

@@ -3,13 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React, { useMemo } from 'react'
-import { Trans } from 'react-i18next'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
 import { NoteInfoLine } from './note-info-line'
 import type { NoteInfoTimeLineProps } from './note-info-time-line'
-import { useApplicationState } from '../../../../hooks/common/use-application-state'
 import { UnitalicBoldTimeFromNow } from './utils/unitalic-bold-time-from-now'
 import { DateTime } from 'luxon'
+import React, { useMemo } from 'react'
+import { Trans } from 'react-i18next'
 
 /**
  * Renders an info line about the creation of the current note.

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

@@ -3,15 +3,15 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React, { useMemo } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import { NoteInfoLine } from './note-info-line'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-for-username'
+import { NoteInfoLine } from './note-info-line'
 import type { NoteInfoTimeLineProps } from './note-info-time-line'
 import { UnitalicBoldTimeFromNow } from './utils/unitalic-bold-time-from-now'
 import { UnitalicBoldTrans } from './utils/unitalic-bold-trans'
-import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-for-username'
 import { DateTime } from 'luxon'
+import React, { useMemo } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Renders an info line about the last update of the current note.

frontend/src/components/editor-page/document-bar/note-info/note-info-line-word-count.tsx

@@ -3,19 +3,18 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { cypressId } from '../../../../utils/cypress-attribute'
+import { ShowIf } from '../../../common/show-if/show-if'
+import { useEditorReceiveHandler } from '../../../render-page/window-post-message-communicator/hooks/use-editor-receive-handler'
+import type { OnWordCountCalculatedMessage } from '../../../render-page/window-post-message-communicator/rendering-message'
+import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
+import { useEditorToRendererCommunicator } from '../../render-context/editor-to-renderer-communicator-context-provider'
+import { NoteInfoLine } from './note-info-line'
+import { UnitalicBoldContent } from './unitalic-bold-content'
 import type { PropsWithChildren } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { ShowIf } from '../../../common/show-if/show-if'
-import { NoteInfoLine } from './note-info-line'
-import { UnitalicBoldContent } from './unitalic-bold-content'
-import { useEditorToRendererCommunicator } from '../../render-context/editor-to-renderer-communicator-context-provider'
-import type { OnWordCountCalculatedMessage } from '../../../render-page/window-post-message-communicator/rendering-message'
-import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
-import { useEditorReceiveHandler } from '../../../render-page/window-post-message-communicator/hooks/use-editor-receive-handler'
-import { cypressId } from '../../../../utils/cypress-attribute'
-import { useApplicationState } from '../../../../hooks/common/use-application-state'
 
 /**
  * Creates a new info line for the document information dialog that holds the

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

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import type { PropsWithChildren } from 'react'
-import React from 'react'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import type { IconName } from '../../../common/fork-awesome/types'
+import type { PropsWithChildren } from 'react'
+import React from 'react'
 
 export interface NoteInfoLineProps {
   icon: IconName

frontend/src/components/editor-page/document-bar/note-info/note-info-modal.tsx

@@ -3,17 +3,16 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { cypressId } from '../../../../utils/cypress-attribute'
+import type { ModalVisibilityProps } from '../../../common/modals/common-modal'
+import { CommonModal } from '../../../common/modals/common-modal'
+import { NoteInfoLineContributors } from './note-info-line-contributors'
+import { NoteInfoLineCreated } from './note-info-line-created'
+import { NoteInfoLineUpdated } from './note-info-line-updated'
+import { NoteInfoLineWordCount } from './note-info-line-word-count'
 import React from 'react'
 import { ListGroup, Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import type { ModalVisibilityProps } from '../../../common/modals/common-modal'
-import { CommonModal } from '../../../common/modals/common-modal'
-import { NoteInfoLineWordCount } from './note-info-line-word-count'
-import { cypressId } from '../../../../utils/cypress-attribute'
-import { NoteInfoLineCreated } from './note-info-line-created'
-import { NoteInfoLineUpdated } from './note-info-line-updated'
-import { NoteInfoLineContributors } from './note-info-line-contributors'
 
 /**
  * Modal that shows informational data about the current note.

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

@@ -3,9 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
 import type { DateTime } from 'luxon'
-
 import React from 'react'
 
 export interface TimeFromNowProps {

frontend/src/components/editor-page/document-bar/note-info/unitalic-bold-content.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import type { PropsWithChildren } from 'react'
-import React from 'react'
 import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
 import { cypressId } from '../../../../utils/cypress-attribute'
+import type { PropsWithChildren } from 'react'
+import React from 'react'
 
 export interface UnitalicBoldContentProps extends PropsWithDataCypressId {
   text?: string | number

frontend/src/components/editor-page/document-bar/note-info/utils/unitalic-bold-time-from-now.tsx

@@ -3,11 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import React from 'react'
 import type { TimeFromNowProps } from '../time-from-now'
 import { TimeFromNow } from '../time-from-now'
 import { UnitalicBoldContent } from '../unitalic-bold-content'
+import React from 'react'
 
 export const UnitalicBoldTimeFromNow: React.FC<TimeFromNowProps> = ({ time }) => {
   return (