Fix react 18 changes

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

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>