Fix react 18 changes

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

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { Suspense } from 'react'
 import { useBackendBaseUrl } from '../../hooks/common/use-backend-base-url'
 import { createSetUpTaskList } from './initializers'
@@ -15,7 +16,7 @@ import { ApplicationLoaderError } from './application-loader-error'
 
 const log = new Logger('ApplicationLoader')
 
-export const ApplicationLoader: React.FC = ({ children }) => {
+export const ApplicationLoader: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
   const backendBaseUrl = useBackendBaseUrl()
   const customizeAssetsUrl = useCustomizeAssetsUrl()
 

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { Fragment } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { WaitSpinner } from './wait-spinner/wait-spinner'
@@ -24,7 +25,7 @@ export interface AsyncLoadingBoundaryProps {
  * @param componentName The name of the component that is currently loading. It will be shown in the error message.
  * @param children The child {@link ReactElement elements} that are only shown if the component isn't in loading or error state
  */
-export const AsyncLoadingBoundary: React.FC<AsyncLoadingBoundaryProps> = ({
+export const AsyncLoadingBoundary: React.FC<PropsWithChildren<AsyncLoadingBoundaryProps>> = ({
   loading,
   error,
   componentName,

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { useMemo } from 'react'
 import { Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
@@ -29,7 +30,7 @@ export interface ModalContentProps {
 
 export type CommonModalProps = PropsWithDataCypressId & ModalVisibilityProps & ModalContentProps
 
-export const CommonModal: React.FC<CommonModalProps> = ({
+export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
   show,
   onHide,
   title,

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
@@ -16,7 +17,7 @@ export interface DeletionModalProps extends CommonModalProps {
   deletionButtonI18nKey: string
 }
 
-export const DeletionModal: React.FC<DeletionModalProps> = ({
+export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
   show,
   onHide,
   title,

src/components/common/pagination/pager.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { Fragment, useEffect } from 'react'
 
 export interface PagerPageProps {
@@ -12,7 +13,7 @@ export interface PagerPageProps {
   onLastPageIndexChange: (lastPageIndex: number) => void
 }
 
-export const Pager: React.FC<PagerPageProps> = ({
+export const Pager: React.FC<PropsWithChildren<PagerPageProps>> = ({
   children,
   numberOfElementsPerPage,
   pageIndex,

src/components/common/routing/not-found-error-screen.tsx

@@ -4,10 +4,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React from 'react'
 import { LandingLayout } from '../../landing-layout/landing-layout'
 
-export const NotFoundErrorScreen: React.FC = () => {
+export const NotFoundErrorScreen: React.FC<PropsWithChildren<unknown>> = () => {
   return (
     <LandingLayout>
       <div className='text-light d-flex align-items-center justify-content-center my-5'>

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

@@ -4,12 +4,13 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { Fragment } from 'react'
 
 export interface ShowIfProps {
   condition: boolean
 }
 
-export const ShowIf: React.FC<ShowIfProps> = ({ children, condition }) => {
+export const ShowIf: React.FC<PropsWithChildren<ShowIfProps>> = ({ children, condition }) => {
   return condition ? <Fragment>{children}</Fragment> : null
 }

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { ShowIf } from '../../../common/show-if/show-if'
@@ -20,7 +21,7 @@ import { cypressId } from '../../../../utils/cypress-attribute'
  * Creates a new info line for the document information dialog that holds the
  * word count of the note, based on counting in the rendered output.
  */
-export const DocumentInfoLineWordCount: React.FC = () => {
+export const DocumentInfoLineWordCount: React.FC<PropsWithChildren<unknown>> = () => {
   useTranslation()
   const editorToRendererCommunicator = useEditorToRendererCommunicator()
   const [wordCount, setWordCount] = useState<number | null>(null)

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

@@ -4,6 +4,7 @@
  * 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'
@@ -13,7 +14,7 @@ export interface DocumentInfoLineProps {
   size?: '2x' | '3x' | '4x' | '5x' | undefined
 }
 
-export const DocumentInfoLine: React.FC<DocumentInfoLineProps> = ({ icon, size, children }) => {
+export const DocumentInfoLine: React.FC<PropsWithChildren<DocumentInfoLineProps>> = ({ icon, size, children }) => {
   return (
     <span className={'d-flex align-items-center'}>
       <ForkAwesomeIcon icon={icon} size={size} fixedWidth={true} className={'mx-2'} />

src/components/editor-page/render-context/editor-to-renderer-communicator-context-provider.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { createContext, useContext, useEffect, useMemo } from 'react'
 import { EditorToRendererCommunicator } from '../../render-page/window-post-message-communicator/editor-to-renderer-communicator'
 
@@ -26,7 +27,7 @@ export const useEditorToRendererCommunicator: () => EditorToRendererCommunicator
 /**
  * Provides a {@link EditorToRendererCommunicator editor to renderer communicator} for the child components via Context.
  */
-export const EditorToRendererCommunicatorContextProvider: React.FC = ({ children }) => {
+export const EditorToRendererCommunicatorContextProvider: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
   const communicator = useMemo<EditorToRendererCommunicator>(() => new EditorToRendererCommunicator(), [])
 
   useEffect(() => {

src/components/editor-page/render-context/renderer-to-editor-communicator-context-provider.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { createContext, useContext, useEffect, useMemo } from 'react'
 import { RendererToEditorCommunicator } from '../../render-page/window-post-message-communicator/renderer-to-editor-communicator'
 import { CommunicationMessageType } from '../../render-page/window-post-message-communicator/rendering-message'
@@ -25,7 +26,7 @@ export const useRendererToEditorCommunicator: () => RendererToEditorCommunicator
   return communicatorFromContext
 }
 
-export const RendererToEditorCommunicatorContextProvider: React.FC = ({ children }) => {
+export const RendererToEditorCommunicatorContextProvider: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
   const editorOrigin = useOriginFromConfig(ORIGIN_TYPE.EDITOR)
   const communicator = useMemo<RendererToEditorCommunicator>(() => new RendererToEditorCommunicator(), [])
 

src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-sidebar-entry.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { Fragment, useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { SidebarButton } from '../sidebar-button/sidebar-button'
@@ -21,7 +22,7 @@ import { ShowIf } from '../../../common/show-if/show-if'
  * @param hide {@code true} if the entry shouldn't be visible
  * @param className Additional css class names for the sidebar entry
  */
-export const DeleteNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ hide, className }) => {
+export const DeleteNoteSidebarEntry: React.FC<PropsWithChildren<SpecificSidebarEntryProps>> = ({ hide, className }) => {
   useTranslation()
   const [showDialog, setShowDialog] = useState(false)
   const noteId = useApplicationState((state) => state.noteDetails.id)

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { useMemo } from 'react'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import type { IconName } from '../../../common/fork-awesome/types'
@@ -19,14 +20,14 @@ export interface SidebarButton extends SidebarEntryProps {
  * A button that should be rendered in the sidebar.
  *
  * @param children The react elements in the button
- * @param icon The icon at the left side of the button
+ * @param icon The icon on the left side of the button
  * @param className Additional css class names
  * @param buttonRef A reference to the button
  * @param hide Should be {@code true} if the button should be invisible
  * @param variant An alternative theme for the button
  * @param props Other button props
  */
-export const SidebarButton: React.FC<SidebarButton> = ({
+export const SidebarButton: React.FC<PropsWithChildren<SidebarButton>> = ({
   children,
   icon,
   className,

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

@@ -4,11 +4,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React from 'react'
 import type { SidebarMenuProps } from '../types'
 import styles from './sidebar-menu.module.scss'
 
-export const SidebarMenu: React.FC<SidebarMenuProps> = ({ children, expand }) => {
+export const SidebarMenu: React.FC<PropsWithChildren<SidebarMenuProps>> = ({ children, expand }) => {
   return (
     <div className={`${styles['sidebar-menu']} ${expand ? styles['show'] : ''}`}>
       <div className={`d-flex flex-column`}>{children}</div>

src/components/error-boundary/error-boundary.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { ErrorInfo, ReactNode } from 'react'
+import type { ErrorInfo, PropsWithChildren, ReactNode } from 'react'
 import React, { Component } from 'react'
 import { Button, Container } from 'react-bootstrap'
 import links from '../../links.json'
@@ -15,7 +15,7 @@ import { Logger } from '../../utils/logger'
 
 const log = new Logger('ErrorBoundary')
 
-export class ErrorBoundary extends Component {
+export class ErrorBoundary extends Component<PropsWithChildren<unknown>> {
   state: {
     hasError: boolean
   }

src/components/history-page/history-toolbar/toolbar-context/history-toolbar-state-context-provider.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { createContext, useState } from 'react'
 import type { HistoryToolbarStateWithDispatcher } from './toolbar-context'
 import { SortModeEnum } from '../../sort-button/sort-button'
@@ -19,7 +20,7 @@ export const historyToolbarStateContext = createContext<HistoryToolbarStateWithD
  *
  * @param children The children that should receive the toolbar state via context.
  */
-export const HistoryToolbarStateContextProvider: React.FC = ({ children }) => {
+export const HistoryToolbarStateContextProvider: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
   const urlParameterSearch = useSingleStringUrlParameter('search', '')
   const urlParameterSelectedTags = useArrayStringUrlParameter('selectedTags')
 

src/components/landing-layout/landing-layout.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { Fragment } from 'react'
 import { Container } from 'react-bootstrap'
 import { MotdModal } from '../common/motd-modal/motd-modal'
@@ -11,7 +12,7 @@ import { Footer } from './footer/footer'
 import { HeaderBar } from './navigation/header-bar/header-bar'
 import { UiNotifications } from '../notifications/ui-notifications'
 
-export const LandingLayout: React.FC = ({ children }) => {
+export const LandingLayout: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <Fragment>
       <UiNotifications />

src/components/landing-layout/navigation/header-bar/header-nav-link.tsx

@@ -5,6 +5,7 @@
  */
 
 import Link from 'next/link'
+import type { PropsWithChildren } from 'react'
 import React, { useMemo } from 'react'
 import { Nav } from 'react-bootstrap'
 import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
@@ -23,7 +24,7 @@ export interface HeaderNavLinkProps extends PropsWithDataCypressId {
  * @param children The react elements inside of link for more description
  * @param props Other navigation item props
  */
-export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, children, ...props }) => {
+export const HeaderNavLink: React.FC<PropsWithChildren<HeaderNavLinkProps>> = ({ to, children, ...props }) => {
   const { route } = useRouter()
 
   const activeClass = useMemo(() => {

src/components/login-page/auth/social-link-button/social-link-button.tsx

@@ -4,6 +4,7 @@
  * 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'
@@ -16,7 +17,13 @@ export interface SocialButtonProps {
   title?: string
 }
 
-export const SocialLinkButton: React.FC<SocialButtonProps> = ({ title, backgroundClass, href, icon, children }) => {
+export const SocialLinkButton: React.FC<PropsWithChildren<SocialButtonProps>> = ({
+  title,
+  backgroundClass,
+  href,
+  icon,
+  children
+}) => {
   return (
     <a
       href={href}

src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { PropsWithChildren } from 'react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import type { IconName } from '../../../common/fork-awesome/types'
@@ -38,7 +39,7 @@ interface ClickShieldProps extends PropsWithDataCypressId {
  * @param fallbackBackgroundColor A color that should be used if no background image was provided or could be loaded.
  * @param children The children element that should be shielded.
  */
-export const ClickShield: React.FC<ClickShieldProps> = ({
+export const ClickShield: React.FC<PropsWithChildren<ClickShieldProps>> = ({
   containerClassName,
   onImageFetch,
   fallbackPreviewImageUrl,