diff --git a/src/api/alias/index.ts b/src/api/alias/index.ts
index d7346f335..fa31f44b7 100644
--- a/src/api/alias/index.ts
+++ b/src/api/alias/index.ts
@@ -10,9 +10,11 @@ import { DeleteApiRequestBuilder } from '../common/api-request-builder/delete-ap
 
 /**
  * Adds an alias to an existing note.
+ *
  * @param noteIdOrAlias The note id or an existing alias for a note.
  * @param newAlias The new alias.
  * @return Information about the newly created alias.
+ * @throws {Error} when the api request wasn't successfull
  */
 export const addAlias = async (noteIdOrAlias: string, newAlias: string): Promise<Alias> => {
   const response = await new PostApiRequestBuilder<Alias, NewAliasDto>('alias')
@@ -27,8 +29,10 @@ export const addAlias = async (noteIdOrAlias: string, newAlias: string): Promise
 /**
  * Marks a given alias as the primary one for a note.
  * The former primary alias should be marked as non-primary by the backend automatically.
+ *
  * @param alias The alias to mark as primary for its corresponding note.
  * @return The updated information about the alias.
+ * @throws {Error} when the api request wasn't successfull
  */
 export const markAliasAsPrimary = async (alias: string): Promise<Alias> => {
   const response = await new PutApiRequestBuilder<Alias, PrimaryAliasDto>('alias/' + alias)
@@ -41,7 +45,9 @@ export const markAliasAsPrimary = async (alias: string): Promise<Alias> => {
 
 /**
  * Removes a given alias from its corresponding note.
+ *
  * @param alias The alias to remove from its note.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const deleteAlias = async (alias: string): Promise<void> => {
   await new DeleteApiRequestBuilder('alias/' + alias).sendRequest()
diff --git a/src/api/auth/index.ts b/src/api/auth/index.ts
index 737a369b1..b8a4f74ae 100644
--- a/src/api/auth/index.ts
+++ b/src/api/auth/index.ts
@@ -7,7 +7,8 @@ import { DeleteApiRequestBuilder } from '../common/api-request-builder/delete-ap
 
 /**
  * Requests to log out the current user.
- * @throws Error if logout is not possible.
+ *
+ * @throws {Error} if logout is not possible.
  */
 export const doLogout = async (): Promise<void> => {
   await new DeleteApiRequestBuilder('auth/logout').sendRequest()
diff --git a/src/api/auth/ldap.ts b/src/api/auth/ldap.ts
index 43d5bd28a..a3456a3d6 100644
--- a/src/api/auth/ldap.ts
+++ b/src/api/auth/ldap.ts
@@ -9,11 +9,13 @@ import { AuthError } from './types'
 import { PostApiRequestBuilder } from '../common/api-request-builder/post-api-request-builder'
 
 /**
- * Requests to login a user via LDAP credentials.
+ * Requests to log in a user via LDAP credentials.
+ *
  * @param provider The identifier of the LDAP provider with which to login.
  * @param username The username with which to try the login.
  * @param password The password of the user.
  * @throws {AuthError.INVALID_CREDENTIALS} if the LDAP provider denied the given credentials.
+ * @throws {Error} when the api request wasn't successfull
  */
 export const doLdapLogin = async (provider: string, username: string, password: string): Promise<void> => {
   await new PostApiRequestBuilder<void, LoginDto>('auth/ldap/' + provider)
diff --git a/src/api/auth/local.ts b/src/api/auth/local.ts
index 78afb28ea..2bf7becf2 100644
--- a/src/api/auth/local.ts
+++ b/src/api/auth/local.ts
@@ -10,10 +10,12 @@ import { PutApiRequestBuilder } from '../common/api-request-builder/put-api-requ
 
 /**
  * Requests to do a local login with a provided username and password.
+ *
  * @param username The username for which the login should be tried.
  * @param password The password which should be used to log in.
  * @throws {AuthError.INVALID_CREDENTIALS} when the username or password is wrong.
  * @throws {AuthError.LOGIN_DISABLED} when the local login is disabled on the backend.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const doLocalLogin = async (username: string, password: string): Promise<void> => {
   await new PostApiRequestBuilder<void, LoginDto>('auth/local/login')
@@ -30,11 +32,13 @@ export const doLocalLogin = async (username: string, password: string): Promise<
 
 /**
  * Requests to register a new local user in the backend.
+ *
  * @param username The username of the new user.
  * @param displayName The display name of the new user.
  * @param password The password of the new user.
  * @throws {RegisterError.USERNAME_EXISTING} when there is already an existing user with the same username.
  * @throws {RegisterError.REGISTRATION_DISABLED} when the registration of local users has been disabled on the backend.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const doLocalRegister = async (username: string, displayName: string, password: string): Promise<void> => {
   await new PostApiRequestBuilder<void, RegisterDto>('auth/local')
diff --git a/src/api/common/api-request-builder/api-request-builder-with-body.ts b/src/api/common/api-request-builder/api-request-builder-with-body.ts
index f26df7a4b..23bdc0ab0 100644
--- a/src/api/common/api-request-builder/api-request-builder-with-body.ts
+++ b/src/api/common/api-request-builder/api-request-builder-with-body.ts
@@ -29,7 +29,7 @@ export abstract class ApiRequestBuilderWithBody<ResponseType, RequestBodyType> e
    *
    * @param bodyData The data to use as request body. Will get stringified to JSON.
    * @return The API request instance itself for chaining.
-   * @see {withBody}
+   * @see withBody
    */
   withJsonBody(bodyData: RequestBodyType): this {
     this.withHeader('Content-Type', 'application/json')
diff --git a/src/api/common/api-request-builder/api-request-builder.ts b/src/api/common/api-request-builder/api-request-builder.ts
index 0fbb29583..f8cffb219 100644
--- a/src/api/common/api-request-builder/api-request-builder.ts
+++ b/src/api/common/api-request-builder/api-request-builder.ts
@@ -108,7 +108,7 @@ export abstract class ApiRequestBuilder<ResponseType> {
    * Send the prepared API call as a GET request. A default status code of 200 is expected.
    *
    * @return The API response.
-   * @throws Error when the status code does not match the expected one or is defined as in the custom status code
+   * @throws {Error} when the status code does not match the expected one or is defined as in the custom status code
    *         error mapping.
    */
   abstract sendRequest(): Promise<ApiResponse<ResponseType>>
diff --git a/src/api/common/api-request-builder/delete-api-request-builder.ts b/src/api/common/api-request-builder/delete-api-request-builder.ts
index 8191edde3..b1c37247b 100644
--- a/src/api/common/api-request-builder/delete-api-request-builder.ts
+++ b/src/api/common/api-request-builder/delete-api-request-builder.ts
@@ -11,14 +11,14 @@ import { ApiRequestBuilderWithBody } from './api-request-builder-with-body'
  *
  * @param ResponseType The type of the expected response. Defaults to no response body.
  * @param RequestBodyType The type of the request body. Defaults to no request body.
- * @see {ApiRequestBuilder}
+ * @see ApiRequestBuilder
  */
 export class DeleteApiRequestBuilder<ResponseType = void, RequestBodyType = unknown> extends ApiRequestBuilderWithBody<
   ResponseType,
   RequestBodyType
 > {
   /**
-   * @see {ApiRequestBuilder#sendRequest}
+   * @see ApiRequestBuilder#sendRequest
    */
   sendRequest(): Promise<ApiResponse<ResponseType>> {
     return this.sendRequestAndVerifyResponse('DELETE', 204)
diff --git a/src/api/common/api-request-builder/get-api-request-builder.ts b/src/api/common/api-request-builder/get-api-request-builder.ts
index ffe2bcf12..ce995effa 100644
--- a/src/api/common/api-request-builder/get-api-request-builder.ts
+++ b/src/api/common/api-request-builder/get-api-request-builder.ts
@@ -11,11 +11,11 @@ import type { ApiResponse } from '../api-response'
  * Builder to construct a GET request to the API.
  *
  * @param ResponseType The type of the expected response.
- * @see {ApiRequestBuilder}
+ * @see ApiRequestBuilder
  */
 export class GetApiRequestBuilder<ResponseType> extends ApiRequestBuilder<ResponseType> {
   /**
-   * @see {ApiRequestBuilder#sendRequest}
+   * @see ApiRequestBuilder#sendRequest
    */
   sendRequest(): Promise<ApiResponse<ResponseType>> {
     return this.sendRequestAndVerifyResponse('GET', 200)
diff --git a/src/api/common/api-request-builder/post-api-request-builder.ts b/src/api/common/api-request-builder/post-api-request-builder.ts
index e2168d689..8c7b6b16d 100644
--- a/src/api/common/api-request-builder/post-api-request-builder.ts
+++ b/src/api/common/api-request-builder/post-api-request-builder.ts
@@ -11,14 +11,14 @@ import { ApiRequestBuilderWithBody } from './api-request-builder-with-body'
  *
  * @param ResponseType The type of the expected response.
  * @param RequestBodyType The type of the request body
- * @see {ApiRequestBuilder}
+ * @see ApiRequestBuilder
  */
 export class PostApiRequestBuilder<ResponseType, RequestBodyType> extends ApiRequestBuilderWithBody<
   ResponseType,
   RequestBodyType
 > {
   /**
-   * @see {ApiRequestBuilder#sendRequest}
+   * @see ApiRequestBuilder#sendRequest
    */
   sendRequest(): Promise<ApiResponse<ResponseType>> {
     return this.sendRequestAndVerifyResponse('POST', 201)
diff --git a/src/api/common/api-request-builder/put-api-request-builder.ts b/src/api/common/api-request-builder/put-api-request-builder.ts
index 7f0381766..aa39fe223 100644
--- a/src/api/common/api-request-builder/put-api-request-builder.ts
+++ b/src/api/common/api-request-builder/put-api-request-builder.ts
@@ -11,14 +11,14 @@ import { ApiRequestBuilderWithBody } from './api-request-builder-with-body'
  *
  * @param ResponseType The type of the expected response.
  * @param RequestBodyType The type of the request body
- * @see {ApiRequestBuilder}
+ * @see ApiRequestBuilder
  */
 export class PutApiRequestBuilder<ResponseType, RequestBodyType> extends ApiRequestBuilderWithBody<
   ResponseType,
   RequestBodyType
 > {
   /**
-   * @see {ApiRequestBuilder#sendRequest}
+   * @see ApiRequestBuilder#sendRequest
    */
   sendRequest(): Promise<ApiResponse<ResponseType>> {
     return this.sendRequestAndVerifyResponse('PUT', 200)
diff --git a/src/api/common/api-request-builder/test-utils/expect-fetch.ts b/src/api/common/api-request-builder/test-utils/expect-fetch.ts
index 3993671cb..e8c1d522a 100644
--- a/src/api/common/api-request-builder/test-utils/expect-fetch.ts
+++ b/src/api/common/api-request-builder/test-utils/expect-fetch.ts
@@ -7,7 +7,15 @@
 import { defaultConfig } from '../../default-config'
 import { Mock } from 'ts-mockery'
 
-export const expectFetch = (expectedUrl: string, expectedStatusCode: number, expectedOptions: RequestInit): void => {
+/**
+ * Mock fetch api for tests.
+ * Check that the given url and options are present in the request and return the given status code.
+ *
+ * @param expectedUrl the url that should be requested
+ * @param requestStatusCode the status code the mocked request should return
+ * @param expectedOptions additional options
+ */
+export const expectFetch = (expectedUrl: string, requestStatusCode: number, expectedOptions: RequestInit): void => {
   global.fetch = jest.fn((fetchUrl: RequestInfo | URL, fetchOptions?: RequestInit): Promise<Response> => {
     expect(fetchUrl).toEqual(expectedUrl)
     expect(fetchOptions).toStrictEqual({
@@ -18,7 +26,7 @@ export const expectFetch = (expectedUrl: string, expectedStatusCode: number, exp
     })
     return Promise.resolve(
       Mock.of<Response>({
-        status: expectedStatusCode
+        status: requestStatusCode
       })
     )
   })
diff --git a/src/api/common/api-response.ts b/src/api/common/api-response.ts
index 58f891b71..d8eca4ad1 100644
--- a/src/api/common/api-response.ts
+++ b/src/api/common/api-response.ts
@@ -12,6 +12,7 @@ export class ApiResponse<ResponseType> {
 
   /**
    * Initializes a new API response instance based on an HTTP response.
+   *
    * @param response The HTTP response from the fetch call.
    */
   constructor(response: Response) {
@@ -31,7 +32,7 @@ export class ApiResponse<ResponseType> {
    * Returns the response as parsed JSON. An error will be thrown if the response is not JSON encoded.
    *
    * @return The parsed JSON response.
-   * @throws Error if the response is not JSON encoded.
+   * @throws {Error} if the response is not JSON encoded.
    */
   async asParsedJsonObject(): Promise<ResponseType> {
     if (!this.response.headers.get('Content-Type')?.startsWith('application/json')) {
diff --git a/src/api/config/index.ts b/src/api/config/index.ts
index 5c13f5600..8d45d73eb 100644
--- a/src/api/config/index.ts
+++ b/src/api/config/index.ts
@@ -9,7 +9,9 @@ import { GetApiRequestBuilder } from '../common/api-request-builder/get-api-requ
 
 /**
  * Fetches the frontend config from the backend.
+ *
  * @return The frontend config.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getConfig = async (): Promise<Config> => {
   const response = await new GetApiRequestBuilder<Config>('config').sendRequest()
diff --git a/src/api/group/index.ts b/src/api/group/index.ts
index 7bef46f3a..ccfd754d5 100644
--- a/src/api/group/index.ts
+++ b/src/api/group/index.ts
@@ -9,8 +9,10 @@ import { GetApiRequestBuilder } from '../common/api-request-builder/get-api-requ
 
 /**
  * Retrieves information about a group with a given name.
+ *
  * @param groupName The name of the group.
  * @return Information about the group.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getGroup = async (groupName: string): Promise<GroupInfo> => {
   const response = await new GetApiRequestBuilder<GroupInfo>('groups/' + groupName).sendRequest()
diff --git a/src/api/history/dto-methods.ts b/src/api/history/dto-methods.ts
index 3028b79a9..ab3c25d62 100644
--- a/src/api/history/dto-methods.ts
+++ b/src/api/history/dto-methods.ts
@@ -1,18 +1,30 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { HistoryEntry, HistoryEntryPutDto, HistoryEntryWithOrigin } from './types'
 import { HistoryEntryOrigin } from './types'
 
-export const addRemoteOriginToHistoryEntry = (entryDto: HistoryEntry): HistoryEntryWithOrigin => {
+/**
+ * Transform a {@link HistoryEntry} into a {@link HistoryEntryWithOrigin}.
+ *
+ * @param entry the entry to build from
+ * @return the history entry with an origin
+ */
+export const addRemoteOriginToHistoryEntry = (entry: HistoryEntry): HistoryEntryWithOrigin => {
   return {
-    ...entryDto,
+    ...entry,
     origin: HistoryEntryOrigin.REMOTE
   }
 }
 
+/**
+ * Create a {@link HistoryEntryPutDto} from a {@link HistoryEntry}.
+ *
+ * @param entry the entry to build the dto from
+ * @return the dto for the api
+ */
 export const historyEntryToHistoryEntryPutDto = (entry: HistoryEntry): HistoryEntryPutDto => {
   return {
     pinStatus: entry.pinStatus,
diff --git a/src/api/history/index.ts b/src/api/history/index.ts
index 906409497..2921fd655 100644
--- a/src/api/history/index.ts
+++ b/src/api/history/index.ts
@@ -11,7 +11,9 @@ import { DeleteApiRequestBuilder } from '../common/api-request-builder/delete-ap
 
 /**
  * Fetches the remote history for the user from the server.
+ *
  * @return The remote history entries of the user.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getRemoteHistory = async (): Promise<HistoryEntry[]> => {
   const response = await new GetApiRequestBuilder<HistoryEntry[]>('me/history').sendRequest()
@@ -20,7 +22,9 @@ export const getRemoteHistory = async (): Promise<HistoryEntry[]> => {
 
 /**
  * Replaces the remote history of the user with the given history entries.
+ *
  * @param entries The history entries to store remotely.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const setRemoteHistoryEntries = async (entries: HistoryEntryPutDto[]): Promise<void> => {
   await new PostApiRequestBuilder<void, HistoryEntryPutDto[]>('me/history').withJsonBody(entries).sendRequest()
@@ -28,8 +32,10 @@ export const setRemoteHistoryEntries = async (entries: HistoryEntryPutDto[]): Pr
 
 /**
  * Updates a remote history entry's pin state.
+ *
  * @param noteIdOrAlias The note id for which to update the pinning state.
  * @param pinStatus True when the note should be pinned, false otherwise.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const updateRemoteHistoryEntryPinStatus = async (
   noteIdOrAlias: string,
@@ -45,7 +51,9 @@ export const updateRemoteHistoryEntryPinStatus = async (
 
 /**
  * Deletes a remote history entry.
+ *
  * @param noteIdOrAlias The note id or alias of the history entry to remove.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const deleteRemoteHistoryEntry = async (noteIdOrAlias: string): Promise<void> => {
   await new DeleteApiRequestBuilder('me/history/' + noteIdOrAlias).sendRequest()
@@ -53,6 +61,8 @@ export const deleteRemoteHistoryEntry = async (noteIdOrAlias: string): Promise<v
 
 /**
  * Deletes the complete remote history.
+ *
+ * @throws {Error} when the api request wasn't successful.
  */
 export const deleteRemoteHistory = async (): Promise<void> => {
   await new DeleteApiRequestBuilder('me/history').sendRequest()
diff --git a/src/api/me/index.ts b/src/api/me/index.ts
index 9d065e894..07937d20c 100644
--- a/src/api/me/index.ts
+++ b/src/api/me/index.ts
@@ -11,8 +11,9 @@ import { PostApiRequestBuilder } from '../common/api-request-builder/post-api-re
 
 /**
  * Returns metadata about the currently signed-in user from the API.
- * @throws Error when the user is not signed-in.
+ *
  * @return The user metadata.
+ * @throws {Error} when the user is not signed-in.
  */
 export const getMe = async (): Promise<LoginUserInfo> => {
   const response = await new GetApiRequestBuilder<LoginUserInfo>('me').sendRequest()
@@ -21,6 +22,8 @@ export const getMe = async (): Promise<LoginUserInfo> => {
 
 /**
  * Deletes the current user from the server.
+ *
+ * @throws {Error} when the api request wasn't successful.
  */
 export const deleteUser = async (): Promise<void> => {
   await new DeleteApiRequestBuilder('me').sendRequest()
@@ -28,7 +31,9 @@ export const deleteUser = async (): Promise<void> => {
 
 /**
  * Changes the display name of the current user.
+ *
  * @param displayName The new display name to set.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const updateDisplayName = async (displayName: string): Promise<void> => {
   await new PostApiRequestBuilder<void, ChangeDisplayNameDto>('me/profile')
@@ -40,7 +45,9 @@ export const updateDisplayName = async (displayName: string): Promise<void> => {
 
 /**
  * Retrieves a list of media belonging to the user.
+ *
  * @return List of media object information.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getMyMedia = async (): Promise<MediaUpload[]> => {
   const response = await new GetApiRequestBuilder<MediaUpload[]>('me/media').sendRequest()
diff --git a/src/api/media/index.ts b/src/api/media/index.ts
index 44b869dc8..b9b3fe314 100644
--- a/src/api/media/index.ts
+++ b/src/api/media/index.ts
@@ -9,8 +9,10 @@ import { DeleteApiRequestBuilder } from '../common/api-request-builder/delete-ap
 
 /**
  * Requests an image-proxy URL from the backend for a given image URL.
+ *
  * @param imageUrl The image URL which should be proxied.
  * @return The proxy URL for the image.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getProxiedUrl = async (imageUrl: string): Promise<ImageProxyResponse> => {
   const response = await new PostApiRequestBuilder<ImageProxyResponse, ImageProxyRequestDto>('media/proxy')
@@ -23,9 +25,11 @@ export const getProxiedUrl = async (imageUrl: string): Promise<ImageProxyRespons
 
 /**
  * Uploads a media file to the backend.
+ *
  * @param noteIdOrAlias The id or alias of the note from which the media is uploaded.
  * @param media The binary media content.
  * @return The URL of the uploaded media object.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const uploadFile = async (noteIdOrAlias: string, media: Blob): Promise<MediaUpload> => {
   const postData = new FormData()
@@ -40,7 +44,9 @@ export const uploadFile = async (noteIdOrAlias: string, media: Blob): Promise<Me
 
 /**
  * Deletes some uploaded media object.
+ *
  * @param mediaId The identifier of the media object to delete.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const deleteUploadedMedia = async (mediaId: string): Promise<void> => {
   await new DeleteApiRequestBuilder('media/' + mediaId).sendRequest()
diff --git a/src/api/notes/index.ts b/src/api/notes/index.ts
index d6c7382ec..71384168e 100644
--- a/src/api/notes/index.ts
+++ b/src/api/notes/index.ts
@@ -11,8 +11,10 @@ import { DeleteApiRequestBuilder } from '../common/api-request-builder/delete-ap
 
 /**
  * Retrieves the content and metadata about the specified note.
+ *
  * @param noteIdOrAlias The id or alias of the note.
  * @return Content and metadata of the specified note.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getNote = async (noteIdOrAlias: string): Promise<Note> => {
   const response = await new GetApiRequestBuilder<Note>('notes/' + noteIdOrAlias)
@@ -23,8 +25,10 @@ export const getNote = async (noteIdOrAlias: string): Promise<Note> => {
 
 /**
  * Returns a list of media objects associated with the specified note.
+ *
  * @param noteIdOrAlias The id or alias of the note.
  * @return List of media object metadata associated with specified note.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getMediaForNote = async (noteIdOrAlias: string): Promise<MediaUpload[]> => {
   const response = await new GetApiRequestBuilder<MediaUpload[]>(`notes/${noteIdOrAlias}/media`).sendRequest()
@@ -33,8 +37,10 @@ export const getMediaForNote = async (noteIdOrAlias: string): Promise<MediaUploa
 
 /**
  * Creates a new note with a given markdown content.
+ *
  * @param markdown The content of the new note.
  * @return Content and metadata of the new note.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const createNote = async (markdown: string): Promise<Note> => {
   const response = await new PostApiRequestBuilder<Note, void>('notes')
@@ -46,9 +52,11 @@ export const createNote = async (markdown: string): Promise<Note> => {
 
 /**
  * Creates a new note with a given markdown content and a defined primary alias.
+ *
  * @param markdown The content of the new note.
  * @param primaryAlias The primary alias of the new note.
  * @return Content and metadata of the new note.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const createNoteWithPrimaryAlias = async (markdown: string, primaryAlias: string): Promise<Note> => {
   const response = await new PostApiRequestBuilder<Note, void>('notes/' + primaryAlias)
@@ -60,7 +68,9 @@ export const createNoteWithPrimaryAlias = async (markdown: string, primaryAlias:
 
 /**
  * Deletes the specified note.
+ *
  * @param noteIdOrAlias The id or alias of the note to delete.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const deleteNote = async (noteIdOrAlias: string): Promise<void> => {
   await new DeleteApiRequestBuilder('notes/' + noteIdOrAlias).sendRequest()
diff --git a/src/api/permissions/index.ts b/src/api/permissions/index.ts
index 3f152c487..2a7837693 100644
--- a/src/api/permissions/index.ts
+++ b/src/api/permissions/index.ts
@@ -10,9 +10,11 @@ import { DeleteApiRequestBuilder } from '../common/api-request-builder/delete-ap
 
 /**
  * Sets the owner of a note.
+ *
  * @param noteId The id of the note.
  * @param owner The username of the new owner.
- * @return The updated note permissions.
+ * @return The updated {@link NotePermissions}.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const setNoteOwner = async (noteId: string, owner: string): Promise<NotePermissions> => {
   const response = await new PutApiRequestBuilder<NotePermissions, OwnerChangeDto>(
@@ -27,9 +29,12 @@ export const setNoteOwner = async (noteId: string, owner: string): Promise<NoteP
 
 /**
  * Sets a permission for one user of a note.
+ *
  * @param noteId The id of the note.
  * @param username The username of the user to set the permission for.
  * @param canEdit true if the user should be able to update the note, false otherwise.
+ * @return The updated {@link NotePermissions}.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const setUserPermission = async (
   noteId: string,
@@ -48,9 +53,12 @@ export const setUserPermission = async (
 
 /**
  * Sets a permission for one group of a note.
+ *
  * @param noteId The id of the note.
  * @param groupName The name of the group to set the permission for.
  * @param canEdit true if the group should be able to update the note, false otherwise.
+ * @return The updated {@link NotePermissions}.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const setGroupPermission = async (
   noteId: string,
@@ -69,8 +77,11 @@ export const setGroupPermission = async (
 
 /**
  * Removes the permissions of a note for a user.
+ *
  * @param noteId The id of the note.
  * @param username The name of the user to remove the permission of.
+ * @return The updated {@link NotePermissions}.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const removeUserPermission = async (noteId: string, username: string): Promise<NotePermissions> => {
   const response = await new DeleteApiRequestBuilder<NotePermissions>(
@@ -83,8 +94,11 @@ export const removeUserPermission = async (noteId: string, username: string): Pr
 
 /**
  * Removes the permissions of a note for a group.
+ *
  * @param noteId The id of the note.
  * @param groupName The name of the group to remove the permission of.
+ * @return The updated {@link NotePermissions}.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const removeGroupPermission = async (noteId: string, groupName: string): Promise<NotePermissions> => {
   const response = await new DeleteApiRequestBuilder<NotePermissions>(
diff --git a/src/api/revisions/index.ts b/src/api/revisions/index.ts
index 299b8cbaf..45e0c97a2 100644
--- a/src/api/revisions/index.ts
+++ b/src/api/revisions/index.ts
@@ -9,9 +9,11 @@ import { DeleteApiRequestBuilder } from '../common/api-request-builder/delete-ap
 
 /**
  * Retrieves a note revision while using a cache for often retrieved revisions.
+ *
  * @param noteId The id of the note for which to fetch the revision.
  * @param revisionId The id of the revision to fetch.
  * @return The revision.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getRevision = async (noteId: string, revisionId: number): Promise<RevisionDetails> => {
   const response = await new GetApiRequestBuilder<RevisionDetails>(
@@ -22,8 +24,10 @@ export const getRevision = async (noteId: string, revisionId: number): Promise<R
 
 /**
  * Retrieves a list of all revisions stored for a given note.
+ *
  * @param noteId The id of the note for which to look up the stored revisions.
  * @return A list of revision ids.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getAllRevisions = async (noteId: string): Promise<RevisionMetadata[]> => {
   const response = await new GetApiRequestBuilder<RevisionMetadata[]>(`notes/${noteId}/revisions`).sendRequest()
@@ -32,7 +36,9 @@ export const getAllRevisions = async (noteId: string): Promise<RevisionMetadata[
 
 /**
  * Deletes all revisions for a note.
+ *
  * @param noteIdOrAlias The id or alias of the note to delete all revisions for.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const deleteRevisionsForNote = async (noteIdOrAlias: string): Promise<void> => {
   await new DeleteApiRequestBuilder(`notes/${noteIdOrAlias}/revisions`).sendRequest()
diff --git a/src/api/tokens/index.ts b/src/api/tokens/index.ts
index e4b557fd2..608c38ad5 100644
--- a/src/api/tokens/index.ts
+++ b/src/api/tokens/index.ts
@@ -10,7 +10,9 @@ import { DeleteApiRequestBuilder } from '../common/api-request-builder/delete-ap
 
 /**
  * Retrieves the access tokens for the current user.
+ *
  * @return List of access token metadata.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getAccessTokenList = async (): Promise<AccessToken[]> => {
   const response = await new GetApiRequestBuilder<AccessToken[]>('tokens').sendRequest()
@@ -19,9 +21,11 @@ export const getAccessTokenList = async (): Promise<AccessToken[]> => {
 
 /**
  * Creates a new access token for the current user.
+ *
  * @param label The user-defined label for the new access token.
  * @param validUntil The user-defined expiry date of the new access token in milliseconds of unix time.
  * @return The new access token metadata along with its secret.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const postNewAccessToken = async (label: string, validUntil: number): Promise<AccessTokenWithSecret> => {
   const response = await new PostApiRequestBuilder<AccessTokenWithSecret, CreateAccessTokenDto>('tokens')
@@ -35,7 +39,9 @@ export const postNewAccessToken = async (label: string, validUntil: number): Pro
 
 /**
  * Removes an access token from the current user account.
+ *
  * @param keyId The key id of the access token to delete.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const deleteAccessToken = async (keyId: string): Promise<void> => {
   await new DeleteApiRequestBuilder('tokens/' + keyId).sendRequest()
diff --git a/src/api/users/index.ts b/src/api/users/index.ts
index 242ae9d31..e022b2cca 100644
--- a/src/api/users/index.ts
+++ b/src/api/users/index.ts
@@ -9,8 +9,10 @@ import { GetApiRequestBuilder } from '../common/api-request-builder/get-api-requ
 
 /**
  * Retrieves information about a specific user while using a cache to avoid many requests for the same username.
+ *
  * @param username The username of interest.
  * @return Metadata about the requested user.
+ * @throws {Error} when the api request wasn't successful.
  */
 export const getUser = async (username: string): Promise<UserInfo> => {
   const response = await new GetApiRequestBuilder<UserInfo>('users/' + username).sendRequest()
diff --git a/src/components/application-loader/application-loader-error.ts b/src/components/application-loader/application-loader-error.ts
index b2efc1a2b..355ebbf6b 100644
--- a/src/components/application-loader/application-loader-error.ts
+++ b/src/components/application-loader/application-loader-error.ts
@@ -1,8 +1,11 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+/**
+ * Custom {@link Error} class for the {@link ApplicationLoader}.
+ */
 export class ApplicationLoaderError extends Error {
   constructor(taskName: string) {
     super(`The task ${taskName} failed`)
diff --git a/src/components/application-loader/application-loader.tsx b/src/components/application-loader/application-loader.tsx
index 711ea4f71..828cf5ab8 100644
--- a/src/components/application-loader/application-loader.tsx
+++ b/src/components/application-loader/application-loader.tsx
@@ -14,7 +14,13 @@ import { ApplicationLoaderError } from './application-loader-error'
 
 const log = new Logger('ApplicationLoader')
 
-export const ApplicationLoader: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
+/**
+ * Initializes the application and executes all the setup tasks.
+ * It renders a {@link LoadingScreen} while this is happening. If there are any error, they will be displayed in the {@link LoadingScreen}.
+ *
+ * @param children The children in the React dom that should be shown once the application is loaded.
+ */
+export const ApplicationLoader: React.FC<PropsWithChildren> = ({ children }) => {
   const { error, loading } = useAsync(async () => {
     const initTasks = createSetUpTaskList()
     for (const task of initTasks) {
diff --git a/src/components/application-loader/initializers/fetch-frontend-config.ts b/src/components/application-loader/initializers/fetch-frontend-config.ts
index 5030cab39..e34ee2592 100644
--- a/src/components/application-loader/initializers/fetch-frontend-config.ts
+++ b/src/components/application-loader/initializers/fetch-frontend-config.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,6 +7,9 @@
 import { getConfig } from '../../../api/config'
 import { setConfig } from '../../../redux/config/methods'
 
+/**
+ * Get the {@link Config frontend config} and save it in the global application state.
+ */
 export const fetchFrontendConfig = async (): Promise<void> => {
   const config = await getConfig()
   if (!config) {
diff --git a/src/components/application-loader/initializers/index.ts b/src/components/application-loader/initializers/index.ts
index 327c9f1bd..5d12b1b5c 100644
--- a/src/components/application-loader/initializers/index.ts
+++ b/src/components/application-loader/initializers/index.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,9 @@ import { fetchFrontendConfig } from './fetch-frontend-config'
 import { loadDarkMode } from './load-dark-mode'
 import { isDevMode, isTestMode } from '../../../utils/test-modes'
 
+/**
+ * Create a custom delay in the loading of the application.
+ */
 const customDelay: () => Promise<void> = async () => {
   if (
     (isDevMode || isTestMode) &&
@@ -30,6 +33,9 @@ export interface InitTask {
   task: () => Promise<void>
 }
 
+/**
+ * Create a list of tasks, that need to be fulfilled on startup.
+ */
 export const createSetUpTaskList = (): InitTask[] => {
   return [
     {
diff --git a/src/components/application-loader/initializers/load-dark-mode.ts b/src/components/application-loader/initializers/load-dark-mode.ts
index 7647d4681..24033fe50 100644
--- a/src/components/application-loader/initializers/load-dark-mode.ts
+++ b/src/components/application-loader/initializers/load-dark-mode.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -31,7 +31,8 @@ export const loadDarkMode = async (): Promise<void> => {
 /**
  * Tries to read the saved dark mode settings from the browser local storage.
  *
- * @return {@code true} if the local storage has saved that the user prefers dark mode. {@code false} if the user doesn't or if the value could be read from local storage.
+ * @return {@link true} if the local storage has saved that the user prefers dark mode.
+ *         {@link false} if the user doesn't prefer dark mode or if the value couldn't be read from local storage.
  */
 const fetchDarkModeFromLocalStorage = (): boolean => {
   if (!isClientSideRendering()) {
@@ -48,7 +49,9 @@ const fetchDarkModeFromLocalStorage = (): boolean => {
 /**
  * Tries to read the preferred dark mode setting from the browser settings.
  *
- * @return {@code true} if the browser has reported that the user prefers dark mode. {@code false} if the user doesn't or if the browser doesn't support the `prefers-color-scheme` media query.
+ * @return {@link true} if the browser has reported that the user prefers dark mode.
+ *         {@link false} if the browser doesn't prefer dark mode.
+ *         {@link undefined} if the browser doesn't support the `prefers-color-scheme` media query.
  */
 const determineDarkModeBrowserSettings = (): DarkModeConfig | undefined => {
   if (!isClientSideRendering()) {
diff --git a/src/components/application-loader/initializers/setupI18n.ts b/src/components/application-loader/initializers/setupI18n.ts
index 836db2ba3..7a3e0b621 100644
--- a/src/components/application-loader/initializers/setupI18n.ts
+++ b/src/components/application-loader/initializers/setupI18n.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,9 @@ import { Settings } from 'luxon'
 import { initReactI18next } from 'react-i18next'
 import { isDevMode } from '../../../utils/test-modes'
 
+/**
+ * Set up the internationalisation framework i18n.
+ */
 export const setUpI18n = async (): Promise<void> => {
   await i18nUse(
     resourcesToBackend((language, namespace, callback) => {
diff --git a/src/components/common/branding/branding.tsx b/src/components/common/branding/branding.tsx
index da8e8a5e0..587871bd0 100644
--- a/src/components/common/branding/branding.tsx
+++ b/src/components/common/branding/branding.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,6 +14,13 @@ export interface BrandingProps {
   delimiter?: boolean
 }
 
+/**
+ * Show the branding of the HedgeDoc instance.
+ * This branding can either be a text, a logo or both (in that case the text is used as the title and alt of the image).
+ *
+ * @param inline If the logo should be using the inline-size or the regular-size css class.
+ * @param delimiter If the delimiter between the HedgeDoc logo and the branding should be shown.
+ */
 export const Branding: React.FC<BrandingProps> = ({ inline = false, delimiter = true }) => {
   const branding = useApplicationState((state) => state.config.branding)
   const showBranding = !!branding.name || !!branding.logo
diff --git a/src/components/common/cache/cache.test.ts b/src/components/common/cache/cache.test.ts
deleted file mode 100644
index 34e7b9082..000000000
--- a/src/components/common/cache/cache.test.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { Cache } from './cache'
-
-describe('Test caching functionality', () => {
-  let testCache: Cache<string, number>
-
-  beforeAll(() => {
-    jest.useFakeTimers()
-  })
-
-  afterAll(() => {
-    jest.useRealTimers()
-  })
-
-  beforeEach(() => {
-    testCache = new Cache<string, number>(1000)
-  })
-
-  it('initialize with right lifetime, no entry limit', () => {
-    const lifetime = 1000
-    const lifetimedCache = new Cache<string, string>(lifetime)
-    expect(lifetimedCache.entryLifetime).toEqual(lifetime)
-    expect(lifetimedCache.maxEntries).toEqual(0)
-  })
-
-  it('initialize with right lifetime, given entry limit', () => {
-    const lifetime = 1000
-    const maxEntries = 10
-    const limitedCache = new Cache<string, string>(lifetime, maxEntries)
-    expect(limitedCache.entryLifetime).toEqual(lifetime)
-    expect(limitedCache.maxEntries).toEqual(maxEntries)
-  })
-
-  it('entry exists after inserting', () => {
-    testCache.put('test', 123)
-    expect(testCache.has('test')).toBe(true)
-  })
-
-  it('entry does not exist prior inserting', () => {
-    expect(testCache.has('test')).toBe(false)
-  })
-
-  it('entry does expire', () => {
-    const shortLivingCache = new Cache<string, number>(2)
-    shortLivingCache.put('test', 123)
-    expect(shortLivingCache.has('test')).toBe(true)
-    setTimeout(() => {
-      expect(shortLivingCache.has('test')).toBe(false)
-    }, 2000)
-  })
-
-  it('entry value does not change', () => {
-    const testValue = Date.now()
-    testCache.put('test', testValue)
-    expect(testCache.get('test')).toEqual(testValue)
-  })
-
-  it('error is thrown on non-existent entry', () => {
-    const accessNonExistentEntry = () => {
-      testCache.get('test')
-    }
-    expect(accessNonExistentEntry).toThrow(Error)
-  })
-
-  it('newer item replaces older item', () => {
-    testCache.put('test', 123)
-    testCache.put('test', 456)
-    expect(testCache.get('test')).toEqual(456)
-  })
-
-  it('entry limit is respected', () => {
-    const limitedCache = new Cache<string, number>(1000, 2)
-    limitedCache.put('first', 1)
-    expect(limitedCache.has('first')).toBe(true)
-    expect(limitedCache.has('second')).toBe(false)
-    expect(limitedCache.has('third')).toBe(false)
-    limitedCache.put('second', 2)
-    expect(limitedCache.has('first')).toBe(true)
-    expect(limitedCache.has('second')).toBe(true)
-    expect(limitedCache.has('third')).toBe(false)
-    limitedCache.put('third', 3)
-    expect(limitedCache.has('first')).toBe(false)
-    expect(limitedCache.has('second')).toBe(true)
-    expect(limitedCache.has('third')).toBe(true)
-  })
-})
diff --git a/src/components/common/cache/cache.ts b/src/components/common/cache/cache.ts
deleted file mode 100644
index 0d7ae4084..000000000
--- a/src/components/common/cache/cache.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-export interface CacheEntry<T> {
-  entryCreated: number
-  data: T
-}
-
-export class Cache<K, V> {
-  readonly entryLifetime: number
-  readonly maxEntries: number
-  private store = new Map<K, CacheEntry<V>>()
-
-  constructor(lifetime: number, maxEntries = 0) {
-    if (lifetime < 0) {
-      throw new Error('Cache entry lifetime can not be less than 0 seconds.')
-    }
-    this.entryLifetime = lifetime
-    this.maxEntries = maxEntries
-  }
-
-  has(key: K): boolean {
-    if (!this.store.has(key)) {
-      return false
-    }
-    const entry = this.store.get(key)
-    return !!entry && entry.entryCreated >= Date.now() - this.entryLifetime * 1000
-  }
-
-  get(key: K): V {
-    const entry = this.store.get(key)
-    if (!entry) {
-      throw new Error('This cache entry does not exist. Check with ".has()" before using ".get()".')
-    }
-    return entry.data
-  }
-
-  put(key: K, value: V): void {
-    if (this.maxEntries > 0 && this.store.size === this.maxEntries) {
-      this.store.delete(this.store.keys().next().value as K)
-    }
-    this.store.set(key, {
-      entryCreated: Date.now(),
-      data: value
-    })
-  }
-}
diff --git a/src/components/common/copyable/copyable-field/copyable-field.tsx b/src/components/common/copyable/copyable-field/copyable-field.tsx
index 49d4a6281..c81426c5b 100644
--- a/src/components/common/copyable/copyable-field/copyable-field.tsx
+++ b/src/components/common/copyable/copyable-field/copyable-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -21,7 +21,7 @@ export interface CopyableFieldProps {
 const log = new Logger('CopyableField')
 
 /**
- * Provides an input field with an attached copy button and a share button (if supported by the browser)
+ * Provides an input field with an attached copy button and a share button (if supported by the browser).
  *
  * @param content The content to present
  * @param shareOriginUrl The URL of the page to which the shared content should be linked. If this value is omitted then the share button won't be shown.
diff --git a/src/components/common/countdown-button/countdown-button.tsx b/src/components/common/countdown-button/countdown-button.tsx
index 711d2d983..6e80c562a 100644
--- a/src/components/common/countdown-button/countdown-button.tsx
+++ b/src/components/common/countdown-button/countdown-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,7 +15,10 @@ export interface CountdownButtonProps extends ButtonProps {
 
 /**
  * Button that starts a countdown on render and is only clickable after the countdown has finished.
+ *
  * @param countdownStartSeconds The initial amount of seconds for the countdown.
+ * @param children The children that should be displayed after the countdown has elapsed.
+ * @param props Additional props given to the {@link Button}.
  */
 export const CountdownButton: React.FC<CountdownButtonProps> = ({ countdownStartSeconds, children, ...props }) => {
   const [secondsRemaining, setSecondsRemaining] = useState(countdownStartSeconds)
diff --git a/src/components/common/download/download.ts b/src/components/common/download/download.ts
index 7ea49cf6e..13eb40129 100644
--- a/src/components/common/download/download.ts
+++ b/src/components/common/download/download.ts
@@ -1,15 +1,22 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+/**
+ * Download a given {@link BlobPart file} from memory<.
+ *
+ * @param data The file to download.
+ * @param fileName Which filename does the file have.
+ * @param mimeType What is the files mimetype.
+ */
 export const download = (data: BlobPart, fileName: string, mimeType: string): void => {
   const file = new Blob([data], { type: mimeType })
   downloadLink(URL.createObjectURL(file), fileName)
 }
 
-export const downloadLink = (url: string, fileName: string): void => {
+const downloadLink = (url: string, fileName: string): void => {
   const helperElement = document.createElement('a')
   helperElement.href = url
   helperElement.download = fileName
diff --git a/src/components/common/fields/current-password-field.tsx b/src/components/common/fields/current-password-field.tsx
index 0f6065f01..8d4a0ba7d 100644
--- a/src/components/common/fields/current-password-field.tsx
+++ b/src/components/common/fields/current-password-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,7 @@ import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Renders an input field for the current password when changing passwords.
+ *
  * @param onChange Hook that is called when the entered password changes.
  */
 export const CurrentPasswordField: React.FC<CommonFieldProps> = ({ onChange }) => {
diff --git a/src/components/common/fields/display-name-field.tsx b/src/components/common/fields/display-name-field.tsx
index ee3078b82..d59c3be33 100644
--- a/src/components/common/fields/display-name-field.tsx
+++ b/src/components/common/fields/display-name-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,7 @@ interface DisplayNameFieldProps extends CommonFieldProps {
 
 /**
  * Renders an input field for the display name when registering.
+ *
  * @param onChange Hook that is called when the entered display name changes.
  * @param value The currently entered display name.
  * @param initialValue The initial input field value.
diff --git a/src/components/common/fields/new-password-field.tsx b/src/components/common/fields/new-password-field.tsx
index 6b584df92..911c46077 100644
--- a/src/components/common/fields/new-password-field.tsx
+++ b/src/components/common/fields/new-password-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,7 @@ import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Renders an input field for the new password when registering.
+ *
  * @param onChange Hook that is called when the entered password changes.
  * @param value The currently entered password.
  */
diff --git a/src/components/common/fields/password-again-field.tsx b/src/components/common/fields/password-again-field.tsx
index 5e1d32e11..2e4e33068 100644
--- a/src/components/common/fields/password-again-field.tsx
+++ b/src/components/common/fields/password-again-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,7 @@ interface PasswordAgainFieldProps extends CommonFieldProps {
 
 /**
  * Renders an input field for typing the new password again when registering.
+ *
  * @param onChange Hook that is called when the entered retype of the password changes.
  * @param value The currently entered retype of the password.
  * @param password The password entered into the password input field.
diff --git a/src/components/common/fields/username-field.tsx b/src/components/common/fields/username-field.tsx
index fa37be8c7..22c50123d 100644
--- a/src/components/common/fields/username-field.tsx
+++ b/src/components/common/fields/username-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,7 @@ import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Renders an input field for the username when registering.
+ *
  * @param onChange Hook that is called when the entered username changes.
  * @param value The currently entered username.
  */
diff --git a/src/components/common/fork-awesome/fork-awesome-icon.tsx b/src/components/common/fork-awesome/fork-awesome-icon.tsx
index 027cf289a..c37f602a3 100644
--- a/src/components/common/fork-awesome/fork-awesome-icon.tsx
+++ b/src/components/common/fork-awesome/fork-awesome-icon.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,16 @@ export interface ForkAwesomeIconProps {
   stacked?: boolean
 }
 
+/**
+ * Renders a fork awesome icon.
+ *
+ * @param icon The icon that should be rendered.
+ * @param fixedWidth If the icon should be rendered with a fixed width.
+ * @param size The size class the icon should be rendered in.
+ * @param className Additional classes the icon should get.
+ * @param stacked If the icon is part of a {@link ForkAwesomeStack stack}.
+ * @see https://forkaweso.me
+ */
 export const ForkAwesomeIcon: React.FC<ForkAwesomeIconProps> = ({
   icon,
   fixedWidth = false,
diff --git a/src/components/common/fork-awesome/fork-awesome-stack.tsx b/src/components/common/fork-awesome/fork-awesome-stack.tsx
index 20a1cee27..499b17359 100644
--- a/src/components/common/fork-awesome/fork-awesome-stack.tsx
+++ b/src/components/common/fork-awesome/fork-awesome-stack.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,12 @@ export interface ForkAwesomeStackProps {
   children: ReactElement<ForkAwesomeIconProps> | Array<ReactElement<ForkAwesomeIconProps>>
 }
 
+/**
+ * A stack of {@link ForkAwesomeIcon ForkAwesomeIcons}.
+ *
+ * @param size Which size the stack should have.
+ * @param children One or more {@link ForkAwesomeIcon ForkAwesomeIcons} to be stacked.
+ */
 export const ForkAwesomeStack: React.FC<ForkAwesomeStackProps> = ({ size, children }) => {
   return (
     <span className={`fa-stack ${size ? 'fa-' : ''}${size ?? ''}`}>
diff --git a/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx b/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx
index 0daa1626a..a6df499cf 100644
--- a/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx
+++ b/src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -27,6 +27,12 @@ export enum HedgeDocLogoType {
   WB_HORIZONTAL
 }
 
+/**
+ * Renders the HedgeDoc logo with the app name in different types.
+ *
+ * @param size The size the logo should have.
+ * @param logoType The logo type to be used.
+ */
 export const HedgeDocLogoWithText: React.FC<HedgeDocLogoProps> = ({ size = HedgeDocLogoSize.MEDIUM, logoType }) => {
   const { t } = useTranslation()
   const altText = useMemo(() => t('app.icon'), [t])
diff --git a/src/components/common/icon-button/icon-button.tsx b/src/components/common/icon-button/icon-button.tsx
index a240391ef..770eee249 100644
--- a/src/components/common/icon-button/icon-button.tsx
+++ b/src/components/common/icon-button/icon-button.tsx
@@ -20,6 +20,16 @@ export interface IconButtonProps extends ButtonProps {
   iconFixedWidth?: boolean
 }
 
+/**
+ * A generic {@link Button button} with an {@link ForkAwesomeIcon icon} in it.
+ *
+ * @param icon Which icon should be used
+ * @param children The children that will be added as the content of the button.
+ * @param iconFixedWidth If the icon should be of fixed width.
+ * @param border Should the button have a border.
+ * @param className Additional class names added to the button.
+ * @param props Additional props for the button.
+ */
 export const IconButton: React.FC<IconButtonProps> = ({
   icon,
   children,
diff --git a/src/components/common/icon-button/translated-icon-button.tsx b/src/components/common/icon-button/translated-icon-button.tsx
index 3e5b3c1f5..62a71f80b 100644
--- a/src/components/common/icon-button/translated-icon-button.tsx
+++ b/src/components/common/icon-button/translated-icon-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,12 @@ export interface TranslatedIconButtonProps extends IconButtonProps {
   i18nKey: string
 }
 
+/**
+ * Renders an {@link IconButton icon button} with a translation inside.
+ *
+ * @param i18nKey The key for the translated string.
+ * @param props Additional props directly given to the {@link IconButton}.
+ */
 export const TranslatedIconButton: React.FC<TranslatedIconButtonProps> = ({ i18nKey, ...props }) => {
   return (
     <IconButton {...props}>
diff --git a/src/components/common/links/external-link.tsx b/src/components/common/links/external-link.tsx
index 5eb6eedfe..6bfb1ccf0 100644
--- a/src/components/common/links/external-link.tsx
+++ b/src/components/common/links/external-link.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,18 @@ import type { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import type { LinkWithTextProps } from './types'
 
+/**
+ * An external link.
+ * This should be used for linking pages that are not part of the HedgeDoc instance.
+ * The links will be opened in a new tab.
+ *
+ * @param href The links location
+ * @param text The links text
+ * @param icon An optional icon to be shown before the links text
+ * @param id An id for the link object
+ * @param className Additional class names added to the link object
+ * @param title The title of the link
+ */
 export const ExternalLink: React.FC<LinkWithTextProps> = ({
   href,
   text,
diff --git a/src/components/common/links/internal-link.tsx b/src/components/common/links/internal-link.tsx
index 4f40298e0..f7378209f 100644
--- a/src/components/common/links/internal-link.tsx
+++ b/src/components/common/links/internal-link.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,17 @@ import type { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import type { LinkWithTextProps } from './types'
 
+/**
+ * An internal link.
+ * This should be used for linking pages of the HedgeDoc instance.
+ *
+ * @param href The links location
+ * @param text The links text
+ * @param icon An optional icon to be shown before the links text
+ * @param id An id for the link object
+ * @param className Additional class names added to the link object
+ * @param title The title of the link
+ */
 export const InternalLink: React.FC<LinkWithTextProps> = ({
   href,
   text,
diff --git a/src/components/common/links/translated-external-link.tsx b/src/components/common/links/translated-external-link.tsx
index 3c7ba9c3d..099d37a36 100644
--- a/src/components/common/links/translated-external-link.tsx
+++ b/src/components/common/links/translated-external-link.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,13 @@ import { useTranslation } from 'react-i18next'
 import { ExternalLink } from './external-link'
 import type { TranslatedLinkProps } from './types'
 
+/**
+ * An {@link ExternalLink external link} with translated text.
+ *
+ * @param i18nKey The key of the translation
+ * @param i18nOption The translation options
+ * @param props Additional props directly given to the {@link ExternalLink}
+ */
 export const TranslatedExternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
   return <ExternalLink text={t(i18nKey, i18nOption)} {...props} />
diff --git a/src/components/common/links/translated-internal-link.tsx b/src/components/common/links/translated-internal-link.tsx
index cd8156cdd..79e7083e2 100644
--- a/src/components/common/links/translated-internal-link.tsx
+++ b/src/components/common/links/translated-internal-link.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,7 +8,13 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { InternalLink } from './internal-link'
 import type { TranslatedLinkProps } from './types'
-
+/**
+ * An {@link InternalLink internal link} with translated text.
+ *
+ * @param i18nKey The key of the translation
+ * @param i18nOption The translation options
+ * @param props Additional props directly given to the {@link InternalLink}
+ */
 export const TranslatedInternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
   return <InternalLink text={t(i18nKey, i18nOption)} {...props} />
diff --git a/src/components/common/lock-button/lock-button.tsx b/src/components/common/lock-button/lock-button.tsx
index 70113eb94..116ecb632 100644
--- a/src/components/common/lock-button/lock-button.tsx
+++ b/src/components/common/lock-button/lock-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,6 +14,13 @@ export interface LockButtonProps {
   title: string
 }
 
+/**
+ * A button with a lock icon.
+ *
+ * @param locked If the button should be shown as locked or not
+ * @param onLockedChanged The callback to change the state from locked to unlocked and vise-versa.
+ * @param title The title for the button.
+ */
 export const LockButton: React.FC<LockButtonProps> = ({ locked, onLockedChanged, title }) => {
   return (
     <Button variant='dark' size='sm' onClick={() => onLockedChanged(!locked)} title={title}>
diff --git a/src/components/common/modals/common-modal.tsx b/src/components/common/modals/common-modal.tsx
index d7a2e5025..91b51ef4c 100644
--- a/src/components/common/modals/common-modal.tsx
+++ b/src/components/common/modals/common-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -30,6 +30,20 @@ export interface ModalContentProps {
 
 export type CommonModalProps = PropsWithDataCypressId & ModalVisibilityProps & ModalContentProps
 
+/**
+ * Renders a generic modal.
+ *
+ * @param show If the modal should be shown or not.
+ * @param onHide The callback to hide the modal again
+ * @param title The title in the header of the modal
+ * @param showCloseButton If a close button should be shown
+ * @param titleIcon An optional title icon
+ * @param additionalClasses Additional class names for the modal
+ * @param modalSize The modal size
+ * @param children The children to render into the modal.
+ * @param titleIsI18nKey If the title is a i18n key and should be used as such
+ * @param props Additional props directly given to the modal
+ */
 export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
   show,
   onHide,
diff --git a/src/components/common/modals/deletion-modal.tsx b/src/components/common/modals/deletion-modal.tsx
index ef559b7d0..d7f0ec9db 100644
--- a/src/components/common/modals/deletion-modal.tsx
+++ b/src/components/common/modals/deletion-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -17,6 +17,19 @@ export interface DeletionModalProps extends CommonModalProps {
   deletionButtonI18nKey: string
 }
 
+/**
+ * Renders a generic modal for deletion.
+ * This means in addition to most things for the {@link CommonModal} there is also a button to confirm the deletion and a corresponding callback.
+ *
+ * @param show If the modal should be shown or not.
+ * @param onHide The callback to hide the modal again
+ * @param title The title in the header of the modal
+ * @param onConfirm The callback for the delete button.
+ * @param deletionButtonI18nKey The i18n key for the deletion button.
+ * @param titleIcon An optional title icon
+ * @param children The children to render into the modal.
+ * @param props Additional props directly given to the modal
+ */
 export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
   show,
   onHide,
diff --git a/src/components/common/number-range/number-range.ts b/src/components/common/number-range/number-range.ts
index 495fcf880..5dd970119 100644
--- a/src/components/common/number-range/number-range.ts
+++ b/src/components/common/number-range/number-range.ts
@@ -1,9 +1,15 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+/**
+ * Create an array with numbers from 1 to n.
+ *
+ * @param length The length of the array (or the number n)
+ * @return An array of numbers from 1 to n
+ */
 export const createNumberRangeArray = (length: number): number[] => {
   return Array.from(Array(length).keys())
 }
diff --git a/src/components/common/pagination/pager-item.tsx b/src/components/common/pagination/pager-item.tsx
index e0145c8fa..b48207190 100644
--- a/src/components/common/pagination/pager-item.tsx
+++ b/src/components/common/pagination/pager-item.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,12 @@ export interface PageItemProps {
   index: number
 }
 
+/**
+ * Renders a number and adds an onClick handler to it.
+ *
+ * @param index The number to render
+ * @param onClick The onClick Handler
+ */
 export const PagerItem: React.FC<PageItemProps> = ({ index, onClick }) => {
   return (
     <li className='page-item'>
diff --git a/src/components/common/pagination/pager-pagination.tsx b/src/components/common/pagination/pager-pagination.tsx
index c203c4d7b..62fec631d 100644
--- a/src/components/common/pagination/pager-pagination.tsx
+++ b/src/components/common/pagination/pager-pagination.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,13 @@ export interface PaginationProps {
   lastPageIndex: number
 }
 
+/**
+ * Renders a pagination menu to move back and forth between pages.
+ *
+ * @param numberOfPageButtonsToShowAfterAndBeforeCurrent The number of buttons that should be shown before and after the current button.
+ * @param onPageChange The callback when one of the buttons is clicked
+ * @param lastPageIndex The index of the last page
+ */
 export const PagerPagination: React.FC<PaginationProps> = ({
   numberOfPageButtonsToShowAfterAndBeforeCurrent,
   onPageChange,
diff --git a/src/components/common/pagination/pager.tsx b/src/components/common/pagination/pager.tsx
index 533383e1c..c95c1174d 100644
--- a/src/components/common/pagination/pager.tsx
+++ b/src/components/common/pagination/pager.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,14 @@ export interface PagerPageProps {
   onLastPageIndexChange: (lastPageIndex: number) => void
 }
 
+/**
+ * Renders a limited number of the given children.
+ *
+ * @param children The children to render
+ * @param numberOfElementsPerPage The number of elements per page
+ * @param pageIndex Which page of the children to render
+ * @param onLastPageIndexChange A callback to notify about changes to the maximal page number
+ */
 export const Pager: React.FC<PropsWithChildren<PagerPageProps>> = ({
   children,
   numberOfElementsPerPage,
diff --git a/src/components/common/show-if/show-if.tsx b/src/components/common/show-if/show-if.tsx
index a0d12f972..4ef7d6d95 100644
--- a/src/components/common/show-if/show-if.tsx
+++ b/src/components/common/show-if/show-if.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,12 @@ export interface ShowIfProps {
   condition: boolean
 }
 
+/**
+ * Renders the children if the condition is met.
+ *
+ * @param children The children to show if the condition is met.
+ * @param condition If the children should be shown
+ */
 export const ShowIf: React.FC<PropsWithChildren<ShowIfProps>> = ({ children, condition }) => {
   return condition ? <Fragment>{children}</Fragment> : null
 }
diff --git a/src/components/common/user-avatar/user-avatar-for-username.tsx b/src/components/common/user-avatar/user-avatar-for-username.tsx
index fc1f75541..30f8a4d83 100644
--- a/src/components/common/user-avatar/user-avatar-for-username.tsx
+++ b/src/components/common/user-avatar/user-avatar-for-username.tsx
@@ -21,9 +21,10 @@ export interface UserAvatarForUsernameProps extends Omit<UserAvatarProps, 'user'
  * Renders the user avatar for a given username.
  * When no username is given, the guest user will be used as fallback.
  *
- * @see {UserAvatar}
+ * @see UserAvatar
  *
  * @param username The username for which to show the avatar or null to show the guest user avatar.
+ * @param props Additional props directly given to the {@link UserAvatar}
  */
 export const UserAvatarForUsername: React.FC<UserAvatarForUsernameProps> = ({ username, ...props }) => {
   const { t } = useTranslation()
diff --git a/src/components/common/wait-spinner/wait-spinner.tsx b/src/components/common/wait-spinner/wait-spinner.tsx
index 28ef5cd59..6ba6c8f13 100644
--- a/src/components/common/wait-spinner/wait-spinner.tsx
+++ b/src/components/common/wait-spinner/wait-spinner.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,6 +7,9 @@
 import React from 'react'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 
+/**
+ * Renders a indefinitely spinning spinner.
+ */
 export const WaitSpinner: React.FC = () => {
   return (
     <div className={'m-3 d-flex align-items-center justify-content-center'}>
diff --git a/src/components/document-read-only-page/document-infobar.tsx b/src/components/document-read-only-page/document-infobar.tsx
index 0935fb2d2..576cdb4ae 100644
--- a/src/components/document-read-only-page/document-infobar.tsx
+++ b/src/components/document-read-only-page/document-infobar.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,7 +13,7 @@ import { NoteInfoLineCreated } from '../editor-page/document-bar/note-info/note-
 import { NoteInfoLineUpdated } from '../editor-page/document-bar/note-info/note-info-line-updated'
 
 /**
- * Renders an infobar with metadata about the current note.
+ * Renders an info bar with metadata about the current note.
  */
 export const DocumentInfobar: React.FC = () => {
   const { t } = useTranslation()
diff --git a/src/components/editor-page/app-bar/app-bar.tsx b/src/components/editor-page/app-bar/app-bar.tsx
index 99112e0a4..061c17b60 100644
--- a/src/components/editor-page/app-bar/app-bar.tsx
+++ b/src/components/editor-page/app-bar/app-bar.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -29,6 +29,11 @@ export interface AppBarProps {
   mode: AppBarMode
 }
 
+/**
+ * Renders the app bar.
+ *
+ * @param mode Which mode the app bar should be rendered in. This mainly adds / removes buttons for the editor.
+ */
 export const AppBar: React.FC<AppBarProps> = ({ mode }) => {
   const userExists = useApplicationState((state) => !!state.user)
   const noteFrontmatter = useApplicationState((state) => state.noteDetails.frontmatter)
diff --git a/src/components/editor-page/app-bar/dark-mode-button.tsx b/src/components/editor-page/app-bar/dark-mode-button.tsx
index 117c3f6f6..82da08129 100644
--- a/src/components/editor-page/app-bar/dark-mode-button.tsx
+++ b/src/components/editor-page/app-bar/dark-mode-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,6 +16,9 @@ enum DarkModeState {
   LIGHT
 }
 
+/**
+ * Renders a button group to activate / deactivate the dark mode.
+ */
 const DarkModeButton: React.FC = () => {
   const { t } = useTranslation()
   const darkModeEnabled = useIsDarkModeActivated() ? DarkModeState.DARK : DarkModeState.LIGHT
diff --git a/src/components/editor-page/app-bar/editor-view-mode.tsx b/src/components/editor-page/app-bar/editor-view-mode.tsx
index a45ef8f97..0d2eedbde 100644
--- a/src/components/editor-page/app-bar/editor-view-mode.tsx
+++ b/src/components/editor-page/app-bar/editor-view-mode.tsx
@@ -18,6 +18,10 @@ export enum EditorMode {
   EDITOR = 'edit'
 }
 
+/**
+ * Renders the button group to set the editor mode.
+ * @see EditorMode
+ */
 export const EditorViewMode: React.FC = () => {
   const { t } = useTranslation()
   const editorMode = useApplicationState((state) => state.editorConfig.editorMode)
diff --git a/src/components/editor-page/app-bar/help-button/cheatsheet-line.tsx b/src/components/editor-page/app-bar/help-button/cheatsheet-line.tsx
index 9d4398a6e..44ffa456b 100644
--- a/src/components/editor-page/app-bar/help-button/cheatsheet-line.tsx
+++ b/src/components/editor-page/app-bar/help-button/cheatsheet-line.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -17,6 +17,13 @@ const HighlightedCode = React.lazy(
 )
 const DocumentMarkdownRenderer = React.lazy(() => import('../../../markdown-renderer/document-markdown-renderer'))
 
+/**
+ * Renders one line in the {@link CheatsheetTabContent cheat sheet}.
+ * This line shows an minimal markdown example and how it would be rendered.
+ *
+ * @param markdown The markdown to be shown and rendered
+ * @param onTaskCheckedChange A callback to call if a task would be clicked
+ */
 export const CheatsheetLine: React.FC<CheatsheetLineProps> = ({ markdown, onTaskCheckedChange }) => {
   const lines = useMemo(() => markdown.split('\n'), [markdown])
   const checkboxClick = useCallback(
diff --git a/src/components/editor-page/app-bar/help-button/cheatsheet-tab-content.tsx b/src/components/editor-page/app-bar/help-button/cheatsheet-tab-content.tsx
index 168f74a92..00c32501e 100644
--- a/src/components/editor-page/app-bar/help-button/cheatsheet-tab-content.tsx
+++ b/src/components/editor-page/app-bar/help-button/cheatsheet-tab-content.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,9 @@ 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}.
+ */
 export const CheatsheetTabContent: React.FC = () => {
   const { t } = useTranslation()
   const [checked, setChecked] = useState<boolean>(false)
diff --git a/src/components/editor-page/app-bar/help-button/help-button.tsx b/src/components/editor-page/app-bar/help-button/help-button.tsx
index 734f040ff..b91b25ab5 100644
--- a/src/components/editor-page/app-bar/help-button/help-button.tsx
+++ b/src/components/editor-page/app-bar/help-button/help-button.tsx
@@ -12,6 +12,9 @@ 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}.
+ */
 export const HelpButton: React.FC = () => {
   const { t } = useTranslation()
   const [modalVisibility, showModal, closeModal] = useBooleanState()
diff --git a/src/components/editor-page/app-bar/help-button/help-modal.tsx b/src/components/editor-page/app-bar/help-button/help-modal.tsx
index ecdf0208b..a36f9468d 100644
--- a/src/components/editor-page/app-bar/help-button/help-modal.tsx
+++ b/src/components/editor-page/app-bar/help-button/help-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,6 +19,17 @@ export enum HelpTabStatus {
   Links = 'links.title'
 }
 
+/**
+ * Renders the help modal.
+ * This modal shows the user the markdown cheatsheet, shortcuts and different links with further help.
+ *
+ * @see CheatsheetTabContent
+ * @see ShortcutTabContent
+ * @see LinksTabContent
+ *
+ * @param show If the modal should be shown
+ * @param onHide A callback when the modal should be closed again
+ */
 export const HelpModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
   const [tab, setTab] = useState<HelpTabStatus>(HelpTabStatus.Cheatsheet)
   const { t } = useTranslation()
diff --git a/src/components/editor-page/app-bar/help-button/links-tab-content.tsx b/src/components/editor-page/app-bar/help-button/links-tab-content.tsx
index f96d70064..ebb2b9057 100644
--- a/src/components/editor-page/app-bar/help-button/links-tab-content.tsx
+++ b/src/components/editor-page/app-bar/help-button/links-tab-content.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,9 @@ import links from '../../../../links.json'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
 import { TranslatedInternalLink } from '../../../common/links/translated-internal-link'
 
+/**
+ * Renders a bunch of links, where further help can be requested.
+ */
 export const LinksTabContent: React.FC = () => {
   useTranslation()
 
diff --git a/src/components/editor-page/app-bar/help-button/shortcuts-tab-content.tsx b/src/components/editor-page/app-bar/help-button/shortcuts-tab-content.tsx
index ce2873b87..e95d967ea 100644
--- a/src/components/editor-page/app-bar/help-button/shortcuts-tab-content.tsx
+++ b/src/components/editor-page/app-bar/help-button/shortcuts-tab-content.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,9 @@ import { Card, ListGroup, Row } from 'react-bootstrap'
 import { Trans } from 'react-i18next'
 import { isMac } from '../../utils'
 
+/**
+ * Renders a list of shortcuts usable in HedgeDoc.
+ */
 export const ShortcutTabContent: React.FC = () => {
   const modifierKey = useMemo(() => (isMac() ? <kbd>⌘</kbd> : <kbd>Ctrl</kbd>), [])
   const altKey = useMemo(() => (isMac() ? <kbd>⌥</kbd> : <kbd>Alt</kbd>), [])
diff --git a/src/components/editor-page/app-bar/navbar-branding.tsx b/src/components/editor-page/app-bar/navbar-branding.tsx
index bcd6c1e44..efc10c618 100644
--- a/src/components/editor-page/app-bar/navbar-branding.tsx
+++ b/src/components/editor-page/app-bar/navbar-branding.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,9 @@ import {
   HedgeDocLogoWithText
 } from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
 
+/**
+ * Renders the branding for the {@link AppBar}
+ */
 export const NavbarBranding: React.FC = () => {
   const darkModeActivated = useIsDarkModeActivated()
 
diff --git a/src/components/editor-page/app-bar/new-note-button.tsx b/src/components/editor-page/app-bar/new-note-button.tsx
index 118d457bc..1ea2a782c 100644
--- a/src/components/editor-page/app-bar/new-note-button.tsx
+++ b/src/components/editor-page/app-bar/new-note-button.tsx
@@ -10,6 +10,9 @@ import { Trans, useTranslation } from 'react-i18next'
 import { Button } from 'react-bootstrap'
 import Link from 'next/link'
 
+/**
+ * Renders a button to create a new note.
+ */
 export const NewNoteButton: React.FC = () => {
   useTranslation()
 
diff --git a/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx b/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx
index c975b7104..cd4bd9fa4 100644
--- a/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx
+++ b/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -18,6 +18,10 @@ enum SyncScrollState {
   UNSYNCED
 }
 
+/**
+ * Renders a button group with two states for the sync scroll buttons.
+ * This makes it possible to activate or deactivate sync scrolling.
+ */
 export const SyncScrollButtons: React.FC = () => {
   const syncScrollEnabled = useApplicationState((state) => state.editorConfig.syncScroll)
     ? SyncScrollState.SYNCED
diff --git a/src/components/editor-page/change-content-context/change-content-context.tsx b/src/components/editor-page/change-content-context/change-content-context.tsx
index 844ce2514..92806032f 100644
--- a/src/components/editor-page/change-content-context/change-content-context.tsx
+++ b/src/components/editor-page/change-content-context/change-content-context.tsx
@@ -24,7 +24,9 @@ type ChangeEditorContentContext = [CodeMirrorReference, SetCodeMirrorReference]
 const changeEditorContentContext = createContext<ChangeEditorContentContext | undefined>(undefined)
 
 /**
- * Extracts the code mirror reference from the parent context
+ * Extracts the {@link CodeMirrorReference code mirror reference} from the parent context.
+ *
+ * @return The {@link CodeMirrorReference} from the parent context.
  */
 export const useCodeMirrorReference = (): CodeMirrorReference => {
   const contextContent = Optional.ofNullable(useContext(changeEditorContentContext)).orElseThrow(
@@ -34,7 +36,9 @@ export const useCodeMirrorReference = (): CodeMirrorReference => {
 }
 
 /**
- * Extracts the code mirror reference from the parent context
+ * Provides a function to set the {@link CodeMirrorReference code mirror reference} in the current context.
+ *
+ * @return A function to set a {@link CodeMirrorReference code mirror reference}.
  */
 export const useSetCodeMirrorReference = (): SetCodeMirrorReference => {
   const contextContent = Optional.ofNullable(useContext(changeEditorContentContext)).orElseThrow(
diff --git a/src/components/editor-page/document-bar/note-info/note-info-line-created.tsx b/src/components/editor-page/document-bar/note-info/note-info-line-created.tsx
index af113ff9a..b19d49013 100644
--- a/src/components/editor-page/document-bar/note-info/note-info-line-created.tsx
+++ b/src/components/editor-page/document-bar/note-info/note-info-line-created.tsx
@@ -13,6 +13,7 @@ import { DateTime } from 'luxon'
 
 /**
  * Renders an info line about the creation of the current note.
+ *
  * @param size The size in which the line should be displayed.
  */
 export const NoteInfoLineCreated: React.FC<NoteInfoTimeLineProps> = ({ size }) => {
diff --git a/src/components/editor-page/document-bar/note-info/note-info-line-updated.tsx b/src/components/editor-page/document-bar/note-info/note-info-line-updated.tsx
index 611b37fa7..95b7dffc1 100644
--- a/src/components/editor-page/document-bar/note-info/note-info-line-updated.tsx
+++ b/src/components/editor-page/document-bar/note-info/note-info-line-updated.tsx
@@ -15,6 +15,7 @@ import { DateTime } from 'luxon'
 
 /**
  * Renders an info line about the last update of the current note.
+ *
  * @param size The size in which line and user avatar should be displayed.
  */
 export const NoteInfoLineUpdated: React.FC<NoteInfoTimeLineProps> = ({ size }) => {
diff --git a/src/components/editor-page/document-bar/note-info/note-info-line.tsx b/src/components/editor-page/document-bar/note-info/note-info-line.tsx
index 6e099e490..3a7fbf2c9 100644
--- a/src/components/editor-page/document-bar/note-info/note-info-line.tsx
+++ b/src/components/editor-page/document-bar/note-info/note-info-line.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,6 +14,14 @@ export interface NoteInfoLineProps {
   size?: '2x' | '3x' | '4x' | '5x' | undefined
 }
 
+/**
+ * This is the base component for all note info lines.
+ * It renders an icon and some children in italic.
+ *
+ * @param icon The icon be shown
+ * @param size Which size the icon should be
+ * @param children The children to render
+ */
 export const NoteInfoLine: React.FC<PropsWithChildren<NoteInfoLineProps>> = ({ icon, size, children }) => {
   return (
     <span className={'d-flex align-items-center'}>
diff --git a/src/components/editor-page/document-bar/note-info/note-info-modal.tsx b/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
index af0e1ff9f..1ff6ebcd3 100644
--- a/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
+++ b/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
@@ -17,6 +17,7 @@ import { NoteInfoLineContributors } from './note-info-line-contributors'
 
 /**
  * Modal that shows informational data about the current note.
+ *
  * @param show true when the modal should be visible, false otherwise.
  * @param onHide Callback that is fired when the modal is going to be closed.
  */
diff --git a/src/components/editor-page/document-bar/note-info/time-from-now.tsx b/src/components/editor-page/document-bar/note-info/time-from-now.tsx
index 59c213141..462fc7f78 100644
--- a/src/components/editor-page/document-bar/note-info/time-from-now.tsx
+++ b/src/components/editor-page/document-bar/note-info/time-from-now.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,11 @@ export interface TimeFromNowProps {
   time: DateTime
 }
 
+/**
+ * Renders a given time relative to the current time.
+ *
+ * @param time The time to be rendered.
+ */
 export const TimeFromNow: React.FC<TimeFromNowProps> = ({ time }) => {
   return (
     <time className={'mx-1'} title={time.toFormat('DDDD T')} dateTime={time.toString()}>
diff --git a/src/components/editor-page/document-bar/note-info/unitalic-bold-content.tsx b/src/components/editor-page/document-bar/note-info/unitalic-bold-content.tsx
index 748198972..d540284c1 100644
--- a/src/components/editor-page/document-bar/note-info/unitalic-bold-content.tsx
+++ b/src/components/editor-page/document-bar/note-info/unitalic-bold-content.tsx
@@ -6,15 +6,19 @@
 
 import type { PropsWithChildren } from 'react'
 import React from 'react'
+import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
 import { cypressId } from '../../../../utils/cypress-attribute'
 
-export interface UnitalicBoldContentProps {
+export interface UnitalicBoldContentProps extends PropsWithDataCypressId {
   text?: string | number
 }
 
 /**
  * Renders the children elements in a non-italic but bold style.
+ *
  * @param text Optional text content that should be rendered.
+ * @param children Children that may be rendered.
+ * @param props Additional props for cypressId
  */
 export const UnitalicBoldContent: React.FC<PropsWithChildren<UnitalicBoldContentProps>> = ({
   text,
diff --git a/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx b/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
index ad690bb33..e49d050b3 100644
--- a/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
@@ -17,6 +17,7 @@ export interface PermissionAddEntryFieldProps {
 
 /**
  * Permission entry row containing a field for adding new user permission entries.
+ *
  * @param onAddEntry Callback that is fired with the entered username as identifier of the entry to add.
  * @param i18nKey The localization key for the submit button.
  */
diff --git a/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx b/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
index a80baf809..0825285d2 100644
--- a/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
@@ -31,6 +31,7 @@ export interface PermissionEntryButtonsProps {
 
 /**
  * Buttons next to a user or group permission entry to change the permissions or remove the entry.
+ *
  * @param name The name of the user or group.
  * @param type The type of the entry. Either {@link PermissionType.USER} or {@link PermissionType.GROUP}.
  * @param currentSetting How the permission is currently set.
diff --git a/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx b/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx
index 1d7c0997e..fe7bced10 100644
--- a/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx
@@ -20,6 +20,7 @@ export interface PermissionEntrySpecialGroupProps {
 
 /**
  * Permission entry that represents one of the built-in special groups.
+ *
  * @param level The access level that is currently set for the group.
  * @param type The type of the special group. Must be either {@link SpecialGroup.EVERYONE} or {@link SpecialGroup.LOGGED_IN}.
  */
diff --git a/src/components/editor-page/document-bar/permissions/permission-entry-user.tsx b/src/components/editor-page/document-bar/permissions/permission-entry-user.tsx
index d0d1bc69b..a67ca9395 100644
--- a/src/components/editor-page/document-bar/permissions/permission-entry-user.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-entry-user.tsx
@@ -22,6 +22,7 @@ export interface PermissionEntryUserProps {
 
 /**
  * Permission entry for a user that can be set to read-only or writeable and can be removed.
+ *
  * @param entry The permission entry.
  */
 export const PermissionEntryUser: React.FC<PermissionEntryUserProps> = ({ entry }) => {
diff --git a/src/components/editor-page/document-bar/permissions/permission-modal.tsx b/src/components/editor-page/document-bar/permissions/permission-modal.tsx
index f1ee8f483..4954a7cb9 100644
--- a/src/components/editor-page/document-bar/permissions/permission-modal.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,6 +14,7 @@ import { PermissionSectionSpecialGroups } from './permission-section-special-gro
 
 /**
  * Modal for viewing and managing the permissions of the note.
+ *
  * @param show true to show the modal, false otherwise.
  * @param onHide Callback that is fired when the modal is about to be closed.
  */
diff --git a/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx b/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx
index 00339f36f..d43376597 100644
--- a/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx
@@ -14,6 +14,11 @@ export interface PermissionOwnerChangeProps {
   onConfirmOwnerChange: (newOwner: string) => void
 }
 
+/**
+ * Renders an input group to change the permission owner.
+ *
+ * @param onConfirmOwnerChange The callback to call if the owner was changed.
+ */
 export const PermissionOwnerChange: React.FC<PermissionOwnerChangeProps> = ({ onConfirmOwnerChange }) => {
   const { t } = useTranslation()
   const [ownerFieldValue, setOwnerFieldValue] = useState('')
diff --git a/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx b/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
index c73276f40..7cf9ed616 100644
--- a/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
@@ -17,6 +17,7 @@ export interface PermissionOwnerInfoProps {
 
 /**
  * Content for the owner section of the permission modal that shows the current note owner.
+ *
  * @param onEditOwner Callback that is fired when the user chooses to change the note owner.
  */
 export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps> = ({ onEditOwner }) => {
diff --git a/src/components/editor-page/document-bar/revisions/revision-modal-footer.tsx b/src/components/editor-page/document-bar/revisions/revision-modal-footer.tsx
index 0f9e5b5eb..2f1cd22a5 100644
--- a/src/components/editor-page/document-bar/revisions/revision-modal-footer.tsx
+++ b/src/components/editor-page/document-bar/revisions/revision-modal-footer.tsx
@@ -19,6 +19,7 @@ export interface RevisionModalFooterProps {
 /**
  * Renders the footer of the revision modal that includes buttons to download the currently selected revision or to
  * revert the note content back to that revision.
+ *
  * @param selectedRevisionId The currently selected revision id or undefined if no revision was selected.
  * @param onHide Callback that is fired when the modal is about to be closed.
  */
diff --git a/src/components/editor-page/document-bar/revisions/utils.ts b/src/components/editor-page/document-bar/revisions/utils.ts
index f9f65c29a..8a063158e 100644
--- a/src/components/editor-page/document-bar/revisions/utils.ts
+++ b/src/components/editor-page/document-bar/revisions/utils.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,7 @@ const DISPLAY_MAX_USERS_PER_REVISION = 9
 
 /**
  * Downloads a given revision's content as markdown document in the browser.
+ *
  * @param noteId The id of the note from which to download the revision.
  * @param revision The revision details object containing the content to download.
  */
@@ -25,6 +26,7 @@ export const downloadRevision = (noteId: string, revision: RevisionDetails | nul
 
 /**
  * Fetches user details for the given usernames while returning a maximum of 9 users.
+ *
  * @param usernames The list of usernames to fetch.
  * @throws {Error} in case the user-data request failed.
  * @return An array of user details.
diff --git a/src/components/editor-page/document-bar/share/share-modal.tsx b/src/components/editor-page/document-bar/share/share-modal.tsx
index 18d018c9a..67bce0f35 100644
--- a/src/components/editor-page/document-bar/share/share-modal.tsx
+++ b/src/components/editor-page/document-bar/share/share-modal.tsx
@@ -15,6 +15,12 @@ import { useApplicationState } from '../../../../hooks/common/use-application-st
 import { NoteType } from '../../../../redux/note-details/types/note-details'
 import { useFrontendBaseUrl } from '../../../../hooks/common/use-frontend-base-url'
 
+/**
+ * Renders a modal which provides shareable URLs of this note.
+ *
+ * @param show If the modal should be shown
+ * @param onHide The callback when the modal should be closed
+ */
 export const ShareModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
   useTranslation()
   const noteFrontmatter = useApplicationState((state) => state.noteDetails.frontmatter)
diff --git a/src/components/editor-page/editor-pane/editor-pane.tsx b/src/components/editor-page/editor-pane/editor-pane.tsx
index 7cfb201d6..4dde3cb1e 100644
--- a/src/components/editor-page/editor-pane/editor-pane.tsx
+++ b/src/components/editor-page/editor-pane/editor-pane.tsx
@@ -37,6 +37,15 @@ import { useOnFirstEditorUpdateExtension } from './hooks/yjs/use-on-first-editor
 import { useIsConnectionSynced } from './hooks/yjs/use-is-connection-synced'
 import { useMarkdownContentYText } from './hooks/yjs/use-markdown-content-y-text'
 
+/**
+ * Renders the text editor pane of the editor.
+ * The used editor is {@link ReactCodeMirror code mirror}.
+ *
+ * @param scrollState The current {@link ScrollState}
+ * @param onScroll The callback to update the {@link ScrollState}
+ * @param onMakeScrollSource The callback to request to become the scroll source.
+ * @external {ReactCodeMirror} https://npmjs.com/@uiw/react-codemirror
+ */
 export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMakeScrollSource }) => {
   const ligaturesEnabled = useApplicationState((state) => state.editorConfig.ligatures)
 
diff --git a/src/components/editor-page/editor-pane/hooks/table-paste/codefenceDetection.ts b/src/components/editor-page/editor-pane/hooks/table-paste/codefenceDetection.ts
index 9f66d67cc..36447de6d 100644
--- a/src/components/editor-page/editor-pane/hooks/table-paste/codefenceDetection.ts
+++ b/src/components/editor-page/editor-pane/hooks/table-paste/codefenceDetection.ts
@@ -9,7 +9,7 @@
  *
  * @param markdownContent The markdown content whose content should be checked
  * @param cursorPosition The cursor position that may or may not be in a code fence
- * @return {@code true} if the given cursor position is in a code fence
+ * @return {@link true} if the given cursor position is in a code fence
  */
 export const isCursorInCodeFence = (markdownContent: string, cursorPosition: number): boolean => {
   const lines = markdownContent.slice(0, cursorPosition).split('\n')
diff --git a/src/components/editor-page/editor-pane/hooks/table-paste/table-extractor.ts b/src/components/editor-page/editor-pane/hooks/table-paste/table-extractor.ts
index 84a45267c..c1f1ad401 100644
--- a/src/components/editor-page/editor-pane/hooks/table-paste/table-extractor.ts
+++ b/src/components/editor-page/editor-pane/hooks/table-paste/table-extractor.ts
@@ -8,7 +8,9 @@ import { createNumberRangeArray } from '../../../../common/number-range/number-r
 
 /**
  * Checks if the given text is a tab-and-new-line-separated table.
+ *
  * @param text The text to check
+ * @return If the text is a table or not
  */
 export const isTable = (text: string): boolean => {
   // Tables must consist of multiple rows and columns
@@ -32,7 +34,8 @@ export const isTable = (text: string): boolean => {
 }
 
 /**
- * Reformat the given text as Markdown table
+ * Reformat the given text as Markdown table.
+ *
  * @param pasteData The plain text table separated by tabs and new-lines
  * @return the formatted Markdown table
  */
diff --git a/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts b/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts
index c71c4239e..d2f36c548 100644
--- a/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts
+++ b/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts
@@ -34,7 +34,6 @@ const applyScrollState = (view: EditorView, scrollState: ScrollState): void => {
 /**
  * Monitors the given scroll state and scrolls the editor to the state if changed.
  *
- * @param editorRef The editor that should be manipulated
  * @param scrollState The scroll state that should be monitored
  */
 export const useApplyScrollState = (scrollState?: ScrollState): void => {
diff --git a/src/components/editor-page/editor-pane/hooks/use-cursor-activity-callback.ts b/src/components/editor-page/editor-pane/hooks/use-cursor-activity-callback.ts
index d33af42b4..6f387cea5 100644
--- a/src/components/editor-page/editor-pane/hooks/use-cursor-activity-callback.ts
+++ b/src/components/editor-page/editor-pane/hooks/use-cursor-activity-callback.ts
@@ -11,7 +11,7 @@ import { EditorView } from '@codemirror/view'
 import type { Extension, SelectionRange } from '@codemirror/state'
 
 /**
- * Provides a callback for codemirror that handles cursor changes
+ * Provides a callback for codemirror that handles cursor changes.
  *
  * @return the generated callback
  */
diff --git a/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx b/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx
index 3cb6e871b..ce36f8d81 100644
--- a/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx
+++ b/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx
@@ -19,7 +19,7 @@ import type { ContentFormatter } from '../../change-content-context/change-conte
 import { useCodeMirrorReference } from '../../change-content-context/change-content-context'
 
 /**
- * Processes the upload of the given file and inserts the correct Markdown code
+ * Processes the upload of the given file and inserts the correct Markdown code.
  *
  * @param view the codemirror instance that is used to insert the Markdown code
  * @param file The file to upload
diff --git a/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts b/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts
index d8a009f59..7bc648fb3 100644
--- a/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts
+++ b/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts
@@ -22,7 +22,7 @@ const calculateLineBasedPosition = (absolutePosition: number, lineStartIndexes:
 }
 
 /**
- * Returns the line+character based position of the to cursor, if available.
+ * Returns the line+character based position of the to-cursor, if available.
  */
 export const useLineBasedToPosition = (): LineBasedPosition | undefined => {
   const lineStartIndexes = useApplicationState((state) => state.noteDetails.markdownContent.lineStartIndexes)
@@ -38,7 +38,7 @@ export const useLineBasedToPosition = (): LineBasedPosition | undefined => {
 }
 
 /**
- * Returns the line+character based position of the from cursor.
+ * Returns the line+character based position of the from-cursor.
  */
 export const useLineBasedFromPosition = (): LineBasedPosition => {
   const lineStartIndexes = useApplicationState((state) => state.noteDetails.markdownContent.lineStartIndexes)
diff --git a/src/components/editor-page/editor-pane/hooks/yjs/use-bind-y-text-to-redux.ts b/src/components/editor-page/editor-pane/hooks/yjs/use-bind-y-text-to-redux.ts
index 5fb22f3d0..72307d375 100644
--- a/src/components/editor-page/editor-pane/hooks/yjs/use-bind-y-text-to-redux.ts
+++ b/src/components/editor-page/editor-pane/hooks/yjs/use-bind-y-text-to-redux.ts
@@ -10,7 +10,7 @@ import type { YText } from 'yjs/dist/src/types/YText'
 
 /**
  * One-Way-synchronizes the text of the given {@link YText y-text} into the global application state.
- *4
+ *
  * @param yText The source text
  */
 export const useBindYTextToRedux = (yText: YText): void => {
diff --git a/src/components/editor-page/editor-pane/hooks/yjs/use-is-connection-synced.ts b/src/components/editor-page/editor-pane/hooks/yjs/use-is-connection-synced.ts
index b43c08d85..eff8962d3 100644
--- a/src/components/editor-page/editor-pane/hooks/yjs/use-is-connection-synced.ts
+++ b/src/components/editor-page/editor-pane/hooks/yjs/use-is-connection-synced.ts
@@ -11,6 +11,7 @@ import type { YDocMessageTransporter } from '@hedgedoc/realtime'
  * Checks if the given message transporter has received at least one full synchronisation.
  *
  * @param connection The connection whose sync status should be checked
+ * @return If at least one full synchronisation is occurred.
  */
 export const useIsConnectionSynced = (connection: YDocMessageTransporter): boolean => {
   const [editorEnabled, setEditorEnabled] = useState<boolean>(false)
diff --git a/src/components/editor-page/editor-pane/hooks/yjs/use-on-first-editor-update-extension.ts b/src/components/editor-page/editor-pane/hooks/yjs/use-on-first-editor-update-extension.ts
index c80b63fcf..e7de33f3e 100644
--- a/src/components/editor-page/editor-pane/hooks/yjs/use-on-first-editor-update-extension.ts
+++ b/src/components/editor-page/editor-pane/hooks/yjs/use-on-first-editor-update-extension.ts
@@ -11,7 +11,7 @@ import type { Extension } from '@codemirror/state'
 /**
  * Provides an extension that checks when the code mirror, that loads the extension, has its first update.
  *
- * @return [Extension, boolean] The extension that listens for editor updates and a boolean that defines if the first update already happened
+ * @return The extension that listens for editor updates and a boolean that defines if the first update already happened
  */
 export const useOnFirstEditorUpdateExtension = (): [Extension, boolean] => {
   const [firstUpdateHappened, setFirstUpdateHappened] = useState<boolean>(false)
diff --git a/src/components/editor-page/editor-pane/hooks/yjs/websocket-connection.ts b/src/components/editor-page/editor-pane/hooks/yjs/websocket-connection.ts
index 115a961c4..085fa6136 100644
--- a/src/components/editor-page/editor-pane/hooks/yjs/websocket-connection.ts
+++ b/src/components/editor-page/editor-pane/hooks/yjs/websocket-connection.ts
@@ -14,7 +14,7 @@ import type { Doc } from 'yjs'
 import type { Awareness } from 'y-protocols/awareness'
 
 /**
- * Handles the communication with the realtime endpoint of the backend and synchronizes the given y-doc and awareness with other clients..
+ * Handles the communication with the realtime endpoint of the backend and synchronizes the given y-doc and awareness with other clients.
  */
 export class WebsocketConnection extends WebsocketTransporter {
   constructor(url: URL, doc: Doc, awareness: Awareness) {
diff --git a/src/components/editor-page/editor-pane/status-bar/number-of-lines-in-document-info.tsx b/src/components/editor-page/editor-pane/status-bar/number-of-lines-in-document-info.tsx
index 479af798e..328c2e41f 100644
--- a/src/components/editor-page/editor-pane/status-bar/number-of-lines-in-document-info.tsx
+++ b/src/components/editor-page/editor-pane/status-bar/number-of-lines-in-document-info.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,8 +10,6 @@ import { useApplicationState } from '../../../../hooks/common/use-application-st
 
 /**
  * Renders a translated text that shows the number of lines in the document.
- *
- * @param linesInDocument The number of lines in the document
  */
 export const NumberOfLinesInDocumentInfo: React.FC = () => {
   useTranslation()
diff --git a/src/components/editor-page/editor-pane/status-bar/remaining-characters-info.tsx b/src/components/editor-page/editor-pane/status-bar/remaining-characters-info.tsx
index 46b1f05dd..ff890b360 100644
--- a/src/components/editor-page/editor-pane/status-bar/remaining-characters-info.tsx
+++ b/src/components/editor-page/editor-pane/status-bar/remaining-characters-info.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,9 +11,6 @@ import { useApplicationState } from '../../../../hooks/common/use-application-st
 
 /**
  * Renders a translated text that shows the number of remaining characters.
- *
- * @param remainingCharacters The number of characters that are still available in this document
- * @param charactersInDocument The total number of characters in the document
  */
 export const RemainingCharactersInfo: React.FC = () => {
   const { t } = useTranslation()
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx
index 05d1000cf..7557fa5fb 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import { wrapSelection } from '../formatters/wrap-selection'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 
+/**
+ * Renders a button to make the selection in the {@link Editor editor} bold.
+ */
 export const BoldButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return wrapSelection(currentSelection, '**', '**')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx
index 5624291f4..97dddb54f 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
 
+/**
+ * Renders a button to create a checklist in the {@link Editor editor}.
+ */
 export const CheckListButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return prependLinesOfSelection(markdownContent, currentSelection, () => `- [ ] `)
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx
index b33299a37..2d3a0ab17 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx
@@ -10,6 +10,9 @@ import { wrapSelection } from '../formatters/wrap-selection'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { changeCursorsToWholeLineIfNoToCursor } from '../formatters/utils/change-cursors-to-whole-line-if-no-to-cursor'
 
+/**
+ * Renders a button to create a code fence in the {@link Editor editor}.
+ */
 export const CodeFenceButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return wrapSelection(changeCursorsToWholeLineIfNoToCursor(markdownContent, currentSelection), '```\n', '\n```')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx
index fe5c7b730..e853c87f3 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx
@@ -10,6 +10,9 @@ import { wrapSelection } from '../formatters/wrap-selection'
 import { changeCursorsToWholeLineIfNoToCursor } from '../formatters/utils/change-cursors-to-whole-line-if-no-to-cursor'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 
+/**
+ * Renders a button to create a spoiler section in the {@link Editor editor}.
+ */
 export const CollapsibleBlockButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return wrapSelection(
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx
index a3399e9ac..5b8f55e41 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { replaceSelection } from '../formatters/replace-selection'
 
+/**
+ * Renders a button to create a comment in the {@link Editor editor}.
+ */
 export const CommentButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return replaceSelection({ from: currentSelection.to ?? currentSelection.from }, '> []', true)
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx
index 671bf1f35..f74a86127 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
 
+/**
+ * Renders a button to add a header in the {@link Editor editor}.
+ */
 export const HeaderLevelButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return prependLinesOfSelection(markdownContent, currentSelection, (line) => (line.startsWith('#') ? `#` : `# `))
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx
index 902cbe147..da71ff3d2 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import { wrapSelection } from '../formatters/wrap-selection'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 
+/**
+ * Renders a button that highlights the selection in the {@link Editor editor}.
+ */
 export const HighlightButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return wrapSelection(currentSelection, '==', '==')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx
index 17f0d700f..deb0c88e2 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { replaceSelection } from '../formatters/replace-selection'
 
+/**
+ * Renders a button to insert a horizontal line in the {@link Editor editor}.
+ */
 export const HorizontalLineButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return replaceSelection({ from: currentSelection.to ?? currentSelection.from }, '----\n', true)
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx
index 2d29c7312..1ad4521f9 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { addLink } from '../formatters/add-link'
 
+/**
+ * Renders a button to insert an image in the {@link Editor editor}.
+ */
 export const ImageLinkButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return addLink(markdownContent, currentSelection, '!')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx
index a4aab70cb..50de66450 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import { wrapSelection } from '../formatters/wrap-selection'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 
+/**
+ * Renders a button to make the selection in the {@link Editor editor} italic.
+ */
 export const ItalicButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return wrapSelection(currentSelection, '*', '*')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx
index cc3024dd6..4723969ec 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { addLink } from '../formatters/add-link'
 
+/**
+ * Renders a button to insert a link in the {@link Editor editor}.
+ */
 export const LinkButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return addLink(markdownContent, currentSelection)
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx
index daf045afd..086941472 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
 
+/**
+ * Renders a button to insert an ordered list in the {@link Editor editor}.
+ */
 export const OrderedListButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return prependLinesOfSelection(
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx
index b2a186401..4d89fa0e1 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
 
+/**
+ * Renders a button to insert a quotation in the {@link Editor editor}.
+ */
 export const QuotesButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return prependLinesOfSelection(markdownContent, currentSelection, () => `> `)
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx
index e702c0846..12acf90f9 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import { wrapSelection } from '../formatters/wrap-selection'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 
+/**
+ * Renders a button to strike through the selection in the {@link Editor editor}.
+ */
 export const StrikethroughButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return wrapSelection(currentSelection, '~~', '~~')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx
index b191da6c1..6792f5c29 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import { wrapSelection } from '../formatters/wrap-selection'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 
+/**
+ * Renders a button to format the selection in the {@link Editor editor} as subscript.
+ */
 export const SubscriptButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return wrapSelection(currentSelection, '~', '~')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx
index bf32d1861..f2117dd3a 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import { wrapSelection } from '../formatters/wrap-selection'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 
+/**
+ * Renders a button to format the selection in the {@link Editor editor} as superscript.
+ */
 export const SuperscriptButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return wrapSelection(currentSelection, '^', '^')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx
index 14dbcce27..76ba98ae8 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import { wrapSelection } from '../formatters/wrap-selection'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 
+/**
+ * Renders a button to underline the selection in the {@link Editor editor}.
+ */
 export const UnderlineButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
     return wrapSelection(currentSelection, '++', '++')
diff --git a/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx b/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx
index 2261fe70b..5b6e2b5bf 100644
--- a/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx
@@ -9,6 +9,9 @@ import { ToolbarButton } from '../toolbar-button'
 import type { ContentFormatter } from '../../../change-content-context/change-content-context'
 import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
 
+/**
+ * Renders a button to insert an unordered list in the {@link Editor editor}.
+ */
 export const UnorderedListButton: React.FC = () => {
   const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
     return prependLinesOfSelection(markdownContent, currentSelection, () => `- `)
diff --git a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx
index c24eb5ef3..7a961702d 100644
--- a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx
@@ -16,6 +16,10 @@ import { useChangeEditorContentCallback } from '../../../change-content-context/
 import { replaceSelection } from '../formatters/replace-selection'
 import { extractEmojiShortCode } from './extract-emoji-short-code'
 
+/**
+ * Renders a button to open the emoji picker.
+ * @see EmojiPicker
+ */
 export const EmojiPickerButton: React.FC = () => {
   const { t } = useTranslation()
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
diff --git a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
index d39107164..577411f35 100644
--- a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,22 +14,16 @@ import forkawesomeIcon from './forkawesome.png'
 import { ForkAwesomeIcons } from '../../../../common/fork-awesome/fork-awesome-icons'
 import fontStyles from '../../../../../../global-styles/variables.module.scss'
 
-export interface EmojiPickerProps {
-  show: boolean
-  onEmojiSelected: (emoji: EmojiClickEventDetail) => void
-  onDismiss: () => void
-}
-
-export const customEmojis: CustomEmoji[] = ForkAwesomeIcons.map((name) => ({
+const customEmojis: CustomEmoji[] = ForkAwesomeIcons.map((name) => ({
   name: `fa-${name}`,
   shortcodes: [`fa-${name.toLowerCase()}`],
   url: forkawesomeIcon.src,
   category: 'ForkAwesome'
 }))
 
-export const EMOJI_DATA_PATH = '/_next/static/js/emoji-data.json'
+const EMOJI_DATA_PATH = '/_next/static/js/emoji-data.json'
 
-export const emojiPickerConfig = {
+const emojiPickerConfig = {
   customEmoji: customEmojis,
   dataSource: EMOJI_DATA_PATH
 }
@@ -40,6 +34,20 @@ const twemojiStyle = (): HTMLStyleElement => {
   return style
 }
 
+export interface EmojiPickerProps {
+  show: boolean
+  onEmojiSelected: (emoji: EmojiClickEventDetail) => void
+  onDismiss: () => void
+}
+
+/**
+ * Renders the emoji picker.
+ *
+ * @param show If the emoji picker should be shown
+ * @param onEmojiSelected The callback, that will be called if an emoji is selected
+ * @param onDismiss The callback, that will be called if the picker should be closed.
+ * @external {Picker} https://www.npmjs.com/package/emoji-picker-element
+ */
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({ show, onEmojiSelected, onDismiss }) => {
   const darkModeEnabled = useIsDarkModeActivated()
   const pickerContainerRef = useRef<HTMLDivElement>(null)
diff --git a/src/components/editor-page/editor-pane/tool-bar/formatters/add-link.ts b/src/components/editor-page/editor-pane/tool-bar/formatters/add-link.ts
index 7e30f6b32..cc0dac23b 100644
--- a/src/components/editor-page/editor-pane/tool-bar/formatters/add-link.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/formatters/add-link.ts
@@ -16,8 +16,8 @@ const afterLink = ')'
  * Creates a copy of the given markdown content lines but inserts a new link tag.
  *
  * @param markdownContent The content of the document to modify
- * @param selection If the selection has no to cursor then the tag will be inserted at this position.
- *                  If the selection has a to cursor then the selected text will be inserted into the description or the URL part.
+ * @param selection If the selection has no to-cursor then the tag will be inserted at this position.
+ *                  If the selection has a to-cursor then the selected text will be inserted into the description or the URL part.
  * @param prefix An optional prefix for the link
  * @return the modified copy of lines
  */
diff --git a/src/components/editor-page/editor-pane/tool-bar/formatters/prepend-lines-of-selection.ts b/src/components/editor-page/editor-pane/tool-bar/formatters/prepend-lines-of-selection.ts
index ab98cf4b6..8aa788c8e 100644
--- a/src/components/editor-page/editor-pane/tool-bar/formatters/prepend-lines-of-selection.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/formatters/prepend-lines-of-selection.ts
@@ -12,8 +12,8 @@ import type { ContentEdits } from './types/changes'
  * Creates a copy of the given markdown content lines but modifies the whole selected lines.
  *
  * @param markdownContent The lines of the document to modify
- * @param selection If the selection has no to cursor then only the from line will be modified.
- *                  If the selection has a to cursor then all lines in the selection will be modified.
+ * @param selection If the selection has no to-cursor then only the from-line will be modified.
+ *                  If the selection has a to-cursor then all lines in the selection will be modified.
  * @param modifyLine A function that modifies the selected lines
  * @return the modified copy of lines
  */
diff --git a/src/components/editor-page/editor-pane/tool-bar/formatters/replace-selection.ts b/src/components/editor-page/editor-pane/tool-bar/formatters/replace-selection.ts
index ac5e8b8c1..79f1d6dd9 100644
--- a/src/components/editor-page/editor-pane/tool-bar/formatters/replace-selection.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/formatters/replace-selection.ts
@@ -10,9 +10,10 @@ import type { CursorSelection } from './types/cursor-selection'
 /**
  * Creates a new {@link NoteDetails note state} but replaces the selected text.
  *
- * @param selection If the selection has no to cursor then text will only be inserted.
- *                  If the selection has a to cursor then the selection will be replaced.
+ * @param selection If the selection has no to-cursor then text will only be inserted.
+ *                  If the selection has a to-cursor then the selection will be replaced.
  * @param insertText The text that should be inserted
+ * @param insertNewLine If the selection should be prefixed with a new-line-character.
  * @return The modified state
  */
 export const replaceSelection = (
diff --git a/src/components/editor-page/editor-pane/tool-bar/formatters/utils/change-cursors-to-whole-line-if-no-to-cursor.ts b/src/components/editor-page/editor-pane/tool-bar/formatters/utils/change-cursors-to-whole-line-if-no-to-cursor.ts
index 7d82754bf..c6e1cc776 100644
--- a/src/components/editor-page/editor-pane/tool-bar/formatters/utils/change-cursors-to-whole-line-if-no-to-cursor.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/formatters/utils/change-cursors-to-whole-line-if-no-to-cursor.ts
@@ -7,12 +7,12 @@
 import type { CursorSelection } from '../types/cursor-selection'
 
 /**
- * If the given cursor selection has no to position then the selection will be changed to cover the whole line of the from cursor.
+ * If the given cursor selection has no to position then the selection will be changed to cover the whole line of the from-cursor.
  *
  * @param markdownContent The markdown content that is used to calculate the start and end position of the line
  * @param selection The selection that is in the line whose start and end index should be calculated
- * @return The corrected selection if no to cursor is present or the unmodified selection otherwise
- * @throws Error if the line, that the from cursor is referring to, doesn't exist.
+ * @return The corrected selection if no to-cursor is present or the unmodified selection otherwise
+ * @throws Error if the line, that the from-cursor is referring to, doesn't exist.
  */
 export const changeCursorsToWholeLineIfNoToCursor = (
   markdownContent: string,
diff --git a/src/components/editor-page/editor-pane/tool-bar/formatters/wrap-selection.ts b/src/components/editor-page/editor-pane/tool-bar/formatters/wrap-selection.ts
index 71ef0444d..1b5c54953 100644
--- a/src/components/editor-page/editor-pane/tool-bar/formatters/wrap-selection.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/formatters/wrap-selection.ts
@@ -10,10 +10,10 @@ import type { CursorSelection } from './types/cursor-selection'
 /**
  * Creates a copy of the given markdown content lines but wraps the selection.
  *
- * @param selection If the selection has no to cursor then nothing will happen.
- *                  If the selection has a to cursor then the selected text will be wrapped.
- * @param symbolStart A text that will be inserted before the from cursor
- * @param symbolEnd A text that will be inserted after the to cursor
+ * @param selection If the selection has no to-cursor then nothing will happen.
+ *                  If the selection has a to-cursor then the selected text will be wrapped.
+ * @param symbolStart A text that will be inserted before the from-cursor
+ * @param symbolEnd A text that will be inserted after the to-cursor
  * @return the modified copy of lines
  */
 export const wrapSelection = (
diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/create-markdown-table.tsx b/src/components/editor-page/editor-pane/tool-bar/table-picker/create-markdown-table.tsx
index 29ee8c2f6..a68af2a1a 100644
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/create-markdown-table.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/create-markdown-table.tsx
@@ -11,8 +11,8 @@ import { createNumberRangeArray } from '../../../../common/number-range/number-r
  *
  * @param rows The number of table rows
  * @param columns The number of table columns
- * @throws Error if an invalid table size was given
  * @return The created Markdown table
+ * @throws Error if an invalid table size was given
  */
 export const createMarkdownTable = (rows: number, columns: number): string => {
   if (rows <= 0) {
diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx
index 08f551469..2f3e8e9c3 100644
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -26,6 +26,14 @@ export interface TableSize {
   columns: number
 }
 
+/**
+ * Renders a popover to select the size of a new table to be inserted.
+ *
+ * @param onShowCustomSizeModal The callback, that will be called if the {@link CustomTableSizeModal} should be shown.
+ * @param onTableSizeSelected The callback, that will be called if a table size was selected.
+ * @param onRefUpdate The callback, that will be called if ref was updated.
+ * @param props Additional props given directly to the modal
+ */
 export const TableSizePickerPopover: React.FC<TableSizePickerPopoverProps> = ({
   onShowCustomSizeModal,
   onTableSizeSelected,
diff --git a/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx b/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx
index 81443e718..c8281a3c6 100644
--- a/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx
@@ -30,6 +30,9 @@ import { CommentButton } from './buttons/comment-button'
 
 const EmojiPickerButton = React.lazy(() => import('./emoji-picker/emoji-picker-button'))
 
+/**
+ * Renders the toolbar of the editor with buttons for formatting or inserting text.
+ */
 export const ToolBar: React.FC = () => {
   return (
     <ButtonToolbar className={`bg-light ${styles.toolbar}`}>
diff --git a/src/components/editor-page/editor-pane/tool-bar/upload-image-button/extract-selected-text.ts b/src/components/editor-page/editor-pane/tool-bar/upload-image-button/extract-selected-text.ts
index 5f101d049..2e25ff47c 100644
--- a/src/components/editor-page/editor-pane/tool-bar/upload-image-button/extract-selected-text.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/upload-image-button/extract-selected-text.ts
@@ -10,7 +10,7 @@ import { Optional } from '@mrdrogdrog/optional'
  * Extracts the currently selected text from the given CodeMirror state.
  *
  * @param state The CodeMirror state that provides the content and the selection
- * @return The selected text or {@code undefined} if no text was selected
+ * @return The selected text or {@link undefined} if no text was selected
  */
 export const extractSelectedText = (state: EditorState): string | undefined => {
   return Optional.ofNullable(state.selection.main)
diff --git a/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx b/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
index f6b16d7b4..3aa4999d1 100644
--- a/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
@@ -54,7 +54,7 @@ export const UploadImageButton: React.FC = () => {
       <ShowIf condition={!!codeMirror}>
         <UploadInput
           onLoad={onUploadImage}
-          acceptedFiles={acceptedMimeTypes}
+          allowedFileTypes={acceptedMimeTypes}
           onClickRef={clickRef}
           {...cypressId('editor-toolbar-upload-image-input')}
         />
diff --git a/src/components/editor-page/hooks/useEditorModeFromUrl.ts b/src/components/editor-page/hooks/useEditorModeFromUrl.ts
index cd1da2408..89dd06355 100644
--- a/src/components/editor-page/hooks/useEditorModeFromUrl.ts
+++ b/src/components/editor-page/hooks/useEditorModeFromUrl.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,9 @@ import { EditorMode } from '../app-bar/editor-view-mode'
 import { setEditorMode } from '../../../redux/editor/methods'
 import { useRouter } from 'next/router'
 
+/**
+ * Extracts the specified editor mode from the URL query and sets that into the global application state.
+ */
 export const useEditorModeFromUrl = (): void => {
   const { query } = useRouter()
 
diff --git a/src/components/editor-page/hooks/useUpdateLocalHistoryEntry.ts b/src/components/editor-page/hooks/useUpdateLocalHistoryEntry.ts
index 91d3305e4..6a28cb222 100644
--- a/src/components/editor-page/hooks/useUpdateLocalHistoryEntry.ts
+++ b/src/components/editor-page/hooks/useUpdateLocalHistoryEntry.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,10 @@ import { useApplicationState } from '../../../hooks/common/use-application-state
 import type { HistoryEntryWithOrigin } from '../../../api/history/types'
 import { HistoryEntryOrigin } from '../../../api/history/types'
 
+/**
+ * An effect that uses information of the current note state to update a local {@link HistoryEntryWithOrigin history entry}.
+ * The entry is updated when the title or tags of the note change.
+ */
 export const useUpdateLocalHistoryEntry = (): void => {
   const id = useApplicationState((state) => state.noteDetails.id)
   const userExists = useApplicationState((state) => !!state.user)
diff --git a/src/components/editor-page/hooks/useViewModeShortcuts.ts b/src/components/editor-page/hooks/useViewModeShortcuts.ts
index 6359f2025..cf1251917 100644
--- a/src/components/editor-page/hooks/useViewModeShortcuts.ts
+++ b/src/components/editor-page/hooks/useViewModeShortcuts.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -25,6 +25,11 @@ const shortcutHandler = (event: KeyboardEvent): void => {
   }
 }
 
+/**
+ * Adds global view mode keyboard shortcuts and removes them again, if the hook is dismissed.
+ *
+ * @see shortcutHandler
+ */
 export const useViewModeShortcuts = (): void => {
   useEffect(() => {
     document.addEventListener('keydown', shortcutHandler, false)
diff --git a/src/components/editor-page/render-context/use-origin-from-config.ts b/src/components/editor-page/render-context/use-origin-from-config.ts
index 82f77eb70..ea4727508 100644
--- a/src/components/editor-page/render-context/use-origin-from-config.ts
+++ b/src/components/editor-page/render-context/use-origin-from-config.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,7 +13,7 @@ export enum ORIGIN_TYPE {
 }
 
 /**
- * Returns the url origin of the editor or the renderer
+ * Returns the url origin of the editor or the renderer.
  */
 export const useOriginFromConfig = (originType: ORIGIN_TYPE): string => {
   const originFromConfig = useApplicationState((state) =>
diff --git a/src/components/editor-page/renderer-pane/communicator-image-lightbox.tsx b/src/components/editor-page/renderer-pane/communicator-image-lightbox.tsx
index a0a082e26..41759de4c 100644
--- a/src/components/editor-page/renderer-pane/communicator-image-lightbox.tsx
+++ b/src/components/editor-page/renderer-pane/communicator-image-lightbox.tsx
@@ -14,6 +14,9 @@ import { CommunicationMessageType } from '../../render-page/window-post-message-
 import { useEditorReceiveHandler } from '../../render-page/window-post-message-communicator/hooks/use-editor-receive-handler'
 import { useBooleanState } from '../../../hooks/common/use-boolean-state'
 
+/**
+ * Handles messages from the render in the iframe to open a {@link ImageLightboxModal}.
+ */
 export const CommunicatorImageLightbox: React.FC = () => {
   const [lightboxDetails, setLightboxDetails] = useState<ImageDetails | undefined>(undefined)
   const [modalVisibility, showModal, closeModal] = useBooleanState()
diff --git a/src/components/editor-page/renderer-pane/hooks/use-force-render-page-url-on-iframe-load-callback.ts b/src/components/editor-page/renderer-pane/hooks/use-force-render-page-url-on-iframe-load-callback.ts
index 4e7e8a055..407ecf53f 100644
--- a/src/components/editor-page/renderer-pane/hooks/use-force-render-page-url-on-iframe-load-callback.ts
+++ b/src/components/editor-page/renderer-pane/hooks/use-force-render-page-url-on-iframe-load-callback.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,7 +11,7 @@ import { Logger } from '../../../../utils/logger'
 const log = new Logger('IframeLoader')
 
 /**
- * Generates a callback for a iframe load handler, that enforces a given URL if frame navigates away.
+ * Generates a callback for an iframe load handler, that enforces a given URL if frame navigates away.
  *
  * @param iFrameReference A reference to the iframe react dom element.
  * @param rendererOrigin The base url that should be enforced.
diff --git a/src/components/editor-page/renderer-pane/hooks/use-send-scroll-state.ts b/src/components/editor-page/renderer-pane/hooks/use-send-scroll-state.ts
index 10af86ae8..10dd8114b 100644
--- a/src/components/editor-page/renderer-pane/hooks/use-send-scroll-state.ts
+++ b/src/components/editor-page/renderer-pane/hooks/use-send-scroll-state.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,7 @@ import { useEditorToRendererCommunicator } from '../../render-context/editor-to-
 
 /**
  * Sends the given {@link ScrollState scroll state} to the renderer if the content changed.
+ *
  * @param scrollState The scroll state to send
  */
 export const useSendScrollState = (scrollState: ScrollState | undefined): void => {
diff --git a/src/components/editor-page/renderer-pane/render-iframe.tsx b/src/components/editor-page/renderer-pane/render-iframe.tsx
index 558f1e8c5..a4b46f044 100644
--- a/src/components/editor-page/renderer-pane/render-iframe.tsx
+++ b/src/components/editor-page/renderer-pane/render-iframe.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -36,6 +36,21 @@ export interface RenderIframeProps extends RendererProps {
 
 const log = new Logger('RenderIframe')
 
+/**
+ * Renders the iframe for the HTML-rendering of the markdown content.
+ * The iframe is enhanced by the {@link useEditorToRendererCommunicator iframe communicator} which is used for
+ * passing data from the parent frame into the iframe as well as receiving status messages and data from the iframe.
+ *
+ * @param markdownContentLines Array of lines of the markdown content
+ * @param onTaskCheckedChange Callback that is fired when a task-list item in the iframe is checked
+ * @param scrollState The current {@link ScrollState}
+ * @param onFirstHeadingChange Callback that is fired when the first heading of the note changes
+ * @param onScroll Callback that is fired when the user scrolls in the iframe
+ * @param onMakeScrollSource Callback that is fired when the renderer requests to be set as the current scroll source
+ * @param frameClasses CSS classes that should be applied to the iframe
+ * @param rendererType The {@link RendererType type} of the renderer to use.
+ * @param forcedDarkMode If set, the dark mode will be set to the given value. Otherwise, the dark mode won't be changed.
+ */
 export const RenderIframe: React.FC<RenderIframeProps> = ({
   markdownContentLines,
   onTaskCheckedChange,
diff --git a/src/components/editor-page/renderer-pane/yaml-array-deprecation-alert.tsx b/src/components/editor-page/renderer-pane/yaml-array-deprecation-alert.tsx
index efa77c0e7..6efbcfc08 100644
--- a/src/components/editor-page/renderer-pane/yaml-array-deprecation-alert.tsx
+++ b/src/components/editor-page/renderer-pane/yaml-array-deprecation-alert.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,11 @@ import { ShowIf } from '../../common/show-if/show-if'
 import type { CommonModalProps } from '../../common/modals/common-modal'
 import { cypressId } from '../../../utils/cypress-attribute'
 
+/**
+ * Renders an alert that indicated that the front matter tags property is using a deprecated format.
+ *
+ * @param show If the alert should be shown.
+ */
 export const YamlArrayDeprecationAlert: React.FC<Partial<CommonModalProps>> = ({ show }) => {
   useTranslation()
 
diff --git a/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-sidebar-entry.tsx b/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-sidebar-entry.tsx
index 2c2c1cb81..fa5eda680 100644
--- a/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-sidebar-entry.tsx
@@ -19,7 +19,7 @@ import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
 /**
  * Sidebar entry that can be used to delete the current note.
  *
- * @param hide {@code true} if the entry shouldn't be visible
+ * @param hide {@link true} if the entry shouldn't be visible
  * @param className Additional css class names for the sidebar entry
  */
 export const DeleteNoteSidebarEntry: React.FC<PropsWithChildren<SpecificSidebarEntryProps>> = ({ hide, className }) => {
diff --git a/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx b/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx
index bf07f7f70..d6788a44c 100644
--- a/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx
+++ b/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx
@@ -23,8 +23,9 @@ export interface SidebarButton extends SidebarEntryProps {
  * @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 hide Should be {@link true} if the button should be invisible
  * @param variant An alternative theme for the button
+ * @param disabled If the button should be disabled
  * @param props Other button props
  */
 export const SidebarButton: React.FC<PropsWithChildren<SidebarButton>> = ({
diff --git a/src/components/editor-page/sidebar/sidebar-menu/sidebar-menu.tsx b/src/components/editor-page/sidebar/sidebar-menu/sidebar-menu.tsx
index 00a730346..05b7947e3 100644
--- a/src/components/editor-page/sidebar/sidebar-menu/sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/sidebar-menu/sidebar-menu.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,12 @@ import React from 'react'
 import type { SidebarMenuProps } from '../types'
 import styles from './sidebar-menu.module.scss'
 
+/**
+ * Renders a sidebar menu.
+ *
+ * @param children The children in the menu.
+ * @param expand If the menu is extended (and the children are shown) or not.
+ */
 export const SidebarMenu: React.FC<PropsWithChildren<SidebarMenuProps>> = ({ children, expand }) => {
   return (
     <div className={`${styles['sidebar-menu']} ${expand ? styles['show'] : ''}`}>
diff --git a/src/components/editor-page/sidebar/sidebar.tsx b/src/components/editor-page/sidebar/sidebar.tsx
index 17590f5bb..73c018d06 100644
--- a/src/components/editor-page/sidebar/sidebar.tsx
+++ b/src/components/editor-page/sidebar/sidebar.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -18,6 +18,9 @@ import styles from './style/sidebar.module.scss'
 import { DocumentSidebarMenuSelection } from './types'
 import { UsersOnlineSidebarMenu } from './users-online-sidebar-menu/users-online-sidebar-menu'
 
+/**
+ * Renders the sidebar for the editor.
+ */
 export const Sidebar: React.FC = () => {
   const sideBarRef = useRef<HTMLDivElement>(null)
   const [selectedMenu, setSelectedMenu] = useState<DocumentSidebarMenuSelection>(DocumentSidebarMenuSelection.NONE)
diff --git a/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx b/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx
index d276b58f2..1cc20d3b0 100644
--- a/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,6 +14,14 @@ import type { SpecificSidebarMenuProps } from '../types'
 import { DocumentSidebarMenuSelection } from '../types'
 import { cypressId } from '../../../../utils/cypress-attribute'
 
+/**
+ * Renders the export menu for the sidebar.
+ *
+ * @param className Additional class names given to the menu button
+ * @param menuId The id of the menu
+ * @param onClick The callback, that should be called when the menu button is pressed
+ * @param selectedMenuId The currently selected menu id
+ */
 export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
   className,
   menuId,
diff --git a/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx b/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx
index cf7e843dc..f0bea9d7e 100644
--- a/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx
@@ -13,6 +13,9 @@ import { useChangeEditorContentCallback } from '../../change-content-context/use
 import { ShowIf } from '../../../common/show-if/show-if'
 import { FileContentFormat, readFile } from '../../../../utils/read-file'
 
+/**
+ * Renders a sidebar entry that allows to import the content of markdown files into the currently opened note.
+ */
 export const ImportMarkdownSidebarEntry: React.FC = () => {
   useTranslation()
   const changeEditorContent = useChangeEditorContentCallback()
@@ -55,7 +58,7 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
         <UploadInput
           onLoad={onImportMarkdown}
           {...cypressId('menu-import-markdown-input')}
-          acceptedFiles={'.md, text/markdown, text/plain'}
+          allowedFileTypes={'.md, text/markdown, text/plain'}
           onClickRef={clickRef}
         />
       </ShowIf>
diff --git a/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx b/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx
index 5115f5f6f..045e1ea5a 100644
--- a/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,14 @@ import type { SpecificSidebarMenuProps } from '../types'
 import { DocumentSidebarMenuSelection } from '../types'
 import { cypressId } from '../../../../utils/cypress-attribute'
 
+/**
+ * Renders the import menu for the sidebar.
+ *
+ * @param className Additional class names given to the menu button
+ * @param menuId The id of the menu
+ * @param onClick The callback, that should be called when the menu button is pressed
+ * @param selectedMenuId The currently selected menu id
+ */
 export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
   className,
   menuId,
diff --git a/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-entry.tsx b/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-entry.tsx
index 5f55faa8c..578744f9a 100644
--- a/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-entry.tsx
@@ -12,6 +12,12 @@ import type { SpecificSidebarEntryProps } from '../types'
 import { cypressId } from '../../../../utils/cypress-attribute'
 import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
 
+/**
+ * Sidebar entry that allows to open the {@link NoteInfoModal} containing information about the current note.
+ *
+ * @param className CSS classes to add to the sidebar button
+ * @param hide true when the sidebar button should be hidden, false otherwise
+ */
 export const NoteInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   const [modalVisibility, showModal, closeModal] = useBooleanState()
   useTranslation()
diff --git a/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry.tsx b/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry.tsx
index a1a86f7bc..f4b6f9958 100644
--- a/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry.tsx
@@ -11,6 +11,12 @@ import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
 
+/**
+ * Renders a button to open the permission modal for the sidebar.
+ *
+ * @param className Additional classes directly given to the button
+ * @param hide If the button should be hidden
+ */
 export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   const [modalVisibility, showModal, closeModal] = useBooleanState()
   useTranslation()
diff --git a/src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.tsx b/src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.tsx
index 1dd496a2a..825c6b6bc 100644
--- a/src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,12 @@ import { toggleHistoryEntryPinning } from '../../../../redux/history/methods'
 import { showErrorNotification } from '../../../../redux/ui-notifications/methods'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 
+/**
+ * Sidebar entry button that toggles the pinned status of the current note in the history.
+ *
+ * @param className CSS classes to add to the sidebar button
+ * @param hide true when the sidebar button should be hidden, false otherwise
+ */
 export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   useTranslation()
   const id = useApplicationState((state) => state.noteDetails.id)
diff --git a/src/components/editor-page/sidebar/specific-sidebar-entries/revision-sidebar-entry.tsx b/src/components/editor-page/sidebar/specific-sidebar-entries/revision-sidebar-entry.tsx
index 8f134fec1..cfa8e49a3 100644
--- a/src/components/editor-page/sidebar/specific-sidebar-entries/revision-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/specific-sidebar-entries/revision-sidebar-entry.tsx
@@ -11,6 +11,12 @@ import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
 
+/**
+ * Renders a button to open the revision modal for the sidebar.
+ *
+ * @param className Additional classes directly given to the button
+ * @param hide If the button should be hidden
+ */
 export const RevisionSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   const [modalVisibility, showModal, closeModal] = useBooleanState()
 
diff --git a/src/components/editor-page/sidebar/specific-sidebar-entries/share-sidebar-entry.tsx b/src/components/editor-page/sidebar/specific-sidebar-entries/share-sidebar-entry.tsx
index fe8c528de..a9a4ead6d 100644
--- a/src/components/editor-page/sidebar/specific-sidebar-entries/share-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/specific-sidebar-entries/share-sidebar-entry.tsx
@@ -11,6 +11,12 @@ import { SidebarButton } from '../sidebar-button/sidebar-button'
 import type { SpecificSidebarEntryProps } from '../types'
 import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
 
+/**
+ * Renders a button to open the share modal for the sidebar.
+ *
+ * @param className Additional classes directly given to the button
+ * @param hide If the button should be hidden
+ */
 export const ShareSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   const [modalVisibility, showModal, closeModal] = useBooleanState()
   useTranslation()
diff --git a/src/components/editor-page/sidebar/upload-input.tsx b/src/components/editor-page/sidebar/upload-input.tsx
index c570f3c05..35008181e 100644
--- a/src/components/editor-page/sidebar/upload-input.tsx
+++ b/src/components/editor-page/sidebar/upload-input.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,11 +14,19 @@ const log = new Logger('UploadInput')
 
 export interface UploadInputProps extends PropsWithDataCypressId {
   onLoad: (file: File) => Promise<void>
-  acceptedFiles: string
+  allowedFileTypes: string
   onClickRef: MutableRefObject<(() => void) | undefined>
 }
 
-export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles, onClickRef, ...props }) => {
+/**
+ * Renders an input field to upload something.
+ *
+ * @param onLoad The callback to load the file.
+ * @param allowedFileTypes A string indicating mime-types or file extensions.
+ * @param onClickRef A reference for the onClick handler of the input.
+ * @param props Additional props given to the input.
+ */
+export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, allowedFileTypes, onClickRef, ...props }) => {
   const fileInputReference = useRef<HTMLInputElement>(null)
   const onClick = useCallback(() => {
     fileInputReference.current?.click()
@@ -53,7 +61,7 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles,
       type='file'
       ref={fileInputReference}
       className='d-none'
-      accept={acceptedFiles}
+      accept={allowedFileTypes}
     />
   )
 }
diff --git a/src/components/editor-page/sidebar/user-line/user-line.tsx b/src/components/editor-page/sidebar/user-line/user-line.tsx
index 0780291f6..e146d4da0 100644
--- a/src/components/editor-page/sidebar/user-line/user-line.tsx
+++ b/src/components/editor-page/sidebar/user-line/user-line.tsx
@@ -18,6 +18,7 @@ export interface UserLineProps {
 
 /**
  * Represents a user in the realtime activity status.
+ *
  * @param username The name of the user to show.
  * @param color The color of the user's edits.
  * @param status The user's current online status.
diff --git a/src/components/editor-page/sidebar/users-online-sidebar-menu/active-indicator.tsx b/src/components/editor-page/sidebar/users-online-sidebar-menu/active-indicator.tsx
index 03c0ccff7..9cd6edf24 100644
--- a/src/components/editor-page/sidebar/users-online-sidebar-menu/active-indicator.tsx
+++ b/src/components/editor-page/sidebar/users-online-sidebar-menu/active-indicator.tsx
@@ -12,6 +12,11 @@ export interface ActiveIndicatorProps {
   status: ActiveIndicatorStatus
 }
 
+/**
+ * Renders an indicator corresponding to the given status.
+ *
+ * @param status The state of the indicator to render
+ */
 export const ActiveIndicator: React.FC<ActiveIndicatorProps> = ({ status }) => {
   return <span className={`${styles['activeIndicator']} ${status}`} />
 }
diff --git a/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx b/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
index fdffea384..5d24a3e1b 100644
--- a/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
@@ -14,6 +14,15 @@ import styles from './online-counter.module.scss'
 import { UserLine } from '../user-line/user-line'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 
+/**
+ * Sidebar menu that contains the list of currently online users in the current note session.
+ * When the menu is collapsed, the amount of currently online users is shown, otherwise the full list.
+ *
+ * @param className CSS classes to add to the sidebar menu
+ * @param menuId The id of this sidebar menu
+ * @param onClick Callback that is fired when the menu is clicked
+ * @param selectedMenuId The currently opened sidebar menu
+ */
 export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
   className,
   menuId,
diff --git a/src/components/editor-page/splitter/split-divider/split-divider.tsx b/src/components/editor-page/splitter/split-divider/split-divider.tsx
index a603ddaa3..5061462cc 100644
--- a/src/components/editor-page/splitter/split-divider/split-divider.tsx
+++ b/src/components/editor-page/splitter/split-divider/split-divider.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,12 @@ export interface SplitDividerProps {
   onGrab: () => void
 }
 
+/**
+ * Renders the divider between the two editor panes.
+ * This divider supports both mouse and touch interactions.
+ *
+ * @param onGrab The callback, that should be called if the splitter is grabbed.
+ */
 export const SplitDivider: React.FC<SplitDividerProps> = ({ onGrab }) => {
   return (
     <div
diff --git a/src/components/editor-page/splitter/splitter.tsx b/src/components/editor-page/splitter/splitter.tsx
index 67c3a44a4..b7d0df2bd 100644
--- a/src/components/editor-page/splitter/splitter.tsx
+++ b/src/components/editor-page/splitter/splitter.tsx
@@ -21,9 +21,10 @@ export interface SplitterProps {
 }
 
 /**
- * Checks if the given {@link Event} is a {@link MouseEvent}
+ * Checks if the given {@link Event} is a {@link MouseEvent}.
+ *
  * @param event the event to check
- * @return {@code true} if the given event is a {@link MouseEvent}
+ * @return {@link true} if the given event is a {@link MouseEvent}
  */
 const isMouseEvent = (event: Event): event is MouseEvent => {
   return (event as MouseEvent).buttons !== undefined
@@ -34,10 +35,10 @@ const isLeftMouseButtonClicked = (mouseEvent: MouseEvent): boolean => {
 }
 
 /**
- * Extracts the absolute horizontal position of the mouse or touch point from the event.
- * If no position could be found or
+ * Extracts the absolute horizontal position of the mouse or first touch point from the event.
  *
- * @param moveEvent
+ * @param moveEvent The mouse or touch event that contains a pointer position
+ * @return the extracted horizontal position or {@link undefined} if no position could be extracted
  */
 const extractHorizontalPosition = (moveEvent: MouseEvent | TouchEvent): number | undefined => {
   if (isMouseEvent(moveEvent)) {
@@ -70,14 +71,14 @@ export const Splitter: React.FC<SplitterProps> = ({
   const splitContainer = useRef<HTMLDivElement>(null)
 
   /**
-   * Starts the splitter resizing
+   * Starts the splitter resizing.
    */
   const onStartResizing = useCallback(() => {
     resizingInProgress.current = true
   }, [])
 
   /**
-   * Stops the splitter resizing
+   * Stops the splitter resizing.
    */
   const onStopResizing = useCallback(() => {
     if (resizingInProgress.current) {
diff --git a/src/components/editor-page/synced-scroll/utils.ts b/src/components/editor-page/synced-scroll/utils.ts
index 7fbc997e8..e79359757 100644
--- a/src/components/editor-page/synced-scroll/utils.ts
+++ b/src/components/editor-page/synced-scroll/utils.ts
@@ -1,11 +1,19 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import type { LineMarkerPosition } from '../../markdown-renderer/markdown-extension/linemarker/types'
 
+/**
+ * Finds the {@link LineMarkerPosition line markers} from a list of given line markers that are the closest to the given line number.
+ *
+ * @param lineMarks The list of line markers
+ * @param lineNumber The current line
+ * @return An object containing the last line mark before the current line and the next line mark after the current line
+ * if applicable and undefined for each field otherwise
+ */
 export const findLineMarks = (
   lineMarks: LineMarkerPosition[],
   lineNumber: number
diff --git a/src/components/editor-page/table-of-contents/build-react-dom-from-toc-ast.tsx b/src/components/editor-page/table-of-contents/build-react-dom-from-toc-ast.tsx
index c7e5ff368..d48e2e3c4 100644
--- a/src/components/editor-page/table-of-contents/build-react-dom-from-toc-ast.tsx
+++ b/src/components/editor-page/table-of-contents/build-react-dom-from-toc-ast.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,15 @@ import { ShowIf } from '../../common/show-if/show-if'
 import { tocSlugify } from './toc-slugify'
 import { JumpAnchor } from '../../markdown-renderer/markdown-extension/link-replacer/jump-anchor'
 
+/**
+ * Generates a React DOM part for the table of contents from the given AST of the document.
+ *
+ * @param toc The abstract syntax tree of the document for TOC generation
+ * @param levelsToShowUnderThis The amount of levels which should be shown below this TOC item
+ * @param headerCounts Map that contains the number of occurrences of single header names to allow suffixing them with a number to make them distinguishable
+ * @param wrapInListItem Whether to wrap the TOC content in a list item
+ * @param baseUrl The base URL used for generating absolute links to the note with the correct slug anchor
+ */
 export const buildReactDomFromTocAst = (
   toc: TocAst,
   levelsToShowUnderThis: number,
diff --git a/src/components/editor-page/table-of-contents/table-of-contents.tsx b/src/components/editor-page/table-of-contents/table-of-contents.tsx
index e425c535a..03653be99 100644
--- a/src/components/editor-page/table-of-contents/table-of-contents.tsx
+++ b/src/components/editor-page/table-of-contents/table-of-contents.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -18,6 +18,14 @@ export interface TableOfContentsProps {
   baseUrl?: string
 }
 
+/**
+ * Renders the table of contents for the note.
+ *
+ * @param ast The ast of the headings in the current note.
+ * @param maxDepth The maximal depth of that is considered in the tree
+ * @param className Additional classes directly given to the div
+ * @param baseUrl The base url of the instance.
+ */
 export const TableOfContents: React.FC<TableOfContentsProps> = ({ ast, maxDepth = 3, className, baseUrl }) => {
   useTranslation()
   const tocTree = useMemo(
diff --git a/src/components/editor-page/table-of-contents/toc-slugify.ts b/src/components/editor-page/table-of-contents/toc-slugify.ts
index af2639db0..07b73db47 100644
--- a/src/components/editor-page/table-of-contents/toc-slugify.ts
+++ b/src/components/editor-page/table-of-contents/toc-slugify.ts
@@ -1,9 +1,14 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+/**
+ * Transforms a given content into an url slug.
+ *
+ * @param content The content to slugify
+ * @return The slugifyed content.
+ */
 export const tocSlugify = (content: string): string => {
   return encodeURIComponent(content.trim().toLowerCase().replace(/\s+/g, '-'))
 }
diff --git a/src/components/editor-page/utils.ts b/src/components/editor-page/utils.ts
index 5a6a81f92..b7682f99c 100644
--- a/src/components/editor-page/utils.ts
+++ b/src/components/editor-page/utils.ts
@@ -1,9 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { isClientSideRendering } from '../../utils/is-client-side-rendering'
 
+/**
+ * Determines if the client is running on a Mac.
+ * This is necessary to e.g. determine different keyboard shortcuts.
+ */
 export const isMac: () => boolean = () => isClientSideRendering() && navigator.platform.toLowerCase().includes('mac')
diff --git a/src/components/error-boundary/error-boundary.tsx b/src/components/error-boundary/error-boundary.tsx
index d82946c9f..d8f4bed96 100644
--- a/src/components/error-boundary/error-boundary.tsx
+++ b/src/components/error-boundary/error-boundary.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,11 @@ import { Logger } from '../../utils/logger'
 
 const log = new Logger('ErrorBoundary')
 
+/**
+ * An error boundary for the whole application.
+ * The text in this is not translated, because the error could be part of the translation framework,
+ * and we still want to display something to the user that's meaningful (and searchable).
+ */
 export class ErrorBoundary extends Component<PropsWithChildren<unknown>> {
   state: {
     hasError: boolean
diff --git a/src/components/history-page/entry-menu/delete-note-item.tsx b/src/components/history-page/entry-menu/delete-note-item.tsx
index 7420d0dc0..fd572409a 100644
--- a/src/components/history-page/entry-menu/delete-note-item.tsx
+++ b/src/components/history-page/entry-menu/delete-note-item.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,12 @@ export interface DeleteNoteItemProps {
   noteTitle: string
 }
 
+/**
+ * Renders a dropdown item for the {@link EntryMenu history entry menu} that allows to delete the note of the entry.
+ *
+ * @param noteTitle The title of the note to delete to show it in the deletion confirmation modal
+ * @param onConfirm The callback that is fired when the deletion is confirmed
+ */
 export const DeleteNoteItem: React.FC<DeleteNoteItemProps> = ({ noteTitle, onConfirm }) => {
   return (
     <DropdownItemWithDeletionModal
diff --git a/src/components/history-page/entry-menu/dropdown-item-with-deletion-modal.tsx b/src/components/history-page/entry-menu/dropdown-item-with-deletion-modal.tsx
index 117d47c9e..cce7d426a 100644
--- a/src/components/history-page/entry-menu/dropdown-item-with-deletion-modal.tsx
+++ b/src/components/history-page/entry-menu/dropdown-item-with-deletion-modal.tsx
@@ -22,7 +22,7 @@ export interface DropdownItemWithDeletionModalProps {
 }
 
 /**
- * Renders a dropdown item and the corresponding deletion modal
+ * Renders a dropdown item and the corresponding deletion modal.
  *
  * @param onConfirm A callback that fires if the user confirmed the request
  * @param noteTitle The note title to be displayed
diff --git a/src/components/history-page/entry-menu/entry-menu.tsx b/src/components/history-page/entry-menu/entry-menu.tsx
index de51855d7..c02952495 100644
--- a/src/components/history-page/entry-menu/entry-menu.tsx
+++ b/src/components/history-page/entry-menu/entry-menu.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -27,6 +27,7 @@ export interface EntryMenuProps {
 
 /**
  * Renders the dropdown menu for a history entry containing options like removing the entry or deleting the note.
+ *
  * @param id The unique identifier of the history entry.
  * @param title The title of the note of the history entry.
  * @param origin The origin of the entry. Must be either {@link HistoryEntryOrigin.LOCAL} or {@link HistoryEntryOrigin.REMOTE}.
diff --git a/src/components/history-page/entry-menu/remove-note-entry-item.tsx b/src/components/history-page/entry-menu/remove-note-entry-item.tsx
index ff2a2d5c3..cdfdd4848 100644
--- a/src/components/history-page/entry-menu/remove-note-entry-item.tsx
+++ b/src/components/history-page/entry-menu/remove-note-entry-item.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,12 @@ export interface RemoveNoteEntryItemProps {
   noteTitle: string
 }
 
+/**
+ * Renders a menu item for note deletion with a modal for confirmation.
+ *
+ * @param noteTitle The title of the note
+ * @param onConfirm The callback to delete the note
+ */
 export const RemoveNoteEntryItem: React.FC<RemoveNoteEntryItemProps> = ({ noteTitle, onConfirm }) => {
   return (
     <DropdownItemWithDeletionModal
diff --git a/src/components/history-page/history-card/history-card-list.tsx b/src/components/history-page/history-card/history-card-list.tsx
index a85a25e88..fbcd5bbc9 100644
--- a/src/components/history-page/history-card/history-card-list.tsx
+++ b/src/components/history-page/history-card/history-card-list.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,7 @@ import { HistoryCard } from './history-card'
 
 /**
  * Renders a paginated list of history entry cards.
+ *
  * @param entries The history entries to render.
  * @param onPinClick Callback that is fired when the pinning button was clicked for an entry.
  * @param onRemoveEntryClick Callback that is fired when the entry removal button was clicked for an entry.
diff --git a/src/components/history-page/history-card/history-card.tsx b/src/components/history-page/history-card/history-card.tsx
index b165b72f4..ce538357a 100644
--- a/src/components/history-page/history-card/history-card.tsx
+++ b/src/components/history-page/history-card/history-card.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,6 +19,7 @@ import Link from 'next/link'
 
 /**
  * Renders a history entry as a card.
+ *
  * @param entry The history entry.
  * @param onPinClick Callback that is fired when the pinning button was clicked.
  * @param onRemoveEntryClick Callback that is fired when the entry removal button was clicked.
diff --git a/src/components/history-page/history-table/history-table-row.tsx b/src/components/history-page/history-table/history-table-row.tsx
index 5693cecb8..b79c11e27 100644
--- a/src/components/history-page/history-table/history-table-row.tsx
+++ b/src/components/history-page/history-table/history-table-row.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,6 +16,7 @@ import Link from 'next/link'
 
 /**
  * Renders a history entry as a table row.
+ *
  * @param entry The history entry.
  * @param onPinClick Callback that is fired when the pinning button was clicked.
  * @param onRemoveEntryClick Callback that is fired when the entry removal button was clicked.
diff --git a/src/components/history-page/history-table/history-table.tsx b/src/components/history-page/history-table/history-table.tsx
index 0d54d3541..3cf8ce813 100644
--- a/src/components/history-page/history-table/history-table.tsx
+++ b/src/components/history-page/history-table/history-table.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,7 @@ import { cypressId } from '../../../utils/cypress-attribute'
 
 /**
  * Renders a paginated table of history entries.
+ *
  * @param entries The history entries to render.
  * @param onPinClick Callback that is fired when the pinning button was clicked for an entry.
  * @param onRemoveEntryClick Callback that is fired when the entry removal button was clicked for an entry.
diff --git a/src/components/history-page/history-toolbar/clear-history-button.tsx b/src/components/history-page/history-toolbar/clear-history-button.tsx
index 1aeceeef8..a9d9c3de0 100644
--- a/src/components/history-page/history-toolbar/clear-history-button.tsx
+++ b/src/components/history-page/history-toolbar/clear-history-button.tsx
@@ -14,6 +14,10 @@ import { showErrorNotification } from '../../../redux/ui-notifications/methods'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { useBooleanState } from '../../../hooks/common/use-boolean-state'
 
+/**
+ * Renders a button to clear the complete history of the user.
+ * A confirmation modal will be presented to the user after clicking the button.
+ */
 export const ClearHistoryButton: React.FC = () => {
   const { t } = useTranslation()
   const [modalVisibility, showModal, closeModal] = useBooleanState()
diff --git a/src/components/history-page/history-toolbar/export-history-button.tsx b/src/components/history-page/history-toolbar/export-history-button.tsx
index 2f58bb0aa..bd0bb6689 100644
--- a/src/components/history-page/history-toolbar/export-history-button.tsx
+++ b/src/components/history-page/history-toolbar/export-history-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,9 @@ import { useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { downloadHistory } from '../../../redux/history/methods'
 
+/**
+ * Renders a button to export the history.
+ */
 export const ExportHistoryButton: React.FC = () => {
   const { t } = useTranslation()
 
diff --git a/src/components/history-page/history-toolbar/toolbar-filter-props.d.ts b/src/components/history-page/history-toolbar/toolbar-filter-props.d.ts
deleted file mode 100644
index fbdee9dd9..000000000
--- a/src/components/history-page/history-toolbar/toolbar-filter-props.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import type { HistoryToolbarState } from './history-toolbar'
-
-export interface HistoryToolbarStateProps {
-  historyToolbarState: HistoryToolbarState
-  onHistoryToolbarStateUpdate: (value: Partial<HistoryToolbarState>) => void
-}
diff --git a/src/components/history-page/pin-button/pin-button.tsx b/src/components/history-page/pin-button/pin-button.tsx
index ada9ea5a7..c99f8c396 100644
--- a/src/components/history-page/pin-button/pin-button.tsx
+++ b/src/components/history-page/pin-button/pin-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -17,6 +17,14 @@ export interface PinButtonProps {
   className?: string
 }
 
+/**
+ * Renders a button with a pin icon.
+ *
+ * @param isPinned The initial state of this button.
+ * @param onPinClick The callback, that is fired when the button is clicked.
+ * @param isDark If the button should be rendered in dark or not.
+ * @param className Additional classes directly given to the button
+ */
 export const PinButton: React.FC<PinButtonProps> = ({ isPinned, onPinClick, isDark, className }) => {
   return (
     <Button
diff --git a/src/components/history-page/sort-button/sort-button.tsx b/src/components/history-page/sort-button/sort-button.tsx
index 49e61ccb1..c32c0b7af 100644
--- a/src/components/history-page/sort-button/sort-button.tsx
+++ b/src/components/history-page/sort-button/sort-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,12 @@ export enum SortModeEnum {
   no = 0
 }
 
+/**
+ * Returns the proper icon for the given sorting direction.
+ *
+ * @param direction The sorting direction for which to get the icon
+ * @return The name of the icon fitting to the given sorting direction
+ */
 const getIcon = (direction: SortModeEnum): IconName => {
   switch (direction) {
     case SortModeEnum.no:
@@ -33,6 +39,12 @@ export interface SortButtonProps extends ButtonProps {
   direction: SortModeEnum
 }
 
+/**
+ * Switches the sorting direction based on the previous direction.
+ *
+ * @param direction The previous sorting direction
+ * @return The new sorting direction
+ */
 const toggleDirection = (direction: SortModeEnum) => {
   switch (direction) {
     case SortModeEnum.no:
@@ -45,6 +57,14 @@ const toggleDirection = (direction: SortModeEnum) => {
   }
 }
 
+/**
+ * Renders a button to change the sorting order of a list.
+ *
+ * @param children The children elements that should be rendered inside the button
+ * @param variant The variant of the button
+ * @param onDirectionChange Callback that is fired when the sorting direction is changed
+ * @param direction The sorting direction that is used
+ */
 export const SortButton: React.FC<SortButtonProps> = ({ children, variant, onDirectionChange, direction }) => {
   const toggleSort = () => {
     onDirectionChange(toggleDirection(direction))
diff --git a/src/components/history-page/use-history-entry-title.ts b/src/components/history-page/use-history-entry-title.ts
index 9317a4a78..595b4c8b6 100644
--- a/src/components/history-page/use-history-entry-title.ts
+++ b/src/components/history-page/use-history-entry-title.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,7 @@ import type { HistoryEntryWithOrigin } from '../../api/history/types'
 
 /**
  * Hook that returns the title of a note in the history if present or the translation for "untitled" otherwise.
+ *
  * @param entry The history entry containing a title property, that might be an empty string.
  * @return A memoized string containing either the title of the entry or the translated version of "untitled".
  */
diff --git a/src/components/history-page/utils.ts b/src/components/history-page/utils.ts
index 1a506a112..0248687de 100644
--- a/src/components/history-page/utils.ts
+++ b/src/components/history-page/utils.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,7 @@ import type { HistoryEntryWithOrigin } from '../../api/history/types'
 
 /**
  * Parses a given ISO formatted date string and outputs it as a date and time string.
+ *
  * @param date The date in ISO format.
  * @return The date formatted as date and time string.
  */
@@ -18,6 +19,7 @@ export const formatHistoryDate = (date: string): string => DateTime.fromISO(date
 
 /**
  * Applies sorting and filter rules that match a given toolbar state to a list of history entries.
+ *
  * @param entries The history entries to sort and filter.
  * @param toolbarState The state of the history toolbar (sorting rules, keyword and tag input).
  * @return The list of filtered and sorted history entries.
@@ -33,6 +35,7 @@ export const sortAndFilterEntries = (
 
 /**
  * Filters the given history entries by the given tags.
+ *
  * @param entries The history entries to filter.
  * @param selectedTags The tags that were selected as filter criteria.
  * @return The list of filtered history entries.
@@ -45,6 +48,7 @@ const filterBySelectedTags = (entries: HistoryEntryWithOrigin[], selectedTags: s
 
 /**
  * Checks whether the entries of array 1 are contained in array 2.
+ *
  * @param array1 The first input array.
  * @param array2 The second input array.
  * @return true if all entries from array 1 are contained in array 2, false otherwise.
@@ -56,6 +60,7 @@ const arrayCommonCheck = <T>(array1: T[], array2: T[]): boolean => {
 
 /**
  * Filters the given history entries by the given search term. Works case-insensitive.
+ *
  * @param entries The history entries to filter.
  * @param keywords The search term.
  * @return The history entries that contain the search term in their title.
@@ -67,6 +72,7 @@ const filterByKeywordSearch = (entries: HistoryEntryWithOrigin[], keywords: stri
 
 /**
  * Sorts the given history entries by the sorting rules of the provided toolbar state.
+ *
  * @param entries The history entries to sort.
  * @param viewState The toolbar state containing the sorting options.
  * @return The sorted history entries.
diff --git a/src/components/intro-page/requests.ts b/src/components/intro-page/requests.ts
index 5837253fa..182af33b5 100644
--- a/src/components/intro-page/requests.ts
+++ b/src/components/intro-page/requests.ts
@@ -7,6 +7,12 @@
 import { customizeAssetsUrl } from '../../utils/customize-assets-url'
 import { defaultConfig } from '../../api/common/default-config'
 
+/**
+ * Get the intro.md contents from the public directory.
+ *
+ * @return The content of intro.md
+ * @throws {Error} if the content can't be fetched
+ */
 export const fetchFrontPageContent = async (): Promise<string> => {
   const response = await fetch(customizeAssetsUrl + 'intro.md', {
     ...defaultConfig,
diff --git a/src/components/landing-layout/footer/footer.tsx b/src/components/landing-layout/footer/footer.tsx
index 8de732c46..285890752 100644
--- a/src/components/landing-layout/footer/footer.tsx
+++ b/src/components/landing-layout/footer/footer.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,9 @@ import { LanguagePicker } from './language-picker'
 import { PoweredByLinks } from './powered-by-links'
 import { SocialLink } from './social-links'
 
+/**
+ * Renders the footer.
+ */
 export const Footer: React.FC = () => {
   return (
     <footer className='text-light-50 small'>
diff --git a/src/components/landing-layout/footer/language-picker.tsx b/src/components/landing-layout/footer/language-picker.tsx
index 600a8e3d7..e701af2a4 100644
--- a/src/components/landing-layout/footer/language-picker.tsx
+++ b/src/components/landing-layout/footer/language-picker.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -47,16 +47,20 @@ const languages = {
  * This function checks if the wanted language code is supported by our translations.
  * The language code that is provided by the browser can (but don't need to) contain the region.
  * Some of our translations are region dependent (e.g. chinese-traditional and chinese-simplified).
- * Therefore we first need to check if the complete wanted language code is supported by our translations.
+ * Therefore, we first need to check if the complete wanted language code is supported by our translations.
  * If not, then we look if we at least have a region independent translation.
  *
  * @param wantedLanguage an ISO 639-1 standard language code
+ * @return The supported language code
  */
 const findLanguageCode = (wantedLanguage: string): string =>
   Object.keys(languages).find((supportedLanguage) => wantedLanguage === supportedLanguage) ??
   Object.keys(languages).find((supportedLanguage) => wantedLanguage.slice(0, 2) === supportedLanguage) ??
   ''
 
+/**
+ * Renders the language picker.
+ */
 export const LanguagePicker: React.FC = () => {
   const { i18n } = useTranslation()
 
diff --git a/src/components/landing-layout/footer/powered-by-links.tsx b/src/components/landing-layout/footer/powered-by-links.tsx
index 653c8d09d..baf39f1a4 100644
--- a/src/components/landing-layout/footer/powered-by-links.tsx
+++ b/src/components/landing-layout/footer/powered-by-links.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,9 @@ import { TranslatedInternalLink } from '../../common/links/translated-internal-l
 import { VersionInfoLink } from './version-info/version-info-link'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 
+/**
+ * Renders a powered-by link.
+ */
 export const PoweredByLinks: React.FC = () => {
   useTranslation()
 
diff --git a/src/components/landing-layout/footer/social-links.tsx b/src/components/landing-layout/footer/social-links.tsx
index 4273b6e58..18bcbeb80 100644
--- a/src/components/landing-layout/footer/social-links.tsx
+++ b/src/components/landing-layout/footer/social-links.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,9 @@ import { Trans, useTranslation } from 'react-i18next'
 import links from '../../../links.json'
 import { ExternalLink } from '../../common/links/external-link'
 
+/**
+ * Renders links to the social networks.
+ */
 export const SocialLink: React.FC = () => {
   useTranslation()
   return (
diff --git a/src/components/landing-layout/footer/version-info/version-info-link.tsx b/src/components/landing-layout/footer/version-info/version-info-link.tsx
index 86e9f8a63..f4a91fdaf 100644
--- a/src/components/landing-layout/footer/version-info/version-info-link.tsx
+++ b/src/components/landing-layout/footer/version-info/version-info-link.tsx
@@ -10,6 +10,9 @@ import { VersionInfoModal } from './version-info-modal'
 import { cypressId } from '../../../../utils/cypress-attribute'
 import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
 
+/**
+ * Renders a link for the version info and the {@link VersionInfoModal}.
+ */
 export const VersionInfoLink: React.FC = () => {
   const [modalVisibility, showModal, closeModal] = useBooleanState()
 
diff --git a/src/components/landing-layout/footer/version-info/version-info-modal-column.tsx b/src/components/landing-layout/footer/version-info/version-info-modal-column.tsx
index 58e0e43db..6783a4562 100644
--- a/src/components/landing-layout/footer/version-info/version-info-modal-column.tsx
+++ b/src/components/landing-layout/footer/version-info/version-info-modal-column.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -18,6 +18,15 @@ export interface VersionInfoModalColumnProps {
   issueTrackerLink: string
 }
 
+/**
+ * Renders a column in the {@link VersionInfoModal}.
+ *
+ * @param titleI18nKey
+ * @param issueTrackerLink
+ * @param sourceCodeLink
+ * @param version
+ * @constructor
+ */
 export const VersionInfoModalColumn: React.FC<VersionInfoModalColumnProps> = ({
   titleI18nKey,
   issueTrackerLink,
diff --git a/src/components/landing-layout/footer/version-info/version-info-modal.tsx b/src/components/landing-layout/footer/version-info/version-info-modal.tsx
index 65cc05d81..4f0ee466e 100644
--- a/src/components/landing-layout/footer/version-info/version-info-modal.tsx
+++ b/src/components/landing-layout/footer/version-info/version-info-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,12 @@ import type { BackendVersion } from '../../../../api/config/types'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 import { cypressId } from '../../../../utils/cypress-attribute'
 
+/**
+ * Renders a modal with the version information.
+ *
+ * @param onHide The callback to call if the modal should be closed
+ * @param show If the modal should be shown.
+ */
 export const VersionInfoModal: React.FC<CommonModalProps> = ({ onHide, show }) => {
   const serverVersion: BackendVersion = useApplicationState((state) => state.config.version)
   const backendVersion = useMemo(() => {
diff --git a/src/components/landing-layout/landing-layout.tsx b/src/components/landing-layout/landing-layout.tsx
index d393c0d46..b7fdb49ba 100644
--- a/src/components/landing-layout/landing-layout.tsx
+++ b/src/components/landing-layout/landing-layout.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,11 @@ import { Footer } from './footer/footer'
 import { HeaderBar } from './navigation/header-bar/header-bar'
 import { UiNotifications } from '../notifications/ui-notifications'
 
+/**
+ * Renders the layout for both intro and history page.
+ *
+ * @param children The children that should be rendered on the page.
+ */
 export const LandingLayout: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <Fragment>
diff --git a/src/components/landing-layout/navigation/header-bar/header-bar.tsx b/src/components/landing-layout/navigation/header-bar/header-bar.tsx
index ecde74c65..2f0bc4487 100644
--- a/src/components/landing-layout/navigation/header-bar/header-bar.tsx
+++ b/src/components/landing-layout/navigation/header-bar/header-bar.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,9 @@ import { SignInButton } from '../sign-in-button'
 import { UserDropdown } from '../user-dropdown'
 import { cypressId } from '../../../../utils/cypress-attribute'
 
+/**
+ * Renders a header bar for the intro and history page.
+ */
 const HeaderBar: React.FC = () => {
   useTranslation()
   const userExists = useApplicationState((state) => !!state.user)
diff --git a/src/components/landing-layout/navigation/new-guest-note-button.tsx b/src/components/landing-layout/navigation/new-guest-note-button.tsx
index 16a81f3ef..a781b1703 100644
--- a/src/components/landing-layout/navigation/new-guest-note-button.tsx
+++ b/src/components/landing-layout/navigation/new-guest-note-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,9 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { cypressId } from '../../../utils/cypress-attribute'
 import Link from 'next/link'
 
+/**
+ * Renders a button to create a new note as a guest.
+ */
 export const NewGuestNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
diff --git a/src/components/landing-layout/navigation/new-user-note-button.tsx b/src/components/landing-layout/navigation/new-user-note-button.tsx
index 596496d78..b41aae8fc 100644
--- a/src/components/landing-layout/navigation/new-user-note-button.tsx
+++ b/src/components/landing-layout/navigation/new-user-note-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,9 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { cypressId } from '../../../utils/cypress-attribute'
 import Link from 'next/link'
 
+/**
+ * Renders a button to create a new note as a logged in user.
+ */
 export const NewUserNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
diff --git a/src/components/landing-layout/navigation/sign-in-button.tsx b/src/components/landing-layout/navigation/sign-in-button.tsx
index 2b65d9a9a..d7d47d8b5 100644
--- a/src/components/landing-layout/navigation/sign-in-button.tsx
+++ b/src/components/landing-layout/navigation/sign-in-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -18,7 +18,9 @@ import { getOneClickProviderMetadata } from '../../login-page/auth/utils/get-one
 export type SignInButtonProps = Omit<ButtonProps, 'href'>
 
 /**
- * Renders a sign-in button if auth providers are defined. It links to either the login page or if only a single one-click provider is configured, to this one.
+ * Renders a sign-in button if auth providers are defined.
+ * It links to either the login page or if only a single one-click provider is configured, to that one.
+ *
  * @param variant The style variant as inferred from the common button component.
  * @param props Further props inferred from the common button component.
  */
diff --git a/src/components/landing-layout/navigation/user-dropdown.tsx b/src/components/landing-layout/navigation/user-dropdown.tsx
index 260bf8d12..c26484e15 100644
--- a/src/components/landing-layout/navigation/user-dropdown.tsx
+++ b/src/components/landing-layout/navigation/user-dropdown.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,6 +14,9 @@ import { cypressId } from '../../../utils/cypress-attribute'
 import { SignOutDropdownButton } from './sign-out-dropdown-button'
 import Link from 'next/link'
 
+/**
+ * Renders a dropdown menu with user-relevant actions.
+ */
 export const UserDropdown: React.FC = () => {
   useTranslation()
   const user = useApplicationState((state) => state.user)
diff --git a/src/components/login-page/auth/auth-error/auth-error.tsx b/src/components/login-page/auth/auth-error/auth-error.tsx
index 1fd9da079..d7c4525de 100644
--- a/src/components/login-page/auth/auth-error/auth-error.tsx
+++ b/src/components/login-page/auth/auth-error/auth-error.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,7 +15,8 @@ export interface AuthErrorProps {
 
 /**
  * Renders an error message for auth fields when an error is present.
- * @param error The error to render. Can be {@code undefined} when no error should be rendered.
+ *
+ * @param error The error to render. Can be {@link undefined} when no error should be rendered.
  */
 export const AuthError: React.FC<AuthErrorProps> = ({ error }) => {
   useTranslation()
diff --git a/src/components/login-page/auth/fields/password-field.tsx b/src/components/login-page/auth/fields/password-field.tsx
index a9b006f95..a6e96bf62 100644
--- a/src/components/login-page/auth/fields/password-field.tsx
+++ b/src/components/login-page/auth/fields/password-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next'
 
 /**
  * Renders an input field for the password of a user.
+ *
  * @param onChange Hook that is called when the entered password changes.
  * @param invalid True when the entered password is invalid, false otherwise.
  */
diff --git a/src/components/login-page/auth/fields/username-field.tsx b/src/components/login-page/auth/fields/username-field.tsx
index 567f8f7f7..5e088aee9 100644
--- a/src/components/login-page/auth/fields/username-field.tsx
+++ b/src/components/login-page/auth/fields/username-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next'
 
 /**
  * Renders an input field for a username.
+ *
  * @param onChange Hook that is called when the input is changed.
  * @param invalid True indicates that the username is invalid, false otherwise.
  */
diff --git a/src/components/login-page/auth/social-link-button/social-link-button.tsx b/src/components/login-page/auth/social-link-button/social-link-button.tsx
index fc05462e7..34f7fe069 100644
--- a/src/components/login-page/auth/social-link-button/social-link-button.tsx
+++ b/src/components/login-page/auth/social-link-button/social-link-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -17,6 +17,15 @@ export interface SocialButtonProps {
   title?: string
 }
 
+/**
+ * Renders a link for a social login.
+ *
+ * @param title The link title
+ * @param backgroundClass Additional classes for the a-tag
+ * @param href The link
+ * @param icon The icon to be used
+ * @param children The children to be rendered in addition to the icon.
+ */
 export const SocialLinkButton: React.FC<PropsWithChildren<SocialButtonProps>> = ({
   title,
   backgroundClass,
diff --git a/src/components/login-page/auth/utils.ts b/src/components/login-page/auth/utils.ts
index 03042a355..75c4ebff4 100644
--- a/src/components/login-page/auth/utils.ts
+++ b/src/components/login-page/auth/utils.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -29,8 +29,9 @@ export const fetchAndSetUser: () => Promise<void> = async () => {
 
 /**
  * Filter to apply to a list of auth providers to get only one-click providers.
+ *
  * @param provider The provider to test whether it is a one-click provider or not.
- * @return true when the provider is a one-click one, false otherwise.
+ * @return {@link true} when the provider is a one-click one, {@link false} otherwise.
  */
 export const filterOneClickProviders = (provider: AuthProvider): boolean => {
   return authProviderTypeOneClick.includes(provider.type)
diff --git a/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts b/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts
index 2b24d9ee9..edb48294e 100644
--- a/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts
+++ b/src/components/login-page/auth/utils/get-one-click-provider-metadata.ts
@@ -25,6 +25,7 @@ const logger = new Logger('GetOneClickProviderMetadata')
 
 /**
  * Returns metadata about the given one-click provider for rendering a relevant login button.
+ *
  * @param provider The provider for which to retrieve the metadata.
  * @return Name, icon, URL and CSS class of the given provider for rendering a login button.
  */
diff --git a/src/components/login-page/auth/via-one-click.tsx b/src/components/login-page/auth/via-one-click.tsx
index a3c0632b6..ed3a54754 100644
--- a/src/components/login-page/auth/via-one-click.tsx
+++ b/src/components/login-page/auth/via-one-click.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,7 @@ export interface ViaOneClickProps {
 
 /**
  * Renders a login button for the given one-click login provider.
+ *
  * @param provider The one-click login provider. In case of ones that can be defined multiple times, an identifier and a label is required.
  */
 export const ViaOneClick: React.FC<ViaOneClickProps> = ({ provider }) => {
diff --git a/src/components/markdown-renderer/document-markdown-renderer.tsx b/src/components/markdown-renderer/document-markdown-renderer.tsx
index 00677fa64..12ca9d54f 100644
--- a/src/components/markdown-renderer/document-markdown-renderer.tsx
+++ b/src/components/markdown-renderer/document-markdown-renderer.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -20,6 +20,21 @@ export interface DocumentMarkdownRendererProps extends CommonMarkdownRendererPro
   onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void
 }
 
+/**
+ * Renders the note as normal document.
+ *
+ * @param className Additional class names directly given to the div
+ * @param markdownContentLines The markdown lines
+ * @param onFirstHeadingChange The callback to call if the first heading changes.
+ * @param onLineMarkerPositionChanged The callback to call with changed {@link LineMarkers}
+ * @param onTaskCheckedChange The callback to call if a task is checked or unchecked.
+ * @param onTocChange The callback to call if the toc changes.
+ * @param baseUrl The base url of the renderer
+ * @param onImageClick The callback to call if a image is clicked
+ * @param outerContainerRef A reference for the outer container
+ * @param newlinesAreBreaks If newlines are rendered as breaks or not
+ * @param lineOffset The line offset
+ */
 export const DocumentMarkdownRenderer: React.FC<DocumentMarkdownRendererProps> = ({
   className,
   markdownContentLines,
diff --git a/src/components/markdown-renderer/hooks/use-convert-markdown-to-react-dom.ts b/src/components/markdown-renderer/hooks/use-convert-markdown-to-react-dom.ts
index b4d03e84e..d829ff861 100644
--- a/src/components/markdown-renderer/hooks/use-convert-markdown-to-react-dom.ts
+++ b/src/components/markdown-renderer/hooks/use-convert-markdown-to-react-dom.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,7 +14,7 @@ import type { MarkdownExtension } from '../markdown-extension/markdown-extension
 import { MarkdownExtensionCollection } from '../markdown-extension/markdown-extension-collection'
 
 /**
- * Renders Markdown-Code into react elements
+ * Renders Markdown-Code into react elements.
  *
  * @param markdownContentLines The markdown code lines that should be rendered
  * @param additionalMarkdownExtensions A list of {@link MarkdownExtension markdown extensions} that should be used
diff --git a/src/components/markdown-renderer/hooks/use-on-ref-change.ts b/src/components/markdown-renderer/hooks/use-on-ref-change.ts
index 87639d7f2..6694aeae1 100644
--- a/src/components/markdown-renderer/hooks/use-on-ref-change.ts
+++ b/src/components/markdown-renderer/hooks/use-on-ref-change.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,6 +8,12 @@ import equal from 'fast-deep-equal'
 import type { MutableRefObject } from 'react'
 import { useEffect, useRef } from 'react'
 
+/**
+ * Check if the given reference changes and then calls the callback onChange.
+ *
+ * @param reference The reference to observe
+ * @param onChange The callback to call if something changes
+ */
 export const useOnRefChange = <T>(reference: MutableRefObject<T>, onChange?: (newValue: T) => void): void => {
   const lastValue = useRef<T>()
   useEffect(() => {
diff --git a/src/components/markdown-renderer/hooks/use-reveal.ts b/src/components/markdown-renderer/hooks/use-reveal.ts
index 162cacd15..52b3c52ed 100644
--- a/src/components/markdown-renderer/hooks/use-reveal.ts
+++ b/src/components/markdown-renderer/hooks/use-reveal.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -26,7 +26,14 @@ const initialSlideState: SlideState = {
   indexHorizontal: 0,
   indexVertical: 0
 }
-
+/**
+ * Initialize reveal.js and renders the document as a reveal.js presentation.
+ *
+ * @param markdownContentLines An array of markdown lines.
+ * @param slideOptions The slide options.
+ * @return The current state of reveal.js
+ * @see https://revealjs.com/
+ */
 export const useReveal = (markdownContentLines: string[], slideOptions?: SlideOptions): REVEAL_STATUS => {
   const [deck, setDeck] = useState<Reveal>()
   const [revealStatus, setRevealStatus] = useState<REVEAL_STATUS>(REVEAL_STATUS.NOT_INITIALISED)
diff --git a/src/components/markdown-renderer/invalid-yaml-alert.tsx b/src/components/markdown-renderer/invalid-yaml-alert.tsx
index 9366304a9..2014e1d4f 100644
--- a/src/components/markdown-renderer/invalid-yaml-alert.tsx
+++ b/src/components/markdown-renderer/invalid-yaml-alert.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,11 @@ import { InternalLink } from '../common/links/internal-link'
 import { ShowIf } from '../common/show-if/show-if'
 import type { SimpleAlertProps } from '../common/simple-alert/simple-alert-props'
 
+/**
+ * Renders an alert if the frontmatter yaml is invalid.
+ *
+ * @param show If this alert should be shown
+ */
 export const InvalidYamlAlert: React.FC<SimpleAlertProps> = ({ show }) => {
   useTranslation()
 
diff --git a/src/components/markdown-renderer/markdown-extension/abcjs/abc-frame.tsx b/src/components/markdown-renderer/markdown-extension/abcjs/abc-frame.tsx
index b9deb5edc..92a387c1a 100644
--- a/src/components/markdown-renderer/markdown-extension/abcjs/abc-frame.tsx
+++ b/src/components/markdown-renderer/markdown-extension/abcjs/abc-frame.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,6 +19,12 @@ import { Trans } from 'react-i18next'
 
 const log = new Logger('AbcFrame')
 
+/**
+ * Renders an abc.js note sheet.
+ *
+ * @param code The code to render.
+ * @see https://www.abcjs.net/
+ */
 export const AbcFrame: React.FC<CodeProps> = ({ code }) => {
   const container = useRef<HTMLDivElement>(null)
 
diff --git a/src/components/markdown-renderer/markdown-extension/alert-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/alert-markdown-extension.ts
index 6c26cade1..7badbc334 100644
--- a/src/components/markdown-renderer/markdown-extension/alert-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/alert-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,9 @@ import type Renderer from 'markdown-it/lib/renderer'
 
 export const alertLevels = ['success', 'danger', 'info', 'warning']
 
+/**
+ * Adds alert boxes to the markdown rendering.
+ */
 export class AlertMarkdownExtension extends MarkdownExtension {
   public configureMarkdownIt(markdownIt: MarkdownIt): void {
     alertLevels.forEach((level) => {
diff --git a/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-border-color-node-preprocessor.ts b/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-border-color-node-preprocessor.ts
index 5c1d4a60b..a9987bd42 100644
--- a/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-border-color-node-preprocessor.ts
+++ b/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-border-color-node-preprocessor.ts
@@ -34,17 +34,19 @@ export const cssColor =
 
 /**
  * Checks if the given {@link Element} is a blockquote with children.
+ *
  * @param element The {@link Element} to check
- * @return {@code true} if the element is a blockquote with children.
+ * @return {@link true} if the element is a blockquote with children.
  */
 const isBlockquoteWithChildren = (element: Element): boolean => {
   return element.name !== 'blockquote' || !element.children || element.children.length < 1
 }
 
 /**
- * Searches for a blockquote color definition tag
+ * Searches for a blockquote color definition tag.
+ *
  * @param elements The {@link Element} elements that should be searched through.
- * @return The parent paragraph and the extracted color if a color definition was found. {@code undefined} otherwise.
+ * @return The parent paragraph and the extracted color if a color definition was found. {@link undefined} otherwise.
  */
 const findBlockquoteColorDefinitionAndParent = (
   elements: Node[]
@@ -68,7 +70,7 @@ const findBlockquoteColorDefinitionAndParent = (
 }
 
 /**
- * Checks if the given node is a blockquote color definition
+ * Checks if the given node is a blockquote color definition.
  *
  * @param element The {@link Element} to check
  * @return true if the checked node is a blockquote color definition
@@ -85,7 +87,8 @@ const extractBlockquoteColorDefinition = (element: Element): string | undefined
 }
 
 /**
- * Removes all color definition elements from the given paragraph {@link Element}
+ * Removes all color definition elements from the given paragraph {@link Element}.
+ *
  * @param paragraph The {@link Element} whose children should be filtered
  */
 const removeColorDefinitionsFromParagraph = (paragraph: Element): void => {
diff --git a/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-markdown-it-plugin.ts b/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-markdown-it-plugin.ts
index 541f685e6..cbcc63b55 100644
--- a/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-markdown-it-plugin.ts
+++ b/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-markdown-it-plugin.ts
@@ -165,6 +165,7 @@ export class BlockquoteExtraTagMarkdownItPlugin {
    * @param line The line in which the tag is.
    * @param startIndex The start index of the tag.
    * @param dontSearchAfterIndex The maximal position for the search.
+   * @return The value part of the blockquote tag
    */
   private static parseValue(line: string, startIndex: number, dontSearchAfterIndex: number): number | undefined {
     let level = 0
@@ -187,6 +188,7 @@ export class BlockquoteExtraTagMarkdownItPlugin {
    * @param line The line in which the tag is.
    * @param startIndex The start index of the tag.
    * @param dontSearchAfterIndex The maximal position for the search.
+   * @return The label of the blockquote tag.
    */
   private static parseLabel(line: string, startIndex: number, dontSearchAfterIndex: number): number | undefined {
     for (let pos = startIndex; pos <= dontSearchAfterIndex; pos += 1) {
diff --git a/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-replacer.tsx b/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-replacer.tsx
index 49e9949b2..9fe297cce 100644
--- a/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-replacer.tsx
+++ b/src/components/markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-replacer.tsx
@@ -39,7 +39,7 @@ export class BlockquoteExtraTagReplacer extends ComponentReplacer {
    * Extracts a fork awesome icon name from the node and builds a {@link ForkAwesomeIcon fork awesome icon react element}.
    *
    * @param node The node that holds the "data-icon" attribute.
-   * @return the {@link ForkAwesomeIcon fork awesome icon react element} or {@code undefined} if no icon name was found.
+   * @return the {@link ForkAwesomeIcon fork awesome icon react element} or {@link undefined} if no icon name was found.
    */
   private buildIconElement(node: Element): ReactElement<ForkAwesomeIconProps> | undefined {
     return Optional.ofNullable(node.attribs['data-icon'] as IconName)
diff --git a/src/components/markdown-renderer/markdown-extension/csv/csv-parser.ts b/src/components/markdown-renderer/markdown-extension/csv/csv-parser.ts
index 3eda28ebb..bdc28b1ee 100644
--- a/src/components/markdown-renderer/markdown-extension/csv/csv-parser.ts
+++ b/src/components/markdown-renderer/markdown-extension/csv/csv-parser.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -22,6 +22,7 @@ export const parseCsv = (csvText: string, csvColumnDelimiter: string): string[][
 
 /**
  * Escapes regex characters in the given string, so it can be used as literal string in another regex.
+ *
  * @param unsafe The unescaped string
  * @return The escaped string
  */
diff --git a/src/components/markdown-renderer/markdown-extension/csv/csv-table.tsx b/src/components/markdown-renderer/markdown-extension/csv/csv-table.tsx
index 8993d6c4a..9d3e0f31f 100644
--- a/src/components/markdown-renderer/markdown-extension/csv/csv-table.tsx
+++ b/src/components/markdown-renderer/markdown-extension/csv/csv-table.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,6 +16,15 @@ export interface CsvTableProps {
   tableColumnClassName?: string
 }
 
+/**
+ * Renders a csv table.
+ *
+ * @param code The csv code
+ * @param delimiter The delimiter to be used
+ * @param showHeader If the header should be shown.
+ * @param tableRowClassName Additional class name for the rows.
+ * @param tableColumnClassNameA Additional class name for the columns.
+ */
 export const CsvTable: React.FC<CsvTableProps> = ({
   code,
   delimiter,
diff --git a/src/components/markdown-renderer/markdown-extension/debugger-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/debugger-markdown-extension.ts
index 1d24889c6..883e0b1a2 100644
--- a/src/components/markdown-renderer/markdown-extension/debugger-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/debugger-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,9 @@ import { isDevMode } from '../../../utils/test-modes'
 
 const log = new Logger('DebuggerMarkdownExtension')
 
+/**
+ * Adds console debug logging to the markdown rendering.
+ */
 export class DebuggerMarkdownExtension extends MarkdownExtension {
   public configureMarkdownItPost(markdownIt: MarkdownIt): void {
     if (isDevMode) {
diff --git a/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx b/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx
index 9eb010b5f..52ddb13e5 100644
--- a/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx
+++ b/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx
@@ -18,6 +18,12 @@ import { testId } from '../../../../utils/test-id'
 
 const log = new Logger('FlowChart')
 
+/**
+ * Renders a flowchart.
+ *
+ * @param code The code to render the flowchart.
+ * @see https://flowchart.js.org/
+ */
 export const FlowChart: React.FC<CodeProps> = ({ code }) => {
   const diagramRef = useRef<HTMLDivElement>(null)
   const [syntaxError, setSyntaxError] = useState(false)
diff --git a/src/components/markdown-renderer/markdown-extension/generic-syntax-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/generic-syntax-markdown-extension.ts
index 409e0899f..8fde99fb5 100644
--- a/src/components/markdown-renderer/markdown-extension/generic-syntax-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/generic-syntax-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,9 @@ import marked from 'markdown-it-mark'
 import footnote from 'markdown-it-footnote'
 import { imageSize } from '@hedgedoc/markdown-it-image-size'
 
+/**
+ * Adds some common markdown syntaxes to the markdown rendering.
+ */
 export class GenericSyntaxMarkdownExtension extends MarkdownExtension {
   public configureMarkdownIt(markdownIt: MarkdownIt): void {
     abbreviation(markdownIt)
diff --git a/src/components/markdown-renderer/markdown-extension/gist/replace-gist-link.ts b/src/components/markdown-renderer/markdown-extension/gist/replace-gist-link.ts
index 8c2f12d59..14f9eb9e4 100644
--- a/src/components/markdown-renderer/markdown-extension/gist/replace-gist-link.ts
+++ b/src/components/markdown-renderer/markdown-extension/gist/replace-gist-link.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,6 +14,9 @@ const tailRegex = /(?:[./?#].*)?/
 const gistUrlRegex = new RegExp(`(?:${protocolRegex.source}${domainRegex.source}${idRegex.source}${tailRegex.source})`)
 const linkRegex = new RegExp(`^${gistUrlRegex.source}$`, 'i')
 
+/**
+ * Replacer for gist links.
+ */
 export const replaceGistLink: RegexOptions = {
   name: 'gist-link',
   regex: linkRegex,
diff --git a/src/components/markdown-renderer/markdown-extension/gist/replace-legacy-gist-short-code.ts b/src/components/markdown-renderer/markdown-extension/gist/replace-legacy-gist-short-code.ts
index b5286a6c9..49073ccfe 100644
--- a/src/components/markdown-renderer/markdown-extension/gist/replace-legacy-gist-short-code.ts
+++ b/src/components/markdown-renderer/markdown-extension/gist/replace-legacy-gist-short-code.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,9 @@ import { GistMarkdownExtension } from './gist-markdown-extension'
 
 const finalRegex = /^{%gist (\w+\/\w+) ?%}$/
 
+/**
+ * Replacer for legacy hedgedoc 1 gist shortcodes.
+ */
 export const replaceLegacyGistShortCode: RegexOptions = {
   name: 'legacy-gist-short-code',
   regex: finalRegex,
diff --git a/src/components/markdown-renderer/markdown-extension/gist/use-resize-gist-frame.ts b/src/components/markdown-renderer/markdown-extension/gist/use-resize-gist-frame.ts
index 0742daf5d..77cd4bb1f 100644
--- a/src/components/markdown-renderer/markdown-extension/gist/use-resize-gist-frame.ts
+++ b/src/components/markdown-renderer/markdown-extension/gist/use-resize-gist-frame.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,7 +12,7 @@ import { useBindPointerMovementEventOnWindow } from '../../../../hooks/common/us
  * Determines if the left mouse button is pressed in the given event
  *
  * @param mouseEvent the mouse event that should be checked
- * @return {@code true} if the left mouse button is pressed. {@code false} otherwise.
+ * @return {@link true} if the left mouse button is pressed. {@link false} otherwise.
  */
 const isLeftMouseButtonPressed = (mouseEvent: MouseEvent): boolean => {
   return mouseEvent.buttons === 1
@@ -35,9 +35,10 @@ const extractVerticalPointerPosition = (
 }
 
 /**
- * Checks if the given {@link Event} is a {@link MouseEvent} or a {@link React.MouseEvent}
+ * Checks if the given {@link Event} is a {@link MouseEvent} or a {@link React.MouseEvent}.
+ *
  * @param event the event to check
- * @return {@code true} if the given event is a {@link MouseEvent} or a {@link React.MouseEvent}
+ * @return {@link true} if the given event is a {@link MouseEvent} or a {@link React.MouseEvent}
  */
 const isMouseEvent = (event: Event | React.UIEvent): event is MouseEvent | React.MouseEvent => {
   return (event as MouseEvent).buttons !== undefined
diff --git a/src/components/markdown-renderer/markdown-extension/graphviz/graphviz-frame.tsx b/src/components/markdown-renderer/markdown-extension/graphviz/graphviz-frame.tsx
index d64cf631c..264b541ed 100644
--- a/src/components/markdown-renderer/markdown-extension/graphviz/graphviz-frame.tsx
+++ b/src/components/markdown-renderer/markdown-extension/graphviz/graphviz-frame.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,7 +13,12 @@ import type { CodeProps } from '../../replace-components/code-block-component-re
 import { useRouter } from 'next/router'
 
 const log = new Logger('GraphvizFrame')
-
+/**
+ * Renders a graphviz diagram.
+ *
+ * @param code The code for the diagram
+ * @see https://graphviz.org/
+ */
 export const GraphvizFrame: React.FC<CodeProps> = ({ code }) => {
   const container = useRef<HTMLDivElement>(null)
   const [error, setError] = useState<string>()
diff --git a/src/components/markdown-renderer/markdown-extension/headline-anchors-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/headline-anchors-markdown-extension.ts
index 9bca7727d..554ce2c83 100644
--- a/src/components/markdown-renderer/markdown-extension/headline-anchors-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/headline-anchors-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,6 +8,9 @@ import { MarkdownExtension } from './markdown-extension'
 import type MarkdownIt from 'markdown-it'
 import anchor from 'markdown-it-anchor'
 
+/**
+ * Adds headline anchors to the markdown rendering.
+ */
 export class HeadlineAnchorsMarkdownExtension extends MarkdownExtension {
   public configureMarkdownIt(markdownIt: MarkdownIt): void {
     anchor(markdownIt, {
diff --git a/src/components/markdown-renderer/markdown-extension/highlighted-fence/highlighted-code.tsx b/src/components/markdown-renderer/markdown-extension/highlighted-fence/highlighted-code.tsx
index 30c7bd1fd..78f170d9e 100644
--- a/src/components/markdown-renderer/markdown-extension/highlighted-fence/highlighted-code.tsx
+++ b/src/components/markdown-renderer/markdown-extension/highlighted-fence/highlighted-code.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -28,6 +28,7 @@ export interface HighlightedCodeProps {
  * @param language The language that should be used for highlighting
  * @param startLineNumber The number of the first line in the block. Will be 1 if omitted.
  * @param wrapLines Defines if lines should be wrapped or if the block should show a scroll bar.
+ * @see https://highlightjs.org/
  */
 export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language, startLineNumber, wrapLines }) => {
   const showGutter = startLineNumber !== undefined
diff --git a/src/components/markdown-renderer/markdown-extension/image-placeholder/image-placeholder-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/image-placeholder/image-placeholder-markdown-extension.ts
index b7fa8c8c8..3cd055162 100644
--- a/src/components/markdown-renderer/markdown-extension/image-placeholder/image-placeholder-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/image-placeholder/image-placeholder-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,7 +11,7 @@ import type { ComponentReplacer } from '../../replace-components/component-repla
 import { ImagePlaceholderReplacer } from './image-placeholder-replacer'
 
 /**
- * A markdown extension that
+ * Adds support for {@link ImagePlaceholder}.
  */
 export class ImagePlaceholderMarkdownExtension extends MarkdownExtension {
   public static readonly PLACEHOLDER_URL = 'https://'
diff --git a/src/components/markdown-renderer/markdown-extension/image/image-lightbox-modal.tsx b/src/components/markdown-renderer/markdown-extension/image/image-lightbox-modal.tsx
index 721cdc791..ed5d093bb 100644
--- a/src/components/markdown-renderer/markdown-extension/image/image-lightbox-modal.tsx
+++ b/src/components/markdown-renderer/markdown-extension/image/image-lightbox-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,6 +16,15 @@ export interface ImageLightboxModalProps extends ModalVisibilityProps {
   title?: string
 }
 
+/**
+ * Renders a lightbox modal for images.
+ *
+ * @param show If the modal should be shown
+ * @param onHide The callback to hide the modal
+ * @param src The image source
+ * @param alt The alt text of the image
+ * @param title The title of the image
+ */
 export const ImageLightboxModal: React.FC<ImageLightboxModalProps> = ({ show, onHide, src, alt, title }) => {
   return (
     <CommonModal
diff --git a/src/components/markdown-renderer/markdown-extension/image/proxy-image-frame.tsx b/src/components/markdown-renderer/markdown-extension/image/proxy-image-frame.tsx
index bca2370bc..d94303578 100644
--- a/src/components/markdown-renderer/markdown-extension/image/proxy-image-frame.tsx
+++ b/src/components/markdown-renderer/markdown-extension/image/proxy-image-frame.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,14 @@ import { Logger } from '../../../../utils/logger'
 
 const log = new Logger('ProxyImageFrame')
 
+/**
+ * Renders an image using the image proxy.
+ *
+ * @param src The image source
+ * @param title The title of the image
+ * @param alt The alt text of the image
+ * @param props Additional props directly given to the image
+ */
 export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ src, title, alt, ...props }) => {
   const [imageUrl, setImageUrl] = useState('')
   const imageProxyEnabled = useApplicationState((state) => state.config.useImageProxy)
diff --git a/src/components/markdown-renderer/markdown-extension/katex/katex-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/katex/katex-markdown-extension.ts
index 059dab6d8..851f686a8 100644
--- a/src/components/markdown-renderer/markdown-extension/katex/katex-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/katex/katex-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,8 @@ import { KatexReplacer } from './katex-replacer'
 
 /**
  * Adds support for rendering of LaTeX code using KaTeX.
+ *
+ * @see https://katex.org/
  */
 export class KatexMarkdownExtension extends MarkdownExtension {
   public static readonly tagName = 'app-katex'
diff --git a/src/components/markdown-renderer/markdown-extension/katex/katex-replacer.tsx b/src/components/markdown-renderer/markdown-extension/katex/katex-replacer.tsx
index 8368faa98..67e6056b3 100644
--- a/src/components/markdown-renderer/markdown-extension/katex/katex-replacer.tsx
+++ b/src/components/markdown-renderer/markdown-extension/katex/katex-replacer.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,7 +15,7 @@ import { KatexMarkdownExtension } from './katex-markdown-extension'
  * Checks if the given node is a KaTeX block.
  *
  * @param node the node to check
- * @return The given node if it is a KaTeX block element, undefined otherwise.
+ * @return The given node if it is a KaTeX block element, {@link undefined} otherwise.
  */
 const containsKatexBlock = (node: Element): Element | undefined => {
   if (node.name !== 'p' || !node.children || node.children.length === 0) {
@@ -31,7 +31,7 @@ const containsKatexBlock = (node: Element): Element | undefined => {
  *
  * @param node the node to check
  * @param expectedInline defines if the found katex element is expected to be an inline or block element.
- * @return {@code true} if the given node is a katex element.
+ * @return {@link true} if the given node is a katex element.
  */
 const isKatexTag = (node: Element, expectedInline: boolean) => {
   return (
diff --git a/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-pdf-short-code.ts b/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-pdf-short-code.ts
index 7810c16fb..39c7f99fc 100644
--- a/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-pdf-short-code.ts
+++ b/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-pdf-short-code.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,11 @@ import type { RegexOptions } from '../../../../external-types/markdown-it-regex/
 
 const finalRegex = /^{%pdf (\S*) *%}$/
 
+/**
+ * Configure the given {@link MarkdownIt} to render legacy hedgedoc 1 pdf shortcodes as html links.
+ *
+ * @param markdownIt The {@link MarkdownIt} to configure
+ */
 export const legacyPdfShortCode: MarkdownIt.PluginSimple = (markdownIt) => {
   markdownItRegex(markdownIt, {
     name: 'legacy-pdf-short-code',
diff --git a/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-slideshare-short-code.ts b/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-slideshare-short-code.ts
index 34aefa0c3..7751364b9 100644
--- a/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-slideshare-short-code.ts
+++ b/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-slideshare-short-code.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,11 @@ import type { RegexOptions } from '../../../../external-types/markdown-it-regex/
 
 const finalRegex = /^{%slideshare (\w+\/[\w-]+) ?%}$/
 
+/**
+ * Configure the given {@link MarkdownIt} to render legacy hedgedoc 1 slideshare shortcodes as HTML links.
+ *
+ * @param markdownIt The {@link MarkdownIt} to configure
+ */
 export const legacySlideshareShortCode: MarkdownIt.PluginSimple = (markdownIt) => {
   markdownItRegex(markdownIt, {
     name: 'legacy-slideshare-short-code',
diff --git a/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-speakerdeck-short-code.ts b/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-speakerdeck-short-code.ts
index 681d0e3f4..5d6c5d897 100644
--- a/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-speakerdeck-short-code.ts
+++ b/src/components/markdown-renderer/markdown-extension/legacy-short-codes/replace-legacy-speakerdeck-short-code.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,11 @@ import type { RegexOptions } from '../../../../external-types/markdown-it-regex/
 
 const finalRegex = /^{%speakerdeck (\w+\/[\w-]+) ?%}$/
 
+/**
+ * Configure the given {@link MarkdownIt} to render legacy hedgedoc 1 speakerdeck shortcodes as HTML links.
+ *
+ * @param markdownIt The {@link MarkdownIt} to configure
+ */
 export const legacySpeakerdeckShortCode: MarkdownIt.PluginSimple = (markdownIt) => {
   markdownItRegex(markdownIt, {
     name: 'legacy-speakerdeck-short-code',
diff --git a/src/components/markdown-renderer/markdown-extension/link-replacer/anchor-node-preprocessor.ts b/src/components/markdown-renderer/markdown-extension/link-replacer/anchor-node-preprocessor.ts
index 58fab5c32..61b691fc6 100644
--- a/src/components/markdown-renderer/markdown-extension/link-replacer/anchor-node-preprocessor.ts
+++ b/src/components/markdown-renderer/markdown-extension/link-replacer/anchor-node-preprocessor.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,6 +8,9 @@ import { TravelerNodeProcessor } from '../../node-preprocessors/traveler-node-pr
 import type { Node } from 'domhandler'
 import { isTag } from 'domhandler'
 
+/**
+ * A preprocessor for links. It filters script and data links, converts relative URLs into absolute URLs and fixes jump marks.
+ */
 export class AnchorNodePreprocessor extends TravelerNodeProcessor {
   constructor(private baseUrl: string) {
     super()
diff --git a/src/components/markdown-renderer/markdown-extension/link-replacer/jump-anchor.tsx b/src/components/markdown-renderer/markdown-extension/link-replacer/jump-anchor.tsx
index 6c8c8a12c..c3cf0c3ef 100644
--- a/src/components/markdown-renderer/markdown-extension/link-replacer/jump-anchor.tsx
+++ b/src/components/markdown-renderer/markdown-extension/link-replacer/jump-anchor.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,13 @@ export interface JumpAnchorProps extends AllHTMLAttributes<HTMLAnchorElement> {
   jumpTargetId: string
 }
 
+/**
+ * Renders jump anchors.
+ *
+ * @param jumpTargetId The target id
+ * @param children Children rendered into the link.
+ * @param props Additional props directly given to the link
+ */
 export const JumpAnchor: React.FC<JumpAnchorProps> = ({ jumpTargetId, children, ...props }) => {
   const jumpToTargetId = useCallback(
     (event: React.MouseEvent<HTMLElement, MouseEvent>): void => {
diff --git a/src/components/markdown-renderer/markdown-extension/linkify-fix-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/linkify-fix-markdown-extension.ts
index d74099c55..21ecb37cf 100644
--- a/src/components/markdown-renderer/markdown-extension/linkify-fix-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/linkify-fix-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,6 +8,9 @@ import { MarkdownExtension } from './markdown-extension'
 import linkify from 'markdown-it/lib/rules_core/linkify'
 import type MarkdownIt from 'markdown-it'
 
+/**
+ * A markdown extension that detects plain text URLs and converts them into links.
+ */
 export class LinkifyFixMarkdownExtension extends MarkdownExtension {
   public configureMarkdownItPost(markdownIt: MarkdownIt): void {
     markdownIt.core.ruler.push('linkify', (state) => {
diff --git a/src/components/markdown-renderer/markdown-extension/markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/markdown-extension.ts
index 6c6966dc3..0f3cd53e3 100644
--- a/src/components/markdown-renderer/markdown-extension/markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,6 +8,9 @@ import type MarkdownIt from 'markdown-it'
 import type { NodeProcessor } from '../node-preprocessors/node-processor'
 import type { ComponentReplacer } from '../replace-components/component-replacer'
 
+/**
+ * Base class for Markdown extensions.
+ */
 export abstract class MarkdownExtension {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public configureMarkdownIt(markdownIt: MarkdownIt): void {
diff --git a/src/components/markdown-renderer/markdown-extension/markmap/markmap-frame.tsx b/src/components/markdown-renderer/markdown-extension/markmap/markmap-frame.tsx
index 971c780e6..d2cd1cb93 100644
--- a/src/components/markdown-renderer/markdown-extension/markmap/markmap-frame.tsx
+++ b/src/components/markdown-renderer/markdown-extension/markmap/markmap-frame.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -17,6 +17,12 @@ const blockHandler = (event: Event): void => {
   event.stopPropagation()
 }
 
+/**
+ * Renders a markmap diagram.
+ *
+ * @param code The code for the diagram.
+ * @see https://markmap.js.org/
+ */
 export const MarkmapFrame: React.FC<CodeProps> = ({ code }) => {
   const { t } = useTranslation()
   const diagramContainer = useRef<HTMLDivElement>(null)
diff --git a/src/components/markdown-renderer/markdown-extension/markmap/markmap-loader.ts b/src/components/markdown-renderer/markdown-extension/markmap/markmap-loader.ts
index 1af51d1a8..442ebbb1d 100644
--- a/src/components/markdown-renderer/markdown-extension/markmap/markmap-loader.ts
+++ b/src/components/markdown-renderer/markdown-extension/markmap/markmap-loader.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,12 @@ import { Markmap } from 'markmap-view'
 
 const transformer: Transformer = new Transformer()
 
+/**
+ * Renders the given markdown code into the given Dom element using {@link Markmap markmap}.
+ *
+ * @param svg The dom element to render into.
+ * @param code The diagram code.
+ */
 export const markmapLoader = (svg: SVGSVGElement, code: string): void => {
   const { root } = transformer.transform(code)
   Markmap.create(svg, {}, root)
diff --git a/src/components/markdown-renderer/markdown-extension/mermaid/mermaid-chart.tsx b/src/components/markdown-renderer/markdown-extension/mermaid/mermaid-chart.tsx
index 6ea622de6..c0ca94012 100644
--- a/src/components/markdown-renderer/markdown-extension/mermaid/mermaid-chart.tsx
+++ b/src/components/markdown-renderer/markdown-extension/mermaid/mermaid-chart.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -21,6 +21,12 @@ interface MermaidParseError {
 
 let mermaidInitialized = false
 
+/**
+ * Renders a mermaid diagram.
+ *
+ * @param code The code for the diagram.
+ * @see https://mermaid-js.github.io/mermaid/#/
+ */
 export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
   const diagramContainer = useRef<HTMLDivElement>(null)
   const [error, setError] = useState<string>()
diff --git a/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-markdown-extension.ts
index 199b93a5c..5fd75c08a 100644
--- a/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,11 @@ import type { Options } from 'markdown-it/lib'
 import type { ComponentReplacer } from '../../replace-components/component-replacer'
 import { PlantumlNotConfiguredComponentReplacer } from './plantuml-not-configured-component-replacer'
 
+/**
+ * Adds support for chart rendering using plantuml to the markdown rendering using code fences with "plantuml" as language.
+ *
+ * @see https://plantuml.com
+ */
 export class PlantumlMarkdownExtension extends MarkdownExtension {
   constructor(private plantumlServer?: string) {
     super()
diff --git a/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-not-configured-alert.tsx b/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-not-configured-alert.tsx
index 1025eb112..520d4e04a 100644
--- a/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-not-configured-alert.tsx
+++ b/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-not-configured-alert.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,6 +7,9 @@
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 
+/**
+ * Renders an alert if plantuml is not configured.
+ */
 export const PlantumlNotConfiguredAlert: React.FC = () => {
   useTranslation()
 
diff --git a/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-not-configured-component-replacer.tsx b/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-not-configured-component-replacer.tsx
index 3d5a7c899..5d243718b 100644
--- a/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-not-configured-component-replacer.tsx
+++ b/src/components/markdown-renderer/markdown-extension/plantuml/plantuml-not-configured-component-replacer.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,9 @@ import { ComponentReplacer, DO_NOT_REPLACE } from '../../replace-components/comp
 import { PlantumlNotConfiguredAlert } from './plantuml-not-configured-alert'
 import type { Element } from 'domhandler'
 
+/**
+ * Replaces every plantuml-not-configured tag with a {@link PlantumlNotConfiguredAlert}.
+ */
 export class PlantumlNotConfiguredComponentReplacer extends ComponentReplacer {
   replace(node: Element): NodeReplacement {
     return node.tagName === 'plantuml-not-configured' ? <PlantumlNotConfiguredAlert /> : DO_NOT_REPLACE
diff --git a/src/components/markdown-renderer/markdown-extension/reveal/process-reveal-comment-nodes.ts b/src/components/markdown-renderer/markdown-extension/reveal/process-reveal-comment-nodes.ts
index ee916f681..5da5a37bd 100644
--- a/src/components/markdown-renderer/markdown-extension/reveal/process-reveal-comment-nodes.ts
+++ b/src/components/markdown-renderer/markdown-extension/reveal/process-reveal-comment-nodes.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -63,6 +63,7 @@ const processCommentNode = (node: DataNode): void => {
  *
  * @param node The node whose ancestor should be found.
  * @param selector The found ancestor node or null if no node could be found.
+ * @return The ancestor element, if it exists. {@link undefined} otherwise.
  */
 const findTargetElement = (node: Node, selector: string): Element | null => {
   if (selector === 'slide') {
@@ -78,6 +79,7 @@ const findTargetElement = (node: Node, selector: string): Element | null => {
  * Returns the parent node if it is an {@link Element}.
  *
  * @param node the found node or null if no parent node exists or if the parent node isn't an {@link Element}.
+ * @return The parent node, if it exists. {@link undefined} otherwise.
  */
 const findParentElement = (node: Node): Element | null => {
   return node.parentNode !== null && isTag(node.parentNode) ? node.parentNode : null
@@ -87,6 +89,7 @@ const findParentElement = (node: Node): Element | null => {
  * Looks for the nearest ancestor of the node that is a section element.
  *
  * @param node the found section node or null if no section ancestor could be found.
+ * @return The nearest ancestor element, if it exists. {@link undefined} otherwise.
  */
 const findNearestAncestorSection = (node: Node): Element | null => {
   let currentNode = node.parentNode
diff --git a/src/components/markdown-renderer/markdown-extension/sanitizer/dom-purifier-node-preprocessor.ts b/src/components/markdown-renderer/markdown-extension/sanitizer/dom-purifier-node-preprocessor.ts
index 7f787145e..604c9b884 100644
--- a/src/components/markdown-renderer/markdown-extension/sanitizer/dom-purifier-node-preprocessor.ts
+++ b/src/components/markdown-renderer/markdown-extension/sanitizer/dom-purifier-node-preprocessor.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,8 @@ import { NodeProcessor } from '../../node-preprocessors/node-processor'
 
 /**
  * Sanitizes the given {@link Document document}.
+ *
+ * @see https://cure53.de/purify
  */
 export class SanitizerNodePreprocessor extends NodeProcessor {
   constructor(private tagNameWhiteList: string[]) {
diff --git a/src/components/markdown-renderer/markdown-extension/sequence-diagram/deprecation-warning.tsx b/src/components/markdown-renderer/markdown-extension/sequence-diagram/deprecation-warning.tsx
index a131d972c..5540ab529 100644
--- a/src/components/markdown-renderer/markdown-extension/sequence-diagram/deprecation-warning.tsx
+++ b/src/components/markdown-renderer/markdown-extension/sequence-diagram/deprecation-warning.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,9 @@ import links from '../../../../links.json'
 import { cypressId } from '../../../../utils/cypress-attribute'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
 
+/**
+ * Renders a deprecation warning.
+ */
 export const DeprecationWarning: React.FC = () => {
   useTranslation()
 
diff --git a/src/components/markdown-renderer/markdown-extension/spoiler-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/spoiler-markdown-extension.ts
index 02254e656..5509a49e5 100644
--- a/src/components/markdown-renderer/markdown-extension/spoiler-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/spoiler-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,16 +10,14 @@ import markdownItContainer from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 import { escapeHtml } from 'markdown-it/lib/common/utils'
 
+/**
+ * Adds support for html spoiler tags.
+ *
+ * @see https://www.w3schools.com/tags/tag_details.asp
+ */
 export class SpoilerMarkdownExtension extends MarkdownExtension {
   private static readonly spoilerRegEx = /^spoiler\s+(.*)$/
 
-  /**
-   * Renders the opening and closing token of the container.
-   *
-   * @param tokens The tokens of the document
-   * @param index The currently viewed token
-   * @return The html rendering of the tokens
-   */
   private static renderSpoilerContainer(tokens: Token[], index: number): string {
     const matches = SpoilerMarkdownExtension.spoilerRegEx.exec(tokens[index].info.trim())
 
diff --git a/src/components/markdown-renderer/markdown-extension/table-of-contents-markdown-extension.ts b/src/components/markdown-renderer/markdown-extension/table-of-contents-markdown-extension.ts
index a1aa0c1f2..62892d9fc 100644
--- a/src/components/markdown-renderer/markdown-extension/table-of-contents-markdown-extension.ts
+++ b/src/components/markdown-renderer/markdown-extension/table-of-contents-markdown-extension.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,7 +9,9 @@ import type MarkdownIt from 'markdown-it'
 import type { TocAst } from 'markdown-it-toc-done-right'
 import toc from 'markdown-it-toc-done-right'
 import { tocSlugify } from '../../editor-page/table-of-contents/toc-slugify'
-
+/**
+ * Adds table of content to the markdown rendering.
+ */
 export class TableOfContentsMarkdownExtension extends MarkdownExtension {
   constructor(private onTocChange?: (ast: TocAst) => void) {
     super()
diff --git a/src/components/markdown-renderer/markdown-extension/vega-lite/vega-lite-chart.tsx b/src/components/markdown-renderer/markdown-extension/vega-lite/vega-lite-chart.tsx
index 772bde4c9..77bf02e72 100644
--- a/src/components/markdown-renderer/markdown-extension/vega-lite/vega-lite-chart.tsx
+++ b/src/components/markdown-renderer/markdown-extension/vega-lite/vega-lite-chart.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,6 +16,12 @@ import { AsyncLoadingBoundary } from '../../../common/async-loading-boundary'
 
 const log = new Logger('VegaChart')
 
+/**
+ * Renders a vega lite diagram.
+ *
+ * @param code The code for the diagram.
+ * @see https://vega.github.io/vega-lite/
+ */
 export const VegaLiteChart: React.FC<CodeProps> = ({ code }) => {
   const diagramContainer = useRef<HTMLDivElement>(null)
   const { t } = useTranslation()
diff --git a/src/components/markdown-renderer/markdown-extension/vimeo/replace-legacy-vimeo-short-code.ts b/src/components/markdown-renderer/markdown-extension/vimeo/replace-legacy-vimeo-short-code.ts
index 516c0649a..c2b744fce 100644
--- a/src/components/markdown-renderer/markdown-extension/vimeo/replace-legacy-vimeo-short-code.ts
+++ b/src/components/markdown-renderer/markdown-extension/vimeo/replace-legacy-vimeo-short-code.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,11 @@ import { VimeoMarkdownExtension } from './vimeo-markdown-extension'
 import type MarkdownIt from 'markdown-it'
 import markdownItRegex from 'markdown-it-regex'
 
+/**
+ * Configure the given {@link MarkdownIt} to render legacy hedgedoc 1 vimeo short codes as embeddings.
+ *
+ * @param markdownIt The {@link MarkdownIt} to configure
+ */
 const replaceLegacyVimeoShortCode: RegexOptions = {
   name: 'legacy-vimeo-short-code',
   regex: /^{%vimeo ([\d]{6,11}) ?%}$/,
diff --git a/src/components/markdown-renderer/markdown-extension/vimeo/replace-vimeo-link.ts b/src/components/markdown-renderer/markdown-extension/vimeo/replace-vimeo-link.ts
index 5d498d0de..9ed232c7b 100644
--- a/src/components/markdown-renderer/markdown-extension/vimeo/replace-vimeo-link.ts
+++ b/src/components/markdown-renderer/markdown-extension/vimeo/replace-vimeo-link.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -28,5 +28,8 @@ const replaceVimeoLink: RegexOptions = {
   }
 }
 
+/**
+ * Replacer for vimeo links.
+ */
 export const replaceVimeoLinkMarkdownItPlugin: MarkdownIt.PluginSimple = (markdownIt: MarkdownIt) =>
   markdownItRegex(markdownIt, replaceVimeoLink)
diff --git a/src/components/markdown-renderer/markdown-extension/youtube/replace-legacy-youtube-short-code.ts b/src/components/markdown-renderer/markdown-extension/youtube/replace-legacy-youtube-short-code.ts
index d7e64109a..bdc98656f 100644
--- a/src/components/markdown-renderer/markdown-extension/youtube/replace-legacy-youtube-short-code.ts
+++ b/src/components/markdown-renderer/markdown-extension/youtube/replace-legacy-youtube-short-code.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,11 @@ import { YoutubeMarkdownExtension } from './youtube-markdown-extension'
 import markdownItRegex from 'markdown-it-regex'
 import type MarkdownIt from 'markdown-it'
 
+/**
+ * Configure the given {@link MarkdownIt} to render legacy hedgedoc 1 youtube short codes as embeddings.
+ *
+ * @param markdownIt The {@link MarkdownIt} to configure
+ */
 export const replaceLegacyYoutubeShortCodeMarkdownItPlugin: MarkdownIt.PluginSimple = (markdownIt: MarkdownIt): void =>
   markdownItRegex(markdownIt, {
     name: 'legacy-youtube-short-code',
diff --git a/src/components/markdown-renderer/markdown-extension/youtube/replace-youtube-link.ts b/src/components/markdown-renderer/markdown-extension/youtube/replace-youtube-link.ts
index f1c819929..c3da81439 100644
--- a/src/components/markdown-renderer/markdown-extension/youtube/replace-youtube-link.ts
+++ b/src/components/markdown-renderer/markdown-extension/youtube/replace-youtube-link.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,6 +19,9 @@ const youtubeVideoUrlRegex = new RegExp(
 )
 const linkRegex = new RegExp(`^${youtubeVideoUrlRegex.source}$`, 'i')
 
+/**
+ * Replacer for youtube links.
+ */
 export const replaceYouTubeLinkMarkdownItPlugin: MarkdownIt.PluginSimple = (markdownIt: MarkdownIt) =>
   markdownItRegex(markdownIt, {
     name: 'youtube-link',
diff --git a/src/components/markdown-renderer/node-preprocessors/node-processor.ts b/src/components/markdown-renderer/node-preprocessors/node-processor.ts
index 020de40a2..0f23e5970 100644
--- a/src/components/markdown-renderer/node-preprocessors/node-processor.ts
+++ b/src/components/markdown-renderer/node-preprocessors/node-processor.ts
@@ -1,11 +1,14 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import type { Document } from 'domhandler'
 
+/**
+ * Base class for node processors.
+ */
 export abstract class NodeProcessor {
   public abstract process(document: Document): Document
 }
diff --git a/src/components/markdown-renderer/node-preprocessors/traveler-node-processor.ts b/src/components/markdown-renderer/node-preprocessors/traveler-node-processor.ts
index 5ea6aacd5..6736189f8 100644
--- a/src/components/markdown-renderer/node-preprocessors/traveler-node-processor.ts
+++ b/src/components/markdown-renderer/node-preprocessors/traveler-node-processor.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,6 +8,9 @@ import { NodeProcessor } from './node-processor'
 import type { Document, Node } from 'domhandler'
 import { hasChildren } from 'domhandler'
 
+/**
+ * Base class for traveler node processors whose processing is executed on the given node and every child.
+ */
 export abstract class TravelerNodeProcessor extends NodeProcessor {
   process(nodes: Document): Document {
     this.processNodes(nodes.children)
diff --git a/src/components/markdown-renderer/replace-components/component-replacer.ts b/src/components/markdown-renderer/replace-components/component-replacer.ts
index 3bb2826f3..aeb811e04 100644
--- a/src/components/markdown-renderer/replace-components/component-replacer.ts
+++ b/src/components/markdown-renderer/replace-components/component-replacer.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -36,7 +36,7 @@ export abstract class ComponentReplacer {
   }
 
   /**
-   * Applies the given {@link SubNodeTransform sub node transformer} to every children of the given {@link Node}
+   * Applies the given {@link SubNodeTransform sub node transformer} to every children of the given {@link Node}.
    *
    * @param node The node whose children should be transformed
    * @param subNodeTransform The transformer that should be used.
diff --git a/src/components/markdown-renderer/slideshow-markdown-renderer.tsx b/src/components/markdown-renderer/slideshow-markdown-renderer.tsx
index d5393c44a..4a7d43ab7 100644
--- a/src/components/markdown-renderer/slideshow-markdown-renderer.tsx
+++ b/src/components/markdown-renderer/slideshow-markdown-renderer.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -21,6 +21,21 @@ export interface SlideshowMarkdownRendererProps extends CommonMarkdownRendererPr
   slideOptions: SlideOptions
 }
 
+/**
+ * Renders the note as a reveal.js presentation.
+ *
+ * @param className Additional class names directly given to the div
+ * @param markdownContentLines The markdown lines
+ * @param onFirstHeadingChange The callback to call if the first heading changes.
+ * @param onLineMarkerPositionChanged The callback to call with changed {@link LineMarkers}
+ * @param onTaskCheckedChange The callback to call if a task is checked or unchecked.
+ * @param onTocChange The callback to call if the toc changes.
+ * @param baseUrl The base url of the renderer
+ * @param onImageClick The callback to call if a image is clicked
+ * @param newlinesAreBreaks If newlines are rendered as breaks or not
+ * @param lineOffset The line offset
+ * @param slideOptions The {@link SlideOptions} to use
+ */
 export const SlideshowMarkdownRenderer: React.FC<SlideshowMarkdownRendererProps & ScrollProps> = ({
   className,
   markdownContentLines,
diff --git a/src/components/markdown-renderer/test-utils/test-markdown-renderer.tsx b/src/components/markdown-renderer/test-utils/test-markdown-renderer.tsx
index 688cd3955..dc47f0a59 100644
--- a/src/components/markdown-renderer/test-utils/test-markdown-renderer.tsx
+++ b/src/components/markdown-renderer/test-utils/test-markdown-renderer.tsx
@@ -14,6 +14,12 @@ export interface SimpleMarkdownRendererProps {
   extensions: MarkdownExtension[]
 }
 
+/**
+ * A markdown renderer for tests.
+ *
+ * @param content The content to be rendered.
+ * @param extensions The {@link MarkdownExtension MarkdownExtensions} to use for rendering.
+ */
 export const TestMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({ content, extensions }) => {
   const lines = useMemo(() => content.split('\n'), [content])
   const dom = useConvertMarkdownToReactDom(lines, extensions, true, false)
diff --git a/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts b/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts
index a54a0b655..3f6b6e5e1 100644
--- a/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts
+++ b/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,7 +11,7 @@ import type { LineMarkerPosition } from '../markdown-extension/linemarker/types'
 import type { LineMarkers } from '../markdown-extension/linemarker/add-line-marker-markdown-it-plugin'
 import useResizeObserver from '@react-hook/resize-observer'
 
-export const calculateLineMarkerPositions = (
+const calculateLineMarkerPositions = (
   documentElement: HTMLDivElement,
   currentLineMarkers: LineMarkers[],
   offset?: number
@@ -47,6 +47,14 @@ export const calculateLineMarkerPositions = (
   return lineMarkerPositions
 }
 
+/**
+ * Calculates the positions of the given {@link LineMarkers} in the given {@link Document}.
+ *
+ * @param documentElement A reference to the rendered document.
+ * @param lineMarkers A list of {@link LineMarkers}
+ * @param onLineMarkerPositionChanged The callback to call if the {@link LineMarkerPosition line marker positions} change e.g. by rendering or resizing.
+ * @param offset The optional offset
+ */
 export const useCalculateLineMarkerPosition = (
   documentElement: RefObject<HTMLDivElement>,
   lineMarkers?: LineMarkers[],
diff --git a/src/components/markdown-renderer/utils/line-id-mapper.ts b/src/components/markdown-renderer/utils/line-id-mapper.ts
index 7e115c7c8..097eb6eeb 100644
--- a/src/components/markdown-renderer/utils/line-id-mapper.ts
+++ b/src/components/markdown-renderer/utils/line-id-mapper.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -70,7 +70,7 @@ export class LineIdMapper {
    * Defines if the given {@link LineChange change} is neither adding or removing lines.
    *
    * @param change The {@link LineChange change} to check.
-   * @return {@code true} if the given change is neither adding or removing lines.
+   * @return {@link true} if the given change is neither adding nor removing lines.
    */
   private static changeIsNotChangingLines(change: LineChange): boolean {
     return change.added === undefined && change.removed === undefined
@@ -80,7 +80,7 @@ export class LineIdMapper {
    * Defines if the given {@link LineChange change} contains new, not existing lines.
    *
    * @param change The {@link LineChange change} to check.
-   * @return {@code true} if the given change contains {@link NewLine new lines}
+   * @return {@link true} if the given change contains {@link NewLine new lines}
    */
   private static changeIsAddingLines(change: LineChange): change is ArrayChange<NewLine> {
     return change.removed === true
diff --git a/src/components/markdown-renderer/utils/node-to-react-transformer.tsx b/src/components/markdown-renderer/utils/node-to-react-transformer.tsx
index 132bae546..1fce0bffa 100644
--- a/src/components/markdown-renderer/utils/node-to-react-transformer.tsx
+++ b/src/components/markdown-renderer/utils/node-to-react-transformer.tsx
@@ -165,6 +165,7 @@ export class NodeToReactTransformer {
    *
    * @param node The node to render
    * @param key The unique key for the node
+   * @return The rendered {@link ValidReactDomElement}
    */
   private renderNativeNode = (node: Element, key: string): ValidReactDomElement => {
     if (node.attribs === undefined) {
diff --git a/src/components/notifications/ui-notification-toast.tsx b/src/components/notifications/ui-notification-toast.tsx
index 6b024f81e..145afcfca 100644
--- a/src/components/notifications/ui-notification-toast.tsx
+++ b/src/components/notifications/ui-notification-toast.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -25,6 +25,20 @@ export interface UiNotificationProps extends UiNotification {
   notificationId: number
 }
 
+/**
+ * Renders a single notification.
+ *
+ * @param titleI18nKey The i18n key for the title
+ * @param contentI18nKey The i18n key for the content
+ * @param titleI18nOptions The i18n options for the title
+ * @param contentI18nOptions The i18n options for the content
+ * @param createdAtTimestamp The timestamp, when this notification was created.
+ * @param icon The optional icon to be used
+ * @param dismissed If the notification is already dismissed
+ * @param notificationId The notification id
+ * @param durationInSecond How long the notification should be shown
+ * @param buttons A list of {@link UiNotificationButton UiNotificationButtons} to be displayed
+ */
 export const UiNotificationToast: React.FC<UiNotificationProps> = ({
   titleI18nKey,
   contentI18nKey,
diff --git a/src/components/notifications/ui-notifications.tsx b/src/components/notifications/ui-notifications.tsx
index 8aab1f7e9..f04955012 100644
--- a/src/components/notifications/ui-notifications.tsx
+++ b/src/components/notifications/ui-notifications.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,9 @@ import { UiNotificationToast } from './ui-notification-toast'
 import styles from './notifications.module.scss'
 import { useApplicationState } from '../../hooks/common/use-application-state'
 
+/**
+ * Renders {@link UiNotification notifications} in the top right corner.
+ */
 export const UiNotifications: React.FC = () => {
   const notifications = useApplicationState((state) => state.uiNotifications)
 
diff --git a/src/components/profile-page/access-tokens/access-token-created-modal.tsx b/src/components/profile-page/access-tokens/access-token-created-modal.tsx
index 6e32960b5..9f0698334 100644
--- a/src/components/profile-page/access-tokens/access-token-created-modal.tsx
+++ b/src/components/profile-page/access-tokens/access-token-created-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,6 +19,7 @@ export interface AccessTokenCreatedModalProps extends ModalVisibilityProps {
 
 /**
  * Modal that shows the secret of a freshly created access token.
+ *
  * @param show True when the modal should be shown, false otherwise.
  * @param onHide Callback that gets called when the modal should be dismissed.
  * @param tokenWithSecret The token altogether with its secret.
diff --git a/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-expiry-field.tsx b/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-expiry-field.tsx
index 92e401d97..56fac8864 100644
--- a/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-expiry-field.tsx
+++ b/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-expiry-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -17,6 +17,7 @@ interface AccessTokenCreationFormExpiryFieldProps extends AccessTokenCreationFor
 
 /**
  * Input field for expiry of a new token.
+ *
  * @param formValues The values of the stored form values.
  * @param onChangeExpiry Callback that updates the stored expiry form value.
  */
diff --git a/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-label-field.tsx b/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-label-field.tsx
index 1050570b4..f2e60b6c3 100644
--- a/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-label-field.tsx
+++ b/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-label-field.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,6 +16,7 @@ interface AccessTokenCreationFormLabelFieldProps extends AccessTokenCreationForm
 
 /**
  * Input field for the label of a new token.
+ *
  * @param onChangeLabel Callback for updating the stored label form value.
  * @param formValues The stored form values.
  */
diff --git a/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form.tsx b/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form.tsx
index b270e5e9a..28a9059ca 100644
--- a/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form.tsx
+++ b/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -24,6 +24,7 @@ interface NewTokenFormValues {
 
 /**
  * Form for creating a new access token.
+ *
  * @param onUpdateList Callback that is fired when a token was created to update the list.
  */
 export const AccessTokenCreationForm: React.FC<AccessTokenUpdateProps> = ({ onUpdateList }) => {
diff --git a/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-expiry-dates.ts b/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-expiry-dates.ts
index 72387dd6e..f34140db1 100644
--- a/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-expiry-dates.ts
+++ b/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-expiry-dates.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,6 +15,7 @@ interface ExpiryDates {
 
 /**
  * Returns the minimal, maximal and default expiry date for new access tokens.
+ *
  * @return Memoized expiry dates.
  */
 export const useExpiryDates = (): ExpiryDates => {
diff --git a/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-on-create-token.ts b/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-on-create-token.ts
index fa0ef7f51..7642b153e 100644
--- a/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-on-create-token.ts
+++ b/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-on-create-token.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,7 @@ import type { AccessTokenWithSecret } from '../../../../../api/tokens/types'
 
 /**
  * Callback for requesting a new access token from the API and returning the response token and secret.
+ *
  * @param label The label for the new access token.
  * @param expiryDate The expiry date of the new access token.
  * @param setNewTokenWithSecret Callback to set the new access token with the secret from the API.
diff --git a/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx b/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx
index ee567167b..42aa7c25d 100644
--- a/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx
+++ b/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -20,6 +20,7 @@ export interface AccessTokenDeletionModalProps extends ModalVisibilityProps {
 
 /**
  * Modal that asks for confirmation when deleting an access token.
+ *
  * @param show True when the deletion modal should be shown, false otherwise.
  * @param token The access token to delete.
  * @param onHide Callback that is fired when the modal is closed.
diff --git a/src/components/profile-page/access-tokens/access-token-list-entry.tsx b/src/components/profile-page/access-tokens/access-token-list-entry.tsx
index a1f2cf06d..ac86fbd18 100644
--- a/src/components/profile-page/access-tokens/access-token-list-entry.tsx
+++ b/src/components/profile-page/access-tokens/access-token-list-entry.tsx
@@ -21,6 +21,7 @@ export interface AccessTokenListEntryProps {
 
 /**
  * List entry that represents an access token with the possibility to delete it.
+ *
  * @param token The access token.
  * @param onUpdateList Callback that is fired when the deletion modal is closed to update the token list.
  */
diff --git a/src/components/profile-page/account-management/account-deletion-modal.tsx b/src/components/profile-page/account-management/account-deletion-modal.tsx
index c99f760d9..57de04a6a 100644
--- a/src/components/profile-page/account-management/account-deletion-modal.tsx
+++ b/src/components/profile-page/account-management/account-deletion-modal.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,6 +16,7 @@ import { dispatchUiNotification, showErrorNotification } from '../../../redux/ui
 
 /**
  * Confirmation modal for deleting your account.
+ *
  * @param show True if the modal should be shown, false otherwise.
  * @param onHide Callback that is fired when the modal is closed.
  */
diff --git a/src/components/register-page/register-error/register-error.tsx b/src/components/register-page/register-error/register-error.tsx
index 39520abc4..461712970 100644
--- a/src/components/register-page/register-error/register-error.tsx
+++ b/src/components/register-page/register-error/register-error.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -15,7 +15,8 @@ export interface RegisterErrorProps {
 
 /**
  * Renders an error message for registration fields when an error is present.
- * @param error The error to render. Can be {@code undefined} when no error should be rendered.
+ *
+ * @param error The error to render. Can be {@link undefined} when no error should be rendered.
  */
 export const RegisterError: React.FC<RegisterErrorProps> = ({ error }) => {
   useTranslation()
diff --git a/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts b/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts
index 89f4948a3..d655af7b0 100644
--- a/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts
+++ b/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,18 @@ import type { ScrollState } from '../../../editor-page/synced-scroll/scroll-prop
 import { useOnUserScroll } from './use-on-user-scroll'
 import { useScrollToLineMark } from './use-scroll-to-line-mark'
 
+/**
+ * Synchronizes the scroll status of the given container with the given scroll state and posts changes if the user scrolls.
+ *
+ * @param outerContainerRef A reference for the outer container.
+ * @param rendererRef A reference for the renderer
+ * @param numberOfLines The number of lines
+ * @param scrollState The current {@link ScrollState}
+ * @param onScroll A callback that posts new scroll states
+ * @return A tuple of two callbacks.
+ *         The first one should be executed if the {@link LineMarkerPosition line marker positions} are updated.
+ *         The second one should be executed if the user actually scrolls. Usually it should be attached to the DOM element that the user scrolls.
+ */
 export const useDocumentSyncScrolling = (
   outerContainerRef: React.RefObject<HTMLElement>,
   rendererRef: React.RefObject<HTMLElement>,
diff --git a/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts b/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts
index 32e460b45..9a2886d05 100644
--- a/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts
+++ b/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,14 @@ import { useCallback } from 'react'
 import type { LineMarkerPosition } from '../../../markdown-renderer/markdown-extension/linemarker/types'
 import type { ScrollState } from '../../../editor-page/synced-scroll/scroll-props'
 
+/**
+ * Provides a callback to handle user scrolling.
+ *
+ * @param lineMarks An array of the current {@link LineMarkerPosition LineMarkerPositions}
+ * @param scrollContainer The container to scroll in
+ * @param onScroll A callback that posts new scroll states.
+ * @return A callback that can be called when the user is scrolling.
+ */
 export const useOnUserScroll = (
   lineMarks: LineMarkerPosition[] | undefined,
   scrollContainer: React.RefObject<HTMLElement>,
diff --git a/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts b/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts
index 43af69f2d..c8eee1625 100644
--- a/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts
+++ b/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,14 @@ import type { LineMarkerPosition } from '../../../markdown-renderer/markdown-ext
 import type { ScrollState } from '../../../editor-page/synced-scroll/scroll-props'
 import { findLineMarks } from '../../../editor-page/synced-scroll/utils'
 
+/**
+ * Scrolls the given container to the correct {@link LineMarkerPosition}.
+ *
+ * @param scrollState The current {@link ScrollState}
+ * @param lineMarks An array of the current {@link LineMarkerPosition LineMarkerPositions}.
+ * @param contentLineCount The number of lines
+ * @param scrollContainer The container to scroll in
+ */
 export const useScrollToLineMark = (
   scrollState: ScrollState | undefined,
   lineMarks: LineMarkerPosition[] | undefined,
diff --git a/src/components/render-page/hooks/use-image-click-handler.ts b/src/components/render-page/hooks/use-image-click-handler.ts
index 25ab86235..4ebcf8d4b 100644
--- a/src/components/render-page/hooks/use-image-click-handler.ts
+++ b/src/components/render-page/hooks/use-image-click-handler.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,12 @@ import type { ImageClickHandler } from '../../markdown-renderer/markdown-extensi
 import type { RendererToEditorCommunicator } from '../window-post-message-communicator/renderer-to-editor-communicator'
 import { CommunicationMessageType } from '../window-post-message-communicator/rendering-message'
 
+/**
+ * Generates a callback to send information about a clicked image from the iframe back to the editor.
+ *
+ * @param iframeCommunicator The communicator to send the message with.
+ * @return The callback to give to on onClick handler
+ */
 export const useImageClickHandler = (iframeCommunicator: RendererToEditorCommunicator): ImageClickHandler => {
   return useCallback(
     (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
diff --git a/src/components/render-page/iframe-markdown-renderer.tsx b/src/components/render-page/iframe-markdown-renderer.tsx
index 92b78a852..8b23f1a95 100644
--- a/src/components/render-page/iframe-markdown-renderer.tsx
+++ b/src/components/render-page/iframe-markdown-renderer.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,6 +19,9 @@ import { SlideshowMarkdownRenderer } from '../markdown-renderer/slideshow-markdo
 import { initialState } from '../../redux/note-details/initial-state'
 import type { RendererFrontmatterInfo } from '../../redux/note-details/types/note-details'
 
+/**
+ * Wraps the markdown rendering in an iframe.
+ */
 export const IframeMarkdownRenderer: React.FC = () => {
   const [markdownContentLines, setMarkdownContentLines] = useState<string[]>([])
   const [scrollState, setScrollState] = useState<ScrollState>({ firstLineInView: 1, scrolledPercentage: 0 })
diff --git a/src/components/render-page/markdown-document.tsx b/src/components/render-page/markdown-document.tsx
index c7b936f4e..615f8633d 100644
--- a/src/components/render-page/markdown-document.tsx
+++ b/src/components/render-page/markdown-document.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -37,6 +37,24 @@ export interface MarkdownDocumentProps extends RendererProps {
   frontmatterInfo?: RendererFrontmatterInfo
 }
 
+/**
+ * Renders a markdown document and handles scrolling, yaml metadata and a floating table of contents.
+ *
+ * @param additionalOuterContainerClasses Additional classes given to the outer container directly
+ * @param additionalRendererClasses Additional classes given {@link DocumentMarkdownRenderer} directly
+ * @param onFirstHeadingChange The callback to call when the first heading changes.
+ * @param onMakeScrollSource The callback to call if a change of the scroll source is requested-
+ * @param onTaskCheckedChange The callback to call if a task get's checked or unchecked.
+ * @param baseUrl The base url for the renderer
+ * @param markdownContentLines The current content of the markdown document.
+ * @param onImageClick The callback to call if an image is clicked.
+ * @param onScroll The callback to call if the renderer is scrolling.
+ * @param scrollState The current {@link ScrollState}
+ * @param onHeightChange The callback to call if the height of the document changes
+ * @param disableToc If the table of contents should be disabled.
+ * @param frontmatterInfo The frontmatter information for the renderer.
+ * @see https://markdown-it.github.io/
+ */
 export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
   additionalOuterContainerClasses,
   additionalRendererClasses,
diff --git a/src/components/render-page/markdown-toc-button/table-of-contents-hovering-button.tsx b/src/components/render-page/markdown-toc-button/table-of-contents-hovering-button.tsx
index 3d23aa298..428ea3540 100644
--- a/src/components/render-page/markdown-toc-button/table-of-contents-hovering-button.tsx
+++ b/src/components/render-page/markdown-toc-button/table-of-contents-hovering-button.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -21,7 +21,6 @@ export interface MarkdownTocButtonProps {
  *
  * @param tocAst the {@link TocAst AST} that should be rendered.
  * @param baseUrl the base url that will be used to generate the links
- * @return the created component
  */
 export const TableOfContentsHoveringButton: React.FC<MarkdownTocButtonProps> = ({ tocAst, baseUrl }) => {
   return (
diff --git a/src/components/render-page/width-based-table-of-contents.tsx b/src/components/render-page/width-based-table-of-contents.tsx
index 860498514..04722a56f 100644
--- a/src/components/render-page/width-based-table-of-contents.tsx
+++ b/src/components/render-page/width-based-table-of-contents.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -24,7 +24,6 @@ const MAX_WIDTH_FOR_BUTTON_VISIBILITY = 1100
  * @param tocAst the {@link TocAst AST} that should be rendered.
  * @param width the width that should be used to determine if the button should be shown.
  * @param baseUrl the base url that will be used to generate the links //TODO: replace with consumer/provider
- * @return the created component
  */
 export const WidthBasedTableOfContents: React.FC<DocumentExternalTocProps> = ({ tocAst, width, baseUrl }) => {
   if (width >= MAX_WIDTH_FOR_BUTTON_VISIBILITY) {
diff --git a/src/components/render-page/window-post-message-communicator/hooks/use-is-renderer-ready.ts b/src/components/render-page/window-post-message-communicator/hooks/use-is-renderer-ready.ts
index 7b9510f29..f67593138 100644
--- a/src/components/render-page/window-post-message-communicator/hooks/use-is-renderer-ready.ts
+++ b/src/components/render-page/window-post-message-communicator/hooks/use-is-renderer-ready.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,6 +7,8 @@
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 
 /**
- * Returns the current ready status of the renderer.
+ * Extracts the ready status of the renderer from the global application state.
+ *
+ * @return The current ready status of the renderer.
  */
 export const useIsRendererReady = (): boolean => useApplicationState((state) => state.rendererStatus.rendererReady)
diff --git a/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts b/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts
index caf9d5529..01f3a7e23 100644
--- a/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts
+++ b/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,11 @@ import { useEditorToRendererCommunicator } from '../../../editor-page/render-con
 import type { MessagePayload } from '../window-post-message-communicator'
 import { useEffectOnRendererReady } from './use-effect-on-renderer-ready'
 
+/**
+ * Sends the given message to the renderer.
+ *
+ * @param message The message to send
+ */
 export const useSendToRenderer = (
   message: undefined | Extract<CommunicationMessages, MessagePayload<EditorToRendererMessageType>>
 ): void => {
diff --git a/src/components/render-page/window-post-message-communicator/window-post-message-communicator.ts b/src/components/render-page/window-post-message-communicator/window-post-message-communicator.ts
index cf8944733..e2c75b389 100644
--- a/src/components/render-page/window-post-message-communicator/window-post-message-communicator.ts
+++ b/src/components/render-page/window-post-message-communicator/window-post-message-communicator.ts
@@ -67,9 +67,9 @@ export abstract class WindowPostMessageCommunicator<
    * Sets the target for message sending.
    * Messages can be sent as soon as the communication is enabled.
    *
-   * @see enableCommunication
    * @param otherSide The target {@link Window} that should receive the messages.
    * @param otherOrigin The origin from the URL of the target. If this isn't correct then the message sending will produce CORS errors.
+   * @see enableCommunication
    */
   public setMessageTarget(otherSide: Window, otherOrigin: string): void {
     this.messageTarget = otherSide
@@ -128,7 +128,7 @@ export abstract class WindowPostMessageCommunicator<
    * Receives the message events and calls the handler that is mapped to the correct type.
    *
    * @param event The received event
-   * @return {@code true} if the event was processed.
+   * @return {@link true} if the event was processed.
    */
   protected handleEvent(event: MessageEvent<MessagePayload<RECEIVE_TYPE>>): void {
     Optional.ofNullable(event.data).ifPresent((payload) => {
diff --git a/src/components/render-page/word-counter.ts b/src/components/render-page/word-counter.ts
index c2ef1759e..f45da87df 100644
--- a/src/components/render-page/word-counter.ts
+++ b/src/components/render-page/word-counter.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -14,8 +14,9 @@ const EXCLUDED_CLASSES = ['katex-mathml']
 /**
  * Checks whether the given node is an excluded HTML tag and therefore should be
  * excluded from counting.
+ *
  * @param node The node to test.
- * @return true if the node should be excluded, false otherwise.
+ * @return {@link true} if the node should be excluded, {@link false} otherwise.
  */
 const isExcludedTag = (node: Element | ChildNode): boolean => {
   return EXCLUDED_TAGS.includes(node.nodeName.toLowerCase())
@@ -24,8 +25,9 @@ const isExcludedTag = (node: Element | ChildNode): boolean => {
 /**
  * Checks whether the given node is a HTML element with an excluded class name,
  * so that it should be excluded.
+ *
  * @param node The node to test.
- * @return true if the node should be excluded, false otherwise.
+ * @return {@link true} if the node should be excluded, {@link false} otherwise.
  */
 const isExcludedClass = (node: Element | ChildNode): boolean => {
   return EXCLUDED_CLASSES.some((excludedClass) => (node as HTMLElement).classList?.contains(excludedClass))
@@ -33,7 +35,8 @@ const isExcludedClass = (node: Element | ChildNode): boolean => {
 
 /**
  * Counts the words of the given node while ignoring empty nodes and excluded
- * nodes. Child nodes will recursively counted as well.
+ * nodes. Child nodes will recursively be counted as well.
+ *
  * @param node The node whose content's words should be counted.
  * @return The number of words counted in this node and its children.
  */
diff --git a/src/components/slide-show-page/slide-show-page-content.tsx b/src/components/slide-show-page/slide-show-page-content.tsx
index d9f83bdd7..e1fc08c8e 100644
--- a/src/components/slide-show-page/slide-show-page-content.tsx
+++ b/src/components/slide-show-page/slide-show-page-content.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -12,6 +12,9 @@ import { useTranslation } from 'react-i18next'
 import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
 import { useTrimmedNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-trimmed-note-markdown-content-without-frontmatter'
 
+/**
+ * Renders the current markdown content as a slideshow.
+ */
 export const SlideShowPageContent: React.FC = () => {
   const markdownContentLines = useTrimmedNoteMarkdownContentWithoutFrontmatter()
   useTranslation()
diff --git a/src/handler-utils/respond-to-matching-request.ts b/src/handler-utils/respond-to-matching-request.ts
index 0b4ccc26c..a8a654637 100644
--- a/src/handler-utils/respond-to-matching-request.ts
+++ b/src/handler-utils/respond-to-matching-request.ts
@@ -22,7 +22,7 @@ export enum HttpMethod {
  * @param res The response object.
  * @param response The response data that will be returned when the HTTP method was the expected one.
  * @param statusCode The status code with which the response will be sent.
- * @return true if the HTTP method of the request is the expected one, false otherwise.
+ * @return {@link true} if the HTTP method of the request is the expected one, {@link false} otherwise.
  */
 export const respondToMatchingRequest = <T>(
   method: HttpMethod,
diff --git a/src/hooks/common/use-app-title.ts b/src/hooks/common/use-app-title.ts
index a95ec09e7..4cfaa414d 100644
--- a/src/hooks/common/use-app-title.ts
+++ b/src/hooks/common/use-app-title.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,7 +8,9 @@ import { useMemo } from 'react'
 import { useApplicationState } from './use-application-state'
 
 /**
- * Returns the app title with branding if set.
+ * Calculates the app title with branding if set.
+ *
+ * @return The app title with branding.
  */
 export const useAppTitle = (): string => {
   const brandingName = useApplicationState((state) => state.config.branding.name)
diff --git a/src/hooks/common/use-application-state.ts b/src/hooks/common/use-application-state.ts
index ccdc80dc8..d2dae3f07 100644
--- a/src/hooks/common/use-application-state.ts
+++ b/src/hooks/common/use-application-state.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,6 +13,7 @@ import type { ApplicationState } from '../../redux/application-state'
  *
  * @param selector A selector function that extracts the needed information from the state.
  * @param checkForEquality An optional custom equality function. If not provided then {@link equal equal from fast-deep-equal} will be used.
+ * @return The requested information
  */
 export const useApplicationState = <TSelected>(
   selector: (state: ApplicationState) => TSelected,
diff --git a/src/hooks/common/use-apply-dark-mode.ts b/src/hooks/common/use-apply-dark-mode.ts
index bee653036..2d0b95219 100644
--- a/src/hooks/common/use-apply-dark-mode.ts
+++ b/src/hooks/common/use-apply-dark-mode.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,6 +7,9 @@
 import { useEffect } from 'react'
 import { useIsDarkModeActivated } from './use-is-dark-mode-activated'
 
+/**
+ * Applies the `dark` css class to the body tag according to the dark mode state.
+ */
 export const useApplyDarkMode = (): void => {
   const darkModeActivated = useIsDarkModeActivated()
 
diff --git a/src/hooks/common/use-array-string-url-parameter.ts b/src/hooks/common/use-array-string-url-parameter.ts
index 6536cd878..6c132ab82 100644
--- a/src/hooks/common/use-array-string-url-parameter.ts
+++ b/src/hooks/common/use-array-string-url-parameter.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,6 +7,12 @@
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 
+/**
+ * Extracts the parameter from the router expected to be an array of values.
+ *
+ * @param parameter The parameter to extract
+ * @return An array of values extracted from the router.
+ */
 export const useArrayStringUrlParameter = (parameter: string): string[] => {
   const router = useRouter()
 
diff --git a/src/hooks/common/use-bind-pointer-movement-event-on-window.ts b/src/hooks/common/use-bind-pointer-movement-event-on-window.ts
index c455a0bf3..a73ac790e 100644
--- a/src/hooks/common/use-bind-pointer-movement-event-on-window.ts
+++ b/src/hooks/common/use-bind-pointer-movement-event-on-window.ts
@@ -15,7 +15,7 @@ import { useEffect } from 'react'
 export const useBindPointerMovementEventOnWindow = (
   onPointerMovement: (event: MouseEvent | TouchEvent) => void,
   onPointerRelease: () => void
-) => {
+): void => {
   useEffect(() => {
     const pointerMovement = onPointerMovement
     const pointerRelease = onPointerRelease
diff --git a/src/hooks/common/use-frontend-base-url.ts b/src/hooks/common/use-frontend-base-url.ts
index 32241c447..53e077ae2 100644
--- a/src/hooks/common/use-frontend-base-url.ts
+++ b/src/hooks/common/use-frontend-base-url.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,6 +7,11 @@
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 
+/**
+ * Retrieves the frontend base url either from an environment variable or from the window location itself.
+ *
+ * @return The base url of the frontend.
+ */
 export const useFrontendBaseUrl = (): string => {
   const { asPath } = useRouter()
   return useMemo(() => {
diff --git a/src/hooks/common/use-is-dark-mode-activated.ts b/src/hooks/common/use-is-dark-mode-activated.ts
index 1a3c233a3..c230ce511 100644
--- a/src/hooks/common/use-is-dark-mode-activated.ts
+++ b/src/hooks/common/use-is-dark-mode-activated.ts
@@ -1,11 +1,16 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { useApplicationState } from './use-application-state'
 
+/**
+ * Extracts the current state of the dark mode from the global application state.
+ *
+ * @return The current state of the dark mode.
+ */
 export const useIsDarkModeActivated = (): boolean => {
   return useApplicationState((state) => state.darkMode.darkMode)
 }
diff --git a/src/hooks/common/use-note-markdown-content.ts b/src/hooks/common/use-note-markdown-content.ts
index 3ee1bda08..e9722adad 100644
--- a/src/hooks/common/use-note-markdown-content.ts
+++ b/src/hooks/common/use-note-markdown-content.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,7 +8,8 @@ import { useApplicationState } from './use-application-state'
 
 /**
  * Extracts the markdown content of the current note from the global application state.
- * @return the markdown content of the note
+ *
+ * @return The markdown content of the note
  */
 export const useNoteMarkdownContent = (): string => {
   return useApplicationState((state) => state.noteDetails.markdownContent.plain)
diff --git a/src/hooks/common/use-note-title.ts b/src/hooks/common/use-note-title.ts
index fabf16f8f..31ef1fe0e 100644
--- a/src/hooks/common/use-note-title.ts
+++ b/src/hooks/common/use-note-title.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,7 +9,9 @@ import { useApplicationState } from './use-application-state'
 import { useMemo } from 'react'
 
 /**
- * Returns the title of the note or a placeholder text.
+ * Retrieves the title of the note or a placeholder text, if no title is set.
+ *
+ * @return The title of the note
  */
 export const useNoteTitle = (): string => {
   const { t } = useTranslation()
diff --git a/src/hooks/common/use-on-input-change.ts b/src/hooks/common/use-on-input-change.ts
index e5b2cd50b..7c7df21b1 100644
--- a/src/hooks/common/use-on-input-change.ts
+++ b/src/hooks/common/use-on-input-change.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,7 @@ import { useCallback } from 'react'
 
 /**
  * Takes an input change event and sends the event value to a state setter.
+ *
  * @param setter The setter method for the state.
  * @return Hook that can be used as callback for onChange.
  */
diff --git a/src/hooks/common/use-single-string-url-parameter.ts b/src/hooks/common/use-single-string-url-parameter.ts
index d366c6661..85b138124 100644
--- a/src/hooks/common/use-single-string-url-parameter.ts
+++ b/src/hooks/common/use-single-string-url-parameter.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -7,6 +7,13 @@
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 
+/**
+ * Extracts the parameter from the router expected to be a single value.
+ *
+ * @param parameter The parameter to extract
+ * @param fallback The fallback returned if there is no value.
+ * @return A value extracted from the router.
+ */
 export const useSingleStringUrlParameter = <T>(parameter: string, fallback: T): string | T => {
   const router = useRouter()
 
diff --git a/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts b/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts
index bd501a478..af26a45f6 100644
--- a/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts
+++ b/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -9,6 +9,8 @@ import { useApplicationState } from './use-application-state'
 
 /**
  * Returns the markdown content from the global application state trimmed to the maximal note length and without the frontmatter lines.
+ *
+ * @return The array of markdown content lines
  */
 export const useTrimmedNoteMarkdownContentWithoutFrontmatter = (): string[] => {
   const maxLength = useApplicationState((state) => state.config.maxDocumentLength)
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 051afc2df..a2a0745a5 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -7,7 +7,7 @@ import { CommonErrorPage } from '../components/error-pages/common-error-page'
 import type { NextPage } from 'next'
 
 /**
- * Renders a hedgedoc themed 404 page
+ * Renders a hedgedoc themed 404 page.
  */
 const Custom404: NextPage = () => {
   return <CommonErrorPage titleI18nKey={'errors.notFound.title'} descriptionI18nKey={'errors.notFound.description'} />
diff --git a/src/pages/p/[noteId].tsx b/src/pages/p/[noteId].tsx
index 1af2bc529..62561b159 100644
--- a/src/pages/p/[noteId].tsx
+++ b/src/pages/p/[noteId].tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,6 +10,9 @@ import { SlideShowPageContent } from '../../components/slide-show-page/slide-sho
 import { NoteAndAppTitleHead } from '../../components/layout/note-and-app-title-head'
 import { NoteLoadingBoundary } from '../../components/common/note-loading-boundary/note-loading-boundary'
 
+/**
+ * Renders a page that is used by the user to hold a presentation. It contains the renderer for the presentation.
+ */
 export const SlideShowPage: React.FC = () => {
   return (
     <NoteLoadingBoundary>
diff --git a/src/redux/note-details/reducers/build-state-from-first-heading-update.ts b/src/redux/note-details/reducers/build-state-from-first-heading-update.ts
index 228e7753f..c97f82a8f 100644
--- a/src/redux/note-details/reducers/build-state-from-first-heading-update.ts
+++ b/src/redux/note-details/reducers/build-state-from-first-heading-update.ts
@@ -10,7 +10,7 @@ import { generateNoteTitle } from '../generate-note-title'
 /**
  * Builds a {@link NoteDetails} redux state with an updated note title from frontmatter data and the first heading.
  * @param state The previous redux state.
- * @param firstHeading The first heading of the document. Should be {@code undefined} if there is no such heading.
+ * @param firstHeading The first heading of the document. Should be {@link undefined} if there is no such heading.
  * @return An updated {@link NoteDetails} redux state.
  */
 export const buildStateFromFirstHeadingUpdate = (state: NoteDetails, firstHeading?: string): NoteDetails => {
diff --git a/src/redux/note-details/reducers/build-state-from-update-cursor-position.ts b/src/redux/note-details/reducers/build-state-from-update-cursor-position.ts
index cce3ebbfc..0e5f8e86f 100644
--- a/src/redux/note-details/reducers/build-state-from-update-cursor-position.ts
+++ b/src/redux/note-details/reducers/build-state-from-update-cursor-position.ts
@@ -22,10 +22,10 @@ export const buildStateFromUpdateCursorPosition = (state: NoteDetails, selection
 }
 
 /**
- * Checks if the from cursor position in the given selection is after the to cursor position.
+ * Checks if the from-cursor position in the given selection is after the to -cursor position.
  *
  * @param selection The cursor selection to check
- * @return {@code true} if the from cursor position is after the to position
+ * @return {@link true} if the from-cursor position is after the to position
  */
 const isFromAfterTo = (selection: CursorSelection): boolean => {
   if (selection.to === undefined) {
diff --git a/src/utils/api-url.ts b/src/utils/api-url.ts
index 12d834f4b..2afe7d12d 100644
--- a/src/utils/api-url.ts
+++ b/src/utils/api-url.ts
@@ -7,4 +7,7 @@
 import { isMockMode } from './test-modes'
 import { backendUrl } from './backend-url'
 
+/**
+ * Generates the url to the api.
+ */
 export const apiUrl = isMockMode ? `/api/mock-backend/private/` : `${backendUrl}api/private/`
diff --git a/src/utils/customize-assets-url.ts b/src/utils/customize-assets-url.ts
index 2ed0bccf6..4a8c867f5 100644
--- a/src/utils/customize-assets-url.ts
+++ b/src/utils/customize-assets-url.ts
@@ -7,6 +7,9 @@
 import { backendUrl } from './backend-url'
 import { isMockMode } from './test-modes'
 
+/**
+ * Generates the url to the assets.
+ */
 export const customizeAssetsUrl = isMockMode
   ? `/mock-public/`
   : process.env.NEXT_PUBLIC_CUSTOMIZE_ASSETS_URL || `${backendUrl}public/`
diff --git a/src/utils/cypress-attribute.ts b/src/utils/cypress-attribute.ts
index 3a452269e..cbc7eb2b5 100644
--- a/src/utils/cypress-attribute.ts
+++ b/src/utils/cypress-attribute.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,7 +16,7 @@ export interface PropsWithDataCypressId {
  * This works only if the runtime is built in test mode.
  *
  * @param identifier The identifier that is used to find the element
- * @return An object if in test mode, undefined otherwise.
+ * @return An object if in test mode, {@link undefined} otherwise.
  */
 export const cypressId = (
   identifier: string | undefined | PropsWithDataCypressId
diff --git a/src/utils/is-client-side-rendering.ts b/src/utils/is-client-side-rendering.ts
index d6f073f86..fbab8d7c8 100644
--- a/src/utils/is-client-side-rendering.ts
+++ b/src/utils/is-client-side-rendering.ts
@@ -1,9 +1,12 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+/**
+ * Detects if the application is running on client side.
+ */
 export const isClientSideRendering = (): boolean => {
   return typeof window !== 'undefined' && typeof window.navigator !== 'undefined'
 }
diff --git a/src/utils/is-positive-answer.ts b/src/utils/is-positive-answer.ts
index e5495e370..710532d30 100644
--- a/src/utils/is-positive-answer.ts
+++ b/src/utils/is-positive-answer.ts
@@ -5,7 +5,8 @@
  */
 
 /**
- * Checks if the given string is a positive answer (yes, true or 1)
+ * Checks if the given string is a positive answer (yes, true or 1).
+ *
  * @param value The value to check
  */
 export const isPositiveAnswer = (value: string) => {
diff --git a/src/utils/logger.ts b/src/utils/logger.ts
index c6a67d818..7ed5d6a7c 100644
--- a/src/utils/logger.ts
+++ b/src/utils/logger.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -16,7 +16,7 @@ export enum LogLevel {
 type OutputFunction = (...data: unknown[]) => void
 
 /**
- * Simple logger that prefixes messages with a timestamp and a name
+ * Simple logger that prefixes messages with a timestamp and a name.
  */
 export class Logger {
   private readonly scope: string
@@ -26,7 +26,8 @@ export class Logger {
   }
 
   /**
-   * Logs a debug message
+   * Logs a debug message.
+   *
    * @param data data to log
    */
   debug(...data: unknown[]): void {
@@ -34,7 +35,8 @@ export class Logger {
   }
 
   /**
-   * Logs a normal informative message
+   * Logs a normal informative message.
+   *
    * @param data data to log
    */
   info(...data: unknown[]): void {
@@ -42,7 +44,8 @@ export class Logger {
   }
 
   /**
-   * Logs a warning
+   * Logs a warning.
+   *
    * @param data data to log
    */
   warn(...data: unknown[]): void {
@@ -50,7 +53,8 @@ export class Logger {
   }
 
   /**
-   * Logs an error
+   * Logs an error.
+   *
    * @param data data to log
    */
   error(...data: unknown[]): void {
diff --git a/src/utils/read-file.ts b/src/utils/read-file.ts
index 97fe8c348..ffd489178 100644
--- a/src/utils/read-file.ts
+++ b/src/utils/read-file.ts
@@ -14,7 +14,7 @@ export enum FileContentFormat {
  *
  * @param file The file to read
  * @param fileReaderMode Defines as what the file content should be formatted.
- * @throws Error if an invalid read mode was given or if the file couldn't be read.
+ * @throws {Error} if an invalid read mode was given or if the file couldn't be read.
  * @return the file content
  */
 export const readFile = async (file: Blob, fileReaderMode: FileContentFormat): Promise<string> => {