From e12dc523f8f4b613d7a2b917380af743df10835a Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Date: Wed, 3 Feb 2021 22:13:04 +0100
Subject: [PATCH] Adjust editor config (#976)

* Adjust editor config

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
---
 .editorconfig                                 |  103 +-
 cypress/integration/banner.spec.ts            |    4 +-
 cypress/integration/documentTitle.spec.ts     |   46 +-
 cypress/integration/export.spec.ts            |    2 +-
 cypress/integration/fileUpload.spec.ts        |   61 +-
 .../integration/highlightedCodeBlock.spec.ts  |    9 +-
 cypress/integration/language.spec.ts          |    3 +-
 cypress/integration/link.spec.ts              |    6 +-
 cypress/integration/maxLength.spec.ts         |    2 +-
 cypress/integration/profile.spec.ts           |    2 +-
 cypress/integration/toolbar.spec.ts           |   48 +-
 cypress/support/checkLinks.ts                 |    5 +-
 cypress/support/config.ts                     |    6 +-
 cypress/support/fill.ts                       |   14 +-
 cypress/support/getMarkdownRenderer.ts        |   16 +-
 cypress/support/login.ts                      |    8 +-
 cypress/support/visit-test-editor.ts          |   26 +-
 cypress/tsconfig.json                         |   11 +-
 src/api/notes/index.ts                        |    4 +-
 src/api/revisions/index.ts                    |    6 +-
 src/api/tokens/index.ts                       |    6 +-
 src/api/users/index.ts                        |    2 +-
 src/api/utils.ts                              |    2 +-
 .../application-loader.scss                   |   80 +-
 .../application-loader/application-loader.tsx |   21 +-
 .../application-loader/loading-screen.tsx     |   16 +-
 src/components/common/branding/branding.tsx   |   22 +-
 src/components/common/cache/cache.test.ts     |   60 +-
 src/components/common/cache/cache.ts          |   14 +-
 .../common/copyable/copy-overlay.tsx          |   45 +-
 .../copy-to-clipboard-button.tsx              |   18 +-
 .../copyable-field/copyable-field.tsx         |   21 +-
 .../common/fork-awesome/fork-awesome-icon.tsx |   12 +-
 .../fork-awesome/fork-awesome-stack.tsx       |   10 +-
 src/components/common/fork-awesome/types.d.ts |  122 +-
 .../hedge-doc-logo-with-text.tsx              |   14 +-
 .../common/hedge-doc-logo/hedge-doc-logo.tsx  |    8 +-
 .../common/hedge-doc-logo/logo_color.svg      |   30 +-
 .../logo_text_bw_horizontal.svg               |   22 +-
 .../logo_text_color_vertical.svg              |   36 +-
 .../logo_text_wb_horizontal.svg               |   25 +-
 src/components/common/hljs/hljs.ts            |  392 ++---
 .../common/icon-button/icon-button.tsx        |   15 +-
 .../icon-button/translated-icon-button.tsx    |   10 +-
 src/components/common/links/external-link.tsx |   26 +-
 src/components/common/links/internal-link.tsx |   20 +-
 .../common/links/translated-external-link.tsx |    8 +-
 .../common/links/translated-internal-link.tsx |    8 +-
 src/components/common/links/types.d.ts        |    2 +-
 .../common/lock-button/lock-button.tsx        |    8 +-
 src/components/common/modals/common-modal.tsx |   19 +-
 .../common/modals/deletion-modal.tsx          |   12 +-
 src/components/common/modals/error-modal.tsx  |    8 +-
 .../common/motd-banner/motd-banner.tsx        |   12 +-
 .../common/number-range/number-range.ts       |    5 +-
 .../common/pagination/pager-item.tsx          |   14 +-
 .../common/pagination/pager-pagination.tsx    |   39 +-
 src/components/common/pagination/pager.tsx    |   21 +-
 .../common/routing/not-found-error-screen.tsx |    6 +-
 src/components/common/routing/redirector.tsx  |    8 +-
 src/components/common/show-if/show-if.tsx     |    8 +-
 .../common/user-avatar/user-avatar.tsx        |   20 +-
 .../ErrorWhileLoadingNoteAlert.tsx            |    8 +-
 .../LoadingNoteAlert.tsx                      |    6 +-
 .../document-infobar.tsx                      |   36 +-
 .../document-read-only-page.tsx               |   34 +-
 .../editor-page/app-bar/app-bar.tsx           |   19 +-
 .../editor-page/app-bar/dark-mode-button.tsx  |   14 +-
 .../editor-page/app-bar/editor-view-mode.tsx  |   12 +-
 .../app-bar/help-button/cheatsheet.tsx        |   64 +-
 .../app-bar/help-button/help-button.tsx       |   38 +-
 .../editor-page/app-bar/help-button/links.tsx |   16 +-
 .../app-bar/help-button/shortcuts.tsx         |   38 +-
 .../editor-page/app-bar/navbar-branding.tsx   |    6 +-
 .../sync-scroll-buttons/buttonIcon.svg        |  140 +-
 .../sync-scroll-buttons.scss                  |    1 +
 .../sync-scroll-buttons.tsx                   |   20 +-
 .../document-info/document-info-line.tsx      |    8 +-
 .../document-info/document-info-modal.tsx     |   88 +-
 .../document-info/document-info-time-line.tsx |    9 +-
 .../document-info/time-from-now.tsx           |    3 +-
 .../document-info/unitalic-bold-text.tsx      |    4 +-
 .../permissions/permission-group-entry.tsx    |   32 +-
 .../permissions/permission-list.tsx           |   62 +-
 .../permissions/permission-modal.tsx          |   84 +-
 .../revisions/revision-modal-list-entry.tsx   |   29 +-
 .../document-bar/revisions/revision-modal.tsx |   75 +-
 .../document-bar/revisions/utils.ts           |    2 +-
 .../document-bar/share/share-modal.tsx        |   28 +-
 .../use-adapted-line-markers-callback.ts      |    4 +-
 .../hooks/use-on-iframe-load.ts               |    4 +-
 .../show-on-prop-change-image-lightbox.tsx    |    4 +-
 .../max-length-warning-modal.tsx              |    9 +-
 src/components/editor-page/editor-page.tsx    |   47 +-
 .../editor-pane/autocompletion/code-block.ts  |    5 +-
 .../autocompletion/collapsable-block.ts       |    2 +-
 .../editor-pane/autocompletion/container.ts   |    3 +-
 .../editor-pane/autocompletion/emoji.ts       |    4 +-
 .../editor-pane/autocompletion/header.ts      |    2 +-
 .../editor-pane/autocompletion/image.ts       |    2 +-
 .../editor-pane/autocompletion/index.ts       |   10 +-
 .../autocompletion/link-and-extra-tag.ts      |    7 +-
 .../editor-pane/autocompletion/pdf.ts         |    2 +-
 .../editor-page/editor-pane/editor-pane.scss  |    1 +
 .../editor-page/editor-pane/editor-pane.tsx   |   34 +-
 .../editor-page/editor-pane/hints.scss        |    2 +-
 .../editor-page/editor-pane/key-map.ts        |   68 +-
 .../editor-page/editor-pane/one-dark.scss     |  199 ++-
 .../editor-pane/status-bar/status-bar.tsx     |   25 +-
 .../editor-preference-boolean-property.tsx    |   15 +-
 .../editor-preference-input.tsx               |   15 +-
 .../editor-preference-ligatures-select.tsx    |   11 +-
 .../editor-preference-number-property.tsx     |    5 +-
 .../editor-preference-select-property.tsx     |   15 +-
 .../editor-preferences/editor-preferences.tsx |   34 +-
 .../emoji-picker/emoji-picker-button.tsx      |   11 +-
 .../tool-bar/emoji-picker/emoji-picker.tsx    |   16 +-
 .../tool-bar/emoji-picker/icon-names.ts       | 1516 ++++++++---------
 .../table-picker/custom-table-size-modal.tsx  |   42 +-
 .../table-picker/table-picker-button.tsx      |   11 +-
 .../tool-bar/table-picker/table-picker.scss   |    1 -
 .../tool-bar/table-picker/table-picker.tsx    |   53 +-
 .../editor-pane/tool-bar/tool-bar.tsx         |   67 +-
 .../tool-bar/upload-image-button.tsx          |    6 +-
 .../editor-pane/tool-bar/utils/emojiUtils.ts  |    8 +-
 .../tool-bar/utils/toolbarButtonUtils.test.ts |  146 +-
 .../tool-bar/utils/toolbarButtonUtils.ts      |   38 +-
 .../editor-page/editor-pane/upload-handler.ts |    6 +-
 .../editor-page/hooks/useViewModeShortcuts.ts |    2 +-
 .../note-frontmatter/note-frontmatter.test.ts |  130 +-
 .../note-frontmatter/note-frontmatter.ts      |   11 +-
 .../renderer-pane/hooks/use-on-iframe-load.ts |    4 +-
 .../renderer-pane/render-iframe.tsx           |   25 +-
 .../show-on-prop-change-image-lightbox.tsx    |    4 +-
 .../yaml-array-deprecation-alert.tsx          |   12 +-
 .../sidebar/delete-note-sidebar-entry.tsx     |   18 +-
 .../sidebar/document-info-sidebar-entry.tsx   |    8 +-
 .../sidebar/export-markdown-sidebar-entry.tsx |    4 +-
 .../sidebar/export-menu-sidebar-menu.tsx      |   27 +-
 .../sidebar/import-markdown-sidebar-entry.tsx |   10 +-
 .../sidebar/import-menu-sidebar-menu.tsx      |   16 +-
 .../sidebar/permissions-sidebar-entry.tsx     |    8 +-
 .../sidebar/pin-note-sidebar-entry.tsx        |    4 +-
 .../sidebar/revision-sidebar-entry.tsx        |    8 +-
 .../sidebar/share-sidebar-entry.tsx           |    8 +-
 .../editor-page/sidebar/sidebar-button.tsx    |   18 +-
 .../editor-page/sidebar/sidebar-menu.tsx      |   14 +-
 .../editor-page/sidebar/sidebar.tsx           |   28 +-
 .../editor-page/sidebar/style/colors.scss     |    2 +-
 src/components/editor-page/sidebar/types.ts   |    2 +-
 .../editor-page/sidebar/upload-input.tsx      |   17 +-
 .../active-indicator.tsx                      |    2 +-
 .../users-online-sidebar-menu/user-line.tsx   |   11 +-
 .../users-online-sidebar-menu.tsx             |   29 +-
 .../splitter/split-divider/split-divider.tsx  |    6 +-
 .../editor-page/splitter/splitter.tsx         |   17 +-
 .../hooks/use-synced-scrolling.ts             |    8 +-
 .../table-of-contents/table-of-contents.tsx   |   40 +-
 src/components/editor-page/utils.ts           |    3 +-
 .../error-boundary/error-boundary.tsx         |   28 +-
 .../entry-menu/delete-note-item.tsx           |   22 +-
 .../dropdown-item-with-deletion-modal.tsx     |   28 +-
 .../history-page/entry-menu/entry-menu.tsx    |   25 +-
 .../entry-menu/remove-note-entry-item.tsx     |   22 +-
 .../history-card/history-card-list.tsx        |   18 +-
 .../history-card/history-card.tsx             |   43 +-
 .../history-content/history-content.tsx       |   54 +-
 src/components/history-page/history-page.tsx  |   60 +-
 .../history-table/history-table-row.tsx       |   31 +-
 .../history-table/history-table.tsx           |   44 +-
 .../history-toolbar/clear-history-button.tsx  |   26 +-
 .../history-toolbar/export-history-button.tsx |    8 +-
 .../history-toolbar/history-toolbar.tsx       |   78 +-
 .../history-toolbar/import-history-button.tsx |   20 +-
 .../history-page/pin-button/pin-button.tsx    |   10 +-
 .../history-page/sort-button/sort-button.tsx  |   19 +-
 src/components/history-page/utils.ts          |   43 +-
 .../cover-buttons/cover-buttons.tsx           |   11 +-
 src/components/intro-page/feature-links.tsx   |   18 +-
 src/components/intro-page/intro-page.tsx      |   16 +-
 .../landing-layout/footer/footer.tsx          |    6 +-
 .../landing-layout/footer/language-picker.tsx |   23 +-
 .../footer/powered-by-links.tsx               |   12 +-
 .../landing-layout/footer/social-links.tsx    |   20 +-
 .../landing-layout/footer/version-info.tsx    |   38 +-
 .../landing-layout/landing-layout.tsx         |   10 +-
 .../navigation/header-bar/header-bar.tsx      |   20 +-
 .../navigation/header-nav-link.tsx            |   10 +-
 .../navigation/new-guest-note-button.tsx      |    8 +-
 .../navigation/new-user-note-button.tsx       |    8 +-
 .../navigation/sign-in-button.tsx             |   21 +-
 .../navigation/user-dropdown.tsx              |   26 +-
 .../social-link-button/social-link-button.tsx |   14 +-
 .../login-page/auth/via-internal.tsx          |   28 +-
 src/components/login-page/auth/via-ldap.tsx   |   26 +-
 .../login-page/auth/via-one-click.tsx         |   18 +-
 src/components/login-page/auth/via-openid.tsx |   21 +-
 src/components/login-page/login-page.tsx      |   46 +-
 .../basic-markdown-renderer.tsx               |   11 +-
 .../document-length-limit-reached-alert.tsx   |    6 +-
 .../full-markdown-renderer.tsx                |   18 +-
 .../markdown-renderer/github-markdown.scss    |  165 +-
 .../hooks/use-extract-first-headline.ts       |    5 +-
 .../hooks/use-post-toc-ast-on-change.ts       |    2 +-
 .../use-replacer-instance-list-creator.ts     |    2 +-
 .../markdown-renderer/invalid-yaml-alert.tsx  |    2 +-
 .../BasicMarkdownItConfigurator.tsx           |    8 +-
 .../FullMarkdownItConfigurator.tsx            |    4 +-
 .../MarkdownItConfigurator.tsx                |   18 +-
 .../markdown-it-plugins/alert-container.ts    |    2 +-
 .../markdown-it-plugins/emoji/mapping.ts      |   16 +-
 .../markdown-it-plugins/headline-anchors.ts   |    2 +-
 .../markdown-it-plugins/quote-extra.ts        |    6 +-
 .../markdown-it-plugins/spoiler-container.ts  |    4 +-
 .../replace-legacy-pdf-short-code.ts          |    2 +-
 .../replace-legacy-slideshare-short-code.ts   |    2 +-
 .../replace-legacy-speakerdeck-short-code.ts  |    2 +-
 .../replace-components/ComponentReplacer.ts   |    2 +-
 .../replace-components/abc/abc-frame.tsx      |    7 +-
 .../replace-components/abc/abc-replacer.tsx   |   10 +-
 .../asciinema/asciinema-frame.tsx             |   18 +-
 .../asciinema/asciinema-replacer.tsx          |   18 +-
 .../asciinema/replace-asciinema-link.ts       |    2 +-
 .../replace-components/csv/csv-parser.test.ts |    9 +-
 .../replace-components/csv/csv-parser.ts      |    3 +-
 .../replace-components/csv/csv-replacer.tsx   |   10 +-
 .../replace-components/csv/csv-table.tsx      |   66 +-
 .../flow/flowchart-replacer.tsx               |   10 +-
 .../flow/flowchart/flowchart.tsx              |   20 +-
 .../replace-components/gist/gist-frame.tsx    |   16 +-
 .../replace-components/gist/gist-replacer.tsx |   23 +-
 .../gist/replace-gist-link.ts                 |    2 +-
 .../gist/replace-legacy-gist-short-code.ts    |    2 +-
 .../graphviz/graphviz-frame.tsx               |   24 +-
 .../graphviz/graphviz-replacer.tsx            |   10 +-
 .../highlighted-code/highlighted-code.scss    |    1 +
 .../highlighted-code/highlighted-code.tsx     |   38 +-
 .../highlighted-fence-replacer.tsx            |   15 +-
 .../image/image-lightbox-modal.tsx            |   25 +-
 .../image/image-replacer.tsx                  |   20 +-
 .../image/proxy-image-frame.tsx               |    2 +-
 .../katex/katex-replacer.tsx                  |   24 +-
 .../linemarker/line-number-marker.ts          |    6 +-
 .../linemarker/linemarker-replacer.tsx        |    8 +-
 .../link-replacer/link-replacer.tsx           |   15 +-
 .../markmap/markmap-frame.tsx                 |   24 +-
 .../markmap/markmap-loader.ts                 |    9 +-
 .../markmap/markmap-replacer.tsx              |   10 +-
 .../mermaid/mermaid-chart.tsx                 |   39 +-
 .../mermaid/mermaid-replacer.tsx              |   10 +-
 .../replace-components/mermaid/mermaid.scss   |    2 +-
 .../one-click-frame/one-click-embedding.tsx   |   41 +-
 .../quote-options/quote-options-replacer.tsx  |   10 +-
 .../sequence-diagram/deprecation-warning.tsx  |    8 +-
 .../sequence-diagram-replacer.tsx             |   10 +-
 .../task-list/task-list-replacer.tsx          |   20 +-
 .../replace-components/utils.ts               |    4 +-
 .../vega-lite/vega-chart.tsx                  |   23 +-
 .../vega-lite/vega-replacer.tsx               |   10 +-
 .../vimeo/replace-legacy-vimeo-short-code.ts  |    2 +-
 .../vimeo/replace-vimeo-link.ts               |    2 +-
 .../replace-components/vimeo/vimeo-frame.tsx  |   20 +-
 .../vimeo/vimeo-replacer.tsx                  |   20 +-
 .../replace-legacy-youtube-short-code.ts      |    2 +-
 .../youtube/replace-youtube-link.ts           |    2 +-
 .../youtube/youtube-frame.tsx                 |   18 +-
 .../youtube/youtube-replacer.tsx              |   20 +-
 .../utils/calculate-line-marker-positions.ts  |   47 +-
 .../utils/html-react-transformer.tsx          |    6 +-
 .../utils/line-number-mapping.ts              |    2 +-
 .../access-tokens/profile-access-tokens.tsx   |   56 +-
 src/components/profile-page/profile-page.tsx  |   12 +-
 .../settings/profile-account-management.tsx   |   26 +-
 .../settings/profile-change-password.tsx      |   22 +-
 .../settings/profile-display-name.tsx         |   25 +-
 .../register-page/register-page.tsx           |   58 +-
 .../render-page/iframe-communicator.ts        |   20 +-
 .../iframe-editor-to-renderer-communicator.ts |   92 +-
 .../iframe-renderer-to-editor-communicator.ts |   44 +-
 .../render-page/markdown-document.tsx         |   50 +-
 src/components/render-page/render-page.tsx    |   22 +-
 src/external-types/abcjs/abcjs.d.ts           |    2 +-
 src/external-types/highlight.js/core.d.ts     |    8 +-
 src/hooks/common/use-document-title.ts        |    4 +-
 src/hooks/common/use-frontend-base-url.ts     |    8 +-
 src/index.tsx                                 |    4 +-
 src/links.json                                |   14 +-
 src/redux/editor/methods.ts                   |    2 +-
 src/redux/note-details/reducers.ts            |    2 +-
 src/service-worker-registration.ts            |  121 +-
 src/service-worker.ts                         |    5 +-
 src/style/bootstrap-color-theme/_buttons.scss |    1 +
 src/style/bootstrap-color-theme/_card.scss    |    2 +-
 src/style/bootstrap-color-theme/_code.scss    |    1 +
 src/style/bootstrap-color-theme/_navbar.scss  |    2 +
 src/style/bootstrap-color-theme/_popover.scss |    3 +
 src/style/bootstrap-color-theme/_tables.scss  |    1 -
 src/style/bootstrap-color-theme/_tooltip.scss |    3 +
 .../utilities/_borders.scss                   |   24 +-
 .../utilities/_text.scss                      |   22 +-
 src/style/variables.light.scss                |    4 +-
 301 files changed, 4393 insertions(+), 3741 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index e4cfe071d..5675928b7 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -51,31 +51,39 @@ ij_scss_hex_color_upper_case = false
 ij_scss_keep_blank_lines_in_code = 2
 ij_scss_keep_indents_on_empty_lines = false
 ij_scss_keep_single_line_blocks = false
-ij_scss_properties_order = font,font-family,font-size,font-weight,font-style,font-variant,font-size-adjust,font-stretch,line-height,position,z-index,top,right,bottom,left,display,visibility,float,clear,overflow,overflow-x,overflow-y,clip,zoom,align-content,align-items,align-self,flex,flex-flow,flex-basis,flex-direction,flex-grow,flex-shrink,flex-wrap,justify-content,order,box-sizing,width,min-width,max-width,height,min-height,max-height,margin,margin-top,margin-right,margin-bottom,margin-left,padding,padding-top,padding-right,padding-bottom,padding-left,table-layout,empty-cells,caption-side,border-spacing,border-collapse,list-style,list-style-position,list-style-type,list-style-image,content,quotes,counter-reset,counter-increment,resize,cursor,user-select,nav-index,nav-up,nav-right,nav-down,nav-left,transition,transition-delay,transition-timing-function,transition-duration,transition-property,transform,transform-origin,animation,animation-name,animation-duration,animation-play-state,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,text-align,text-align-last,vertical-align,white-space,text-decoration,text-emphasis,text-emphasis-color,text-emphasis-style,text-emphasis-position,text-indent,text-justify,letter-spacing,word-spacing,text-outline,text-transform,text-wrap,text-overflow,text-overflow-ellipsis,text-overflow-mode,word-wrap,word-break,tab-size,hyphens,pointer-events,opacity,color,border,border-width,border-style,border-color,border-top,border-top-width,border-top-style,border-top-color,border-right,border-right-width,border-right-style,border-right-color,border-bottom,border-bottom-width,border-bottom-style,border-bottom-color,border-left,border-left-width,border-left-style,border-left-color,border-radius,border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-image,border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat,outline,outline-width,outline-style,outline-color,outline-offset,background,background-color,background-image,background-repeat,background-attachment,background-position,background-position-x,background-position-y,background-clip,background-origin,background-size,box-decoration-break,box-shadow,text-shadow
+ij_scss_properties_order = font, font-family, font-size, font-weight, font-style, font-variant, font-size-adjust, font-stretch, line-height, position, z-index, top, right, bottom, left, display, visibility, float, clear, overflow, overflow-x, overflow-y, clip, zoom, align-content, align-items, align-self, flex, flex-flow, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, order, box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, table-layout, empty-cells, caption-side, border-spacing, border-collapse, list-style, list-style-position, list-style-type, list-style-image, content, quotes, counter-reset, counter-increment, resize, cursor, user-select, nav-index, nav-up, nav-right, nav-down, nav-left, transition, transition-delay, transition-timing-function, transition-duration, transition-property, transform, transform-origin, animation, animation-name, animation-duration, animation-play-state, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, text-align, text-align-last, vertical-align, white-space, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-style, text-emphasis-position, text-indent, text-justify, letter-spacing, word-spacing, text-outline, text-transform, text-wrap, text-overflow, text-overflow-ellipsis, text-overflow-mode, word-wrap, word-break, tab-size, hyphens, pointer-events, opacity, color, border, border-width, border-style, border-color, border-top, border-top-width, border-top-style, border-top-color, border-right, border-right-width, border-right-style, border-right-color, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color, border-left, border-left-width, border-left-style, border-left-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, outline, outline-width, outline-style, outline-color, outline-offset, background, background-color, background-image, background-repeat, background-attachment, background-position, background-position-x, background-position-y, background-clip, background-origin, background-size, box-decoration-break, box-shadow, text-shadow
 ij_scss_space_after_colon = true
 ij_scss_space_before_opening_brace = true
 ij_scss_use_double_quotes = true
 ij_scss_value_alignment = 0
 
-[{*.ats,*.ts,*.tsx}]
+[.editorconfig]
+ij_editorconfig_align_group_field_declarations = false
+ij_editorconfig_space_after_colon = false
+ij_editorconfig_space_after_comma = true
+ij_editorconfig_space_before_colon = false
+ij_editorconfig_space_before_comma = false
+ij_editorconfig_spaces_around_assignment_operators = true
+
+[{*.ats, *.ts, *.tsx}]
 indent_size = 2
 tab_width = 2
 ij_continuation_indent_size = 2
 ij_typescript_align_imports = false
 ij_typescript_align_multiline_array_initializer_expression = false
 ij_typescript_align_multiline_binary_operation = false
-ij_typescript_align_multiline_chained_methods = false
+ij_typescript_align_multiline_chained_methods = true
 ij_typescript_align_multiline_extends_list = false
 ij_typescript_align_multiline_for = true
-ij_typescript_align_multiline_parameters = true
+ij_typescript_align_multiline_parameters = false
 ij_typescript_align_multiline_parameters_in_calls = false
 ij_typescript_align_multiline_ternary_operation = false
 ij_typescript_align_object_properties = 0
-ij_typescript_align_union_types = false
+ij_typescript_align_union_types = true
 ij_typescript_align_var_statements = 0
 ij_typescript_array_initializer_new_line_after_left_brace = false
 ij_typescript_array_initializer_right_brace_on_new_line = false
-ij_typescript_array_initializer_wrap = off
+ij_typescript_array_initializer_wrap = normal
 ij_typescript_assignment_wrap = off
 ij_typescript_binary_operation_sign_on_next_line = false
 ij_typescript_binary_operation_wrap = off
@@ -95,26 +103,26 @@ ij_typescript_catch_on_new_line = false
 ij_typescript_chained_call_dot_on_new_line = true
 ij_typescript_class_brace_style = end_of_line
 ij_typescript_comma_on_new_line = false
-ij_typescript_do_while_brace_force = never
+ij_typescript_do_while_brace_force = always
 ij_typescript_else_on_new_line = false
-ij_typescript_enforce_trailing_comma = keep
+ij_typescript_enforce_trailing_comma = remove
 ij_typescript_extends_keyword_wrap = off
 ij_typescript_extends_list_wrap = off
 ij_typescript_field_prefix = _
 ij_typescript_file_name_style = relaxed
 ij_typescript_finally_on_new_line = false
-ij_typescript_for_brace_force = never
+ij_typescript_for_brace_force = always
 ij_typescript_for_statement_new_line_after_left_paren = false
 ij_typescript_for_statement_right_paren_on_new_line = false
 ij_typescript_for_statement_wrap = off
-ij_typescript_force_quote_style = false
+ij_typescript_force_quote_style = true
 ij_typescript_force_semicolon_style = true
 ij_typescript_function_expression_brace_style = end_of_line
-ij_typescript_if_brace_force = never
+ij_typescript_if_brace_force = always
 ij_typescript_import_merge_members = global
 ij_typescript_import_prefer_absolute_path = global
 ij_typescript_import_sort_members = true
-ij_typescript_import_sort_module_name = true
+ij_typescript_import_sort_module_name = false
 ij_typescript_import_use_node_resolution = true
 ij_typescript_imports_wrap = on_every_item
 ij_typescript_indent_case_from_switch = true
@@ -122,7 +130,7 @@ ij_typescript_indent_chained_calls = true
 ij_typescript_indent_package_children = 0
 ij_typescript_jsdoc_include_types = false
 ij_typescript_jsx_attribute_value = braces
-ij_typescript_keep_blank_lines_in_code = 1
+ij_typescript_keep_blank_lines_in_code = 2
 ij_typescript_keep_first_column_comment = true
 ij_typescript_keep_indents_on_empty_lines = false
 ij_typescript_keep_line_breaks = true
@@ -131,11 +139,11 @@ ij_typescript_keep_simple_methods_in_one_line = false
 ij_typescript_line_comment_add_space = true
 ij_typescript_line_comment_at_first_column = false
 ij_typescript_method_brace_style = end_of_line
-ij_typescript_method_call_chain_wrap = off
+ij_typescript_method_call_chain_wrap = split_into_lines
 ij_typescript_method_parameters_new_line_after_left_paren = false
 ij_typescript_method_parameters_right_paren_on_new_line = false
 ij_typescript_method_parameters_wrap = off
-ij_typescript_object_literal_wrap = on_every_item
+ij_typescript_object_literal_wrap = off
 ij_typescript_parentheses_expression_new_line_after_left_paren = false
 ij_typescript_parentheses_expression_right_paren_on_new_line = false
 ij_typescript_place_assignment_sign_on_next_line = false
@@ -144,7 +152,7 @@ ij_typescript_prefer_explicit_types_function_expression_returns = false
 ij_typescript_prefer_explicit_types_function_returns = false
 ij_typescript_prefer_explicit_types_vars_fields = false
 ij_typescript_prefer_parameters_wrap = false
-ij_typescript_reformat_c_style_comments = false
+ij_typescript_reformat_c_style_comments = true
 ij_typescript_space_after_colon = true
 ij_typescript_space_after_comma = true
 ij_typescript_space_after_dots_in_rest_parameter = false
@@ -175,7 +183,7 @@ ij_typescript_space_before_if_left_brace = true
 ij_typescript_space_before_if_parentheses = true
 ij_typescript_space_before_method_call_parentheses = false
 ij_typescript_space_before_method_left_brace = true
-ij_typescript_space_before_method_parentheses = true
+ij_typescript_space_before_method_parentheses = false
 ij_typescript_space_before_property_colon = false
 ij_typescript_space_before_quest = true
 ij_typescript_space_before_switch_left_brace = true
@@ -202,7 +210,7 @@ ij_typescript_spaces_within_catch_parentheses = false
 ij_typescript_spaces_within_for_parentheses = false
 ij_typescript_spaces_within_if_parentheses = false
 ij_typescript_spaces_within_imports = true
-ij_typescript_spaces_within_interpolation_expressions = false
+ij_typescript_spaces_within_interpolation_expressions = true
 ij_typescript_spaces_within_method_call_parentheses = false
 ij_typescript_spaces_within_method_parentheses = false
 ij_typescript_spaces_within_object_literal_braces = true
@@ -215,15 +223,15 @@ ij_typescript_spaces_within_while_parentheses = false
 ij_typescript_special_else_if_treatment = true
 ij_typescript_ternary_operation_signs_on_next_line = false
 ij_typescript_ternary_operation_wrap = off
-ij_typescript_union_types_wrap = on_every_item
+ij_typescript_union_types_wrap = normal
 ij_typescript_use_chained_calls_group_indents = false
 ij_typescript_use_double_quotes = false
 ij_typescript_use_explicit_js_extension = global
 ij_typescript_use_path_mapping = always
 ij_typescript_use_public_modifier = false
 ij_typescript_use_semicolon_after_statement = false
-ij_typescript_var_declaration_wrap = normal
-ij_typescript_while_brace_force = never
+ij_typescript_var_declaration_wrap = on_every_item
+ij_typescript_while_brace_force = always
 ij_typescript_while_on_new_line = false
 ij_typescript_wrap_comments = false
 
@@ -275,8 +283,8 @@ ij_javascript_for_brace_force = never
 ij_javascript_for_statement_new_line_after_left_paren = false
 ij_javascript_for_statement_right_paren_on_new_line = false
 ij_javascript_for_statement_wrap = off
-ij_javascript_force_quote_style = true
-ij_javascript_force_semicolon_style = true
+ij_javascript_force_quote_style = false
+ij_javascript_force_semicolon_style = false
 ij_javascript_function_expression_brace_style = end_of_line
 ij_javascript_if_brace_force = never
 ij_javascript_import_merge_members = global
@@ -289,12 +297,12 @@ ij_javascript_indent_case_from_switch = true
 ij_javascript_indent_chained_calls = true
 ij_javascript_indent_package_children = 0
 ij_javascript_jsx_attribute_value = braces
-ij_javascript_keep_blank_lines_in_code = 1
+ij_javascript_keep_blank_lines_in_code = 2
 ij_javascript_keep_first_column_comment = true
 ij_javascript_keep_indents_on_empty_lines = false
 ij_javascript_keep_line_breaks = true
-ij_javascript_keep_simple_blocks_in_one_line = true
-ij_javascript_keep_simple_methods_in_one_line = true
+ij_javascript_keep_simple_blocks_in_one_line = false
+ij_javascript_keep_simple_methods_in_one_line = false
 ij_javascript_line_comment_add_space = true
 ij_javascript_line_comment_at_first_column = false
 ij_javascript_method_brace_style = end_of_line
@@ -337,12 +345,12 @@ ij_javascript_space_before_for_left_brace = true
 ij_javascript_space_before_for_parentheses = true
 ij_javascript_space_before_for_semicolon = false
 ij_javascript_space_before_function_left_parenth = true
-ij_javascript_space_before_generator_mult = true
+ij_javascript_space_before_generator_mult = false
 ij_javascript_space_before_if_left_brace = true
 ij_javascript_space_before_if_parentheses = true
 ij_javascript_space_before_method_call_parentheses = false
 ij_javascript_space_before_method_left_brace = true
-ij_javascript_space_before_method_parentheses = true
+ij_javascript_space_before_method_parentheses = false
 ij_javascript_space_before_property_colon = false
 ij_javascript_space_before_quest = true
 ij_javascript_space_before_switch_left_brace = true
@@ -368,11 +376,11 @@ ij_javascript_spaces_within_brackets = false
 ij_javascript_spaces_within_catch_parentheses = false
 ij_javascript_spaces_within_for_parentheses = false
 ij_javascript_spaces_within_if_parentheses = false
-ij_javascript_spaces_within_imports = true
+ij_javascript_spaces_within_imports = false
 ij_javascript_spaces_within_interpolation_expressions = false
 ij_javascript_spaces_within_method_call_parentheses = false
 ij_javascript_spaces_within_method_parentheses = false
-ij_javascript_spaces_within_object_literal_braces = true
+ij_javascript_spaces_within_object_literal_braces = false
 ij_javascript_spaces_within_object_type_braces = true
 ij_javascript_spaces_within_parentheses = false
 ij_javascript_spaces_within_switch_parentheses = false
@@ -380,22 +388,22 @@ ij_javascript_spaces_within_type_assertion = false
 ij_javascript_spaces_within_union_types = true
 ij_javascript_spaces_within_while_parentheses = false
 ij_javascript_special_else_if_treatment = true
-ij_javascript_ternary_operation_signs_on_next_line = true
+ij_javascript_ternary_operation_signs_on_next_line = false
 ij_javascript_ternary_operation_wrap = off
 ij_javascript_union_types_wrap = on_every_item
 ij_javascript_use_chained_calls_group_indents = false
-ij_javascript_use_double_quotes = false
+ij_javascript_use_double_quotes = true
 ij_javascript_use_explicit_js_extension = global
 ij_javascript_use_path_mapping = always
 ij_javascript_use_public_modifier = false
-ij_javascript_use_semicolon_after_statement = false
+ij_javascript_use_semicolon_after_statement = true
 ij_javascript_var_declaration_wrap = normal
 ij_javascript_while_brace_force = never
 ij_javascript_while_on_new_line = false
 ij_javascript_wrap_comments = false
 
 [{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config}]
-indent_size = 4
+indent_size = 2
 ij_json_keep_blank_lines_in_code = 0
 ij_json_keep_indents_on_empty_lines = false
 ij_json_keep_line_breaks = true
@@ -423,7 +431,7 @@ ij_html_keep_indents_on_empty_lines = false
 ij_html_keep_line_breaks = true
 ij_html_keep_line_breaks_in_text = true
 ij_html_keep_whitespaces = false
-ij_html_keep_whitespaces_inside = span,pre,textarea
+ij_html_keep_whitespaces_inside = span, pre, textarea
 ij_html_line_comment_at_first_column = true
 ij_html_new_line_after_last_attribute = never
 ij_html_new_line_before_first_attribute = never
@@ -433,9 +441,30 @@ ij_html_space_after_tag_name = false
 ij_html_space_around_equality_in_attribute = false
 ij_html_space_inside_empty_tag = false
 ij_html_text_wrap = normal
+ij_html_uniform_ident = false
 
-[{*.yaml,*.yml}]
+[{*.markdown, *.md}]
+ij_markdown_force_one_space_after_blockquote_symbol = true
+ij_markdown_force_one_space_after_header_symbol = true
+ij_markdown_force_one_space_after_list_bullet = true
+ij_markdown_force_one_space_between_words = true
+ij_markdown_keep_indents_on_empty_lines = false
+ij_markdown_max_lines_around_block_elements = 1
+ij_markdown_max_lines_around_header = 1
+ij_markdown_max_lines_between_paragraphs = 1
+ij_markdown_min_lines_around_block_elements = 1
+ij_markdown_min_lines_around_header = 1
+ij_markdown_min_lines_between_paragraphs = 1
+
+[{*.yaml, *.yml}]
 indent_size = 2
+ij_yaml_align_values_properties = do_not_align
+ij_yaml_autoinsert_sequence_marker = true
+ij_yaml_block_mapping_on_new_line = false
+ij_yaml_indent_sequence_value = true
 ij_yaml_keep_indents_on_empty_lines = false
 ij_yaml_keep_line_breaks = true
-
+ij_yaml_sequence_on_new_line = false
+ij_yaml_space_before_colon = false
+ij_yaml_spaces_within_braces = true
+ij_yaml_spaces_within_brackets = true
diff --git a/cypress/integration/banner.spec.ts b/cypress/integration/banner.spec.ts
index 1965bbebd..6dcbcd34f 100644
--- a/cypress/integration/banner.spec.ts
+++ b/cypress/integration/banner.spec.ts
@@ -24,7 +24,9 @@ describe('Banner', () => {
       .find('.fa-times')
       .click()
       .then(() => {
-        expect(localStorage.getItem('bannerTimeStamp')).to.equal(banner.timestamp)
+        expect(localStorage.getItem('bannerTimeStamp'))
+          .to
+          .equal(banner.timestamp)
       })
     cy.get('.alert-primary.show')
       .should('not.exist')
diff --git a/cypress/integration/documentTitle.spec.ts b/cypress/integration/documentTitle.spec.ts
index 82c2292f6..8d7745708 100644
--- a/cypress/integration/documentTitle.spec.ts
+++ b/cypress/integration/documentTitle.spec.ts
@@ -16,73 +16,73 @@ describe('Document Title', () => {
 
   describe('title should be yaml metadata title', () => {
     it('just yaml metadata title', () => {
-      cy.codemirrorFill(`---\ntitle: ${title}\n---`)
+      cy.codemirrorFill(`---\ntitle: ${ title }\n---`)
       cy.title()
-        .should('eq', `${title} - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } - HedgeDoc @ ${ branding.name }`)
     })
 
     it('yaml metadata title and opengraph title', () => {
-      cy.codemirrorFill(`---\ntitle: ${title}\nopengraph:\n  title: False title\n---`)
+      cy.codemirrorFill(`---\ntitle: ${ title }\nopengraph:\n  title: False title\n---`)
       cy.title()
-        .should('eq', `${title} - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } - HedgeDoc @ ${ branding.name }`)
     })
 
     it('yaml metadata title, opengraph title and first heading', () => {
-      cy.codemirrorFill(`---\ntitle: ${title}\nopengraph:\n  title: False title\n---\n# a first title`)
+      cy.codemirrorFill(`---\ntitle: ${ title }\nopengraph:\n  title: False title\n---\n# a first title`)
       cy.title()
-        .should('eq', `${title} - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } - HedgeDoc @ ${ branding.name }`)
     })
   })
 
   describe('title should be opengraph title', () => {
     it('just opengraph title', () => {
-      cy.codemirrorFill(`---\nopengraph:\n  title: ${title}\n---`)
+      cy.codemirrorFill(`---\nopengraph:\n  title: ${ title }\n---`)
       cy.title()
-        .should('eq', `${title} - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } - HedgeDoc @ ${ branding.name }`)
     })
 
     it('opengraph title and first heading', () => {
-      cy.codemirrorFill(`---\nopengraph:\n  title: ${title}\n---\n# a first title`)
+      cy.codemirrorFill(`---\nopengraph:\n  title: ${ title }\n---\n# a first title`)
       cy.title()
-        .should('eq', `${title} - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } - HedgeDoc @ ${ branding.name }`)
     })
   })
 
   describe('title should be first heading', () => {
     it('just first heading', () => {
-      cy.codemirrorFill(`# ${title}`)
+      cy.codemirrorFill(`# ${ title }`)
       cy.title()
-        .should('eq', `${title} - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } - HedgeDoc @ ${ branding.name }`)
     })
 
     it('just first heading with alt-text instead of image', () => {
-      cy.codemirrorFill(`# ${title} ![abc](https://dummyimage.com/48)`)
+      cy.codemirrorFill(`# ${ title } ![abc](https://dummyimage.com/48)`)
       cy.title()
-        .should('eq', `${title} abc - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } abc - HedgeDoc @ ${ branding.name }`)
     })
 
     it('just first heading without link syntax', () => {
-      cy.codemirrorFill(`# ${title} [link](https://hedgedoc.org)`)
+      cy.codemirrorFill(`# ${ title } [link](https://hedgedoc.org)`)
       cy.title()
-        .should('eq', `${title} link - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } link - HedgeDoc @ ${ branding.name }`)
     })
 
     it('markdown syntax removed first', () => {
-      cy.codemirrorFill(`# ${title} 1*2*3 4*5**`)
+      cy.codemirrorFill(`# ${ title } 1*2*3 4*5**`)
       cy.title()
-        .should('eq', `${title} 123 4*5** - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } 123 4*5** - HedgeDoc @ ${ branding.name }`)
     })
 
     it('markdown syntax removed second', () => {
-      cy.codemirrorFill(`# ${title} **1 2*`)
+      cy.codemirrorFill(`# ${ title } **1 2*`)
       cy.title()
-        .should('eq', `${title} *1 2 - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } *1 2 - HedgeDoc @ ${ branding.name }`)
     })
 
     it('markdown syntax removed third', () => {
-      cy.codemirrorFill(`# ${title} _asd_`)
+      cy.codemirrorFill(`# ${ title } _asd_`)
       cy.title()
-        .should('eq', `${title} asd - HedgeDoc @ ${branding.name}`)
+        .should('eq', `${ title } asd - HedgeDoc @ ${ branding.name }`)
     })
 
     it('katex code looks right', () => {
@@ -93,7 +93,7 @@ describe('Document Title', () => {
       cy.get('.CodeMirror textarea')
         .type('{Enter}{Enter}{Enter}{Enter}{Enter}') //This is a workaround because I don't know how to make sure, that the title gets updated in time.
       cy.title()
-        .should('eq', `α-foo - HedgeDoc @ ${branding.name}`)
+        .should('eq', `α-foo - HedgeDoc @ ${ branding.name }`)
     })
   })
 })
diff --git a/cypress/integration/export.spec.ts b/cypress/integration/export.spec.ts
index 819fd25f7..b76a44160 100644
--- a/cypress/integration/export.spec.ts
+++ b/cypress/integration/export.spec.ts
@@ -6,7 +6,7 @@
 
 describe('Export', () => {
   const testTitle = 'testContent'
-  const testContent = `---\ntitle: ${testTitle}\n---\nThis is some test content`
+  const testContent = `---\ntitle: ${ testTitle }\n---\nThis is some test content`
 
   beforeEach(() => {
     cy.visitTestEditor()
diff --git a/cypress/integration/fileUpload.spec.ts b/cypress/integration/fileUpload.spec.ts
index 67dc6589b..7cc136988 100644
--- a/cypress/integration/fileUpload.spec.ts
+++ b/cypress/integration/fileUpload.spec.ts
@@ -45,35 +45,40 @@ describe('File upload', () => {
       cy.get('div.btn-group > input[type=file]')
         .attachFile({ filePath: 'acme.png', mimeType: 'image/png' })
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `![](${imageUrl})`)
+        .should('have.text', `![](${ imageUrl })`)
     })
 
     it('via paste', () => {
-      cy.fixture('acme.png').then((image: string) => {
-        const pasteEvent = {
-          clipboardData: {
-            files: [Cypress.Blob.base64StringToBlob(image, 'image/png')]
+      cy.fixture('acme.png')
+        .then((image: string) => {
+          const pasteEvent = {
+            clipboardData: {
+              files: [Cypress.Blob.base64StringToBlob(image, 'image/png')]
+            }
           }
-        }
-        cy.get('.CodeMirror-scroll').trigger('paste', pasteEvent)
-        cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `![](${imageUrl})`)
-      })
+          cy.get('.CodeMirror-scroll')
+            .trigger('paste', pasteEvent)
+          cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
+            .should('have.text', `![](${ imageUrl })`)
+        })
     })
 
     it('via drag and drop', () => {
-      cy.fixture('acme.png').then((image: string) => {
-        const dropEvent = {
-          dataTransfer: {
-            files: [Cypress.Blob.base64StringToBlob(image, 'image/png')],
-            effectAllowed: 'uninitialized'
+      cy.fixture('acme.png')
+        .then((image: string) => {
+          const dropEvent = {
+            dataTransfer: {
+              files: [Cypress.Blob.base64StringToBlob(image, 'image/png')],
+              effectAllowed: 'uninitialized'
+            }
           }
-        }
-        cy.get('.CodeMirror-scroll').trigger('dragenter', dropEvent)
-        cy.get('.CodeMirror-scroll').trigger('drop', dropEvent)
-        cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `![](${imageUrl})`)
-      })
+          cy.get('.CodeMirror-scroll')
+            .trigger('dragenter', dropEvent)
+          cy.get('.CodeMirror-scroll')
+            .trigger('drop', dropEvent)
+          cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
+            .should('have.text', `![](${ imageUrl })`)
+        })
     })
   })
 
@@ -86,10 +91,11 @@ describe('File upload', () => {
     })
     cy.get('.fa-upload')
       .click()
-    cy.fixture('acme.png').then(() => {
-      cy.get('input[type=file]')
-        .attachFile({ filePath: 'acme.png', mimeType: 'image/png' })
-    })
+    cy.fixture('acme.png')
+      .then(() => {
+        cy.get('input[type=file]')
+          .attachFile({ filePath: 'acme.png', mimeType: 'image/png' })
+      })
     cy.get('.CodeMirror-activeline > .CodeMirror-line > span > span')
       .should('have.text', String.fromCharCode(8203)) //thanks codemirror....
   })
@@ -101,8 +107,9 @@ describe('File upload', () => {
         getData: (type = 'text') => testText
       }
     }
-    cy.get('.CodeMirror-scroll').trigger('paste', pasteEvent)
+    cy.get('.CodeMirror-scroll')
+      .trigger('paste', pasteEvent)
     cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-      .should('have.text', `${testText}`)
+      .should('have.text', `${ testText }`)
   })
 })
diff --git a/cypress/integration/highlightedCodeBlock.spec.ts b/cypress/integration/highlightedCodeBlock.spec.ts
index 14d6034c2..ecc3463c2 100644
--- a/cypress/integration/highlightedCodeBlock.spec.ts
+++ b/cypress/integration/highlightedCodeBlock.spec.ts
@@ -6,8 +6,8 @@
 
 const findHljsCodeBlock = () => {
   return cy.getMarkdownBody()
-    .find('pre > code.hljs')
-    .should('be.visible')
+           .find('pre > code.hljs')
+           .should('be.visible')
 }
 
 describe('Code', () => {
@@ -160,14 +160,15 @@ describe('Code', () => {
           return cy.wrap(null)
         }
 
-        cy.spy(frame.contentWindow.navigator.clipboard, 'writeText').as("copy")
+        cy.spy(frame.contentWindow.navigator.clipboard, 'writeText')
+          .as('copy')
       })
 
     cy.getMarkdownRenderer()
       .find('[data-cy="copy-code-button"]')
       .click()
 
-    cy.get("@copy")
+    cy.get('@copy')
       .should('be.calledWithExactly', 'let x = 0\n')
   })
 })
diff --git a/cypress/integration/language.spec.ts b/cypress/integration/language.spec.ts
index 4402e67e6..50c398ce8 100644
--- a/cypress/integration/language.spec.ts
+++ b/cypress/integration/language.spec.ts
@@ -17,7 +17,8 @@ describe('Languages', () => {
     cy.get('@languages')
       .should('have.length', 28)
     languages.forEach(language => {
-      cy.get('@languages').contains(language)
+      cy.get('@languages')
+        .contains(language)
     })
   })
 
diff --git a/cypress/integration/link.spec.ts b/cypress/integration/link.spec.ts
index ed43de58f..0cbec980a 100644
--- a/cypress/integration/link.spec.ts
+++ b/cypress/integration/link.spec.ts
@@ -64,14 +64,16 @@ describe('Links Intro', () => {
 
   describe('Menu Buttons logged in', () => {
     it('New note', () => {
-      cy.get('.d-inline-flex.btn-primary').click()
+      cy.get('.d-inline-flex.btn-primary')
+        .click()
       cy.url()
         .should('include', '/new')
     })
 
     describe('User Menu', () => {
       beforeEach(() => {
-        cy.get('#dropdown-user').click()
+        cy.get('#dropdown-user')
+          .click()
       })
 
       it('Features', () => {
diff --git a/cypress/integration/maxLength.spec.ts b/cypress/integration/maxLength.spec.ts
index 2e1108f64..1aca4b986 100644
--- a/cypress/integration/maxLength.spec.ts
+++ b/cypress/integration/maxLength.spec.ts
@@ -7,7 +7,7 @@
 describe('The status bar text length info', () => {
   const warningTestContent = ('0123456789'.repeat(10))
   const dangerTestContent = ('0123456789'.repeat(20))
-  const tooMuchTestContent = `${dangerTestContent}a`
+  const tooMuchTestContent = `${ dangerTestContent }a`
 
   beforeEach(() => {
     cy.visitTestEditor()
diff --git a/cypress/integration/profile.spec.ts b/cypress/integration/profile.spec.ts
index a686ceb70..e5183db5f 100644
--- a/cypress/integration/profile.spec.ts
+++ b/cypress/integration/profile.spec.ts
@@ -12,7 +12,7 @@ describe('profile page', () => {
     }, {
       body: [
         {
-          label: "cypress-App",
+          label: 'cypress-App',
           created: 1601991518
         }
       ]
diff --git a/cypress/integration/toolbar.spec.ts b/cypress/integration/toolbar.spec.ts
index 631b2cf01..3053c9c0f 100644
--- a/cypress/integration/toolbar.spec.ts
+++ b/cypress/integration/toolbar.spec.ts
@@ -21,7 +21,7 @@ describe('Toolbar Buttons', () => {
     beforeEach(() => {
       cy.codemirrorFill(testText)
       cy.get('.CodeMirror-line > span')
-        .should("exist")
+        .should('exist')
         .should('have.text', testText)
     })
 
@@ -35,42 +35,42 @@ describe('Toolbar Buttons', () => {
         cy.get('.btn-toolbar [data-cy="format-bold"]')
           .click()
         cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `**${testText}**`)
+          .should('have.text', `**${ testText }**`)
       })
 
       it('should format as italic', () => {
         cy.get('.btn-toolbar [data-cy="format-italic"]')
           .click()
         cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `*${testText}*`)
+          .should('have.text', `*${ testText }*`)
       })
 
       it('should format as underline', () => {
         cy.get('.btn-toolbar [data-cy="format-underline"]')
           .click()
         cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `++${testText}++`)
+          .should('have.text', `++${ testText }++`)
       })
 
       it('should format as strikethrough', () => {
         cy.get('.btn-toolbar  [data-cy="format-strikethrough"]')
           .click()
         cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `~~${testText}~~`)
+          .should('have.text', `~~${ testText }~~`)
       })
 
       it('should format as subscript', () => {
         cy.get('.btn-toolbar [data-cy="format-subscript"]')
           .click()
         cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `~${testText}~`)
+          .should('have.text', `~${ testText }~`)
       })
 
       it('should format as superscript', () => {
         cy.get('.btn-toolbar [data-cy="format-superscript"]')
           .click()
         cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `^${testText}^`)
+          .should('have.text', `^${ testText }^`)
       })
 
       it('should format the line as code block', () => {
@@ -88,14 +88,14 @@ describe('Toolbar Buttons', () => {
         cy.get('.btn-toolbar [data-cy="format-link"]')
           .click()
         cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `[${testText}](https://)`)
+          .should('have.text', `[${ testText }](https://)`)
       })
 
       it('should format as image', () => {
         cy.get('.btn-toolbar [data-cy="format-image"]')
           .click()
         cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-          .should('have.text', `![${testText}](https://)`)
+          .should('have.text', `![${ testText }](https://)`)
       })
     })
 
@@ -103,11 +103,11 @@ describe('Toolbar Buttons', () => {
       cy.get('.btn-toolbar [data-cy="format-heading"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `# ${testText}`)
+        .should('have.text', `# ${ testText }`)
       cy.get('.fa-header')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `## ${testText}`)
+        .should('have.text', `## ${ testText }`)
     })
 
     it('should format the line as code', () => {
@@ -125,58 +125,58 @@ describe('Toolbar Buttons', () => {
       cy.get('.btn-toolbar [data-cy="format-block-quote"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `> ${testText}`)
+        .should('have.text', `> ${ testText }`)
       cy.get('.btn-toolbar [data-cy="format-block-quote"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `> > ${testText}`)
+        .should('have.text', `> > ${ testText }`)
     })
 
     it('should format as unordered list', () => {
       cy.get('.btn-toolbar [data-cy="format-unordered-list"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `- ${testText}`)
+        .should('have.text', `- ${ testText }`)
       cy.get('.btn-toolbar [data-cy="format-unordered-list"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `- - ${testText}`)
+        .should('have.text', `- - ${ testText }`)
     })
 
     it('should format as ordered list', () => {
       cy.get('.btn-toolbar [data-cy="format-ordered-list"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `1. ${testText}`)
+        .should('have.text', `1. ${ testText }`)
       cy.get('.btn-toolbar [data-cy="format-ordered-list"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `1. 1. ${testText}`)
+        .should('have.text', `1. 1. ${ testText }`)
     })
 
     it('should format as check list', () => {
       cy.get('.btn-toolbar [data-cy="format-check-list"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `- [ ] ${testText}`)
+        .should('have.text', `- [ ] ${ testText }`)
       cy.get('.btn-toolbar [data-cy="format-check-list"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `- [ ] - [ ] ${testText}`)
+        .should('have.text', `- [ ] - [ ] ${ testText }`)
     })
 
     it('should insert links', () => {
       cy.get('.btn-toolbar [data-cy="format-link"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `${testText}[](https://)`)
+        .should('have.text', `${ testText }[](https://)`)
     })
 
     it('should insert an empty image link', () => {
       cy.get('.btn-toolbar [data-cy="format-image"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `${testText}![](https://)`)
+        .should('have.text', `${ testText }![](https://)`)
     })
   })
 
@@ -184,7 +184,7 @@ describe('Toolbar Buttons', () => {
     beforeEach(() => {
       cy.codemirrorFill(testLink)
       cy.get('.CodeMirror-line > span')
-        .should("exist")
+        .should('exist')
         .should('have.text', testLink)
       cy.get('@codeinput')
         .type('{ctrl}a')
@@ -194,14 +194,14 @@ describe('Toolbar Buttons', () => {
       cy.get('.btn-toolbar [data-cy="format-link"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `[](${testLink})`)
+        .should('have.text', `[](${ testLink })`)
     })
 
     it('should format as image', () => {
       cy.get('.btn-toolbar [data-cy="format-image"]')
         .click()
       cy.get('.CodeMirror-activeline > .CodeMirror-line > span')
-        .should('have.text', `![](${testLink})`)
+        .should('have.text', `![](${ testLink })`)
     })
   })
 
diff --git a/cypress/support/checkLinks.ts b/cypress/support/checkLinks.ts
index 14ee38366..5cbe666ea 100644
--- a/cypress/support/checkLinks.ts
+++ b/cypress/support/checkLinks.ts
@@ -11,11 +11,12 @@ declare namespace Cypress {
      * Custom command to check an external Link.
      * @example cy.get(a#extern).checkExternalLink('http://example.com')
      */
-    checkExternalLink (url: string): Chainable<Element>
+    checkExternalLink(url: string): Chainable<Element>
   }
 }
 
 Cypress.Commands.add('checkExternalLink', { prevSubject: 'element' }, ($element: JQuery, url: string) => {
-  cy.wrap($element).should('have.attr', 'href', url)
+  cy.wrap($element)
+    .should('have.attr', 'href', url)
     .should('have.attr', 'target', '_blank')
 })
diff --git a/cypress/support/config.ts b/cypress/support/config.ts
index c957c2432..aaa89d9d1 100644
--- a/cypress/support/config.ts
+++ b/cypress/support/config.ts
@@ -50,9 +50,9 @@ beforeEach(() => {
         sourceCodeUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
         issueTrackerUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
       },
-      "iframeCommunication": {
-        "editorOrigin": "http://127.0.0.1:3001",
-        "rendererOrigin": "http://127.0.0.1:3001"
+      'iframeCommunication': {
+        'editorOrigin': 'http://127.0.0.1:3001',
+        'rendererOrigin': 'http://127.0.0.1:3001'
       }
     }
   })
diff --git a/cypress/support/fill.ts b/cypress/support/fill.ts
index 97ca7ee5c..0f35de554 100644
--- a/cypress/support/fill.ts
+++ b/cypress/support/fill.ts
@@ -11,8 +11,9 @@ declare namespace Cypress {
      * Custom command to fill an input field with text and trigger a change event.
      * @example cy.get(input).fill('content')
      */
-    fill (value: string): Chainable<Element>
-    codemirrorFill (value: string): Chainable<Element>
+    fill(value: string): Chainable<Element>
+
+    codemirrorFill(value: string): Chainable<Element>
   }
 }
 
@@ -20,17 +21,18 @@ Cypress.Commands.add('fill', {
   prevSubject: 'element'
 }, (subject, value) => {
   return cy.wrap(subject)
-    .invoke('val', value)
-    .trigger('change', { force: true })
+           .invoke('val', value)
+           .trigger('change', { force: true })
 })
 
 Cypress.Commands.add('codemirrorFill', (content: string) => {
-  const line = content.split("\n").find(value => value !== '');
+  const line = content.split('\n')
+                      .find(value => value !== '')
   cy.get('.CodeMirror')
     .click()
     .get('textarea')
     .fill(content)
-  if(line) {
+  if (line) {
     cy.get('.CodeMirror')
       .contains('.CodeMirror-line', line)
   }
diff --git a/cypress/support/getMarkdownRenderer.ts b/cypress/support/getMarkdownRenderer.ts
index 26f6be1cc..78ecdf28a 100644
--- a/cypress/support/getMarkdownRenderer.ts
+++ b/cypress/support/getMarkdownRenderer.ts
@@ -6,22 +6,22 @@
 
 declare namespace Cypress {
   interface Chainable {
-    getMarkdownRenderer (): Chainable<Element>
+    getMarkdownRenderer(): Chainable<Element>
 
-    getMarkdownBody (): Chainable<Element>
+    getMarkdownBody(): Chainable<Element>
   }
 }
 
 Cypress.Commands.add('getMarkdownRenderer', () => {
   return cy.get(`iframe[data-cy="documentIframe"]`)
-    .its('0.contentDocument')
-    .should('exist')
-    .its('body')
-    .should('not.be.undefined')
-    .then(cy.wrap.bind(cy))
+           .its('0.contentDocument')
+           .should('exist')
+           .its('body')
+           .should('not.be.undefined')
+           .then(cy.wrap.bind(cy))
 })
 
 Cypress.Commands.add('getMarkdownBody', () => {
   return cy.getMarkdownRenderer()
-    .find('.markdown-body')
+           .find('.markdown-body')
 })
diff --git a/cypress/support/login.ts b/cypress/support/login.ts
index e0e3ee2cc..b21c4d3d9 100644
--- a/cypress/support/login.ts
+++ b/cypress/support/login.ts
@@ -11,11 +11,13 @@ declare namespace Cypress {
      * Custom command to log the user out.
      * @example cy.logout()
      */
-    logout (): Chainable<Window>
+    logout(): Chainable<Window>
   }
 }
 
 Cypress.Commands.add('logout', () => {
-  cy.get('#dropdown-user').click()
-  cy.get('.fa-sign-out').click()
+  cy.get('#dropdown-user')
+    .click()
+  cy.get('.fa-sign-out')
+    .click()
 })
diff --git a/cypress/support/visit-test-editor.ts b/cypress/support/visit-test-editor.ts
index 640a4e630..b7f845053 100644
--- a/cypress/support/visit-test-editor.ts
+++ b/cypress/support/visit-test-editor.ts
@@ -6,28 +6,28 @@
 
 declare namespace Cypress {
   interface Chainable {
-    visitTestEditor (query?: string): Chainable<Cypress.AUTWindow>
+    visitTestEditor(query?: string): Chainable<Cypress.AUTWindow>
   }
 }
 
 export const testNoteId = 'test'
 
 Cypress.Commands.add('visitTestEditor', (query?: string) => {
-  return cy.visit(`/n/${testNoteId}${query ? `?${query}` : ''}`)
+  return cy.visit(`/n/${ testNoteId }${ query ? `?${ query }` : '' }`)
 })
 
 beforeEach(() => {
-  cy.intercept(`/api/v2/notes/${testNoteId}-get`, {
-    "id": "ABC123",
-    "alias": "banner",
-    "lastChange": {
-      "userId": "test",
-      "timestamp": 1600033920
+  cy.intercept(`/api/v2/notes/${ testNoteId }-get`, {
+    'id': 'ABC123',
+    'alias': 'banner',
+    'lastChange': {
+      'userId': 'test',
+      'timestamp': 1600033920
     },
-    "viewCount": 0,
-    "createTime": 1600033920,
-    "content": "",
-    "authorship": [],
-    "preVersionTwoNote": true
+    'viewCount': 0,
+    'createTime': 1600033920,
+    'content': '',
+    'authorship': [],
+    'preVersionTwoNote': true
   })
 })
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index 8aaf42929..5bf928fb9 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -3,8 +3,15 @@
     "strict": true,
     "baseUrl": "../node_modules",
     "target": "es6",
-    "lib": ["es6", "dom"],
-    "types": ["cypress" ,"cypress-commands", "cypress-file-upload"]
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "types": [
+      "cypress",
+      "cypress-commands",
+      "cypress-file-upload"
+    ]
   },
   "include": [
     "**/*.ts"
diff --git a/src/api/notes/index.ts b/src/api/notes/index.ts
index 96354009e..794ca6eec 100644
--- a/src/api/notes/index.ts
+++ b/src/api/notes/index.ts
@@ -25,7 +25,7 @@ export interface Note {
 export const getNote = async (noteId: string): Promise<Note> => {
   // The "-get" suffix is necessary, because in our mock api (filesystem) the note id might already be a folder.
   // TODO: [mrdrogdrog] replace -get with actual api route as soon as api backend is ready.
-  const response = await fetch(getApiUrl() + `/notes/${noteId}-get`, {
+  const response = await fetch(getApiUrl() + `/notes/${ noteId }-get`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
@@ -33,7 +33,7 @@ export const getNote = async (noteId: string): Promise<Note> => {
 }
 
 export const deleteNote = async (noteId: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + `/notes/${noteId}`, {
+  const response = await fetch(getApiUrl() + `/notes/${ noteId }`, {
     ...defaultFetchConfig,
     method: 'DELETE'
   })
diff --git a/src/api/revisions/index.ts b/src/api/revisions/index.ts
index d68449f91..a482b67f0 100644
--- a/src/api/revisions/index.ts
+++ b/src/api/revisions/index.ts
@@ -11,11 +11,11 @@ import { Revision, RevisionListEntry } from './types'
 const revisionCache = new Cache<string, Revision>(3600)
 
 export const getRevision = async (noteId: string, timestamp: number): Promise<Revision> => {
-  const cacheKey = `${noteId}:${timestamp}`
+  const cacheKey = `${ noteId }:${ timestamp }`
   if (revisionCache.has(cacheKey)) {
     return revisionCache.get(cacheKey)
   }
-  const response = await fetch(getApiUrl() + `/notes/${noteId}/revisions/${timestamp}`, {
+  const response = await fetch(getApiUrl() + `/notes/${ noteId }/revisions/${ timestamp }`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
@@ -26,7 +26,7 @@ export const getRevision = async (noteId: string, timestamp: number): Promise<Re
 
 export const getAllRevisions = async (noteId: string): Promise<RevisionListEntry[]> => {
   // TODO Change 'revisions-list' to 'revisions' as soon as the backend is ready to serve some data!
-  const response = await fetch(getApiUrl() + `/notes/${noteId}/revisions-list`, {
+  const response = await fetch(getApiUrl() + `/notes/${ noteId }/revisions-list`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
diff --git a/src/api/tokens/index.ts b/src/api/tokens/index.ts
index 29a8cfdee..ee004e0ef 100644
--- a/src/api/tokens/index.ts
+++ b/src/api/tokens/index.ts
@@ -8,7 +8,7 @@ import { defaultFetchConfig, expectResponseCode, getApiUrl } from '../utils'
 import { AccessToken, AccessTokenSecret } from './types'
 
 export const getAccessTokenList = async (): Promise<AccessToken[]> => {
-  const response = await fetch(`${getApiUrl()}/tokens`, {
+  const response = await fetch(`${ getApiUrl() }/tokens`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
@@ -16,7 +16,7 @@ export const getAccessTokenList = async (): Promise<AccessToken[]> => {
 }
 
 export const postNewAccessToken = async (label: string): Promise<AccessToken & AccessTokenSecret> => {
-  const response = await fetch(`${getApiUrl()}/tokens`, {
+  const response = await fetch(`${ getApiUrl() }/tokens`, {
     ...defaultFetchConfig,
     method: 'POST',
     body: label
@@ -26,7 +26,7 @@ export const postNewAccessToken = async (label: string): Promise<AccessToken & A
 }
 
 export const deleteAccessToken = async (timestamp: number): Promise<void> => {
-  const response = await fetch(`${getApiUrl()}/tokens/${timestamp}`, {
+  const response = await fetch(`${ getApiUrl() }/tokens/${ timestamp }`, {
     ...defaultFetchConfig,
     method: 'DELETE'
   })
diff --git a/src/api/users/index.ts b/src/api/users/index.ts
index 69316ec67..8dfcd03ce 100644
--- a/src/api/users/index.ts
+++ b/src/api/users/index.ts
@@ -14,7 +14,7 @@ export const getUserById = async (userid: string): Promise<UserResponse> => {
   if (cache.has(userid)) {
     return cache.get(userid)
   }
-  const response = await fetch(`${getApiUrl()}/users/${userid}`, {
+  const response = await fetch(`${ getApiUrl() }/users/${ userid }`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
diff --git a/src/api/utils.ts b/src/api/utils.ts
index e79492c97..12a591ae5 100644
--- a/src/api/utils.ts
+++ b/src/api/utils.ts
@@ -24,6 +24,6 @@ export const getApiUrl = (): string => {
 
 export const expectResponseCode = (response: Response, code = 200): void => {
   if (response.status !== code) {
-    throw new Error(`response code is not ${code}`)
+    throw new Error(`response code is not ${ code }`)
   }
 }
diff --git a/src/components/application-loader/application-loader.scss b/src/components/application-loader/application-loader.scss
index 193f4d690..fda4fac73 100644
--- a/src/components/application-loader/application-loader.scss
+++ b/src/components/application-loader/application-loader.scss
@@ -6,32 +6,72 @@
 
 .loader {
   @keyframes animation-roll {
-    0%   { transform: translateX(calc(-100vw / 2 - 100%))   rotateZ(0deg);   }
-    100% { transform: translateX(calc(100vw / 2 + 100%))    rotateZ(720deg); }
+    0% {
+      transform: translateX(calc(-100vw / 2 - 100%)) rotateZ(0deg);
+    }
+    100% {
+      transform: translateX(calc(100vw / 2 + 100%)) rotateZ(720deg);
+    }
   }
 
   @keyframes animation-jump {
-    0%   { transform: scale(1,1)      translateY(0); }
-    10%  { transform: scale(1.1,.9)   translateY(0); }
-    30%  { transform: scale(.9,1.1)   translateY(-100px); }
-    50%  { transform: scale(1.05,.95) translateY(0); }
-    57%  { transform: scale(1,1)      translateY(-7px); }
-    64%  { transform: scale(1,1)      translateY(0); }
-    100% { transform: scale(1,1)      translateY(0); }
+    0% {
+      transform: scale(1, 1) translateY(0);
+    }
+    10% {
+      transform: scale(1.1, .9) translateY(0);
+    }
+    30% {
+      transform: scale(.9, 1.1) translateY(-100px);
+    }
+    50% {
+      transform: scale(1.05, .95) translateY(0);
+    }
+    57% {
+      transform: scale(1, 1) translateY(-7px);
+    }
+    64% {
+      transform: scale(1, 1) translateY(0);
+    }
+    100% {
+      transform: scale(1, 1) translateY(0);
+    }
   }
 
   @keyframes animation-shake {
-    0%   { transform: translate(1px, 1px)   rotate(0deg);  }
-    10%  { transform: translate(-1px, -2px) rotate(-1deg); }
-    20%  { transform: translate(-3px, 0px)  rotate(1deg);  }
-    30%  { transform: translate(3px, 2px)   rotate(0deg);  }
-    40%  { transform: translate(1px, -1px)  rotate(1deg);  }
-    50%  { transform: translate(-1px, 2px)  rotate(-1deg); }
-    60%  { transform: translate(-3px, 1px)  rotate(0deg);  }
-    70%  { transform: translate(3px, 1px)   rotate(-1deg); }
-    80%  { transform: translate(-1px, -1px) rotate(1deg);  }
-    90%  { transform: translate(1px, 2px)   rotate(0deg);  }
-    100% { transform: translate(1px, -2px)  rotate(-1deg); }
+    0% {
+      transform: translate(1px, 1px) rotate(0deg);
+    }
+    10% {
+      transform: translate(-1px, -2px) rotate(-1deg);
+    }
+    20% {
+      transform: translate(-3px, 0px) rotate(1deg);
+    }
+    30% {
+      transform: translate(3px, 2px) rotate(0deg);
+    }
+    40% {
+      transform: translate(1px, -1px) rotate(1deg);
+    }
+    50% {
+      transform: translate(-1px, 2px) rotate(-1deg);
+    }
+    60% {
+      transform: translate(-3px, 1px) rotate(0deg);
+    }
+    70% {
+      transform: translate(3px, 1px) rotate(-1deg);
+    }
+    80% {
+      transform: translate(-1px, -1px) rotate(1deg);
+    }
+    90% {
+      transform: translate(1px, 2px) rotate(0deg);
+    }
+    100% {
+      transform: translate(1px, -2px) rotate(-1deg);
+    }
   }
 
   .animation-roll {
diff --git a/src/components/application-loader/application-loader.tsx b/src/components/application-loader/application-loader.tsx
index 0d75b67fa..634746c73 100644
--- a/src/components/application-loader/application-loader.tsx
+++ b/src/components/application-loader/application-loader.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Suspense, useCallback, useEffect, useState } from 'react'
 import { useFrontendBaseUrl } from '../../hooks/common/use-frontend-base-url'
@@ -30,20 +30,21 @@ export const ApplicationLoader: React.FC = ({ children }) => {
 
   useEffect(() => {
     for (const task of initTasks) {
-      runTask(task.task).catch((reason: Error) => {
-        console.error(reason)
-        setFailedTitle(task.name)
-      })
+      runTask(task.task)
+        .catch((reason: Error) => {
+          console.error(reason)
+          setFailedTitle(task.name)
+        })
     }
   }, [initTasks, runTask])
 
   const tasksAreRunning = doneTasks < initTasks.length || initTasks.length === 0
 
   if (tasksAreRunning) {
-    return <LoadingScreen failedTitle={failedTitle}/>
+    return <LoadingScreen failedTitle={ failedTitle }/>
   } else {
-    return <Suspense fallback={(<LoadingScreen/>)}>
-      {children}
+    return <Suspense fallback={ (<LoadingScreen/>) }>
+      { children }
     </Suspense>
   }
 }
diff --git a/src/components/application-loader/loading-screen.tsx b/src/components/application-loader/loading-screen.tsx
index 8d6d52d81..9910c89d6 100644
--- a/src/components/application-loader/loading-screen.tsx
+++ b/src/components/application-loader/loading-screen.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Alert } from 'react-bootstrap'
@@ -17,13 +17,13 @@ export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTitle }) =>
   return (
     <div className="loader middle text-light overflow-hidden">
       <div className="mb-3 text-light">
-        <span className={`d-block ${failedTitle ? 'animation-shake' : 'animation-jump'}`}>
-          <HedgeDocLogo size={HedgeDocLogoSize.BIG}/>
+        <span className={ `d-block ${ failedTitle ? 'animation-shake' : 'animation-jump' }` }>
+          <HedgeDocLogo size={ HedgeDocLogoSize.BIG }/>
         </span>
       </div>
-      <ShowIf condition={!!failedTitle}>
-        <Alert variant={'danger'}>
-          The task '{failedTitle}' failed.<br/>
+      <ShowIf condition={ !!failedTitle }>
+        <Alert variant={ 'danger' }>
+          The task '{ failedTitle }' failed.<br/>
           For further information look into the browser console.
         </Alert>
       </ShowIf>
diff --git a/src/components/common/branding/branding.tsx b/src/components/common/branding/branding.tsx
index 16942ef0d..7b72afa54 100644
--- a/src/components/common/branding/branding.tsx
+++ b/src/components/common/branding/branding.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import equal from 'fast-deep-equal'
 import React from 'react'
@@ -21,18 +21,18 @@ export const Branding: React.FC<BrandingProps> = ({ inline = false, delimiter =
   const showBranding = !!branding.name || !!branding.logo
 
   return (
-    <ShowIf condition={showBranding}>
-      <ShowIf condition={delimiter}>
-        <strong className={`mx-1 ${inline ? 'inline-size' : 'regular-size'}`}>@</strong>
+    <ShowIf condition={ showBranding }>
+      <ShowIf condition={ delimiter }>
+        <strong className={ `mx-1 ${ inline ? 'inline-size' : 'regular-size' }` }>@</strong>
       </ShowIf>
       {
         branding.logo
           ? <img
-              src={branding.logo}
-              alt={branding.name}
-              title={branding.name}
-              className={inline ? 'inline-size' : 'regular-size'}
-            />
+            src={ branding.logo }
+            alt={ branding.name }
+            title={ branding.name }
+            className={ inline ? 'inline-size' : 'regular-size' }
+          />
           : branding.name
       }
     </ShowIf>
diff --git a/src/components/common/cache/cache.test.ts b/src/components/common/cache/cache.test.ts
index b2c7fa005..9723248be 100644
--- a/src/components/common/cache/cache.test.ts
+++ b/src/components/common/cache/cache.test.ts
@@ -16,68 +16,88 @@ describe('Test caching functionality', () => {
   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)
+    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)
+    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)
+    expect(testCache.has('test'))
+      .toBe(true)
   })
 
   it('entry does not exist prior inserting', () => {
-    expect(testCache.has('test')).toBe(false)
+    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)
+    expect(shortLivingCache.has('test'))
+      .toBe(true)
     setTimeout(() => {
-      expect(shortLivingCache.has('test')).toBe(false)
+      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)
+    expect(testCache.get('test'))
+      .toEqual(testValue)
   })
 
   it('error is thrown on non-existent entry', () => {
     const accessNonExistentEntry = () => {
       testCache.get('test')
     }
-    expect(accessNonExistentEntry).toThrow(Error)
+    expect(accessNonExistentEntry)
+      .toThrow(Error)
   })
 
   it('newer item replaces older item', () => {
     testCache.put('test', 123)
     testCache.put('test', 456)
-    expect(testCache.get('test')).toEqual(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)
+    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)
+    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)
+    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
index 5178156d1..68486c943 100644
--- a/src/components/common/cache/cache.ts
+++ b/src/components/common/cache/cache.ts
@@ -10,12 +10,11 @@ export interface CacheEntry<T> {
 }
 
 export class Cache<K, V> {
-  private store = new Map<K, CacheEntry<V>>()
-
   readonly entryLifetime: number
   readonly maxEntries: number
+  private store = new Map<K, CacheEntry<V>>()
 
-  constructor (lifetime: number, maxEntries = 0) {
+  constructor(lifetime: number, maxEntries = 0) {
     if (lifetime < 0) {
       throw new Error('Cache entry lifetime can not be less than 0 seconds.')
     }
@@ -23,7 +22,7 @@ export class Cache<K, V> {
     this.maxEntries = maxEntries
   }
 
-  has (key: K): boolean {
+  has(key: K): boolean {
     if (!this.store.has(key)) {
       return false
     }
@@ -31,7 +30,7 @@ export class Cache<K, V> {
     return (!!entry && entry.entryCreated >= (Date.now() - this.entryLifetime * 1000))
   }
 
-  get (key: K): V {
+  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()".')
@@ -39,9 +38,10 @@ export class Cache<K, V> {
     return entry.data
   }
 
-  put (key: K, value: V): void {
+  put(key: K, value: V): void {
     if (this.maxEntries > 0 && this.store.size === this.maxEntries) {
-      this.store.delete(this.store.keys().next().value)
+      this.store.delete(this.store.keys()
+                            .next().value)
     }
     this.store.set(key, {
       entryCreated: Date.now(),
diff --git a/src/components/common/copyable/copy-overlay.tsx b/src/components/common/copyable/copy-overlay.tsx
index 876579f56..569be1ebb 100644
--- a/src/components/common/copyable/copy-overlay.tsx
+++ b/src/components/common/copyable/copy-overlay.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { RefObject, useCallback, useEffect, useState } from 'react'
 import { Overlay, Tooltip } from 'react-bootstrap'
@@ -22,15 +22,20 @@ export const CopyOverlay: React.FC<CopyOverlayProps> = ({ content, clickComponen
   const [tooltipId] = useState<string>(() => uuid())
 
   const copyToClipboard = useCallback((content: string) => {
-    navigator.clipboard.writeText(content).then(() => {
-      setError(false)
-    }).catch(() => {
-      setError(true)
-      console.error("couldn't copy")
-    }).finally(() => {
-      setShowCopiedTooltip(true)
-      setTimeout(() => { setShowCopiedTooltip(false) }, 2000)
-    })
+    navigator.clipboard.writeText(content)
+             .then(() => {
+               setError(false)
+             })
+             .catch(() => {
+               setError(true)
+               console.error('couldn\'t copy')
+             })
+             .finally(() => {
+               setShowCopiedTooltip(true)
+               setTimeout(() => {
+                 setShowCopiedTooltip(false)
+               }, 2000)
+             })
   }, [])
 
   useEffect(() => {
@@ -46,17 +51,17 @@ export const CopyOverlay: React.FC<CopyOverlayProps> = ({ content, clickComponen
   }, [clickComponent, copyToClipboard, content])
 
   return (
-    <Overlay target={clickComponent} show={showCopiedTooltip} placement="top">
-      {(props) => (
-        <Tooltip id={`copied_${tooltipId}`} {...props}>
-          <ShowIf condition={error}>
-            <Trans i18nKey={'common.copyError'}/>
+    <Overlay target={ clickComponent } show={ showCopiedTooltip } placement="top">
+      { (props) => (
+        <Tooltip id={ `copied_${ tooltipId }` } { ...props }>
+          <ShowIf condition={ error }>
+            <Trans i18nKey={ 'common.copyError' }/>
           </ShowIf>
-          <ShowIf condition={!error}>
-            <Trans i18nKey={'common.successfullyCopied'}/>
+          <ShowIf condition={ !error }>
+            <Trans i18nKey={ 'common.successfullyCopied' }/>
           </ShowIf>
         </Tooltip>
-      )}
+      ) }
     </Overlay>
   )
 }
diff --git a/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx b/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
index 99745ca9e..6bfc27cf8 100644
--- a/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
+++ b/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
@@ -15,25 +15,25 @@ export interface CopyToClipboardButtonProps {
   content: string
   size?: 'sm' | 'lg'
   variant?: Variant
-  "data-cy"?: string
+  'data-cy'?: string
 }
 
 export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
-                                                                              content,
-                                                                              size = 'sm',
-                                                                              variant = 'dark',
-                                                                              ...props
-                                                                            }) => {
+  content,
+  size = 'sm',
+  variant = 'dark',
+  ...props
+}) => {
   const { t } = useTranslation()
   const button = useRef<HTMLButtonElement>(null)
 
   return (
     <Fragment>
-      <Button ref={button} size={size} variant={variant} title={t('renderer.highlightCode.copyCode')}
-              data-cy={props["data-cy"]}>
+      <Button ref={ button } size={ size } variant={ variant } title={ t('renderer.highlightCode.copyCode') }
+              data-cy={ props['data-cy'] }>
         <ForkAwesomeIcon icon='files-o'/>
       </Button>
-      <CopyOverlay content={content} clickComponent={button}/>
+      <CopyOverlay content={ content } clickComponent={ button }/>
     </Fragment>
   )
 }
diff --git a/src/components/common/copyable/copyable-field/copyable-field.tsx b/src/components/common/copyable/copyable-field/copyable-field.tsx
index 76c6fd27b..74bc3dd96 100644
--- a/src/components/common/copyable/copyable-field/copyable-field.tsx
+++ b/src/components/common/copyable/copyable-field/copyable-field.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useCallback, useRef } from 'react'
 import { Button, FormControl, InputGroup } from 'react-bootstrap'
@@ -25,9 +25,10 @@ export const CopyableField: React.FC<CopyableFieldProps> = ({ content, nativeSha
     navigator.share({
       text: content,
       url: url
-    }).catch(err => {
-      console.error('Native sharing failed: ', err)
     })
+             .catch(err => {
+               console.error('Native sharing failed: ', err)
+             })
   }, [content, url])
 
   const sharingSupported = typeof navigator.share === 'function'
@@ -35,21 +36,21 @@ export const CopyableField: React.FC<CopyableFieldProps> = ({ content, nativeSha
   return (
     <Fragment>
       <InputGroup className="my-3">
-        <FormControl readOnly={true} className={'text-center'} value={content} />
+        <FormControl readOnly={ true } className={ 'text-center' } value={ content }/>
         <InputGroup.Append>
-          <Button variant="outline-secondary" ref={copyButton} title={'Copy'}>
+          <Button variant="outline-secondary" ref={ copyButton } title={ 'Copy' }>
             <ForkAwesomeIcon icon='files-o'/>
           </Button>
         </InputGroup.Append>
-        <ShowIf condition={!!nativeShareButton && sharingSupported}>
+        <ShowIf condition={ !!nativeShareButton && sharingSupported }>
           <InputGroup.Append>
-            <Button variant="outline-secondary" title={'Share'} onClick={doShareAction}>
+            <Button variant="outline-secondary" title={ 'Share' } onClick={ doShareAction }>
               <ForkAwesomeIcon icon='share-alt'/>
             </Button>
           </InputGroup.Append>
         </ShowIf>
       </InputGroup>
-      <CopyOverlay content={content} clickComponent={copyButton}/>
+      <CopyOverlay content={ content } clickComponent={ copyButton }/>
     </Fragment>
   )
 }
diff --git a/src/components/common/fork-awesome/fork-awesome-icon.tsx b/src/components/common/fork-awesome/fork-awesome-icon.tsx
index ceb1e8f36..4b7c5ab7d 100644
--- a/src/components/common/fork-awesome/fork-awesome-icon.tsx
+++ b/src/components/common/fork-awesome/fork-awesome-icon.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { IconName, IconSize } from './types'
@@ -17,10 +17,10 @@ export interface ForkAwesomeIconProps {
 
 export const ForkAwesomeIcon: React.FC<ForkAwesomeIconProps> = ({ icon, fixedWidth = false, size, className, stacked = false }) => {
   const fixedWithClass = fixedWidth ? 'fa-fw' : ''
-  const sizeClass = size ? `-${size}` : (stacked ? '-1x' : '')
+  const sizeClass = size ? `-${ size }` : (stacked ? '-1x' : '')
   const stackClass = stacked ? '-stack' : ''
-  const extraClasses = `${className ?? ''} ${sizeClass || stackClass ? `fa${stackClass}${sizeClass}` : ''}`
+  const extraClasses = `${ className ?? '' } ${ sizeClass || stackClass ? `fa${ stackClass }${ sizeClass }` : '' }`
   return (
-    <i className={`fa ${fixedWithClass} fa-${icon} ${extraClasses}`}/>
+    <i className={ `fa ${ fixedWithClass } fa-${ icon } ${ extraClasses }` }/>
   )
 }
diff --git a/src/components/common/fork-awesome/fork-awesome-stack.tsx b/src/components/common/fork-awesome/fork-awesome-stack.tsx
index 9da49c4a4..f19408ef2 100644
--- a/src/components/common/fork-awesome/fork-awesome-stack.tsx
+++ b/src/components/common/fork-awesome/fork-awesome-stack.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { ReactElement } from 'react'
 import { ForkAwesomeIcon, ForkAwesomeIconProps } from './fork-awesome-icon'
@@ -15,13 +15,13 @@ export interface ForkAwesomeStackProps {
 
 export const ForkAwesomeStack: React.FC<ForkAwesomeStackProps> = ({ size, children }) => {
   return (
-    <span className={`fa-stack ${size ? 'fa-' : ''}${size ?? ''}`}>
+    <span className={ `fa-stack ${ size ? 'fa-' : '' }${ size ?? '' }` }>
       {
         React.Children.map(children, (child) => {
           if (!React.isValidElement<ForkAwesomeIconProps>(child)) {
             return null
           }
-          return <ForkAwesomeIcon {...child.props} stacked={true}/>
+          return <ForkAwesomeIcon { ...child.props } stacked={ true }/>
         })
       }
     </span>
diff --git a/src/components/common/fork-awesome/types.d.ts b/src/components/common/fork-awesome/types.d.ts
index 71b52257c..37d52523e 100644
--- a/src/components/common/fork-awesome/types.d.ts
+++ b/src/components/common/fork-awesome/types.d.ts
@@ -4,5 +4,123 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export type IconName = '500px'|'activitypub'|'address-book-o'|'address-book'|'address-card-o'|'address-card'|'adjust'|'adn'|'align-center'|'align-justify'|'align-left'|'align-right'|'amazon'|'ambulance'|'american-sign-language-interpreting'|'anchor'|'android'|'angellist'|'angle-double-down'|'angle-double-left'|'angle-double-right'|'angle-double-up'|'angle-down'|'angle-left'|'angle-right'|'angle-up'|'apple'|'archive-org'|'archive'|'archlinux'|'area-chart'|'arrow-circle-down'|'arrow-circle-left'|'arrow-circle-o-down'|'arrow-circle-o-left'|'arrow-circle-o-right'|'arrow-circle-o-up'|'arrow-circle-right'|'arrow-circle-up'|'arrow-down'|'arrow-left'|'arrow-right'|'arrows-alt'|'arrows-h'|'arrows'|'arrows-v'|'arrow-up'|'artstation'|'assistive-listening-systems'|'asterisk'|'at'|'att'|'audio-description'|'backward'|'balance-scale'|'bandcamp'|'ban'|'bar-chart'|'barcode'|'bars'|'bath'|'battery-empty'|'battery-full'|'battery-half'|'battery-quarter'|'battery-three-quarters'|'bed'|'beer'|'behance-square'|'behance'|'bell-o'|'bell-rigning-o'|'bell-ringing'|'bell-slash-o'|'bell-slash'|'bell'|'bicycle'|'binoculars'|'biometric'|'birthday-cake'|'bitbucket-square'|'bitbucket'|'black-tie'|'blind'|'bluetooth-b'|'bluetooth'|'bold'|'bolt'|'bomb'|'bookmark-o'|'bookmark'|'book'|'bootstrap'|'braille'|'briefcase'|'btc'|'bug'|'building-o'|'building'|'bullhorn'|'bullseye'|'bus'|'buysellads'|'calculator'|'calendar-check-o'|'calendar-minus-o'|'calendar-o'|'calendar-plus-o'|'calendar'|'calendar-times-o'|'camera-retro'|'camera'|'caret-down'|'caret-left'|'caret-right'|'caret-square-o-down'|'caret-square-o-left'|'caret-square-o-right'|'caret-square-o-up'|'caret-up'|'car'|'cart-arrow-down'|'cart-plus'|'cc-amex'|'cc-diners-club'|'cc-discover'|'cc-jcb'|'cc-mastercard'|'cc-paypal'|'cc-stripe'|'cc'|'cc-visa'|'certificate'|'chain-broken'|'check-circle-o'|'check-circle'|'check-square-o'|'check-square'|'check'|'chevron-circle-down'|'chevron-circle-left'|'chevron-circle-right'|'chevron-circle-up'|'chevron-down'|'chevron-left'|'chevron-right'|'chevron-up'|'child'|'chrome'|'circle-o-notch'|'circle-o'|'circle'|'circle-thin'|'classicpress-circle'|'classicpress'|'clipboard'|'clock-o'|'clone'|'cloud-download'|'cloud'|'cloud-upload'|'code-fork'|'codepen'|'code'|'codiepie'|'coffee'|'cogs'|'cog'|'columns'|'commenting-o'|'commenting'|'comment-o'|'comments-o'|'comments'|'comment'|'compass'|'compress'|'connectdevelop'|'contao'|'copyright'|'creative-commons'|'credit-card-alt'|'credit-card'|'crop'|'crosshairs'|'css3'|'c'|'cubes'|'cube'|'cutlery'|'dashcube'|'database'|'deaf'|'debian'|'delicious'|'desktop'|'deviantart'|'dev-to'|'diamond'|'diaspora'|'digg'|'digitalocean'|'discord-alt'|'discord'|'dogmazic'|'dot-circle-o'|'download'|'dribbble'|'dropbox'|'drupal'|'edge'|'eercast'|'eject'|'ellipsis-h'|'ellipsis-v'|'emby'|'empire'|'envelope-open-o'|'envelope-open'|'envelope-o'|'envelope-square'|'envelope'|'envira'|'eraser'|'ethereum'|'etsy'|'eur'|'exchange'|'exclamation-circle'|'exclamation'|'exclamation-triangle'|'expand'|'expeditedssl'|'external-link-square'|'external-link'|'eyedropper'|'eye-slash'|'eye'|'facebook-messenger'|'facebook-official'|'facebook-square'|'facebook'|'fast-backward'|'fast-forward'|'fax'|'f-droid'|'female'|'ffmpeg'|'fighter-jet'|'file-archive-o'|'file-audio-o'|'file-code-o'|'file-epub'|'file-excel-o'|'file-image-o'|'file-o'|'file-pdf-o'|'file-powerpoint-o'|'files-o'|'file'|'file-text-o'|'file-text'|'file-video-o'|'file-word-o'|'film'|'filter'|'fire-extinguisher'|'firefox'|'fire'|'first-order'|'flag-checkered'|'flag-o'|'flag'|'flask'|'flickr'|'floppy-o'|'folder-open-o'|'folder-open'|'folder-o'|'folder'|'font-awesome'|'fonticons'|'font'|'fork-awesome'|'fort-awesome'|'forumbee'|'forward'|'foursquare'|'free-code-camp'|'freedombox'|'friendica'|'frown-o'|'funkwhale'|'futbol-o'|'gamepad'|'gavel'|'gbp'|'genderless'|'get-pocket'|'gg-circle'|'gg'|'gift'|'gimp'|'gitea'|'github-alt'|'github-square'|'github'|'gitlab'|'git-square'|'git'|'glass'|'glide-g'|'glide'|'globe-e'|'globe'|'globe-w'|'gnupg'|'gnu-social'|'google-plus-official'|'google-plus-square'|'google-plus'|'google'|'google-wallet'|'graduation-cap'|'gratipay'|'grav'|'hackaday'|'hacker-news'|'hackster'|'hal'|'hand-lizard-o'|'hand-o-down'|'hand-o-left'|'hand-o-right'|'hand-o-up'|'hand-paper-o'|'hand-peace-o'|'hand-pointer-o'|'hand-rock-o'|'hand-scissors-o'|'handshake-o'|'hand-spock-o'|'hashnode'|'hashtag'|'hdd-o'|'header'|'headphones'|'heartbeat'|'heart-o'|'heart'|'history'|'home'|'hospital-o'|'hourglass-end'|'hourglass-half'|'hourglass-o'|'hourglass-start'|'hourglass'|'houzz'|'h-square'|'html5'|'hubzilla'|'i-cursor'|'id-badge'|'id-card-o'|'id-card'|'ils'|'imdb'|'inbox'|'indent'|'industry'|'info-circle'|'info'|'inkscape'|'inr'|'instagram'|'internet-explorer'|'ioxhost'|'italic'|'jirafeau'|'joomla'|'joplin'|'jpy'|'jsfiddle'|'julia'|'jupyter'|'keybase'|'keyboard-o'|'key-modern'|'key'|'krw'|'language'|'laptop'|'laravel'|'lastfm-square'|'lastfm'|'leaf'|'leanpub'|'lemon-o'|'level-down'|'level-up'|'liberapay-square'|'liberapay'|'life-ring'|'lightbulb-o'|'line-chart'|'linkedin-square'|'linkedin'|'link'|'linode'|'linux'|'list-alt'|'list-ol'|'list'|'list-ul'|'location-arrow'|'lock'|'long-arrow-down'|'long-arrow-left'|'long-arrow-right'|'long-arrow-up'|'low-vision'|'magic'|'magnet'|'male'|'map-marker'|'map-o'|'map-pin'|'map-signs'|'map'|'mars-double'|'mars-stroke-h'|'mars-stroke'|'mars-stroke-v'|'mars'|'mastodon-alt'|'mastodon-square'|'mastodon'|'matrix-org'|'maxcdn'|'meanpath'|'medium-square'|'medium'|'medkit'|'meetup'|'meh-o'|'mercury'|'microchip'|'microphone-slash'|'microphone'|'minus-circle'|'minus-square-o'|'minus-square'|'minus'|'mixcloud'|'mobile'|'modx'|'money'|'moon-o'|'moon'|'motorcycle'|'mouse-pointer'|'music'|'neuter'|'newspaper-o'|'nextcloud-square'|'nextcloud'|'nodejs'|'object-group'|'object-ungroup'|'odnoklassniki-square'|'odnoklassniki'|'opencart'|'open-collective'|'openid'|'opera'|'optin-monster'|'orcid'|'outdent'|'pagelines'|'paint-brush'|'paperclip'|'paper-plane-o'|'paper-plane'|'paragraph'|'patreon'|'pause-circle-o'|'pause-circle'|'pause'|'paw'|'paypal'|'peertube'|'pencil-square-o'|'pencil-square'|'pencil'|'percent'|'phone-square'|'phone'|'php'|'picture-o'|'pie-chart'|'pinterest-p'|'pinterest-square'|'pinterest'|'pixelfed'|'plane'|'play-circle-o'|'play-circle'|'play'|'pleroma'|'plug'|'plus-circle'|'plus-square-o'|'plus-square'|'plus'|'podcast'|'power-off'|'print'|'product-hunt'|'puzzle-piece'|'python'|'qq'|'qrcode'|'question-circle-o'|'question-circle'|'question'|'quora'|'quote-left'|'quote-right'|'random'|'ravelry'|'react'|'rebel'|'recycle'|'reddit-alien'|'reddit-square'|'reddit'|'refresh'|'registered'|'renren'|'repeat'|'reply-all'|'reply'|'researchgate'|'retweet'|'road'|'rocket'|'rss-square'|'rss'|'rub'|'safari'|'scissors'|'scribd'|'scuttlebutt'|'search-minus'|'search-plus'|'search'|'sellsy'|'server'|'shaarli-o'|'shaarli'|'share-alt-square'|'share-alt'|'share-square-o'|'share-square'|'share'|'shield'|'ship'|'shirtsinbulk'|'shopping-bag'|'shopping-basket'|'shopping-cart'|'shower'|'signalapp'|'signal'|'sign-in'|'sign-language'|'sign-out'|'simplybuilt'|'sitemap'|'skyatlas'|'skype'|'slack'|'sliders'|'slideshare'|'smile-o'|'snapchat-ghost'|'snapchat-square'|'snapchat'|'snowdrift'|'snowflake-o'|'social-home'|'sort-alpha-asc'|'sort-alpha-desc'|'sort-amount-asc'|'sort-amount-desc'|'sort-asc'|'sort-desc'|'sort-numeric-asc'|'sort-numeric-desc'|'sort'|'soundcloud'|'space-shuttle'|'spell-check'|'spinner'|'spoon'|'spotify'|'square-o'|'square'|'stack-exchange'|'stack-overflow'|'star-half-o'|'star-half'|'star-o'|'star'|'steam-square'|'steam'|'step-backward'|'step-forward'|'stethoscope'|'sticky-note-o'|'sticky-note'|'stop-circle-o'|'stop-circle'|'stop'|'street-view'|'strikethrough'|'stumbleupon-circle'|'stumbleupon'|'subscript'|'subway'|'suitcase'|'sun-o'|'sun'|'superpowers'|'superscript'|'syncthing'|'table'|'tablet'|'tachometer'|'tags'|'tag'|'tasks'|'taxi'|'telegram'|'television'|'tencent-weibo'|'terminal'|'text-height'|'text-width'|'themeisle'|'thermometer-empty'|'thermometer-full'|'thermometer-half'|'thermometer-quarter'|'thermometer-three-quarters'|'th-large'|'th-list'|'th'|'thumbs-down'|'thumbs-o-down'|'thumbs-o-up'|'thumbs-up'|'thumb-tack'|'ticket'|'times-circle-o'|'times-circle'|'times'|'tint'|'tipeee'|'toggle-off'|'toggle-on'|'tor-onion'|'trademark'|'train'|'transgender-alt'|'transgender'|'trash-o'|'trash'|'tree'|'trello'|'tripadvisor'|'trophy'|'truck'|'try'|'tty'|'tumblr-square'|'tumblr'|'twitch'|'twitter-square'|'twitter'|'umbrella'|'underline'|'undo'|'universal-access'|'university'|'unlock-alt'|'unlock'|'unslpash'|'upload'|'usb'|'usd'|'user-circle-o'|'user-circle'|'user-md'|'user-o'|'user-plus'|'user-secret'|'users'|'user'|'user-times'|'venus-double'|'venus-mars'|'venus'|'viacoin'|'viadeo-square'|'viadeo'|'video-camera'|'vimeo-square'|'vimeo'|'vine'|'vk'|'volume-control-phone'|'volume-down'|'volume-mute'|'volume-off'|'volume-up'|'weibo'|'weixin'|'whatsapp'|'wheelchair-alt'|'wheelchair'|'wifi'|'wikidata'|'wikipedia-w'|'window-close-o'|'window-close'|'window-maximize'|'window-minimize'|'window-restore'|'windows'|'wire'|'wordpress'|'wpbeginner'|'wpexplorer'|'wpforms'|'wrench'|'xing-square'|'xing'|'xmpp'|'yahoo'|'y-combinator'|'yelp'|'yoast'|'youtube-play'|'youtube-square'|'youtube'|'zotero'
-export type IconSize = '2x'|'3x'|'4x'|'5x'
+export type IconName = '500px' | 'activitypub' | 'address-book-o' | 'address-book' | 'address-card-o' | 'address-card'
+                       | 'adjust' | 'adn' | 'align-center' | 'align-justify' | 'align-left' | 'align-right' | 'amazon'
+                       | 'ambulance' | 'american-sign-language-interpreting' | 'anchor' | 'android' | 'angellist'
+                       | 'angle-double-down' | 'angle-double-left' | 'angle-double-right' | 'angle-double-up'
+                       | 'angle-down' | 'angle-left' | 'angle-right' | 'angle-up' | 'apple' | 'archive-org' | 'archive'
+                       | 'archlinux' | 'area-chart' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-o-down'
+                       | 'arrow-circle-o-left' | 'arrow-circle-o-right' | 'arrow-circle-o-up' | 'arrow-circle-right'
+                       | 'arrow-circle-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'arrows-h'
+                       | 'arrows' | 'arrows-v' | 'arrow-up' | 'artstation' | 'assistive-listening-systems' | 'asterisk'
+                       | 'at' | 'att' | 'audio-description' | 'backward' | 'balance-scale' | 'bandcamp' | 'ban'
+                       | 'bar-chart' | 'barcode' | 'bars' | 'bath' | 'battery-empty' | 'battery-full' | 'battery-half'
+                       | 'battery-quarter' | 'battery-three-quarters' | 'bed' | 'beer' | 'behance-square' | 'behance'
+                       | 'bell-o' | 'bell-rigning-o' | 'bell-ringing' | 'bell-slash-o' | 'bell-slash' | 'bell'
+                       | 'bicycle' | 'binoculars' | 'biometric' | 'birthday-cake' | 'bitbucket-square' | 'bitbucket'
+                       | 'black-tie' | 'blind' | 'bluetooth-b' | 'bluetooth' | 'bold' | 'bolt' | 'bomb' | 'bookmark-o'
+                       | 'bookmark' | 'book' | 'bootstrap' | 'braille' | 'briefcase' | 'btc' | 'bug' | 'building-o'
+                       | 'building' | 'bullhorn' | 'bullseye' | 'bus' | 'buysellads' | 'calculator' | 'calendar-check-o'
+                       | 'calendar-minus-o' | 'calendar-o' | 'calendar-plus-o' | 'calendar' | 'calendar-times-o'
+                       | 'camera-retro' | 'camera' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-square-o-down'
+                       | 'caret-square-o-left' | 'caret-square-o-right' | 'caret-square-o-up' | 'caret-up' | 'car'
+                       | 'cart-arrow-down' | 'cart-plus' | 'cc-amex' | 'cc-diners-club' | 'cc-discover' | 'cc-jcb'
+                       | 'cc-mastercard' | 'cc-paypal' | 'cc-stripe' | 'cc' | 'cc-visa' | 'certificate' | 'chain-broken'
+                       | 'check-circle-o' | 'check-circle' | 'check-square-o' | 'check-square' | 'check'
+                       | 'chevron-circle-down' | 'chevron-circle-left' | 'chevron-circle-right' | 'chevron-circle-up'
+                       | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'child' | 'chrome'
+                       | 'circle-o-notch' | 'circle-o' | 'circle' | 'circle-thin' | 'classicpress-circle'
+                       | 'classicpress' | 'clipboard' | 'clock-o' | 'clone' | 'cloud-download' | 'cloud'
+                       | 'cloud-upload' | 'code-fork' | 'codepen' | 'code' | 'codiepie' | 'coffee' | 'cogs' | 'cog'
+                       | 'columns' | 'commenting-o' | 'commenting' | 'comment-o' | 'comments-o' | 'comments' | 'comment'
+                       | 'compass' | 'compress' | 'connectdevelop' | 'contao' | 'copyright' | 'creative-commons'
+                       | 'credit-card-alt' | 'credit-card' | 'crop' | 'crosshairs' | 'css3' | 'c' | 'cubes' | 'cube'
+                       | 'cutlery' | 'dashcube' | 'database' | 'deaf' | 'debian' | 'delicious' | 'desktop'
+                       | 'deviantart' | 'dev-to' | 'diamond' | 'diaspora' | 'digg' | 'digitalocean' | 'discord-alt'
+                       | 'discord' | 'dogmazic' | 'dot-circle-o' | 'download' | 'dribbble' | 'dropbox' | 'drupal'
+                       | 'edge' | 'eercast' | 'eject' | 'ellipsis-h' | 'ellipsis-v' | 'emby' | 'empire'
+                       | 'envelope-open-o' | 'envelope-open' | 'envelope-o' | 'envelope-square' | 'envelope' | 'envira'
+                       | 'eraser' | 'ethereum' | 'etsy' | 'eur' | 'exchange' | 'exclamation-circle' | 'exclamation'
+                       | 'exclamation-triangle' | 'expand' | 'expeditedssl' | 'external-link-square' | 'external-link'
+                       | 'eyedropper' | 'eye-slash' | 'eye' | 'facebook-messenger' | 'facebook-official'
+                       | 'facebook-square' | 'facebook' | 'fast-backward' | 'fast-forward' | 'fax' | 'f-droid'
+                       | 'female' | 'ffmpeg' | 'fighter-jet' | 'file-archive-o' | 'file-audio-o' | 'file-code-o'
+                       | 'file-epub' | 'file-excel-o' | 'file-image-o' | 'file-o' | 'file-pdf-o' | 'file-powerpoint-o'
+                       | 'files-o' | 'file' | 'file-text-o' | 'file-text' | 'file-video-o' | 'file-word-o' | 'film'
+                       | 'filter' | 'fire-extinguisher' | 'firefox' | 'fire' | 'first-order' | 'flag-checkered'
+                       | 'flag-o' | 'flag' | 'flask' | 'flickr' | 'floppy-o' | 'folder-open-o' | 'folder-open'
+                       | 'folder-o' | 'folder' | 'font-awesome' | 'fonticons' | 'font' | 'fork-awesome' | 'fort-awesome'
+                       | 'forumbee' | 'forward' | 'foursquare' | 'free-code-camp' | 'freedombox' | 'friendica'
+                       | 'frown-o' | 'funkwhale' | 'futbol-o' | 'gamepad' | 'gavel' | 'gbp' | 'genderless'
+                       | 'get-pocket' | 'gg-circle' | 'gg' | 'gift' | 'gimp' | 'gitea' | 'github-alt' | 'github-square'
+                       | 'github' | 'gitlab' | 'git-square' | 'git' | 'glass' | 'glide-g' | 'glide' | 'globe-e'
+                       | 'globe' | 'globe-w' | 'gnupg' | 'gnu-social' | 'google-plus-official' | 'google-plus-square'
+                       | 'google-plus' | 'google' | 'google-wallet' | 'graduation-cap' | 'gratipay' | 'grav'
+                       | 'hackaday' | 'hacker-news' | 'hackster' | 'hal' | 'hand-lizard-o' | 'hand-o-down'
+                       | 'hand-o-left' | 'hand-o-right' | 'hand-o-up' | 'hand-paper-o' | 'hand-peace-o'
+                       | 'hand-pointer-o' | 'hand-rock-o' | 'hand-scissors-o' | 'handshake-o' | 'hand-spock-o'
+                       | 'hashnode' | 'hashtag' | 'hdd-o' | 'header' | 'headphones' | 'heartbeat' | 'heart-o' | 'heart'
+                       | 'history' | 'home' | 'hospital-o' | 'hourglass-end' | 'hourglass-half' | 'hourglass-o'
+                       | 'hourglass-start' | 'hourglass' | 'houzz' | 'h-square' | 'html5' | 'hubzilla' | 'i-cursor'
+                       | 'id-badge' | 'id-card-o' | 'id-card' | 'ils' | 'imdb' | 'inbox' | 'indent' | 'industry'
+                       | 'info-circle' | 'info' | 'inkscape' | 'inr' | 'instagram' | 'internet-explorer' | 'ioxhost'
+                       | 'italic' | 'jirafeau' | 'joomla' | 'joplin' | 'jpy' | 'jsfiddle' | 'julia' | 'jupyter'
+                       | 'keybase' | 'keyboard-o' | 'key-modern' | 'key' | 'krw' | 'language' | 'laptop' | 'laravel'
+                       | 'lastfm-square' | 'lastfm' | 'leaf' | 'leanpub' | 'lemon-o' | 'level-down' | 'level-up'
+                       | 'liberapay-square' | 'liberapay' | 'life-ring' | 'lightbulb-o' | 'line-chart'
+                       | 'linkedin-square' | 'linkedin' | 'link' | 'linode' | 'linux' | 'list-alt' | 'list-ol' | 'list'
+                       | 'list-ul' | 'location-arrow' | 'lock' | 'long-arrow-down' | 'long-arrow-left'
+                       | 'long-arrow-right' | 'long-arrow-up' | 'low-vision' | 'magic' | 'magnet' | 'male'
+                       | 'map-marker' | 'map-o' | 'map-pin' | 'map-signs' | 'map' | 'mars-double' | 'mars-stroke-h'
+                       | 'mars-stroke' | 'mars-stroke-v' | 'mars' | 'mastodon-alt' | 'mastodon-square' | 'mastodon'
+                       | 'matrix-org' | 'maxcdn' | 'meanpath' | 'medium-square' | 'medium' | 'medkit' | 'meetup'
+                       | 'meh-o' | 'mercury' | 'microchip' | 'microphone-slash' | 'microphone' | 'minus-circle'
+                       | 'minus-square-o' | 'minus-square' | 'minus' | 'mixcloud' | 'mobile' | 'modx' | 'money'
+                       | 'moon-o' | 'moon' | 'motorcycle' | 'mouse-pointer' | 'music' | 'neuter' | 'newspaper-o'
+                       | 'nextcloud-square' | 'nextcloud' | 'nodejs' | 'object-group' | 'object-ungroup'
+                       | 'odnoklassniki-square' | 'odnoklassniki' | 'opencart' | 'open-collective' | 'openid' | 'opera'
+                       | 'optin-monster' | 'orcid' | 'outdent' | 'pagelines' | 'paint-brush' | 'paperclip'
+                       | 'paper-plane-o' | 'paper-plane' | 'paragraph' | 'patreon' | 'pause-circle-o' | 'pause-circle'
+                       | 'pause' | 'paw' | 'paypal' | 'peertube' | 'pencil-square-o' | 'pencil-square' | 'pencil'
+                       | 'percent' | 'phone-square' | 'phone' | 'php' | 'picture-o' | 'pie-chart' | 'pinterest-p'
+                       | 'pinterest-square' | 'pinterest' | 'pixelfed' | 'plane' | 'play-circle-o' | 'play-circle'
+                       | 'play' | 'pleroma' | 'plug' | 'plus-circle' | 'plus-square-o' | 'plus-square' | 'plus'
+                       | 'podcast' | 'power-off' | 'print' | 'product-hunt' | 'puzzle-piece' | 'python' | 'qq'
+                       | 'qrcode' | 'question-circle-o' | 'question-circle' | 'question' | 'quora' | 'quote-left'
+                       | 'quote-right' | 'random' | 'ravelry' | 'react' | 'rebel' | 'recycle' | 'reddit-alien'
+                       | 'reddit-square' | 'reddit' | 'refresh' | 'registered' | 'renren' | 'repeat' | 'reply-all'
+                       | 'reply' | 'researchgate' | 'retweet' | 'road' | 'rocket' | 'rss-square' | 'rss' | 'rub'
+                       | 'safari' | 'scissors' | 'scribd' | 'scuttlebutt' | 'search-minus' | 'search-plus' | 'search'
+                       | 'sellsy' | 'server' | 'shaarli-o' | 'shaarli' | 'share-alt-square' | 'share-alt'
+                       | 'share-square-o' | 'share-square' | 'share' | 'shield' | 'ship' | 'shirtsinbulk'
+                       | 'shopping-bag' | 'shopping-basket' | 'shopping-cart' | 'shower' | 'signalapp' | 'signal'
+                       | 'sign-in' | 'sign-language' | 'sign-out' | 'simplybuilt' | 'sitemap' | 'skyatlas' | 'skype'
+                       | 'slack' | 'sliders' | 'slideshare' | 'smile-o' | 'snapchat-ghost' | 'snapchat-square'
+                       | 'snapchat' | 'snowdrift' | 'snowflake-o' | 'social-home' | 'sort-alpha-asc' | 'sort-alpha-desc'
+                       | 'sort-amount-asc' | 'sort-amount-desc' | 'sort-asc' | 'sort-desc' | 'sort-numeric-asc'
+                       | 'sort-numeric-desc' | 'sort' | 'soundcloud' | 'space-shuttle' | 'spell-check' | 'spinner'
+                       | 'spoon' | 'spotify' | 'square-o' | 'square' | 'stack-exchange' | 'stack-overflow'
+                       | 'star-half-o' | 'star-half' | 'star-o' | 'star' | 'steam-square' | 'steam' | 'step-backward'
+                       | 'step-forward' | 'stethoscope' | 'sticky-note-o' | 'sticky-note' | 'stop-circle-o'
+                       | 'stop-circle' | 'stop' | 'street-view' | 'strikethrough' | 'stumbleupon-circle' | 'stumbleupon'
+                       | 'subscript' | 'subway' | 'suitcase' | 'sun-o' | 'sun' | 'superpowers' | 'superscript'
+                       | 'syncthing' | 'table' | 'tablet' | 'tachometer' | 'tags' | 'tag' | 'tasks' | 'taxi'
+                       | 'telegram' | 'television' | 'tencent-weibo' | 'terminal' | 'text-height' | 'text-width'
+                       | 'themeisle' | 'thermometer-empty' | 'thermometer-full' | 'thermometer-half'
+                       | 'thermometer-quarter' | 'thermometer-three-quarters' | 'th-large' | 'th-list' | 'th'
+                       | 'thumbs-down' | 'thumbs-o-down' | 'thumbs-o-up' | 'thumbs-up' | 'thumb-tack' | 'ticket'
+                       | 'times-circle-o' | 'times-circle' | 'times' | 'tint' | 'tipeee' | 'toggle-off' | 'toggle-on'
+                       | 'tor-onion' | 'trademark' | 'train' | 'transgender-alt' | 'transgender' | 'trash-o' | 'trash'
+                       | 'tree' | 'trello' | 'tripadvisor' | 'trophy' | 'truck' | 'try' | 'tty' | 'tumblr-square'
+                       | 'tumblr' | 'twitch' | 'twitter-square' | 'twitter' | 'umbrella' | 'underline' | 'undo'
+                       | 'universal-access' | 'university' | 'unlock-alt' | 'unlock' | 'unslpash' | 'upload' | 'usb'
+                       | 'usd' | 'user-circle-o' | 'user-circle' | 'user-md' | 'user-o' | 'user-plus' | 'user-secret'
+                       | 'users' | 'user' | 'user-times' | 'venus-double' | 'venus-mars' | 'venus' | 'viacoin'
+                       | 'viadeo-square' | 'viadeo' | 'video-camera' | 'vimeo-square' | 'vimeo' | 'vine' | 'vk'
+                       | 'volume-control-phone' | 'volume-down' | 'volume-mute' | 'volume-off' | 'volume-up' | 'weibo'
+                       | 'weixin' | 'whatsapp' | 'wheelchair-alt' | 'wheelchair' | 'wifi' | 'wikidata' | 'wikipedia-w'
+                       | 'window-close-o' | 'window-close' | 'window-maximize' | 'window-minimize' | 'window-restore'
+                       | 'windows' | 'wire' | 'wordpress' | 'wpbeginner' | 'wpexplorer' | 'wpforms' | 'wrench'
+                       | 'xing-square' | 'xing' | 'xmpp' | 'yahoo' | 'y-combinator' | 'yelp' | 'yoast' | 'youtube-play'
+                       | 'youtube-square' | 'youtube' | 'zotero'
+export type IconSize = '2x' | '3x' | '4x' | '5x'
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 7eaea2153..b254e6175 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,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ReactComponent as LogoBwHorizontal } from './logo_text_bw_horizontal.svg'
@@ -12,7 +12,7 @@ import { ReactComponent as LogoWbHorizontal } from './logo_text_wb_horizontal.sv
 export enum HedgeDocLogoSize {
   SMALL = 32,
   MEDIUM = 64,
-  BIG= 256
+  BIG = 256
 }
 
 export interface HedgeDocLogoProps {
@@ -29,11 +29,11 @@ export enum HedgeDocLogoType {
 export const HedgeDocLogoWithText: React.FC<HedgeDocLogoProps> = ({ size = HedgeDocLogoSize.MEDIUM, logoType }) => {
   switch (logoType) {
     case HedgeDocLogoType.COLOR_VERTICAL:
-      return <LogoColorVertical className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }}/>
+      return <LogoColorVertical className={ 'w-auto' } title={ 'HedgeDoc logo with text' } style={ { height: size } }/>
     case HedgeDocLogoType.BW_HORIZONTAL:
-      return <LogoBwHorizontal className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }}/>
+      return <LogoBwHorizontal className={ 'w-auto' } title={ 'HedgeDoc logo with text' } style={ { height: size } }/>
     case HedgeDocLogoType.WB_HORIZONTAL:
-      return <LogoWbHorizontal className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }}/>
+      return <LogoWbHorizontal className={ 'w-auto' } title={ 'HedgeDoc logo with text' } style={ { height: size } }/>
     default:
       return null
   }
diff --git a/src/components/common/hedge-doc-logo/hedge-doc-logo.tsx b/src/components/common/hedge-doc-logo/hedge-doc-logo.tsx
index 242fd69e3..b5456f517 100644
--- a/src/components/common/hedge-doc-logo/hedge-doc-logo.tsx
+++ b/src/components/common/hedge-doc-logo/hedge-doc-logo.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ReactComponent as LogoColor } from './logo_color.svg'
@@ -18,5 +18,5 @@ export interface HedgeDocLogoProps {
 }
 
 export const HedgeDocLogo: React.FC<HedgeDocLogoProps> = ({ size = HedgeDocLogoSize.MEDIUM }) => {
-  return <LogoColor className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }}/>
+  return <LogoColor className={ 'w-auto' } title={ 'HedgeDoc logo with text' } style={ { height: size } }/>
 }
diff --git a/src/components/common/hedge-doc-logo/logo_color.svg b/src/components/common/hedge-doc-logo/logo_color.svg
index fc3ffd3a9..a2940efdd 100644
--- a/src/components/common/hedge-doc-logo/logo_color.svg
+++ b/src/components/common/hedge-doc-logo/logo_color.svg
@@ -1 +1,29 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" height="1486" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 1486 1486" width="1486" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(200 -420 420 200 660 1340)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#fcca8c"/><stop offset="1" stop-color="#dca055"/></linearGradient><g fill-rule="nonzero" transform="translate(-142.756 -142.754)"><path d="m1553.66 961.083 75.25-75.258-75.25-75.246 56.61-90.096-90.1-56.616 35.15-100.446-100.44-35.142 11.91-105.746-105.74-11.912-11.92-105.75-105.74 11.912-35.15-100.445-100.43 35.145-56.63-90.1-90.107 56.617-75.242-75.246-75.242 75.25-90.104-56.612-56.612 90.096-100.442-35.15-35.142 100.441-105.75-11.916-11.912 105.741-105.742 11.913 11.917 105.741-100.454 35.15 35.145 100.438-90.1 56.612 56.621 90.117-75.258 75.25 75.25 75.258-56.613 90.107 90.1 56.61-35.145 100.44 100.45 35.15-11.913 105.73 105.742 11.92 11.912 105.74 105.75-11.91 35.142 100.43 100.437-35.13 56.617 90.1 90.096-56.62 75.25 74.55 75.25-74.53 90.099 56.61 56.61-90.11 100.45 35.15 35.14-100.44 105.75 11.91 11.91-105.75 105.75-11.91-11.92-105.74 100.45-35.15-35.15-100.45 90.1-56.61z" fill="#b51f08"/><path d="m1401.3 1004.78c0-145.437-117.9-263.341-263.34-263.341-72.24 0-137.68 29.112-185.252 76.225l-.033-.034-67.096 67.1-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55 423.217-423.49c52.88-49.77 92.25-120 92.25-200.1" fill="#fcca8c"/><path d="m885.579 884.73-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55" fill="url(#a)"/></g><path d="m743.077 1485.616-.254-743.64" fill="none"/><g fill-rule="nonzero" transform="translate(-142.756 -142.754)"><path d="m961.011 1553.59c-19.279-19.35-45.917-31.31-75.325-31.31-29.417 0-56.046 11.96-75.329 31.31.308 41.34 33.908 74.76 75.325 74.76 41.416 0 75.02-33.43 75.329-74.76" fill="#010007"/><path d="m797.707 1098.22c0 31.8-25.767 57.57-57.571 57.57-31.787 0-57.558-25.77-57.558-57.57s25.771-57.57 57.558-57.57c31.804 0 57.571 25.77 57.571 57.57" fill="#010007"/><path d="m777.962 1089.59c0 8.82-7.146 15.94-15.95 15.94-8.808 0-15.958-7.12-15.958-15.94 0-8.81 7.15-15.96 15.958-15.96 8.804 0 15.95 7.15 15.95 15.96" fill="#fffffa"/><path d="m1089.65 1098.22c0 31.8-25.77 57.57-57.57 57.57-31.79 0-57.567-25.77-57.567-57.57s25.777-57.57 57.567-57.57c31.8 0 57.57 25.77 57.57 57.57" fill="#010007"/><path d="m1069.9 1089.59c0 8.82-7.15 15.94-15.95 15.94-8.81 0-15.96-7.12-15.96-15.94 0-8.81 7.15-15.96 15.96-15.96 8.8 0 15.95 7.15 15.95 15.96" fill="#fffffa"/></g></svg>
\ No newline at end of file
+<svg clip-rule="evenodd" fill-rule="evenodd" height="1486" stroke-linejoin="round" stroke-miterlimit="2"
+     viewBox="0 0 1486 1486" width="1486" xmlns="http://www.w3.org/2000/svg">
+    <linearGradient id="a" gradientTransform="matrix(200 -420 420 200 660 1340)" gradientUnits="userSpaceOnUse" x1="0"
+                    x2="1" y1="0" y2="0">
+        <stop offset="0" stop-color="#fcca8c"/>
+        <stop offset="1" stop-color="#dca055"/>
+    </linearGradient>
+    <g fill-rule="nonzero" transform="translate(-142.756 -142.754)">
+        <path d="m1553.66 961.083 75.25-75.258-75.25-75.246 56.61-90.096-90.1-56.616 35.15-100.446-100.44-35.142 11.91-105.746-105.74-11.912-11.92-105.75-105.74 11.912-35.15-100.445-100.43 35.145-56.63-90.1-90.107 56.617-75.242-75.246-75.242 75.25-90.104-56.612-56.612 90.096-100.442-35.15-35.142 100.441-105.75-11.916-11.912 105.741-105.742 11.913 11.917 105.741-100.454 35.15 35.145 100.438-90.1 56.612 56.621 90.117-75.258 75.25 75.25 75.258-56.613 90.107 90.1 56.61-35.145 100.44 100.45 35.15-11.913 105.73 105.742 11.92 11.912 105.74 105.75-11.91 35.142 100.43 100.437-35.13 56.617 90.1 90.096-56.62 75.25 74.55 75.25-74.53 90.099 56.61 56.61-90.11 100.45 35.15 35.14-100.44 105.75 11.91 11.91-105.75 105.75-11.91-11.92-105.74 100.45-35.15-35.15-100.45 90.1-56.61z"
+              fill="#b51f08"/>
+        <path d="m1401.3 1004.78c0-145.437-117.9-263.341-263.34-263.341-72.24 0-137.68 29.112-185.252 76.225l-.033-.034-67.096 67.1-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55 423.217-423.49c52.88-49.77 92.25-120 92.25-200.1"
+              fill="#fcca8c"/>
+        <path d="m885.579 884.73-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55"
+              fill="url(#a)"/>
+    </g>
+    <path d="m743.077 1485.616-.254-743.64" fill="none"/>
+    <g fill-rule="nonzero" transform="translate(-142.756 -142.754)">
+        <path d="m961.011 1553.59c-19.279-19.35-45.917-31.31-75.325-31.31-29.417 0-56.046 11.96-75.329 31.31.308 41.34 33.908 74.76 75.325 74.76 41.416 0 75.02-33.43 75.329-74.76"
+              fill="#010007"/>
+        <path d="m797.707 1098.22c0 31.8-25.767 57.57-57.571 57.57-31.787 0-57.558-25.77-57.558-57.57s25.771-57.57 57.558-57.57c31.804 0 57.571 25.77 57.571 57.57"
+              fill="#010007"/>
+        <path d="m777.962 1089.59c0 8.82-7.146 15.94-15.95 15.94-8.808 0-15.958-7.12-15.958-15.94 0-8.81 7.15-15.96 15.958-15.96 8.804 0 15.95 7.15 15.95 15.96"
+              fill="#fffffa"/>
+        <path d="m1089.65 1098.22c0 31.8-25.77 57.57-57.57 57.57-31.79 0-57.567-25.77-57.567-57.57s25.777-57.57 57.567-57.57c31.8 0 57.57 25.77 57.57 57.57"
+              fill="#010007"/>
+        <path d="m1069.9 1089.59c0 8.82-7.15 15.94-15.95 15.94-8.81 0-15.96-7.12-15.96-15.94 0-8.81 7.15-15.96 15.96-15.96 8.8 0 15.95 7.15 15.95 15.96"
+              fill="#fffffa"/>
+    </g>
+</svg>
diff --git a/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg b/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg
index 8721be9e6..112f8ecd7 100644
--- a/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg
+++ b/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg
@@ -1 +1,21 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" height="430.07892" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 1660.2405 430.07892" width="1660.2405" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" transform="translate(10.242436 10.242452)"><path d="m0-124.766-6.399 6.398-7.662-4.814-4.812 7.662-8.541-2.989-2.988 8.54-8.993-1.013-1.011 8.991-8.992 1.013 1.012 8.991-8.541 2.989 2.988 8.54-7.661 4.815 4.815 7.662-6.399 6.399 6.398 6.398-4.814 7.661 7.661 4.814-2.988 8.541 8.541 2.988-1.012 8.985 8.992 1.011 1.011 8.985 8.993-1.015 2.988 8.54 8.541-2.988 4.812 7.662 7.662-4.813h12.796l7.661 4.813 4.814-7.66 8.541 2.988 2.988-8.54 8.992 1.014 1.014-8.985 8.99-1.012-1.012-8.985 8.54-2.988-2.988-8.541 7.662-4.815-4.815-7.66 6.398-6.398-6.398-6.399 4.815-7.66-7.662-4.814 2.988-8.542-8.54-2.988 1.014-8.991-8.992-1.015-1.013-8.991-8.991 1.013-2.989-8.54-8.54 2.989-4.814-7.663-7.663 4.815z" fill="#333" transform="matrix(3.2849556 0 0 3.2849556 207.55664 409.85076)"/><path d="m0-30.513c0-12.366-10.025-22.393-22.392-22.393-6.143 0-11.707 2.476-15.752 6.481l-.003-.002-5.705 5.706-4.665-4.665c-4.104-4.683-10.125-7.642-16.839-7.642-12.367 0-22.392 10.025-22.392 22.391 0 6.463 2.74 12.281 7.118 16.368l36.799 36.784 35.987-36.014c4.496-4.232 7.844-10.203 7.844-17.014" fill="#fefefe" transform="matrix(3.2849556 0 0 3.2849556 351.53527 341.0132)"/><path d="m-4.558-8.253c1.645 1.64 2.662 3.904 2.662 6.406 0 2.5-1.017 4.766-2.662 6.405-3.514-.026-6.357-2.883-6.357-6.405s2.843-6.38 6.357-6.406" transform="matrix(0 -3.2849556 -3.2849556 0 201.44397 379.04995)"/><path d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.894 0 2.704 2.191 4.896 4.895 4.896s4.896-2.192 4.896-4.896c0-2.703-2.192-4.894-4.896-4.894" transform="matrix(0 -3.2849556 -3.2849556 0 166.86087 250.80164)"/><path d="m-1.356-1.355c-.751 0-1.356.607-1.356 1.356 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.749-.608-1.356-1.357-1.356" fill="#fff" transform="matrix(0 -3.2849556 -3.2849556 0 172.96926 261.80315)"/><path d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.896 0 2.703 2.191 4.894 4.895 4.894s4.896-2.191 4.896-4.894c0-2.705-2.192-4.896-4.896-4.896" transform="matrix(0 -3.2849556 -3.2849556 0 248.40602 250.80164)"/><path d="m-1.357-1.356c-.751 0-1.356.608-1.356 1.358 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.75-.608-1.358-1.357-1.358" fill="#fff" transform="matrix(0 -3.2849556 -3.2849556 0 254.51398 261.79888)"/><path d="m914.05273 122.625v70.36133c-4.97999-5.27564-10.96602-9.39883-17.95312-12.375-6.99039-2.97289-14.57179-4.46094-22.74805-4.46094-10.77794 0-20.42618 2.50598-28.9375 7.52539s-15.20529 11.89616-20.07031 20.63086c-4.87159 8.73798-7.30664 18.67703-7.30664 29.82617 0 11.15571 2.43505 21.10062 7.30664 29.83203 4.86502 8.7347 11.55899 15.6095 20.07031 20.62891s18.15956 7.5293 28.9375 7.5293c8.39963 0 16.16843-1.58011 23.30664-4.74024 7.13493-3.16012 13.19251-7.48988 18.17578-12.99219l1.00586 15.50196h16.61133v-167.26758zm-393.29492.002v167.26563h19.51563v-73.5957h95.33984v73.5957h19.51172v-167.26568h-19.51172v75.82813h-95.33984v-75.82813zm724.69919.22071v167.26757h45.4961c32.8594 0 58.0977-7.32308 75.7149-21.9707 17.6172-14.64105 26.4277-35.27334 26.4277-61.88476 0-26.53916-8.8105-47.07674-26.4277-61.60938s-42.8555-21.80273-75.7149-21.80273zm19.5157 17.8457h25.9804c26.4636 0 46.7614 5.70463 60.8867 17.11328 14.1221 11.41522 21.1856 27.56409 21.1856 48.45313 0 20.9613-7.0635 37.20817-21.1856 48.72851-14.1253 11.52363-34.4231 17.28711-60.8867 17.28711h-25.9804zm-248.3301 35.45508c-10.778 0-20.42425 2.50988-28.93557 7.52929-8.51132 5.01942-15.20725 11.89421-20.07226 20.62891-4.87159 8.7347-7.30469 18.6757-7.30469 29.82813 0 11.15242 2.4331 21.09538 7.30469 29.83007 4.86501 8.7347 11.56094 15.61145 20.07226 20.63086 8.51132 5.01942 18.15757 7.52539 28.93557 7.52539 8.1762 0 15.7596-1.48805 22.75-4.46093 6.9871-2.97289 12.9712-7.09608 17.9512-12.375v5.79492c0 15.16664-3.81 27.30097-11.4278 36.41015-7.6244 9.10262-19.3481 13.65625-35.1816 13.65625-6.2447 0-12.04336-1.02121-17.39456-3.06445-5.35447-2.04653-10.11335-4.88956-14.27539-8.5293l-9.14257 15.38672c5.49901 4.08977 11.66853 7.2633 18.50781 9.53321 6.83928 2.2699 14.16041 3.40039 21.96871 3.40039 14.1976 0 26.1478-2.88015 35.8516-8.63867 9.7005-5.76182 17.0402-13.8114 22.0234-24.14258 4.98-10.33447 7.4688-22.37675 7.4688-36.13086v-100.58208h-16.6152l-1.004 15.50195c-4.9799-5.5023-11.0375-9.83206-18.1757-12.99219-7.135-3.16013-14.9051-4.74023-23.3047-4.74023zm591.7656.002c-11.1524 0-21.0973 2.50989-29.832 7.5293-8.7347 5.01612-15.6095 11.89092-20.6289 20.6289-5.0162 8.7347-7.5254 18.67375-7.5254 29.82618 0 11.15242 2.5092 21.09671 7.5254 29.82812 5.0194 8.73798 11.8942 15.61278 20.6289 20.62891 8.7347 5.01941 18.6796 7.52929 29.832 7.52929 8.3996 0 16.1288-1.44899 23.1914-4.34961 7.0627-2.90061 13.1951-6.95092 18.3984-12.15429l-12.8242-12.71094c-3.4952 3.86639-7.6932 6.91014-12.5976 9.14063-4.9078 2.23048-10.2978 3.34765-16.168 3.34765-7.5094 0-14.2007-1.78277-20.0742-5.35351-5.8735-3.56747-10.5026-8.47539-13.8828-14.7168-3.3835-6.2447-5.0723-13.30885-5.0723-21.18945 0-7.95288 1.6888-15.03363 5.0723-21.24219 3.3802-6.20528 8.0093-11.09465 13.8828-14.66211 5.8735-3.57075 12.5648-5.35352 20.0742-5.35352 5.8702 0 11.2602 1.09605 16.168 3.28711 4.9044 2.19435 9.1024 5.25923 12.5976 9.20117l12.8242-12.82421c-5.2033-5.12782-11.3357-9.14236-18.3984-12.04297-7.0626-2.90062-14.7918-4.34766-23.1914-4.34766zm-867.86718.002c-11.00132 0-20.85027 2.494-29.54883 7.47071-8.69856 4.98327-15.53759 11.8057-20.51758 20.46484s-7.47266 18.49149-7.47266 29.49609c0 11.30025 2.65627 21.37042 7.97461 30.2168 5.31178 8.84639 12.65475 15.77942 22.02344 20.79883 9.36541 5.01613 32.11328 7.52539 32.11328 7.52539 7.50941 0 15.29543-1.26551 23.36328-3.79492 8.06457-2.52613 16.14797-7.17049 24.25196-13.9375l-10.81641-13.82617c-5.5023 5.20337-11.59699 8.97814-18.28516 11.32031-6.69474 2.33889-13.04765 3.51172-19.07226 3.51172-10.8535 0-20.12695-3.1801-27.82031-9.53321-7.69337-6.35967-12.46885-14.48142-14.32813-24.36914h94.56055v-7.46875c0-11.22469-2.41783-21.18948-7.25-29.88476-4.83217-8.69856-11.48576-15.53626-19.96094-20.51953-8.47519-4.97671-18.21024-7.47071-29.21484-7.47071zm420.61328 0c-11.0013 0-20.8483 2.494-29.5469 7.47071-8.6985 4.98327-15.5395 11.8057-20.5195 20.46484s-7.4727 18.49149-7.4727 29.49609c0 11.30025 2.6583 21.37042 7.9766 30.2168 5.3118 8.84639 12.6561 15.77942 22.0215 20.79883 9.3654 5.01613 20.0706 7.52539 32.1133 7.52539 7.5094 0 15.2954-1.26551 23.3632-3.79492 8.0646-2.52613 16.15-7.17049 24.254-13.9375l-10.8184-13.82617c-5.5023 5.20337-11.595 8.97814-18.2832 11.32031-6.6915 2.33889-13.0496 3.51172-19.0742 3.51172-10.8535 0-20.125-3.1801-27.8184-9.53321-7.6934-6.35967-12.4708-14.48142-14.3301-24.36914h94.5606v-7.46875c0-11.22469-2.4179-21.18948-7.25-29.88476-4.8322-8.69856-11.4838-15.53626-19.959-20.51953-8.4752-4.97671-18.2122-7.47071-29.2168-7.47071zm311.2109 0c-11.1524 0-21.0914 2.50598-29.8261 7.52539-8.738 5.01942-15.6134 11.89617-20.6329 20.63086-5.0161 8.7347-7.5273 18.67704-7.5273 29.82618 0 11.15242 2.5112 21.09733 7.5273 29.83203 5.0195 8.73469 11.8949 15.60949 20.6329 20.6289 8.7347 5.01942 18.6737 7.52539 29.8261 7.52539 11.1492 0 21.0935-2.50597 29.8282-7.52539 8.7347-5.01941 15.6095-11.89421 20.6289-20.6289 5.0194-8.7347 7.5254-18.67961 7.5254-29.83203 0-11.14914-2.506-21.09148-7.5254-29.82618-5.0194-8.73469-11.8942-15.61144-20.6289-20.63086-8.7347-5.01941-18.679-7.52539-29.8282-7.52539zm-454.0488 16.72251c7.5061 0 14.2001 1.78472 20.0703 5.35547 5.8735 3.56746 10.5026 8.45816 13.8828 14.66015 3.3835 6.20857 5.0743 13.29127 5.0743 21.24415 0 7.8806-1.6908 14.9428-5.0743 21.1875-3.3802 6.2447-8.0093 11.14995-13.8828 14.7207-5.8702 3.56746-12.5642 5.35156-20.0703 5.35156-7.5094 0-14.202-1.7841-20.07226-5.35156-5.8735-3.57075-10.50259-8.476-13.88281-14.7207-3.38679-6.2447-5.07422-13.3069-5.07422-21.1875 0-7.95288 1.68743-15.03558 5.07422-21.24415 3.38022-6.20199 8.00931-11.09269 13.88281-14.66015 5.87026-3.57075 12.56286-5.35547 20.07226-5.35547zm-143.29296.002c7.50941 0 14.20009 1.7841 20.07031 5.35157 5.8735 3.57074 10.50321 8.45878 13.88672 14.66406 3.38022 6.20856 5.07226 13.29064 5.07226 21.24023 0 7.88061-1.69204 14.94476-5.07226 21.18946-3.38351 6.2447-8.01322 11.15128-13.88672 14.71875-5.87022 3.57074-12.5609 5.35546-20.07031 5.35546s-14.2001-1.78472-20.07032-5.35546c-5.8735-3.56747-10.50259-8.47405-13.88281-14.71875-3.3835-6.2447-5.07617-13.30885-5.07617-21.18946 0-7.94959 1.69267-15.03167 5.07617-21.24023 3.38022-6.20528 8.00931-11.09332 13.88281-14.66406 5.87022-3.56747 12.56091-5.35157 20.07032-5.35157zm-134.5918.002c9.73661 0 17.98823 3.06487 24.75195 9.20117 6.76373 6.13301 10.96566 14.06675 12.60157 23.80664h-75.60352c1.63591-9.58879 5.94845-17.4887 12.93555-23.69727 6.9871-6.20528 15.42673-9.31054 25.31445-9.31054zm420.61526 0c9.7366 0 17.9882 3.06487 24.7519 9.20117 6.7638 6.13301 10.9657 14.06675 12.6016 23.80664h-75.6035c1.6359-9.58879 5.9484-17.4887 12.9355-23.69727 6.9871-6.20528 15.4268-9.31054 25.3145-9.31054zm311.3183 0c7.5062 0 14.2021 1.78081 20.0723 5.35156 5.8735 3.57075 10.5013 8.45878 13.8848 14.66406 3.3802 6.20528 5.0722 13.28736 5.0722 21.24024 0 7.8806-1.692 14.94475-5.0722 21.18945-3.3835 6.2447-8.0113 11.148-13.8848 14.71875-5.8702 3.56746-12.5661 5.35156-20.0723 5.35156-7.5094 0-14.2001-1.7841-20.0703-5.35156-5.8735-3.57075-10.5026-8.47405-13.8828-14.71875-3.3868-6.2447-5.0742-13.30885-5.0742-21.18945 0-7.95288 1.6874-15.03496 5.0742-21.24024 3.3802-6.20528 8.0093-11.09331 13.8828-14.66406 5.8702-3.57075 12.5609-5.35156 20.0703-5.35156z" fill="#333" stroke-width="3.28496"/></g></svg>
+<svg clip-rule="evenodd" fill-rule="evenodd" height="430.07892" stroke-linejoin="round" stroke-miterlimit="2"
+     viewBox="0 0 1660.2405 430.07892" width="1660.2405" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" transform="translate(10.242436 10.242452)">
+        <path d="m0-124.766-6.399 6.398-7.662-4.814-4.812 7.662-8.541-2.989-2.988 8.54-8.993-1.013-1.011 8.991-8.992 1.013 1.012 8.991-8.541 2.989 2.988 8.54-7.661 4.815 4.815 7.662-6.399 6.399 6.398 6.398-4.814 7.661 7.661 4.814-2.988 8.541 8.541 2.988-1.012 8.985 8.992 1.011 1.011 8.985 8.993-1.015 2.988 8.54 8.541-2.988 4.812 7.662 7.662-4.813h12.796l7.661 4.813 4.814-7.66 8.541 2.988 2.988-8.54 8.992 1.014 1.014-8.985 8.99-1.012-1.012-8.985 8.54-2.988-2.988-8.541 7.662-4.815-4.815-7.66 6.398-6.398-6.398-6.399 4.815-7.66-7.662-4.814 2.988-8.542-8.54-2.988 1.014-8.991-8.992-1.015-1.013-8.991-8.991 1.013-2.989-8.54-8.54 2.989-4.814-7.663-7.663 4.815z"
+              fill="#333" transform="matrix(3.2849556 0 0 3.2849556 207.55664 409.85076)"/>
+        <path d="m0-30.513c0-12.366-10.025-22.393-22.392-22.393-6.143 0-11.707 2.476-15.752 6.481l-.003-.002-5.705 5.706-4.665-4.665c-4.104-4.683-10.125-7.642-16.839-7.642-12.367 0-22.392 10.025-22.392 22.391 0 6.463 2.74 12.281 7.118 16.368l36.799 36.784 35.987-36.014c4.496-4.232 7.844-10.203 7.844-17.014"
+              fill="#fefefe" transform="matrix(3.2849556 0 0 3.2849556 351.53527 341.0132)"/>
+        <path d="m-4.558-8.253c1.645 1.64 2.662 3.904 2.662 6.406 0 2.5-1.017 4.766-2.662 6.405-3.514-.026-6.357-2.883-6.357-6.405s2.843-6.38 6.357-6.406"
+              transform="matrix(0 -3.2849556 -3.2849556 0 201.44397 379.04995)"/>
+        <path d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.894 0 2.704 2.191 4.896 4.895 4.896s4.896-2.192 4.896-4.896c0-2.703-2.192-4.894-4.896-4.894"
+              transform="matrix(0 -3.2849556 -3.2849556 0 166.86087 250.80164)"/>
+        <path d="m-1.356-1.355c-.751 0-1.356.607-1.356 1.356 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.749-.608-1.356-1.357-1.356"
+              fill="#fff" transform="matrix(0 -3.2849556 -3.2849556 0 172.96926 261.80315)"/>
+        <path d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.896 0 2.703 2.191 4.894 4.895 4.894s4.896-2.191 4.896-4.894c0-2.705-2.192-4.896-4.896-4.896"
+              transform="matrix(0 -3.2849556 -3.2849556 0 248.40602 250.80164)"/>
+        <path d="m-1.357-1.356c-.751 0-1.356.608-1.356 1.358 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.75-.608-1.358-1.357-1.358"
+              fill="#fff" transform="matrix(0 -3.2849556 -3.2849556 0 254.51398 261.79888)"/>
+        <path d="m914.05273 122.625v70.36133c-4.97999-5.27564-10.96602-9.39883-17.95312-12.375-6.99039-2.97289-14.57179-4.46094-22.74805-4.46094-10.77794 0-20.42618 2.50598-28.9375 7.52539s-15.20529 11.89616-20.07031 20.63086c-4.87159 8.73798-7.30664 18.67703-7.30664 29.82617 0 11.15571 2.43505 21.10062 7.30664 29.83203 4.86502 8.7347 11.55899 15.6095 20.07031 20.62891s18.15956 7.5293 28.9375 7.5293c8.39963 0 16.16843-1.58011 23.30664-4.74024 7.13493-3.16012 13.19251-7.48988 18.17578-12.99219l1.00586 15.50196h16.61133v-167.26758zm-393.29492.002v167.26563h19.51563v-73.5957h95.33984v73.5957h19.51172v-167.26568h-19.51172v75.82813h-95.33984v-75.82813zm724.69919.22071v167.26757h45.4961c32.8594 0 58.0977-7.32308 75.7149-21.9707 17.6172-14.64105 26.4277-35.27334 26.4277-61.88476 0-26.53916-8.8105-47.07674-26.4277-61.60938s-42.8555-21.80273-75.7149-21.80273zm19.5157 17.8457h25.9804c26.4636 0 46.7614 5.70463 60.8867 17.11328 14.1221 11.41522 21.1856 27.56409 21.1856 48.45313 0 20.9613-7.0635 37.20817-21.1856 48.72851-14.1253 11.52363-34.4231 17.28711-60.8867 17.28711h-25.9804zm-248.3301 35.45508c-10.778 0-20.42425 2.50988-28.93557 7.52929-8.51132 5.01942-15.20725 11.89421-20.07226 20.62891-4.87159 8.7347-7.30469 18.6757-7.30469 29.82813 0 11.15242 2.4331 21.09538 7.30469 29.83007 4.86501 8.7347 11.56094 15.61145 20.07226 20.63086 8.51132 5.01942 18.15757 7.52539 28.93557 7.52539 8.1762 0 15.7596-1.48805 22.75-4.46093 6.9871-2.97289 12.9712-7.09608 17.9512-12.375v5.79492c0 15.16664-3.81 27.30097-11.4278 36.41015-7.6244 9.10262-19.3481 13.65625-35.1816 13.65625-6.2447 0-12.04336-1.02121-17.39456-3.06445-5.35447-2.04653-10.11335-4.88956-14.27539-8.5293l-9.14257 15.38672c5.49901 4.08977 11.66853 7.2633 18.50781 9.53321 6.83928 2.2699 14.16041 3.40039 21.96871 3.40039 14.1976 0 26.1478-2.88015 35.8516-8.63867 9.7005-5.76182 17.0402-13.8114 22.0234-24.14258 4.98-10.33447 7.4688-22.37675 7.4688-36.13086v-100.58208h-16.6152l-1.004 15.50195c-4.9799-5.5023-11.0375-9.83206-18.1757-12.99219-7.135-3.16013-14.9051-4.74023-23.3047-4.74023zm591.7656.002c-11.1524 0-21.0973 2.50989-29.832 7.5293-8.7347 5.01612-15.6095 11.89092-20.6289 20.6289-5.0162 8.7347-7.5254 18.67375-7.5254 29.82618 0 11.15242 2.5092 21.09671 7.5254 29.82812 5.0194 8.73798 11.8942 15.61278 20.6289 20.62891 8.7347 5.01941 18.6796 7.52929 29.832 7.52929 8.3996 0 16.1288-1.44899 23.1914-4.34961 7.0627-2.90061 13.1951-6.95092 18.3984-12.15429l-12.8242-12.71094c-3.4952 3.86639-7.6932 6.91014-12.5976 9.14063-4.9078 2.23048-10.2978 3.34765-16.168 3.34765-7.5094 0-14.2007-1.78277-20.0742-5.35351-5.8735-3.56747-10.5026-8.47539-13.8828-14.7168-3.3835-6.2447-5.0723-13.30885-5.0723-21.18945 0-7.95288 1.6888-15.03363 5.0723-21.24219 3.3802-6.20528 8.0093-11.09465 13.8828-14.66211 5.8735-3.57075 12.5648-5.35352 20.0742-5.35352 5.8702 0 11.2602 1.09605 16.168 3.28711 4.9044 2.19435 9.1024 5.25923 12.5976 9.20117l12.8242-12.82421c-5.2033-5.12782-11.3357-9.14236-18.3984-12.04297-7.0626-2.90062-14.7918-4.34766-23.1914-4.34766zm-867.86718.002c-11.00132 0-20.85027 2.494-29.54883 7.47071-8.69856 4.98327-15.53759 11.8057-20.51758 20.46484s-7.47266 18.49149-7.47266 29.49609c0 11.30025 2.65627 21.37042 7.97461 30.2168 5.31178 8.84639 12.65475 15.77942 22.02344 20.79883 9.36541 5.01613 32.11328 7.52539 32.11328 7.52539 7.50941 0 15.29543-1.26551 23.36328-3.79492 8.06457-2.52613 16.14797-7.17049 24.25196-13.9375l-10.81641-13.82617c-5.5023 5.20337-11.59699 8.97814-18.28516 11.32031-6.69474 2.33889-13.04765 3.51172-19.07226 3.51172-10.8535 0-20.12695-3.1801-27.82031-9.53321-7.69337-6.35967-12.46885-14.48142-14.32813-24.36914h94.56055v-7.46875c0-11.22469-2.41783-21.18948-7.25-29.88476-4.83217-8.69856-11.48576-15.53626-19.96094-20.51953-8.47519-4.97671-18.21024-7.47071-29.21484-7.47071zm420.61328 0c-11.0013 0-20.8483 2.494-29.5469 7.47071-8.6985 4.98327-15.5395 11.8057-20.5195 20.46484s-7.4727 18.49149-7.4727 29.49609c0 11.30025 2.6583 21.37042 7.9766 30.2168 5.3118 8.84639 12.6561 15.77942 22.0215 20.79883 9.3654 5.01613 20.0706 7.52539 32.1133 7.52539 7.5094 0 15.2954-1.26551 23.3632-3.79492 8.0646-2.52613 16.15-7.17049 24.254-13.9375l-10.8184-13.82617c-5.5023 5.20337-11.595 8.97814-18.2832 11.32031-6.6915 2.33889-13.0496 3.51172-19.0742 3.51172-10.8535 0-20.125-3.1801-27.8184-9.53321-7.6934-6.35967-12.4708-14.48142-14.3301-24.36914h94.5606v-7.46875c0-11.22469-2.4179-21.18948-7.25-29.88476-4.8322-8.69856-11.4838-15.53626-19.959-20.51953-8.4752-4.97671-18.2122-7.47071-29.2168-7.47071zm311.2109 0c-11.1524 0-21.0914 2.50598-29.8261 7.52539-8.738 5.01942-15.6134 11.89617-20.6329 20.63086-5.0161 8.7347-7.5273 18.67704-7.5273 29.82618 0 11.15242 2.5112 21.09733 7.5273 29.83203 5.0195 8.73469 11.8949 15.60949 20.6329 20.6289 8.7347 5.01942 18.6737 7.52539 29.8261 7.52539 11.1492 0 21.0935-2.50597 29.8282-7.52539 8.7347-5.01941 15.6095-11.89421 20.6289-20.6289 5.0194-8.7347 7.5254-18.67961 7.5254-29.83203 0-11.14914-2.506-21.09148-7.5254-29.82618-5.0194-8.73469-11.8942-15.61144-20.6289-20.63086-8.7347-5.01941-18.679-7.52539-29.8282-7.52539zm-454.0488 16.72251c7.5061 0 14.2001 1.78472 20.0703 5.35547 5.8735 3.56746 10.5026 8.45816 13.8828 14.66015 3.3835 6.20857 5.0743 13.29127 5.0743 21.24415 0 7.8806-1.6908 14.9428-5.0743 21.1875-3.3802 6.2447-8.0093 11.14995-13.8828 14.7207-5.8702 3.56746-12.5642 5.35156-20.0703 5.35156-7.5094 0-14.202-1.7841-20.07226-5.35156-5.8735-3.57075-10.50259-8.476-13.88281-14.7207-3.38679-6.2447-5.07422-13.3069-5.07422-21.1875 0-7.95288 1.68743-15.03558 5.07422-21.24415 3.38022-6.20199 8.00931-11.09269 13.88281-14.66015 5.87026-3.57075 12.56286-5.35547 20.07226-5.35547zm-143.29296.002c7.50941 0 14.20009 1.7841 20.07031 5.35157 5.8735 3.57074 10.50321 8.45878 13.88672 14.66406 3.38022 6.20856 5.07226 13.29064 5.07226 21.24023 0 7.88061-1.69204 14.94476-5.07226 21.18946-3.38351 6.2447-8.01322 11.15128-13.88672 14.71875-5.87022 3.57074-12.5609 5.35546-20.07031 5.35546s-14.2001-1.78472-20.07032-5.35546c-5.8735-3.56747-10.50259-8.47405-13.88281-14.71875-3.3835-6.2447-5.07617-13.30885-5.07617-21.18946 0-7.94959 1.69267-15.03167 5.07617-21.24023 3.38022-6.20528 8.00931-11.09332 13.88281-14.66406 5.87022-3.56747 12.56091-5.35157 20.07032-5.35157zm-134.5918.002c9.73661 0 17.98823 3.06487 24.75195 9.20117 6.76373 6.13301 10.96566 14.06675 12.60157 23.80664h-75.60352c1.63591-9.58879 5.94845-17.4887 12.93555-23.69727 6.9871-6.20528 15.42673-9.31054 25.31445-9.31054zm420.61526 0c9.7366 0 17.9882 3.06487 24.7519 9.20117 6.7638 6.13301 10.9657 14.06675 12.6016 23.80664h-75.6035c1.6359-9.58879 5.9484-17.4887 12.9355-23.69727 6.9871-6.20528 15.4268-9.31054 25.3145-9.31054zm311.3183 0c7.5062 0 14.2021 1.78081 20.0723 5.35156 5.8735 3.57075 10.5013 8.45878 13.8848 14.66406 3.3802 6.20528 5.0722 13.28736 5.0722 21.24024 0 7.8806-1.692 14.94475-5.0722 21.18945-3.3835 6.2447-8.0113 11.148-13.8848 14.71875-5.8702 3.56746-12.5661 5.35156-20.0723 5.35156-7.5094 0-14.2001-1.7841-20.0703-5.35156-5.8735-3.57075-10.5026-8.47405-13.8828-14.71875-3.3868-6.2447-5.0742-13.30885-5.0742-21.18945 0-7.95288 1.6874-15.03496 5.0742-21.24024 3.3802-6.20528 8.0093-11.09331 13.8828-14.66406 5.8702-3.57075 12.5609-5.35156 20.0703-5.35156z"
+              fill="#333" stroke-width="3.28496"/>
+    </g>
+</svg>
diff --git a/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg b/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg
index cd5f80101..ea6744847 100644
--- a/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg
+++ b/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg
@@ -1 +1,35 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" height="1000" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 1510 1000" width="1510" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(200 -420 420 200 660 1340)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#fdd49a"/><stop offset="1" stop-color="#dca055"/></linearGradient><g fill-rule="nonzero"><path d="m526.55078 695.48438v94.20312c-6.66549-7.06493-14.67792-12.58654-24.03125-16.56836-9.35749-3.98182-19.51014-5.97461-30.45703-5.97461-14.43358 0-27.34789 3.35659-38.74414 10.07617-11.39625 6.71959-20.35539 15.92332-26.87109 27.61914-6.51987 11.69583-9.77735 25.00684-9.77735 39.93555 0 14.93287 3.25748 28.24389 9.77735 39.93555 6.5157 11.69582 15.47484 20.90346 26.87109 27.62304 11.39625 6.71543 24.31056 10.07227 38.74414 10.07227 11.24646 0 21.64813-2.11449 31.20117-6.3418 9.55305-4.23146 17.66212-10.02587 24.33594-17.39453l1.34375 20.75391h22.24414v-223.93945zm-526.55078.00195v223.93945h26.128906v-98.53125h127.642574v98.53125h26.1211v-223.93945h-26.1211v101.52148h-127.642574v-101.52148zm970.24609.29687v223.93946h60.91011c43.9915 0 77.78-9.80258 101.3672-29.41211 23.5872-19.60538 35.3828-47.2249 35.3828-82.85743 0-35.5285-11.7956-63.02267-35.3828-82.48242-23.5872-19.45559-57.3757-29.1875-101.3672-29.1875zm26.125 23.88672h34.78511c35.4287 0 62.6012 7.63976 81.5118 22.91797 18.9063 15.27821 28.3652 36.90095 28.3652 64.86523 0 28.06831-9.4589 49.8164-28.3652 65.24024-18.9106 15.428-46.0831 23.14258-81.5118 23.14258h-34.78511zm-702.11718 47.47656c-14.73316 0-27.91466 3.33256-39.56055 9.99805-11.64589 6.67382-20.80521 15.80664-27.4707 27.39844-6.66966 11.59596-10.00586 24.75512-10.00586 39.48828 0 15.12843 3.56092 28.61363 10.67578 40.45508 7.11485 11.84977 16.94808 21.12416 29.48437 27.84375 12.54045 6.71958 26.87325 10.07812 42.9961 10.07812 10.05233 0 20.47608-1.69349 31.27734-5.07617 10.7971-3.38268 21.62172-9.60419 32.46875-18.66211l-14.47852-18.50976c-7.36865 6.96506-15.52852 12.01515-24.48242 15.15234-8.95806 3.13303-17.46554 4.70117-25.5332 4.70117-14.52928 0-26.94633-4.25497-37.24414-12.76367-10.30198-8.5087-16.69548-19.3858-19.18359-32.62109h126.59765v-10.00196c0-15.02857-3.23709-28.36803-9.70703-40.00976-6.46578-11.6459-15.37438-20.79884-26.7207-27.47266-11.34632-6.66549-24.38013-9.99805-39.11328-9.99805zm369.64843 0c-14.43358 0-27.34789 3.35685-38.74414 10.07227-11.39625 6.71958-20.35538 15.92723-26.87109 27.62305-6.51987 11.69582-9.77734 25.00293-9.77734 39.93164 0 14.93287 3.25747 28.24779 9.77734 39.93945 6.51571 11.69582 15.47484 20.8976 26.87109 27.61719 11.39625 6.71958 24.31056 10.07812 38.74414 10.07812 10.94273 0 21.09955-1.99304 30.45704-5.9707 9.34916-3.98182 17.36575-9.50318 24.03124-16.57227v7.76368c0 20.30021-5.10087 36.54903-15.29882 48.74414-10.20628 12.18679-25.90458 18.28515-47.10352 18.28515-8.35891 0-16.12233-1.3677-23.28711-4.10547-7.16478-2.73776-13.53985-6.54575-19.11523-11.41796l-12.23633 20.59961c7.36034 5.47552 15.62347 9.72828 24.78125 12.76562 9.15361 3.03734 18.96035 4.55273 29.41211 4.55273 19.00623 0 35.00407-3.85826 47.99805-11.57226 12.98564-7.70984 22.81276-18.48613 29.48242-32.31641 6.66549-13.8386 10.0039-29.96154 10.0039-48.37695v-134.6582h-22.24414l-1.34765 20.7539c-6.66966-7.36866-14.77899-13.16086-24.33203-17.39648-9.55305-4.22731-19.95887-6.33985-31.20118-6.33985zm193.48047 0c-14.72899 0-27.91465 3.33256-39.56054 9.99805-11.6459 6.67382-20.80326 15.80664-27.46875 27.39844-6.66966 11.59596-10.00586 24.75512-10.00586 39.48828 0 15.12843 3.56092 28.61363 10.67578 40.45508 7.11485 11.84977 16.94587 21.12416 29.48633 27.84375 12.54045 6.71958 26.87129 10.07812 42.99414 10.07812 10.05649 0 20.47803-1.69349 31.27929-5.07617 10.79295-3.38268 21.61977-9.60419 32.4668-18.66211l-14.47852-18.50976c-7.36865 6.96506-15.52436 12.01515-24.48242 15.15234-8.95806 3.13303-17.46775 4.70117-25.53125 4.70117-14.52928 0-26.94412-4.25497-37.24609-12.76367-10.30198-8.5087-16.69743-19.3858-19.18555-32.62109h126.59961v-10.00196c0-15.02857-3.23709-28.36803-9.70703-40.00976-6.46578-11.6459-15.37438-20.79884-26.7207-27.47266-11.34632-6.66549-24.38208-9.99805-39.11524-9.99805zm413.53909 0c-14.9329 0-28.2437 3.35659-39.9395 10.07618-11.6958 6.71958-20.8995 15.92332-27.6191 27.61914-6.7154 11.69582-10.0781 25.00683-10.0781 39.93554 0 14.93288 3.3627 28.24194 10.0781 39.9336 6.7196 11.69582 15.9233 20.90346 27.6191 27.62304 11.6958 6.71959 25.0066 10.07813 39.9395 10.07813 14.9287 0 28.238-3.35854 39.9297-10.07813 11.6958-6.71958 20.9034-15.92722 27.623-27.62304 6.7196-11.69166 10.0781-25.00072 10.0781-39.9336 0-14.92871-3.3585-28.23972-10.0781-39.93554s-15.9272-20.89956-27.623-27.61914c-11.6917-6.71959-25.001-10.07618-39.9297-10.07618zm182.1347.002c-14.9328 0-28.2438 3.35854-39.9355 10.07812-11.6958 6.71959-20.9035 15.92332-27.6231 27.61914-6.7154 11.69582-10.0761 25.00489-10.0761 39.9336s3.3607 28.24388 10.0761 39.93554c6.7196 11.69583 15.9273 20.89956 27.6231 27.61914 11.6917 6.71959 25.0027 10.07813 39.9355 10.07813 11.2465 0 21.5935-1.9403 31.0508-5.82227 9.4532-3.88196 17.6678-9.30641 24.6328-16.27148l-17.1679-17.02148c-4.6809 5.18011-10.3016 9.25698-16.8672 12.24023-6.574 2.98741-13.7888 4.48047-21.6485 4.48047-10.0565 0-19.0153-2.38754-26.875-7.16406-7.8637-4.78069-14.059-11.34591-18.5859-19.70899-4.531-8.35891-6.793-17.81777-6.793-28.36523 0-10.64732 2.262-20.12852 6.793-28.4375 4.5269-8.30899 10.7222-14.85409 18.5859-19.63477 7.8597-4.77652 16.8185-7.16406 26.875-7.16406 7.8597 0 15.0745 1.46903 21.6485 4.40234 6.5656 2.93748 12.1863 7.04255 16.8672 12.31836l17.1679-17.16992c-6.965-6.86521-15.1796-12.24108-24.6328-16.12305-9.4573-3.88196-19.8043-5.82226-31.0508-5.82226zm-978.75582 22.38867c10.05233 0 19.00952 2.38924 26.86914 7.16992 7.86379 4.77652 14.06076 11.31992 18.5918 19.62891 4.52688 8.30898 6.78906 17.79213 6.78906 28.43945 0 10.55162-2.26218 20.00437-6.78906 28.36328-4.53104 8.36308-10.72801 14.9283-18.5918 19.70899-7.85962 4.77652-16.81681 7.16601-26.86914 7.16601s-19.00951-2.38949-26.86914-7.16601c-7.86795-4.78069-14.06322-11.34591-18.58594-19.70899-4.5352-8.35891-6.79882-17.81166-6.79882-28.36328 0-10.64732 2.26362-20.13047 6.79882-28.43945 4.52272-8.30899 10.71799-14.85239 18.58594-19.62891 7.85963-4.78068 16.81681-7.16992 26.86914-7.16992zm-180.19336.002c13.03558 0 24.08271 4.10312 33.14063 12.31641 9.05375 8.21329 14.67864 18.83551 16.86718 31.87109h-101.21875c2.18855-12.83586 7.96478-23.41367 17.32227-31.72265 9.35333-8.30899 20.64922-12.46485 33.88867-12.46485zm372.0332 0c10.05234 0 19.00952 2.3895 26.86915 7.16602 7.86378 4.78068 14.06075 11.32408 18.59179 19.6289 4.52688 8.31315 6.78906 17.7963 6.78906 28.43946 0 10.55162-2.26218 20.00827-6.78906 28.36718-4.53104 8.35892-10.72801 14.92856-18.59179 19.70508-7.85963 4.78069-16.81681 7.16992-26.86915 7.16992-10.05233 0-19.01121-2.38923-26.875-7.16992-7.86378-4.77652-14.05931-11.34616-18.58203-19.70508-4.5352-8.35891-6.79687-17.81556-6.79687-28.36718 0-10.64316 2.26167-20.12631 6.79687-28.43946 4.52272-8.30482 10.71825-14.84822 18.58203-19.6289 7.86379-4.77652 16.82267-7.16602 26.875-7.16602zm191.09766 0c13.03558 0 24.08076 4.10312 33.13867 12.31641 9.05376 8.21329 14.6806 18.83551 16.86914 31.87109h-101.21875c2.18855-12.83586 7.96283-23.41367 17.32032-31.72265 9.35333-8.30899 20.65117-12.46485 33.89062-12.46485zm413.68362 0c10.0481 0 19.0095 2.38729 26.8691 7.16797 7.8638 4.77652 14.0591 11.32188 18.586 19.63086 4.531 8.30899 6.7949 17.79214 6.7949 28.43945 0 10.55162-2.2639 20.00412-6.7949 28.36719-4.5269 8.35891-10.7222 14.9244-18.586 19.70508-7.8596 4.78068-16.821 7.16601-26.8691 7.16601-10.0565 0-19.0154-2.38533-26.875-7.16601-7.8638-4.78068-14.0591-11.34617-18.586-19.70508-4.531-8.36307-6.7949-17.81557-6.7949-28.36719 0-10.64731 2.2639-20.13046 6.7949-28.43945 4.5269-8.30898 10.7222-14.85434 18.586-19.63086 7.8596-4.78068 16.8185-7.16797 26.875-7.16797z" fill="#fff" stroke-width="4.16073"/><g transform="matrix(.41332019 0 0 .41332019 390.39426 -59.003113)"><path d="m1553.66 961.083 75.25-75.258-75.25-75.246 56.61-90.096-90.1-56.616 35.15-100.446-100.44-35.142 11.91-105.746-105.74-11.912-11.92-105.75-105.74 11.912-35.15-100.445-100.43 35.145-56.63-90.1-90.107 56.617-75.242-75.246-75.242 75.25-90.104-56.612-56.612 90.096-100.442-35.15-35.142 100.441-105.75-11.916-11.912 105.741-105.742 11.913 11.917 105.741-100.454 35.15 35.145 100.438-90.1 56.612 56.621 90.117-75.258 75.25 75.25 75.258-56.613 90.107 90.1 56.61-35.145 100.44 100.45 35.15-11.913 105.73 105.742 11.92 11.912 105.74 105.75-11.91 35.142 100.43 100.437-35.13 56.617 90.1 90.096-56.62 75.25 74.55 75.25-74.53 90.099 56.61 56.61-90.11 100.45 35.15 35.14-100.44 105.75 11.91 11.91-105.75 105.75-11.91-11.92-105.74 100.45-35.15-35.15-100.45 90.1-56.61z" fill="#b51f08"/><path d="m1401.3 1004.78c0-145.437-117.9-263.341-263.34-263.341-72.24 0-137.68 29.112-185.252 76.225l-.033-.034-67.096 67.1-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55 423.217-423.49c52.88-49.77 92.25-120 92.25-200.1" fill="#fdd49a"/><path d="m885.579 884.73-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55" fill="url(#a)"/></g></g><g transform="matrix(.41332019 0 0 .41332019 390.394261 -59.003113)"><path d="m885.833 1628.37-.254-743.64" fill="none"/><g fill-rule="nonzero"><path d="m961.011 1553.59c-19.279-19.35-45.917-31.31-75.325-31.31-29.417 0-56.046 11.96-75.329 31.31.308 41.34 33.908 74.76 75.325 74.76 41.416 0 75.02-33.43 75.329-74.76" fill="#010007"/><path d="m797.707 1098.22c0 31.8-25.767 57.57-57.571 57.57-31.787 0-57.558-25.77-57.558-57.57s25.771-57.57 57.558-57.57c31.804 0 57.571 25.77 57.571 57.57" fill="#010007"/><path d="m777.962 1089.59c0 8.82-7.146 15.94-15.95 15.94-8.808 0-15.958-7.12-15.958-15.94 0-8.81 7.15-15.96 15.958-15.96 8.804 0 15.95 7.15 15.95 15.96" fill="#fffffa"/><path d="m1089.65 1098.22c0 31.8-25.77 57.57-57.57 57.57-31.79 0-57.567-25.77-57.567-57.57s25.777-57.57 57.567-57.57c31.8 0 57.57 25.77 57.57 57.57" fill="#010007"/><path d="m1069.9 1089.59c0 8.82-7.15 15.94-15.95 15.94-8.81 0-15.96-7.12-15.96-15.94 0-8.81 7.15-15.96 15.96-15.96 8.8 0 15.95 7.15 15.95 15.96" fill="#fffffa"/></g></g></svg>
+<svg clip-rule="evenodd" fill-rule="evenodd" height="1000" stroke-linejoin="round" stroke-miterlimit="2"
+     viewBox="0 0 1510 1000" width="1510" xmlns="http://www.w3.org/2000/svg">
+    <linearGradient id="a" gradientTransform="matrix(200 -420 420 200 660 1340)" gradientUnits="userSpaceOnUse" x1="0"
+                    x2="1" y1="0" y2="0">
+        <stop offset="0" stop-color="#fdd49a"/>
+        <stop offset="1" stop-color="#dca055"/>
+    </linearGradient>
+    <g fill-rule="nonzero">
+        <path d="m526.55078 695.48438v94.20312c-6.66549-7.06493-14.67792-12.58654-24.03125-16.56836-9.35749-3.98182-19.51014-5.97461-30.45703-5.97461-14.43358 0-27.34789 3.35659-38.74414 10.07617-11.39625 6.71959-20.35539 15.92332-26.87109 27.61914-6.51987 11.69583-9.77735 25.00684-9.77735 39.93555 0 14.93287 3.25748 28.24389 9.77735 39.93555 6.5157 11.69582 15.47484 20.90346 26.87109 27.62304 11.39625 6.71543 24.31056 10.07227 38.74414 10.07227 11.24646 0 21.64813-2.11449 31.20117-6.3418 9.55305-4.23146 17.66212-10.02587 24.33594-17.39453l1.34375 20.75391h22.24414v-223.93945zm-526.55078.00195v223.93945h26.128906v-98.53125h127.642574v98.53125h26.1211v-223.93945h-26.1211v101.52148h-127.642574v-101.52148zm970.24609.29687v223.93946h60.91011c43.9915 0 77.78-9.80258 101.3672-29.41211 23.5872-19.60538 35.3828-47.2249 35.3828-82.85743 0-35.5285-11.7956-63.02267-35.3828-82.48242-23.5872-19.45559-57.3757-29.1875-101.3672-29.1875zm26.125 23.88672h34.78511c35.4287 0 62.6012 7.63976 81.5118 22.91797 18.9063 15.27821 28.3652 36.90095 28.3652 64.86523 0 28.06831-9.4589 49.8164-28.3652 65.24024-18.9106 15.428-46.0831 23.14258-81.5118 23.14258h-34.78511zm-702.11718 47.47656c-14.73316 0-27.91466 3.33256-39.56055 9.99805-11.64589 6.67382-20.80521 15.80664-27.4707 27.39844-6.66966 11.59596-10.00586 24.75512-10.00586 39.48828 0 15.12843 3.56092 28.61363 10.67578 40.45508 7.11485 11.84977 16.94808 21.12416 29.48437 27.84375 12.54045 6.71958 26.87325 10.07812 42.9961 10.07812 10.05233 0 20.47608-1.69349 31.27734-5.07617 10.7971-3.38268 21.62172-9.60419 32.46875-18.66211l-14.47852-18.50976c-7.36865 6.96506-15.52852 12.01515-24.48242 15.15234-8.95806 3.13303-17.46554 4.70117-25.5332 4.70117-14.52928 0-26.94633-4.25497-37.24414-12.76367-10.30198-8.5087-16.69548-19.3858-19.18359-32.62109h126.59765v-10.00196c0-15.02857-3.23709-28.36803-9.70703-40.00976-6.46578-11.6459-15.37438-20.79884-26.7207-27.47266-11.34632-6.66549-24.38013-9.99805-39.11328-9.99805zm369.64843 0c-14.43358 0-27.34789 3.35685-38.74414 10.07227-11.39625 6.71958-20.35538 15.92723-26.87109 27.62305-6.51987 11.69582-9.77734 25.00293-9.77734 39.93164 0 14.93287 3.25747 28.24779 9.77734 39.93945 6.51571 11.69582 15.47484 20.8976 26.87109 27.61719 11.39625 6.71958 24.31056 10.07812 38.74414 10.07812 10.94273 0 21.09955-1.99304 30.45704-5.9707 9.34916-3.98182 17.36575-9.50318 24.03124-16.57227v7.76368c0 20.30021-5.10087 36.54903-15.29882 48.74414-10.20628 12.18679-25.90458 18.28515-47.10352 18.28515-8.35891 0-16.12233-1.3677-23.28711-4.10547-7.16478-2.73776-13.53985-6.54575-19.11523-11.41796l-12.23633 20.59961c7.36034 5.47552 15.62347 9.72828 24.78125 12.76562 9.15361 3.03734 18.96035 4.55273 29.41211 4.55273 19.00623 0 35.00407-3.85826 47.99805-11.57226 12.98564-7.70984 22.81276-18.48613 29.48242-32.31641 6.66549-13.8386 10.0039-29.96154 10.0039-48.37695v-134.6582h-22.24414l-1.34765 20.7539c-6.66966-7.36866-14.77899-13.16086-24.33203-17.39648-9.55305-4.22731-19.95887-6.33985-31.20118-6.33985zm193.48047 0c-14.72899 0-27.91465 3.33256-39.56054 9.99805-11.6459 6.67382-20.80326 15.80664-27.46875 27.39844-6.66966 11.59596-10.00586 24.75512-10.00586 39.48828 0 15.12843 3.56092 28.61363 10.67578 40.45508 7.11485 11.84977 16.94587 21.12416 29.48633 27.84375 12.54045 6.71958 26.87129 10.07812 42.99414 10.07812 10.05649 0 20.47803-1.69349 31.27929-5.07617 10.79295-3.38268 21.61977-9.60419 32.4668-18.66211l-14.47852-18.50976c-7.36865 6.96506-15.52436 12.01515-24.48242 15.15234-8.95806 3.13303-17.46775 4.70117-25.53125 4.70117-14.52928 0-26.94412-4.25497-37.24609-12.76367-10.30198-8.5087-16.69743-19.3858-19.18555-32.62109h126.59961v-10.00196c0-15.02857-3.23709-28.36803-9.70703-40.00976-6.46578-11.6459-15.37438-20.79884-26.7207-27.47266-11.34632-6.66549-24.38208-9.99805-39.11524-9.99805zm413.53909 0c-14.9329 0-28.2437 3.35659-39.9395 10.07618-11.6958 6.71958-20.8995 15.92332-27.6191 27.61914-6.7154 11.69582-10.0781 25.00683-10.0781 39.93554 0 14.93288 3.3627 28.24194 10.0781 39.9336 6.7196 11.69582 15.9233 20.90346 27.6191 27.62304 11.6958 6.71959 25.0066 10.07813 39.9395 10.07813 14.9287 0 28.238-3.35854 39.9297-10.07813 11.6958-6.71958 20.9034-15.92722 27.623-27.62304 6.7196-11.69166 10.0781-25.00072 10.0781-39.9336 0-14.92871-3.3585-28.23972-10.0781-39.93554s-15.9272-20.89956-27.623-27.61914c-11.6917-6.71959-25.001-10.07618-39.9297-10.07618zm182.1347.002c-14.9328 0-28.2438 3.35854-39.9355 10.07812-11.6958 6.71959-20.9035 15.92332-27.6231 27.61914-6.7154 11.69582-10.0761 25.00489-10.0761 39.9336s3.3607 28.24388 10.0761 39.93554c6.7196 11.69583 15.9273 20.89956 27.6231 27.61914 11.6917 6.71959 25.0027 10.07813 39.9355 10.07813 11.2465 0 21.5935-1.9403 31.0508-5.82227 9.4532-3.88196 17.6678-9.30641 24.6328-16.27148l-17.1679-17.02148c-4.6809 5.18011-10.3016 9.25698-16.8672 12.24023-6.574 2.98741-13.7888 4.48047-21.6485 4.48047-10.0565 0-19.0153-2.38754-26.875-7.16406-7.8637-4.78069-14.059-11.34591-18.5859-19.70899-4.531-8.35891-6.793-17.81777-6.793-28.36523 0-10.64732 2.262-20.12852 6.793-28.4375 4.5269-8.30899 10.7222-14.85409 18.5859-19.63477 7.8597-4.77652 16.8185-7.16406 26.875-7.16406 7.8597 0 15.0745 1.46903 21.6485 4.40234 6.5656 2.93748 12.1863 7.04255 16.8672 12.31836l17.1679-17.16992c-6.965-6.86521-15.1796-12.24108-24.6328-16.12305-9.4573-3.88196-19.8043-5.82226-31.0508-5.82226zm-978.75582 22.38867c10.05233 0 19.00952 2.38924 26.86914 7.16992 7.86379 4.77652 14.06076 11.31992 18.5918 19.62891 4.52688 8.30898 6.78906 17.79213 6.78906 28.43945 0 10.55162-2.26218 20.00437-6.78906 28.36328-4.53104 8.36308-10.72801 14.9283-18.5918 19.70899-7.85962 4.77652-16.81681 7.16601-26.86914 7.16601s-19.00951-2.38949-26.86914-7.16601c-7.86795-4.78069-14.06322-11.34591-18.58594-19.70899-4.5352-8.35891-6.79882-17.81166-6.79882-28.36328 0-10.64732 2.26362-20.13047 6.79882-28.43945 4.52272-8.30899 10.71799-14.85239 18.58594-19.62891 7.85963-4.78068 16.81681-7.16992 26.86914-7.16992zm-180.19336.002c13.03558 0 24.08271 4.10312 33.14063 12.31641 9.05375 8.21329 14.67864 18.83551 16.86718 31.87109h-101.21875c2.18855-12.83586 7.96478-23.41367 17.32227-31.72265 9.35333-8.30899 20.64922-12.46485 33.88867-12.46485zm372.0332 0c10.05234 0 19.00952 2.3895 26.86915 7.16602 7.86378 4.78068 14.06075 11.32408 18.59179 19.6289 4.52688 8.31315 6.78906 17.7963 6.78906 28.43946 0 10.55162-2.26218 20.00827-6.78906 28.36718-4.53104 8.35892-10.72801 14.92856-18.59179 19.70508-7.85963 4.78069-16.81681 7.16992-26.86915 7.16992-10.05233 0-19.01121-2.38923-26.875-7.16992-7.86378-4.77652-14.05931-11.34616-18.58203-19.70508-4.5352-8.35891-6.79687-17.81556-6.79687-28.36718 0-10.64316 2.26167-20.12631 6.79687-28.43946 4.52272-8.30482 10.71825-14.84822 18.58203-19.6289 7.86379-4.77652 16.82267-7.16602 26.875-7.16602zm191.09766 0c13.03558 0 24.08076 4.10312 33.13867 12.31641 9.05376 8.21329 14.6806 18.83551 16.86914 31.87109h-101.21875c2.18855-12.83586 7.96283-23.41367 17.32032-31.72265 9.35333-8.30899 20.65117-12.46485 33.89062-12.46485zm413.68362 0c10.0481 0 19.0095 2.38729 26.8691 7.16797 7.8638 4.77652 14.0591 11.32188 18.586 19.63086 4.531 8.30899 6.7949 17.79214 6.7949 28.43945 0 10.55162-2.2639 20.00412-6.7949 28.36719-4.5269 8.35891-10.7222 14.9244-18.586 19.70508-7.8596 4.78068-16.821 7.16601-26.8691 7.16601-10.0565 0-19.0154-2.38533-26.875-7.16601-7.8638-4.78068-14.0591-11.34617-18.586-19.70508-4.531-8.36307-6.7949-17.81557-6.7949-28.36719 0-10.64731 2.2639-20.13046 6.7949-28.43945 4.5269-8.30898 10.7222-14.85434 18.586-19.63086 7.8596-4.78068 16.8185-7.16797 26.875-7.16797z"
+              fill="#fff" stroke-width="4.16073"/>
+        <g transform="matrix(.41332019 0 0 .41332019 390.39426 -59.003113)">
+            <path d="m1553.66 961.083 75.25-75.258-75.25-75.246 56.61-90.096-90.1-56.616 35.15-100.446-100.44-35.142 11.91-105.746-105.74-11.912-11.92-105.75-105.74 11.912-35.15-100.445-100.43 35.145-56.63-90.1-90.107 56.617-75.242-75.246-75.242 75.25-90.104-56.612-56.612 90.096-100.442-35.15-35.142 100.441-105.75-11.916-11.912 105.741-105.742 11.913 11.917 105.741-100.454 35.15 35.145 100.438-90.1 56.612 56.621 90.117-75.258 75.25 75.25 75.258-56.613 90.107 90.1 56.61-35.145 100.44 100.45 35.15-11.913 105.73 105.742 11.92 11.912 105.74 105.75-11.91 35.142 100.43 100.437-35.13 56.617 90.1 90.096-56.62 75.25 74.55 75.25-74.53 90.099 56.61 56.61-90.11 100.45 35.15 35.14-100.44 105.75 11.91 11.91-105.75 105.75-11.91-11.92-105.74 100.45-35.15-35.15-100.45 90.1-56.61z"
+                  fill="#b51f08"/>
+            <path d="m1401.3 1004.78c0-145.437-117.9-263.341-263.34-263.341-72.24 0-137.68 29.112-185.252 76.225l-.033-.034-67.096 67.1-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55 423.217-423.49c52.88-49.77 92.25-120 92.25-200.1"
+                  fill="#fdd49a"/>
+            <path d="m885.579 884.73-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55"
+                  fill="url(#a)"/>
+        </g>
+    </g>
+    <g transform="matrix(.41332019 0 0 .41332019 390.394261 -59.003113)">
+        <path d="m885.833 1628.37-.254-743.64" fill="none"/>
+        <g fill-rule="nonzero">
+            <path d="m961.011 1553.59c-19.279-19.35-45.917-31.31-75.325-31.31-29.417 0-56.046 11.96-75.329 31.31.308 41.34 33.908 74.76 75.325 74.76 41.416 0 75.02-33.43 75.329-74.76"
+                  fill="#010007"/>
+            <path d="m797.707 1098.22c0 31.8-25.767 57.57-57.571 57.57-31.787 0-57.558-25.77-57.558-57.57s25.771-57.57 57.558-57.57c31.804 0 57.571 25.77 57.571 57.57"
+                  fill="#010007"/>
+            <path d="m777.962 1089.59c0 8.82-7.146 15.94-15.95 15.94-8.808 0-15.958-7.12-15.958-15.94 0-8.81 7.15-15.96 15.958-15.96 8.804 0 15.95 7.15 15.95 15.96"
+                  fill="#fffffa"/>
+            <path d="m1089.65 1098.22c0 31.8-25.77 57.57-57.57 57.57-31.79 0-57.567-25.77-57.567-57.57s25.777-57.57 57.567-57.57c31.8 0 57.57 25.77 57.57 57.57"
+                  fill="#010007"/>
+            <path d="m1069.9 1089.59c0 8.82-7.15 15.94-15.95 15.94-8.81 0-15.96-7.12-15.96-15.94 0-8.81 7.15-15.96 15.96-15.96 8.8 0 15.95 7.15 15.95 15.96"
+                  fill="#fffffa"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg b/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg
index 9c4500009..67c154e91 100644
--- a/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg
+++ b/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg
@@ -1 +1,24 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" height="430.07892" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 1660.2405 430.07892" width="1660.2405" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" transform="translate(10.242436 10.242452)"><path d="m0-124.766-6.399 6.398-7.662-4.814-4.812 7.662-8.541-2.989-2.988 8.54-8.993-1.013-1.011 8.991-8.992 1.013 1.012 8.991-8.541 2.989 2.988 8.54-7.661 4.815 4.815 7.662-6.399 6.399 6.398 6.398-4.814 7.661 7.661 4.814-2.988 8.541 8.541 2.988-1.012 8.985 8.992 1.011 1.011 8.985 8.993-1.015 2.988 8.54 8.541-2.988 4.812 7.662 7.662-4.813h12.796l7.661 4.813 4.814-7.66 8.541 2.988 2.988-8.54 8.992 1.014 1.014-8.985 8.99-1.012-1.012-8.985 8.54-2.988-2.988-8.541 7.662-4.815-4.815-7.66 6.398-6.398-6.398-6.399 4.815-7.66-7.662-4.814 2.988-8.542-8.54-2.988 1.014-8.991-8.992-1.015-1.013-8.991-8.991 1.013-2.989-8.54-8.54 2.989-4.814-7.663-7.663 4.815z" fill="none" stroke="#fff" stroke-linejoin="miter" stroke-miterlimit="2" stroke-width="4.4095" transform="matrix(3.2849556 0 0 3.2849556 207.55664 409.85076)"/><path d="m0-30.513c0-12.366-10.025-22.393-22.392-22.393-6.143 0-11.707 2.476-15.752 6.481l-.003-.002-5.705 5.706-4.665-4.665c-4.104-4.683-10.125-7.642-16.839-7.642-12.367 0-22.392 10.025-22.392 22.391 0 6.463 2.74 12.281 7.118 16.368l36.799 36.784 35.987-36.014c4.496-4.232 7.844-10.203 7.844-17.014" fill="#fefefe" transform="matrix(3.2849556 0 0 3.2849556 351.53527 341.0132)"/><path d="m-4.558-8.253c1.645 1.64 2.662 3.904 2.662 6.406 0 2.5-1.017 4.766-2.662 6.405-3.514-.026-6.357-2.883-6.357-6.405s2.843-6.38 6.357-6.406" transform="matrix(0 -3.2849556 -3.2849556 0 201.44397 379.04995)"/><path d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.894 0 2.704 2.191 4.896 4.895 4.896s4.896-2.192 4.896-4.896c0-2.703-2.192-4.894-4.896-4.894" transform="matrix(0 -3.2849556 -3.2849556 0 166.86087 250.80164)"/><path d="m-1.356-1.355c-.751 0-1.356.607-1.356 1.356 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.749-.608-1.356-1.357-1.356" fill="#fff" transform="matrix(0 -3.2849556 -3.2849556 0 172.96926 261.80315)"/><path d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.896 0 2.703 2.191 4.894 4.895 4.894s4.896-2.191 4.896-4.894c0-2.705-2.192-4.896-4.896-4.896" transform="matrix(0 -3.2849556 -3.2849556 0 248.40602 250.80164)"/><g fill="#fff"><path d="m-1.357-1.356c-.751 0-1.356.608-1.356 1.358 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.75-.608-1.358-1.357-1.358" transform="matrix(0 -3.2849556 -3.2849556 0 254.51398 261.79888)"/><path d="m914.05273 122.625v70.36133c-4.97999-5.27564-10.96602-9.39883-17.95312-12.375-6.99039-2.97289-14.57179-4.46094-22.74805-4.46094-10.77794 0-20.42618 2.50598-28.9375 7.52539s-15.20529 11.89616-20.07031 20.63086c-4.87159 8.73798-7.30664 18.67703-7.30664 29.82617 0 11.15571 2.43505 21.10062 7.30664 29.83203 4.86502 8.7347 11.55899 15.6095 20.07031 20.62891s18.15956 7.5293 28.9375 7.5293c8.39963 0 16.16843-1.58011 23.30664-4.74024 7.13493-3.16012 13.19251-7.48988 18.17578-12.99219l1.00586 15.50196h16.61133v-167.26758zm-393.29492.002v167.26563h19.51563v-73.5957h95.33984v73.5957h19.51172v-167.26568h-19.51172v75.82813h-95.33984v-75.82813zm724.69919.22071v167.26757h45.4961c32.8594 0 58.0977-7.32308 75.7149-21.9707 17.6172-14.64105 26.4277-35.27334 26.4277-61.88476 0-26.53916-8.8105-47.07674-26.4277-61.60938s-42.8555-21.80273-75.7149-21.80273zm19.5157 17.8457h25.9804c26.4636 0 46.7614 5.70463 60.8867 17.11328 14.1221 11.41522 21.1856 27.56409 21.1856 48.45313 0 20.9613-7.0635 37.20817-21.1856 48.72851-14.1253 11.52363-34.4231 17.28711-60.8867 17.28711h-25.9804zm-248.3301 35.45508c-10.778 0-20.42425 2.50988-28.93557 7.52929-8.51132 5.01942-15.20725 11.89421-20.07226 20.62891-4.87159 8.7347-7.30469 18.6757-7.30469 29.82813 0 11.15242 2.4331 21.09538 7.30469 29.83007 4.86501 8.7347 11.56094 15.61145 20.07226 20.63086 8.51132 5.01942 18.15757 7.52539 28.93557 7.52539 8.1762 0 15.7596-1.48805 22.75-4.46093 6.9871-2.97289 12.9712-7.09608 17.9512-12.375v5.79492c0 15.16664-3.81 27.30097-11.4278 36.41015-7.6244 9.10262-19.3481 13.65625-35.1816 13.65625-6.2447 0-12.04336-1.02121-17.39456-3.06445-5.35447-2.04653-10.11335-4.88956-14.27539-8.5293l-9.14257 15.38672c5.49901 4.08977 11.66853 7.2633 18.50781 9.53321 6.83928 2.2699 14.16041 3.40039 21.96871 3.40039 14.1976 0 26.1478-2.88015 35.8516-8.63867 9.7005-5.76182 17.0402-13.8114 22.0234-24.14258 4.98-10.33447 7.4688-22.37675 7.4688-36.13086v-100.58208h-16.6152l-1.004 15.50195c-4.9799-5.5023-11.0375-9.83206-18.1757-12.99219-7.135-3.16013-14.9051-4.74023-23.3047-4.74023zm591.7656.002c-11.1524 0-21.0973 2.50989-29.832 7.5293-8.7347 5.01612-15.6095 11.89092-20.6289 20.6289-5.0162 8.7347-7.5254 18.67375-7.5254 29.82618 0 11.15242 2.5092 21.09671 7.5254 29.82812 5.0194 8.73798 11.8942 15.61278 20.6289 20.62891 8.7347 5.01941 18.6796 7.52929 29.832 7.52929 8.3996 0 16.1288-1.44899 23.1914-4.34961 7.0627-2.90061 13.1951-6.95092 18.3984-12.15429l-12.8242-12.71094c-3.4952 3.86639-7.6932 6.91014-12.5976 9.14063-4.9078 2.23048-10.2978 3.34765-16.168 3.34765-7.5094 0-14.2007-1.78277-20.0742-5.35351-5.8735-3.56747-10.5026-8.47539-13.8828-14.7168-3.3835-6.2447-5.0723-13.30885-5.0723-21.18945 0-7.95288 1.6888-15.03363 5.0723-21.24219 3.3802-6.20528 8.0093-11.09465 13.8828-14.66211 5.8735-3.57075 12.5648-5.35352 20.0742-5.35352 5.8702 0 11.2602 1.09605 16.168 3.28711 4.9044 2.19435 9.1024 5.25923 12.5976 9.20117l12.8242-12.82421c-5.2033-5.12782-11.3357-9.14236-18.3984-12.04297-7.0626-2.90062-14.7918-4.34766-23.1914-4.34766zm-867.86718.002c-11.00132 0-20.85027 2.494-29.54883 7.47071-8.69856 4.98327-15.53759 11.8057-20.51758 20.46484s-7.47266 18.49149-7.47266 29.49609c0 11.30025 2.65627 21.37042 7.97461 30.2168 5.31178 8.84639 12.65475 15.77942 22.02344 20.79883 9.36541 5.01613 32.11328 7.52539 32.11328 7.52539 7.50941 0 15.29543-1.26551 23.36328-3.79492 8.06457-2.52613 16.14797-7.17049 24.25196-13.9375l-10.81641-13.82617c-5.5023 5.20337-11.59699 8.97814-18.28516 11.32031-6.69474 2.33889-13.04765 3.51172-19.07226 3.51172-10.8535 0-20.12695-3.1801-27.82031-9.53321-7.69337-6.35967-12.46885-14.48142-14.32813-24.36914h94.56055v-7.46875c0-11.22469-2.41783-21.18948-7.25-29.88476-4.83217-8.69856-11.48576-15.53626-19.96094-20.51953-8.47519-4.97671-18.21024-7.47071-29.21484-7.47071zm420.61328 0c-11.0013 0-20.8483 2.494-29.5469 7.47071-8.6985 4.98327-15.5395 11.8057-20.5195 20.46484s-7.4727 18.49149-7.4727 29.49609c0 11.30025 2.6583 21.37042 7.9766 30.2168 5.3118 8.84639 12.6561 15.77942 22.0215 20.79883 9.3654 5.01613 20.0706 7.52539 32.1133 7.52539 7.5094 0 15.2954-1.26551 23.3632-3.79492 8.0646-2.52613 16.15-7.17049 24.254-13.9375l-10.8184-13.82617c-5.5023 5.20337-11.595 8.97814-18.2832 11.32031-6.6915 2.33889-13.0496 3.51172-19.0742 3.51172-10.8535 0-20.125-3.1801-27.8184-9.53321-7.6934-6.35967-12.4708-14.48142-14.3301-24.36914h94.5606v-7.46875c0-11.22469-2.4179-21.18948-7.25-29.88476-4.8322-8.69856-11.4838-15.53626-19.959-20.51953-8.4752-4.97671-18.2122-7.47071-29.2168-7.47071zm311.2109 0c-11.1524 0-21.0914 2.50598-29.8261 7.52539-8.738 5.01942-15.6134 11.89617-20.6329 20.63086-5.0161 8.7347-7.5273 18.67704-7.5273 29.82618 0 11.15242 2.5112 21.09733 7.5273 29.83203 5.0195 8.73469 11.8949 15.60949 20.6329 20.6289 8.7347 5.01942 18.6737 7.52539 29.8261 7.52539 11.1492 0 21.0935-2.50597 29.8282-7.52539 8.7347-5.01941 15.6095-11.89421 20.6289-20.6289 5.0194-8.7347 7.5254-18.67961 7.5254-29.83203 0-11.14914-2.506-21.09148-7.5254-29.82618-5.0194-8.73469-11.8942-15.61144-20.6289-20.63086-8.7347-5.01941-18.679-7.52539-29.8282-7.52539zm-454.0488 16.72251c7.5061 0 14.2001 1.78472 20.0703 5.35547 5.8735 3.56746 10.5026 8.45816 13.8828 14.66015 3.3835 6.20857 5.0743 13.29127 5.0743 21.24415 0 7.8806-1.6908 14.9428-5.0743 21.1875-3.3802 6.2447-8.0093 11.14995-13.8828 14.7207-5.8702 3.56746-12.5642 5.35156-20.0703 5.35156-7.5094 0-14.202-1.7841-20.07226-5.35156-5.8735-3.57075-10.50259-8.476-13.88281-14.7207-3.38679-6.2447-5.07422-13.3069-5.07422-21.1875 0-7.95288 1.68743-15.03558 5.07422-21.24415 3.38022-6.20199 8.00931-11.09269 13.88281-14.66015 5.87026-3.57075 12.56286-5.35547 20.07226-5.35547zm-143.29296.002c7.50941 0 14.20009 1.7841 20.07031 5.35157 5.8735 3.57074 10.50321 8.45878 13.88672 14.66406 3.38022 6.20856 5.07226 13.29064 5.07226 21.24023 0 7.88061-1.69204 14.94476-5.07226 21.18946-3.38351 6.2447-8.01322 11.15128-13.88672 14.71875-5.87022 3.57074-12.5609 5.35546-20.07031 5.35546s-14.2001-1.78472-20.07032-5.35546c-5.8735-3.56747-10.50259-8.47405-13.88281-14.71875-3.3835-6.2447-5.07617-13.30885-5.07617-21.18946 0-7.94959 1.69267-15.03167 5.07617-21.24023 3.38022-6.20528 8.00931-11.09332 13.88281-14.66406 5.87022-3.56747 12.56091-5.35157 20.07032-5.35157zm-134.5918.002c9.73661 0 17.98823 3.06487 24.75195 9.20117 6.76373 6.13301 10.96566 14.06675 12.60157 23.80664h-75.60352c1.63591-9.58879 5.94845-17.4887 12.93555-23.69727 6.9871-6.20528 15.42673-9.31054 25.31445-9.31054zm420.61526 0c9.7366 0 17.9882 3.06487 24.7519 9.20117 6.7638 6.13301 10.9657 14.06675 12.6016 23.80664h-75.6035c1.6359-9.58879 5.9484-17.4887 12.9355-23.69727 6.9871-6.20528 15.4268-9.31054 25.3145-9.31054zm311.3183 0c7.5062 0 14.2021 1.78081 20.0723 5.35156 5.8735 3.57075 10.5013 8.45878 13.8848 14.66406 3.3802 6.20528 5.0722 13.28736 5.0722 21.24024 0 7.8806-1.692 14.94475-5.0722 21.18945-3.3835 6.2447-8.0113 11.148-13.8848 14.71875-5.8702 3.56746-12.5661 5.35156-20.0723 5.35156-7.5094 0-14.2001-1.7841-20.0703-5.35156-5.8735-3.57075-10.5026-8.47405-13.8828-14.71875-3.3868-6.2447-5.0742-13.30885-5.0742-21.18945 0-7.95288 1.6874-15.03496 5.0742-21.24024 3.3802-6.20528 8.0093-11.09331 13.8828-14.66406 5.8702-3.57075 12.5609-5.35156 20.0703-5.35156z" stroke-width="3.28496"/></g></g></svg>
+<svg clip-rule="evenodd" fill-rule="evenodd" height="430.07892" stroke-linejoin="round" stroke-miterlimit="2"
+     viewBox="0 0 1660.2405 430.07892" width="1660.2405" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" transform="translate(10.242436 10.242452)">
+        <path d="m0-124.766-6.399 6.398-7.662-4.814-4.812 7.662-8.541-2.989-2.988 8.54-8.993-1.013-1.011 8.991-8.992 1.013 1.012 8.991-8.541 2.989 2.988 8.54-7.661 4.815 4.815 7.662-6.399 6.399 6.398 6.398-4.814 7.661 7.661 4.814-2.988 8.541 8.541 2.988-1.012 8.985 8.992 1.011 1.011 8.985 8.993-1.015 2.988 8.54 8.541-2.988 4.812 7.662 7.662-4.813h12.796l7.661 4.813 4.814-7.66 8.541 2.988 2.988-8.54 8.992 1.014 1.014-8.985 8.99-1.012-1.012-8.985 8.54-2.988-2.988-8.541 7.662-4.815-4.815-7.66 6.398-6.398-6.398-6.399 4.815-7.66-7.662-4.814 2.988-8.542-8.54-2.988 1.014-8.991-8.992-1.015-1.013-8.991-8.991 1.013-2.989-8.54-8.54 2.989-4.814-7.663-7.663 4.815z"
+              fill="none" stroke="#fff" stroke-linejoin="miter" stroke-miterlimit="2" stroke-width="4.4095"
+              transform="matrix(3.2849556 0 0 3.2849556 207.55664 409.85076)"/>
+        <path d="m0-30.513c0-12.366-10.025-22.393-22.392-22.393-6.143 0-11.707 2.476-15.752 6.481l-.003-.002-5.705 5.706-4.665-4.665c-4.104-4.683-10.125-7.642-16.839-7.642-12.367 0-22.392 10.025-22.392 22.391 0 6.463 2.74 12.281 7.118 16.368l36.799 36.784 35.987-36.014c4.496-4.232 7.844-10.203 7.844-17.014"
+              fill="#fefefe" transform="matrix(3.2849556 0 0 3.2849556 351.53527 341.0132)"/>
+        <path d="m-4.558-8.253c1.645 1.64 2.662 3.904 2.662 6.406 0 2.5-1.017 4.766-2.662 6.405-3.514-.026-6.357-2.883-6.357-6.405s2.843-6.38 6.357-6.406"
+              transform="matrix(0 -3.2849556 -3.2849556 0 201.44397 379.04995)"/>
+        <path d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.894 0 2.704 2.191 4.896 4.895 4.896s4.896-2.192 4.896-4.896c0-2.703-2.192-4.894-4.896-4.894"
+              transform="matrix(0 -3.2849556 -3.2849556 0 166.86087 250.80164)"/>
+        <path d="m-1.356-1.355c-.751 0-1.356.607-1.356 1.356 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.749-.608-1.356-1.357-1.356"
+              fill="#fff" transform="matrix(0 -3.2849556 -3.2849556 0 172.96926 261.80315)"/>
+        <path d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.896 0 2.703 2.191 4.894 4.895 4.894s4.896-2.191 4.896-4.894c0-2.705-2.192-4.896-4.896-4.896"
+              transform="matrix(0 -3.2849556 -3.2849556 0 248.40602 250.80164)"/>
+        <g fill="#fff">
+            <path d="m-1.357-1.356c-.751 0-1.356.608-1.356 1.358 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.75-.608-1.358-1.357-1.358"
+                  transform="matrix(0 -3.2849556 -3.2849556 0 254.51398 261.79888)"/>
+            <path d="m914.05273 122.625v70.36133c-4.97999-5.27564-10.96602-9.39883-17.95312-12.375-6.99039-2.97289-14.57179-4.46094-22.74805-4.46094-10.77794 0-20.42618 2.50598-28.9375 7.52539s-15.20529 11.89616-20.07031 20.63086c-4.87159 8.73798-7.30664 18.67703-7.30664 29.82617 0 11.15571 2.43505 21.10062 7.30664 29.83203 4.86502 8.7347 11.55899 15.6095 20.07031 20.62891s18.15956 7.5293 28.9375 7.5293c8.39963 0 16.16843-1.58011 23.30664-4.74024 7.13493-3.16012 13.19251-7.48988 18.17578-12.99219l1.00586 15.50196h16.61133v-167.26758zm-393.29492.002v167.26563h19.51563v-73.5957h95.33984v73.5957h19.51172v-167.26568h-19.51172v75.82813h-95.33984v-75.82813zm724.69919.22071v167.26757h45.4961c32.8594 0 58.0977-7.32308 75.7149-21.9707 17.6172-14.64105 26.4277-35.27334 26.4277-61.88476 0-26.53916-8.8105-47.07674-26.4277-61.60938s-42.8555-21.80273-75.7149-21.80273zm19.5157 17.8457h25.9804c26.4636 0 46.7614 5.70463 60.8867 17.11328 14.1221 11.41522 21.1856 27.56409 21.1856 48.45313 0 20.9613-7.0635 37.20817-21.1856 48.72851-14.1253 11.52363-34.4231 17.28711-60.8867 17.28711h-25.9804zm-248.3301 35.45508c-10.778 0-20.42425 2.50988-28.93557 7.52929-8.51132 5.01942-15.20725 11.89421-20.07226 20.62891-4.87159 8.7347-7.30469 18.6757-7.30469 29.82813 0 11.15242 2.4331 21.09538 7.30469 29.83007 4.86501 8.7347 11.56094 15.61145 20.07226 20.63086 8.51132 5.01942 18.15757 7.52539 28.93557 7.52539 8.1762 0 15.7596-1.48805 22.75-4.46093 6.9871-2.97289 12.9712-7.09608 17.9512-12.375v5.79492c0 15.16664-3.81 27.30097-11.4278 36.41015-7.6244 9.10262-19.3481 13.65625-35.1816 13.65625-6.2447 0-12.04336-1.02121-17.39456-3.06445-5.35447-2.04653-10.11335-4.88956-14.27539-8.5293l-9.14257 15.38672c5.49901 4.08977 11.66853 7.2633 18.50781 9.53321 6.83928 2.2699 14.16041 3.40039 21.96871 3.40039 14.1976 0 26.1478-2.88015 35.8516-8.63867 9.7005-5.76182 17.0402-13.8114 22.0234-24.14258 4.98-10.33447 7.4688-22.37675 7.4688-36.13086v-100.58208h-16.6152l-1.004 15.50195c-4.9799-5.5023-11.0375-9.83206-18.1757-12.99219-7.135-3.16013-14.9051-4.74023-23.3047-4.74023zm591.7656.002c-11.1524 0-21.0973 2.50989-29.832 7.5293-8.7347 5.01612-15.6095 11.89092-20.6289 20.6289-5.0162 8.7347-7.5254 18.67375-7.5254 29.82618 0 11.15242 2.5092 21.09671 7.5254 29.82812 5.0194 8.73798 11.8942 15.61278 20.6289 20.62891 8.7347 5.01941 18.6796 7.52929 29.832 7.52929 8.3996 0 16.1288-1.44899 23.1914-4.34961 7.0627-2.90061 13.1951-6.95092 18.3984-12.15429l-12.8242-12.71094c-3.4952 3.86639-7.6932 6.91014-12.5976 9.14063-4.9078 2.23048-10.2978 3.34765-16.168 3.34765-7.5094 0-14.2007-1.78277-20.0742-5.35351-5.8735-3.56747-10.5026-8.47539-13.8828-14.7168-3.3835-6.2447-5.0723-13.30885-5.0723-21.18945 0-7.95288 1.6888-15.03363 5.0723-21.24219 3.3802-6.20528 8.0093-11.09465 13.8828-14.66211 5.8735-3.57075 12.5648-5.35352 20.0742-5.35352 5.8702 0 11.2602 1.09605 16.168 3.28711 4.9044 2.19435 9.1024 5.25923 12.5976 9.20117l12.8242-12.82421c-5.2033-5.12782-11.3357-9.14236-18.3984-12.04297-7.0626-2.90062-14.7918-4.34766-23.1914-4.34766zm-867.86718.002c-11.00132 0-20.85027 2.494-29.54883 7.47071-8.69856 4.98327-15.53759 11.8057-20.51758 20.46484s-7.47266 18.49149-7.47266 29.49609c0 11.30025 2.65627 21.37042 7.97461 30.2168 5.31178 8.84639 12.65475 15.77942 22.02344 20.79883 9.36541 5.01613 32.11328 7.52539 32.11328 7.52539 7.50941 0 15.29543-1.26551 23.36328-3.79492 8.06457-2.52613 16.14797-7.17049 24.25196-13.9375l-10.81641-13.82617c-5.5023 5.20337-11.59699 8.97814-18.28516 11.32031-6.69474 2.33889-13.04765 3.51172-19.07226 3.51172-10.8535 0-20.12695-3.1801-27.82031-9.53321-7.69337-6.35967-12.46885-14.48142-14.32813-24.36914h94.56055v-7.46875c0-11.22469-2.41783-21.18948-7.25-29.88476-4.83217-8.69856-11.48576-15.53626-19.96094-20.51953-8.47519-4.97671-18.21024-7.47071-29.21484-7.47071zm420.61328 0c-11.0013 0-20.8483 2.494-29.5469 7.47071-8.6985 4.98327-15.5395 11.8057-20.5195 20.46484s-7.4727 18.49149-7.4727 29.49609c0 11.30025 2.6583 21.37042 7.9766 30.2168 5.3118 8.84639 12.6561 15.77942 22.0215 20.79883 9.3654 5.01613 20.0706 7.52539 32.1133 7.52539 7.5094 0 15.2954-1.26551 23.3632-3.79492 8.0646-2.52613 16.15-7.17049 24.254-13.9375l-10.8184-13.82617c-5.5023 5.20337-11.595 8.97814-18.2832 11.32031-6.6915 2.33889-13.0496 3.51172-19.0742 3.51172-10.8535 0-20.125-3.1801-27.8184-9.53321-7.6934-6.35967-12.4708-14.48142-14.3301-24.36914h94.5606v-7.46875c0-11.22469-2.4179-21.18948-7.25-29.88476-4.8322-8.69856-11.4838-15.53626-19.959-20.51953-8.4752-4.97671-18.2122-7.47071-29.2168-7.47071zm311.2109 0c-11.1524 0-21.0914 2.50598-29.8261 7.52539-8.738 5.01942-15.6134 11.89617-20.6329 20.63086-5.0161 8.7347-7.5273 18.67704-7.5273 29.82618 0 11.15242 2.5112 21.09733 7.5273 29.83203 5.0195 8.73469 11.8949 15.60949 20.6329 20.6289 8.7347 5.01942 18.6737 7.52539 29.8261 7.52539 11.1492 0 21.0935-2.50597 29.8282-7.52539 8.7347-5.01941 15.6095-11.89421 20.6289-20.6289 5.0194-8.7347 7.5254-18.67961 7.5254-29.83203 0-11.14914-2.506-21.09148-7.5254-29.82618-5.0194-8.73469-11.8942-15.61144-20.6289-20.63086-8.7347-5.01941-18.679-7.52539-29.8282-7.52539zm-454.0488 16.72251c7.5061 0 14.2001 1.78472 20.0703 5.35547 5.8735 3.56746 10.5026 8.45816 13.8828 14.66015 3.3835 6.20857 5.0743 13.29127 5.0743 21.24415 0 7.8806-1.6908 14.9428-5.0743 21.1875-3.3802 6.2447-8.0093 11.14995-13.8828 14.7207-5.8702 3.56746-12.5642 5.35156-20.0703 5.35156-7.5094 0-14.202-1.7841-20.07226-5.35156-5.8735-3.57075-10.50259-8.476-13.88281-14.7207-3.38679-6.2447-5.07422-13.3069-5.07422-21.1875 0-7.95288 1.68743-15.03558 5.07422-21.24415 3.38022-6.20199 8.00931-11.09269 13.88281-14.66015 5.87026-3.57075 12.56286-5.35547 20.07226-5.35547zm-143.29296.002c7.50941 0 14.20009 1.7841 20.07031 5.35157 5.8735 3.57074 10.50321 8.45878 13.88672 14.66406 3.38022 6.20856 5.07226 13.29064 5.07226 21.24023 0 7.88061-1.69204 14.94476-5.07226 21.18946-3.38351 6.2447-8.01322 11.15128-13.88672 14.71875-5.87022 3.57074-12.5609 5.35546-20.07031 5.35546s-14.2001-1.78472-20.07032-5.35546c-5.8735-3.56747-10.50259-8.47405-13.88281-14.71875-3.3835-6.2447-5.07617-13.30885-5.07617-21.18946 0-7.94959 1.69267-15.03167 5.07617-21.24023 3.38022-6.20528 8.00931-11.09332 13.88281-14.66406 5.87022-3.56747 12.56091-5.35157 20.07032-5.35157zm-134.5918.002c9.73661 0 17.98823 3.06487 24.75195 9.20117 6.76373 6.13301 10.96566 14.06675 12.60157 23.80664h-75.60352c1.63591-9.58879 5.94845-17.4887 12.93555-23.69727 6.9871-6.20528 15.42673-9.31054 25.31445-9.31054zm420.61526 0c9.7366 0 17.9882 3.06487 24.7519 9.20117 6.7638 6.13301 10.9657 14.06675 12.6016 23.80664h-75.6035c1.6359-9.58879 5.9484-17.4887 12.9355-23.69727 6.9871-6.20528 15.4268-9.31054 25.3145-9.31054zm311.3183 0c7.5062 0 14.2021 1.78081 20.0723 5.35156 5.8735 3.57075 10.5013 8.45878 13.8848 14.66406 3.3802 6.20528 5.0722 13.28736 5.0722 21.24024 0 7.8806-1.692 14.94475-5.0722 21.18945-3.3835 6.2447-8.0113 11.148-13.8848 14.71875-5.8702 3.56746-12.5661 5.35156-20.0723 5.35156-7.5094 0-14.2001-1.7841-20.0703-5.35156-5.8735-3.57075-10.5026-8.47405-13.8828-14.71875-3.3868-6.2447-5.0742-13.30885-5.0742-21.18945 0-7.95288 1.6874-15.03496 5.0742-21.24024 3.3802-6.20528 8.0093-11.09331 13.8828-14.66406 5.8702-3.57075 12.5609-5.35156 20.0703-5.35156z"
+                  stroke-width="3.28496"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/components/common/hljs/hljs.ts b/src/components/common/hljs/hljs.ts
index 2d01729de..9a62f3c51 100644
--- a/src/components/common/hljs/hljs.ts
+++ b/src/components/common/hljs/hljs.ts
@@ -1,9 +1,9 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
-import hljs from 'highlight.js/lib/core';
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
+import hljs from 'highlight.js/lib/core'
 import abnf from 'highlight.js/lib/languages/abnf'
 import accesslog from 'highlight.js/lib/languages/accesslog'
 import actionscript from 'highlight.js/lib/languages/actionscript'
@@ -194,196 +194,196 @@ import xl from 'highlight.js/lib/languages/xl'
 import xquery from 'highlight.js/lib/languages/xquery'
 import zephir from 'highlight.js/lib/languages/zephir'
 
-hljs.registerLanguage('abnf', abnf);
-hljs.registerLanguage('accesslog', accesslog);
-hljs.registerLanguage('actionscript', actionscript);
-hljs.registerLanguage('ada', ada);
-hljs.registerLanguage('angelscript', angelscript);
-hljs.registerLanguage('apache', apache);
-hljs.registerLanguage('applescript', applescript);
-hljs.registerLanguage('arcade', arcade);
-hljs.registerLanguage('arduino', arduino);
-hljs.registerLanguage('armasm', armasm);
-hljs.registerLanguage('xml', xml);
-hljs.registerLanguage('asciidoc', asciidoc);
-hljs.registerLanguage('aspectj', aspectj);
-hljs.registerLanguage('autohotkey', autohotkey);
-hljs.registerLanguage('autoit', autoit);
-hljs.registerLanguage('avrasm', avrasm);
-hljs.registerLanguage('awk', awk);
-hljs.registerLanguage('axapta', axapta);
-hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('basic', basic);
-hljs.registerLanguage('bnf', bnf);
-hljs.registerLanguage('brainfuck', brainfuck);
-hljs.registerLanguage('c-like', c_like);
-hljs.registerLanguage('c', c);
-hljs.registerLanguage('cal', cal);
-hljs.registerLanguage('capnproto', capnproto);
-hljs.registerLanguage('ceylon', ceylon);
-hljs.registerLanguage('clean', clean);
-hljs.registerLanguage('clojure', clojure);
-hljs.registerLanguage('clojure-repl', clojure_repl);
-hljs.registerLanguage('cmake', cmake);
-hljs.registerLanguage('coffeescript', coffeescript);
-hljs.registerLanguage('coq', coq);
-hljs.registerLanguage('cos', cos);
-hljs.registerLanguage('cpp', cpp);
-hljs.registerLanguage('crmsh', crmsh);
-hljs.registerLanguage('crystal', crystal);
-hljs.registerLanguage('csharp', csharp);
-hljs.registerLanguage('csp', csp);
-hljs.registerLanguage('css', css);
-hljs.registerLanguage('d', d);
-hljs.registerLanguage('markdown', markdown);
-hljs.registerLanguage('dart', dart);
-hljs.registerLanguage('delphi', delphi);
-hljs.registerLanguage('diff', diff);
-hljs.registerLanguage('django', django);
-hljs.registerLanguage('dns', dns);
-hljs.registerLanguage('dockerfile', dockerfile);
-hljs.registerLanguage('dos', dos);
-hljs.registerLanguage('dsconfig', dsconfig);
-hljs.registerLanguage('dts', dts);
-hljs.registerLanguage('dust', dust);
-hljs.registerLanguage('ebnf', ebnf);
-hljs.registerLanguage('elixir', elixir);
-hljs.registerLanguage('elm', elm);
-hljs.registerLanguage('ruby', ruby);
-hljs.registerLanguage('erb', erb);
-hljs.registerLanguage('erlang-repl', erlang_repl);
-hljs.registerLanguage('erlang', erlang);
-hljs.registerLanguage('excel', excel);
-hljs.registerLanguage('fix', fix);
-hljs.registerLanguage('flix', flix);
-hljs.registerLanguage('fortran', fortran);
-hljs.registerLanguage('fsharp', fsharp);
-hljs.registerLanguage('gams', gams);
-hljs.registerLanguage('gauss', gauss);
-hljs.registerLanguage('gcode', gcode);
-hljs.registerLanguage('gherkin', gherkin);
-hljs.registerLanguage('glsl', glsl);
-hljs.registerLanguage('gml', gml);
-hljs.registerLanguage('go', go);
-hljs.registerLanguage('golo', golo);
-hljs.registerLanguage('gradle', gradle);
-hljs.registerLanguage('groovy', groovy);
-hljs.registerLanguage('haml', haml);
-hljs.registerLanguage('handlebars', handlebars);
-hljs.registerLanguage('haskell', haskell);
-hljs.registerLanguage('haxe', haxe);
-hljs.registerLanguage('hsp', hsp);
-hljs.registerLanguage('html', xml);
-hljs.registerLanguage('htmlbars', htmlbars);
-hljs.registerLanguage('http', http);
-hljs.registerLanguage('hy', hy);
-hljs.registerLanguage('inform7', inform7);
-hljs.registerLanguage('ini', ini);
-hljs.registerLanguage('irpf90', irpf90);
-hljs.registerLanguage('isbl', isbl);
-hljs.registerLanguage('java', java);
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('jboss-cli', jboss_cli);
-hljs.registerLanguage('js', javascript);
-hljs.registerLanguage('json', json);
-hljs.registerLanguage('julia', julia);
-hljs.registerLanguage('julia-repl', julia_repl);
-hljs.registerLanguage('kotlin', kotlin);
-hljs.registerLanguage('lasso', lasso);
-hljs.registerLanguage('latex', latex);
-hljs.registerLanguage('ldif', ldif);
-hljs.registerLanguage('leaf', leaf);
-hljs.registerLanguage('less', less);
-hljs.registerLanguage('lisp', lisp);
-hljs.registerLanguage('livecodeserver', livecodeserver);
-hljs.registerLanguage('livescript', livescript);
-hljs.registerLanguage('llvm', llvm);
-hljs.registerLanguage('lsl', lsl);
-hljs.registerLanguage('lua', lua);
-hljs.registerLanguage('makefile', makefile);
-hljs.registerLanguage('mathematica', mathematica);
-hljs.registerLanguage('matlab', matlab);
-hljs.registerLanguage('maxima', maxima);
-hljs.registerLanguage('mel', mel);
-hljs.registerLanguage('mercury', mercury);
-hljs.registerLanguage('mipsasm', mipsasm);
-hljs.registerLanguage('mizar', mizar);
-hljs.registerLanguage('perl', perl);
-hljs.registerLanguage('mojolicious', mojolicious);
-hljs.registerLanguage('monkey', monkey);
-hljs.registerLanguage('moonscript', moonscript);
-hljs.registerLanguage('n1ql', n1ql);
-hljs.registerLanguage('nginx', nginx);
-hljs.registerLanguage('nim', nim);
-hljs.registerLanguage('nix', nix);
-hljs.registerLanguage('node-repl', node_repl);
-hljs.registerLanguage('nsis', nsis);
-hljs.registerLanguage('objectivec', objectivec);
-hljs.registerLanguage('ocaml', ocaml);
-hljs.registerLanguage('openscad', openscad);
-hljs.registerLanguage('oxygene', oxygene);
-hljs.registerLanguage('parser3', parser3);
-hljs.registerLanguage('pf', pf);
-hljs.registerLanguage('pgsql', pgsql);
-hljs.registerLanguage('php', php);
-hljs.registerLanguage('php-template', php_template);
-hljs.registerLanguage('plaintext', plaintext);
-hljs.registerLanguage('pony', pony);
-hljs.registerLanguage('powershell', powershell);
-hljs.registerLanguage('processing', processing);
-hljs.registerLanguage('profile', profile);
-hljs.registerLanguage('prolog', prolog);
-hljs.registerLanguage('properties', properties);
-hljs.registerLanguage('protobuf', protobuf);
-hljs.registerLanguage('puppet', puppet);
-hljs.registerLanguage('purebasic', purebasic);
-hljs.registerLanguage('python', python);
-hljs.registerLanguage('python-repl', python_repl);
-hljs.registerLanguage('q', q);
-hljs.registerLanguage('qml', qml);
-hljs.registerLanguage('r', r);
-hljs.registerLanguage('reasonml', reasonml);
-hljs.registerLanguage('rib', rib);
-hljs.registerLanguage('roboconf', roboconf);
-hljs.registerLanguage('routeros', routeros);
-hljs.registerLanguage('rsl', rsl);
-hljs.registerLanguage('ruleslanguage', ruleslanguage);
-hljs.registerLanguage('rust', rust);
-hljs.registerLanguage('sas', sas);
-hljs.registerLanguage('scala', scala);
-hljs.registerLanguage('scheme', scheme);
-hljs.registerLanguage('scilab', scilab);
-hljs.registerLanguage('scss', scss);
-hljs.registerLanguage('shell', shell);
-hljs.registerLanguage('smali', smali);
-hljs.registerLanguage('smalltalk', smalltalk);
-hljs.registerLanguage('sml', sml);
-hljs.registerLanguage('sqf', sqf);
-hljs.registerLanguage('sql', sql);
-hljs.registerLanguage('stan', stan);
-hljs.registerLanguage('stata', stata);
-hljs.registerLanguage('step21', step21);
-hljs.registerLanguage('stylus', stylus);
-hljs.registerLanguage('subunit', subunit);
-hljs.registerLanguage('swift', swift);
-hljs.registerLanguage('taggerscript', taggerscript);
-hljs.registerLanguage('yaml', yaml);
-hljs.registerLanguage('tap', tap);
-hljs.registerLanguage('tcl', tcl);
-hljs.registerLanguage('thrift', thrift);
-hljs.registerLanguage('tp', tp);
-hljs.registerLanguage('twig', twig);
-hljs.registerLanguage('typescript', typescript);
-hljs.registerLanguage('vala', vala);
-hljs.registerLanguage('vbnet', vbnet);
-hljs.registerLanguage('vbscript', vbscript);
-hljs.registerLanguage('vbscript-html', vbscript_html);
-hljs.registerLanguage('verilog', verilog);
-hljs.registerLanguage('vhdl', vhdl);
-hljs.registerLanguage('vim', vim);
-hljs.registerLanguage('x86asm', x86asm);
-hljs.registerLanguage('xl', xl);
-hljs.registerLanguage('xquery', xquery);
-hljs.registerLanguage('zephir', zephir);
+hljs.registerLanguage('abnf', abnf)
+hljs.registerLanguage('accesslog', accesslog)
+hljs.registerLanguage('actionscript', actionscript)
+hljs.registerLanguage('ada', ada)
+hljs.registerLanguage('angelscript', angelscript)
+hljs.registerLanguage('apache', apache)
+hljs.registerLanguage('applescript', applescript)
+hljs.registerLanguage('arcade', arcade)
+hljs.registerLanguage('arduino', arduino)
+hljs.registerLanguage('armasm', armasm)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('asciidoc', asciidoc)
+hljs.registerLanguage('aspectj', aspectj)
+hljs.registerLanguage('autohotkey', autohotkey)
+hljs.registerLanguage('autoit', autoit)
+hljs.registerLanguage('avrasm', avrasm)
+hljs.registerLanguage('awk', awk)
+hljs.registerLanguage('axapta', axapta)
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('basic', basic)
+hljs.registerLanguage('bnf', bnf)
+hljs.registerLanguage('brainfuck', brainfuck)
+hljs.registerLanguage('c-like', c_like)
+hljs.registerLanguage('c', c)
+hljs.registerLanguage('cal', cal)
+hljs.registerLanguage('capnproto', capnproto)
+hljs.registerLanguage('ceylon', ceylon)
+hljs.registerLanguage('clean', clean)
+hljs.registerLanguage('clojure', clojure)
+hljs.registerLanguage('clojure-repl', clojure_repl)
+hljs.registerLanguage('cmake', cmake)
+hljs.registerLanguage('coffeescript', coffeescript)
+hljs.registerLanguage('coq', coq)
+hljs.registerLanguage('cos', cos)
+hljs.registerLanguage('cpp', cpp)
+hljs.registerLanguage('crmsh', crmsh)
+hljs.registerLanguage('crystal', crystal)
+hljs.registerLanguage('csharp', csharp)
+hljs.registerLanguage('csp', csp)
+hljs.registerLanguage('css', css)
+hljs.registerLanguage('d', d)
+hljs.registerLanguage('markdown', markdown)
+hljs.registerLanguage('dart', dart)
+hljs.registerLanguage('delphi', delphi)
+hljs.registerLanguage('diff', diff)
+hljs.registerLanguage('django', django)
+hljs.registerLanguage('dns', dns)
+hljs.registerLanguage('dockerfile', dockerfile)
+hljs.registerLanguage('dos', dos)
+hljs.registerLanguage('dsconfig', dsconfig)
+hljs.registerLanguage('dts', dts)
+hljs.registerLanguage('dust', dust)
+hljs.registerLanguage('ebnf', ebnf)
+hljs.registerLanguage('elixir', elixir)
+hljs.registerLanguage('elm', elm)
+hljs.registerLanguage('ruby', ruby)
+hljs.registerLanguage('erb', erb)
+hljs.registerLanguage('erlang-repl', erlang_repl)
+hljs.registerLanguage('erlang', erlang)
+hljs.registerLanguage('excel', excel)
+hljs.registerLanguage('fix', fix)
+hljs.registerLanguage('flix', flix)
+hljs.registerLanguage('fortran', fortran)
+hljs.registerLanguage('fsharp', fsharp)
+hljs.registerLanguage('gams', gams)
+hljs.registerLanguage('gauss', gauss)
+hljs.registerLanguage('gcode', gcode)
+hljs.registerLanguage('gherkin', gherkin)
+hljs.registerLanguage('glsl', glsl)
+hljs.registerLanguage('gml', gml)
+hljs.registerLanguage('go', go)
+hljs.registerLanguage('golo', golo)
+hljs.registerLanguage('gradle', gradle)
+hljs.registerLanguage('groovy', groovy)
+hljs.registerLanguage('haml', haml)
+hljs.registerLanguage('handlebars', handlebars)
+hljs.registerLanguage('haskell', haskell)
+hljs.registerLanguage('haxe', haxe)
+hljs.registerLanguage('hsp', hsp)
+hljs.registerLanguage('html', xml)
+hljs.registerLanguage('htmlbars', htmlbars)
+hljs.registerLanguage('http', http)
+hljs.registerLanguage('hy', hy)
+hljs.registerLanguage('inform7', inform7)
+hljs.registerLanguage('ini', ini)
+hljs.registerLanguage('irpf90', irpf90)
+hljs.registerLanguage('isbl', isbl)
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('jboss-cli', jboss_cli)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('julia', julia)
+hljs.registerLanguage('julia-repl', julia_repl)
+hljs.registerLanguage('kotlin', kotlin)
+hljs.registerLanguage('lasso', lasso)
+hljs.registerLanguage('latex', latex)
+hljs.registerLanguage('ldif', ldif)
+hljs.registerLanguage('leaf', leaf)
+hljs.registerLanguage('less', less)
+hljs.registerLanguage('lisp', lisp)
+hljs.registerLanguage('livecodeserver', livecodeserver)
+hljs.registerLanguage('livescript', livescript)
+hljs.registerLanguage('llvm', llvm)
+hljs.registerLanguage('lsl', lsl)
+hljs.registerLanguage('lua', lua)
+hljs.registerLanguage('makefile', makefile)
+hljs.registerLanguage('mathematica', mathematica)
+hljs.registerLanguage('matlab', matlab)
+hljs.registerLanguage('maxima', maxima)
+hljs.registerLanguage('mel', mel)
+hljs.registerLanguage('mercury', mercury)
+hljs.registerLanguage('mipsasm', mipsasm)
+hljs.registerLanguage('mizar', mizar)
+hljs.registerLanguage('perl', perl)
+hljs.registerLanguage('mojolicious', mojolicious)
+hljs.registerLanguage('monkey', monkey)
+hljs.registerLanguage('moonscript', moonscript)
+hljs.registerLanguage('n1ql', n1ql)
+hljs.registerLanguage('nginx', nginx)
+hljs.registerLanguage('nim', nim)
+hljs.registerLanguage('nix', nix)
+hljs.registerLanguage('node-repl', node_repl)
+hljs.registerLanguage('nsis', nsis)
+hljs.registerLanguage('objectivec', objectivec)
+hljs.registerLanguage('ocaml', ocaml)
+hljs.registerLanguage('openscad', openscad)
+hljs.registerLanguage('oxygene', oxygene)
+hljs.registerLanguage('parser3', parser3)
+hljs.registerLanguage('pf', pf)
+hljs.registerLanguage('pgsql', pgsql)
+hljs.registerLanguage('php', php)
+hljs.registerLanguage('php-template', php_template)
+hljs.registerLanguage('plaintext', plaintext)
+hljs.registerLanguage('pony', pony)
+hljs.registerLanguage('powershell', powershell)
+hljs.registerLanguage('processing', processing)
+hljs.registerLanguage('profile', profile)
+hljs.registerLanguage('prolog', prolog)
+hljs.registerLanguage('properties', properties)
+hljs.registerLanguage('protobuf', protobuf)
+hljs.registerLanguage('puppet', puppet)
+hljs.registerLanguage('purebasic', purebasic)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('python-repl', python_repl)
+hljs.registerLanguage('q', q)
+hljs.registerLanguage('qml', qml)
+hljs.registerLanguage('r', r)
+hljs.registerLanguage('reasonml', reasonml)
+hljs.registerLanguage('rib', rib)
+hljs.registerLanguage('roboconf', roboconf)
+hljs.registerLanguage('routeros', routeros)
+hljs.registerLanguage('rsl', rsl)
+hljs.registerLanguage('ruleslanguage', ruleslanguage)
+hljs.registerLanguage('rust', rust)
+hljs.registerLanguage('sas', sas)
+hljs.registerLanguage('scala', scala)
+hljs.registerLanguage('scheme', scheme)
+hljs.registerLanguage('scilab', scilab)
+hljs.registerLanguage('scss', scss)
+hljs.registerLanguage('shell', shell)
+hljs.registerLanguage('smali', smali)
+hljs.registerLanguage('smalltalk', smalltalk)
+hljs.registerLanguage('sml', sml)
+hljs.registerLanguage('sqf', sqf)
+hljs.registerLanguage('sql', sql)
+hljs.registerLanguage('stan', stan)
+hljs.registerLanguage('stata', stata)
+hljs.registerLanguage('step21', step21)
+hljs.registerLanguage('stylus', stylus)
+hljs.registerLanguage('subunit', subunit)
+hljs.registerLanguage('swift', swift)
+hljs.registerLanguage('taggerscript', taggerscript)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('tap', tap)
+hljs.registerLanguage('tcl', tcl)
+hljs.registerLanguage('thrift', thrift)
+hljs.registerLanguage('tp', tp)
+hljs.registerLanguage('twig', twig)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('vala', vala)
+hljs.registerLanguage('vbnet', vbnet)
+hljs.registerLanguage('vbscript', vbscript)
+hljs.registerLanguage('vbscript-html', vbscript_html)
+hljs.registerLanguage('verilog', verilog)
+hljs.registerLanguage('vhdl', vhdl)
+hljs.registerLanguage('vim', vim)
+hljs.registerLanguage('x86asm', x86asm)
+hljs.registerLanguage('xl', xl)
+hljs.registerLanguage('xquery', xquery)
+hljs.registerLanguage('zephir', zephir)
 
-export default hljs;
+export default hljs
diff --git a/src/components/common/icon-button/icon-button.tsx b/src/components/common/icon-button/icon-button.tsx
index 8d6075d51..e248d9ad9 100644
--- a/src/components/common/icon-button/icon-button.tsx
+++ b/src/components/common/icon-button/icon-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button, ButtonProps } from 'react-bootstrap'
@@ -19,13 +19,14 @@ export interface IconButtonProps extends ButtonProps {
 
 export const IconButton: React.FC<IconButtonProps> = ({ icon, children, border = false, ...props }) => {
   return (
-    <Button {...props} className={`btn-icon p-0 d-inline-flex align-items-stretch ${border ? 'with-border' : ''}`}>
+    <Button { ...props }
+            className={ `btn-icon p-0 d-inline-flex align-items-stretch ${ border ? 'with-border' : '' }` }>
       <span className="icon-part d-flex align-items-center">
-        <ForkAwesomeIcon icon={icon} className={'icon'}/>
+        <ForkAwesomeIcon icon={ icon } className={ 'icon' }/>
       </span>
-      <ShowIf condition={!!children}>
+      <ShowIf condition={ !!children }>
         <span className="text-part d-flex align-items-center">
-          {children}
+          { children }
         </span>
       </ShowIf>
     </Button>
diff --git a/src/components/common/icon-button/translated-icon-button.tsx b/src/components/common/icon-button/translated-icon-button.tsx
index c10af0fee..14972e28a 100644
--- a/src/components/common/icon-button/translated-icon-button.tsx
+++ b/src/components/common/icon-button/translated-icon-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Trans } from 'react-i18next'
@@ -14,8 +14,8 @@ export interface TranslatedIconButtonProps extends IconButtonProps {
 
 export const TranslatedIconButton: React.FC<TranslatedIconButtonProps> = ({ i18nKey, ...props }) => {
   return (
-    <IconButton {...props}>
-      <Trans i18nKey={i18nKey}/>
+    <IconButton { ...props }>
+      <Trans i18nKey={ i18nKey }/>
     </IconButton>
   )
 }
diff --git a/src/components/common/links/external-link.tsx b/src/components/common/links/external-link.tsx
index a46dd5fbe..1ac879fd3 100644
--- a/src/components/common/links/external-link.tsx
+++ b/src/components/common/links/external-link.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
@@ -12,18 +12,18 @@ import { LinkWithTextProps } from './types'
 
 export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = 'text-light', title }) => {
   return (
-    <a href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      id={id}
-      className={className}
-      title={title}
-      dir='auto'
+    <a href={ href }
+       target="_blank"
+       rel="noopener noreferrer"
+       id={ id }
+       className={ className }
+       title={ title }
+       dir='auto'
     >
-      <ShowIf condition={!!icon}>
-        <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true}/>&nbsp;
+      <ShowIf condition={ !!icon }>
+        <ForkAwesomeIcon icon={ icon as IconName } fixedWidth={ true }/>&nbsp;
       </ShowIf>
-      {text}
+      { text }
     </a>
   )
 }
diff --git a/src/components/common/links/internal-link.tsx b/src/components/common/links/internal-link.tsx
index d82a8ae4b..5c17735ba 100644
--- a/src/components/common/links/internal-link.tsx
+++ b/src/components/common/links/internal-link.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Link } from 'react-router-dom'
@@ -13,15 +13,15 @@ import { LinkWithTextProps } from './types'
 
 export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = 'text-light', title }) => {
   return (
-    <Link to={href}
-      className={className}
-      id={id}
-      title={title}
+    <Link to={ href }
+          className={ className }
+          id={ id }
+          title={ title }
     >
-      <ShowIf condition={!!icon}>
-        <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true}/>&nbsp;
+      <ShowIf condition={ !!icon }>
+        <ForkAwesomeIcon icon={ icon as IconName } fixedWidth={ true }/>&nbsp;
       </ShowIf>
-      {text}
+      { text }
     </Link>
   )
 }
diff --git a/src/components/common/links/translated-external-link.tsx b/src/components/common/links/translated-external-link.tsx
index e2d76f02d..3923ce9d6 100644
--- a/src/components/common/links/translated-external-link.tsx
+++ b/src/components/common/links/translated-external-link.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,6 +12,6 @@ import { TranslatedLinkProps } from './types'
 export const TranslatedExternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
   return (
-    <ExternalLink text={t(i18nKey, i18nOption)} {...props}/>
+    <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 d0bc1fce3..5d7819cf2 100644
--- a/src/components/common/links/translated-internal-link.tsx
+++ b/src/components/common/links/translated-internal-link.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,6 +12,6 @@ import { TranslatedLinkProps } from './types'
 export const TranslatedInternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
   return (
-    <InternalLink text={t(i18nKey, i18nOption)} {...props}/>
+    <InternalLink text={ t(i18nKey, i18nOption) } { ...props }/>
   )
 }
diff --git a/src/components/common/links/types.d.ts b/src/components/common/links/types.d.ts
index 6ef61f826..436db547e 100644
--- a/src/components/common/links/types.d.ts
+++ b/src/components/common/links/types.d.ts
@@ -19,7 +19,7 @@ export interface LinkWithTextProps extends GeneralLinkProp {
   text: string
 }
 
-export interface TranslatedLinkProps extends GeneralLinkProp{
+export interface TranslatedLinkProps extends GeneralLinkProp {
   i18nKey: string
   i18nOption?: (TOptionsBase & StringMap) | string
 }
diff --git a/src/components/common/lock-button/lock-button.tsx b/src/components/common/lock-button/lock-button.tsx
index 88dcb75e6..8fc942f01 100644
--- a/src/components/common/lock-button/lock-button.tsx
+++ b/src/components/common/lock-button/lock-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
@@ -16,7 +16,7 @@ export interface LockButtonProps {
 
 export const LockButton: React.FC<LockButtonProps> = ({ locked, onLockedChanged, title }) => {
   return (
-    <Button variant='dark' size='sm' onClick={() => onLockedChanged(!locked)} title={title}>
+    <Button variant='dark' size='sm' onClick={ () => onLockedChanged(!locked) } title={ title }>
       { locked
         ? <ForkAwesomeIcon icon='lock'/>
         : <ForkAwesomeIcon icon='unlock'/>
diff --git a/src/components/common/modals/common-modal.tsx b/src/components/common/modals/common-modal.tsx
index e2c655ed0..2ac4acf47 100644
--- a/src/components/common/modals/common-modal.tsx
+++ b/src/components/common/modals/common-modal.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Modal } from 'react-bootstrap'
@@ -26,15 +26,16 @@ export const CommonModal: React.FC<CommonModalProps> = ({ show, onHide, titleI18
   useTranslation()
 
   return (
-    <Modal data-cy={'limitReachedModal'} show={show} onHide={onHide} animation={true} dialogClassName={`text-dark ${additionalClasses ?? ''}`} size={size}>
-      <Modal.Header closeButton={!!closeButton}>
+    <Modal data-cy={ 'limitReachedModal' } show={ show } onHide={ onHide } animation={ true }
+           dialogClassName={ `text-dark ${ additionalClasses ?? '' }` } size={ size }>
+      <Modal.Header closeButton={ !!closeButton }>
         <Modal.Title>
-          <ShowIf condition={!!icon}>
-            <ForkAwesomeIcon icon={icon as IconName}/>&nbsp;
+          <ShowIf condition={ !!icon }>
+            <ForkAwesomeIcon icon={ icon as IconName }/>&nbsp;
           </ShowIf>
           { titleI18nKey
-            ? <Trans i18nKey={titleI18nKey}/>
-            : <span>{title}</span>
+            ? <Trans i18nKey={ titleI18nKey }/>
+            : <span>{ title }</span>
           }
         </Modal.Title>
       </Modal.Header>
diff --git a/src/components/common/modals/deletion-modal.tsx b/src/components/common/modals/deletion-modal.tsx
index f9f4413da..cf9cde4c9 100644
--- a/src/components/common/modals/deletion-modal.tsx
+++ b/src/components/common/modals/deletion-modal.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button, Modal } from 'react-bootstrap'
@@ -18,13 +18,13 @@ export const DeletionModal: React.FC<DeletionModalProps> = ({ show, onHide, titl
   useTranslation()
 
   return (
-    <CommonModal show={show} onHide={onHide} titleI18nKey={titleI18nKey} icon={icon} closeButton={true}>
+    <CommonModal show={ show } onHide={ onHide } titleI18nKey={ titleI18nKey } icon={ icon } closeButton={ true }>
       <Modal.Body className="text-dark">
         { children }
       </Modal.Body>
       <Modal.Footer>
-        <Button variant="danger" onClick={onConfirm}>
-          <Trans i18nKey={deletionButtonI18nKey}/>
+        <Button variant="danger" onClick={ onConfirm }>
+          <Trans i18nKey={ deletionButtonI18nKey }/>
         </Button>
       </Modal.Footer>
     </CommonModal>
diff --git a/src/components/common/modals/error-modal.tsx b/src/components/common/modals/error-modal.tsx
index 046da39d2..93ab40383 100644
--- a/src/components/common/modals/error-modal.tsx
+++ b/src/components/common/modals/error-modal.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Modal } from 'react-bootstrap'
@@ -10,7 +10,7 @@ import { CommonModal, CommonModalProps } from './common-modal'
 
 export const ErrorModal: React.FC<CommonModalProps> = ({ show, onHide, titleI18nKey, icon, children }) => {
   return (
-    <CommonModal show={show} onHide={onHide} titleI18nKey={titleI18nKey} icon={icon} closeButton={true}>
+    <CommonModal show={ show } onHide={ onHide } titleI18nKey={ titleI18nKey } icon={ icon } closeButton={ true }>
       <Modal.Body className="text-dark text-center">
         { children }
       </Modal.Body>
diff --git a/src/components/common/motd-banner/motd-banner.tsx b/src/components/common/motd-banner/motd-banner.tsx
index 3793e6d18..50c808631 100644
--- a/src/components/common/motd-banner/motd-banner.tsx
+++ b/src/components/common/motd-banner/motd-banner.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import equal from 'fast-deep-equal'
 import React from 'react'
@@ -23,16 +23,16 @@ export const MotdBanner: React.FC = () => {
   }
 
   return (
-    <ShowIf condition={bannerState.show}>
+    <ShowIf condition={ bannerState.show }>
       <Alert variant='primary' dir='auto' className='mb-0 text-center d-flex flex-row justify-content-center'>
         <Link to='/s/banner' className='flex-grow-1 align-self-center text-black'>
-          {bannerState.text}
+          { bannerState.text }
         </Link>
         <Button
           variant='outline-primary'
           size='sm'
           className='mx-2'
-          onClick={dismissBanner}>
+          onClick={ dismissBanner }>
           <ForkAwesomeIcon icon='times'/>
         </Button>
       </Alert>
diff --git a/src/components/common/number-range/number-range.ts b/src/components/common/number-range/number-range.ts
index 82d781932..1d7e10907 100644
--- a/src/components/common/number-range/number-range.ts
+++ b/src/components/common/number-range/number-range.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export const createNumberRangeArray = (length: number) : number[] => {
-  return Array.from(Array(length).keys())
+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 7945d639e..80d5eebb3 100644
--- a/src/components/common/pagination/pager-item.tsx
+++ b/src/components/common/pagination/pager-item.tsx
@@ -1,21 +1,21 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 
 export interface PageItemProps {
-    onClick: (index: number) => void
-    index: number
+  onClick: (index: number) => void
+  index: number
 }
 
 export const PagerItem: React.FC<PageItemProps> = ({ index, onClick }) => {
   return (
     <li className="page-item">
-      <span className="page-link" role="button" onClick={() => onClick(index)}>
-        {index + 1}
+      <span className="page-link" role="button" onClick={ () => onClick(index) }>
+        { index + 1 }
       </span>
     </li>
   )
diff --git a/src/components/common/pagination/pager-pagination.tsx b/src/components/common/pagination/pager-pagination.tsx
index 822e776ec..f1a88bf91 100644
--- a/src/components/common/pagination/pager-pagination.tsx
+++ b/src/components/common/pagination/pager-pagination.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useEffect, useState } from 'react'
 import { Pagination } from 'react-bootstrap'
@@ -53,28 +53,31 @@ export const PagerPagination: React.FC<PaginationProps> = ({ numberOfPageButtons
       0
     )
 
-  const paginationItemsBefore = Array.from(new Array(correctedPageIndex - correctedLowerPageIndex)).map((k, index) => {
-    const itemIndex = correctedLowerPageIndex + index
-    return <PagerItem key={itemIndex} index={itemIndex} onClick={setPageIndex}/>
-  })
+  const paginationItemsBefore = Array.from(new Array(correctedPageIndex - correctedLowerPageIndex))
+                                     .map((k, index) => {
+                                       const itemIndex = correctedLowerPageIndex + index
+                                       return <PagerItem key={ itemIndex } index={ itemIndex }
+                                                         onClick={ setPageIndex }/>
+                                     })
 
-  const paginationItemsAfter = Array.from(new Array(correctedUpperPageIndex - correctedPageIndex)).map((k, index) => {
-    const itemIndex = correctedPageIndex + index + 1
-    return <PagerItem key={itemIndex} index={itemIndex} onClick={setPageIndex}/>
-  })
+  const paginationItemsAfter = Array.from(new Array(correctedUpperPageIndex - correctedPageIndex))
+                                    .map((k, index) => {
+                                      const itemIndex = correctedPageIndex + index + 1
+                                      return <PagerItem key={ itemIndex } index={ itemIndex } onClick={ setPageIndex }/>
+                                    })
 
   return (
     <Pagination dir='ltr'>
-      <ShowIf condition={correctedLowerPageIndex > 0}>
-        <PagerItem key={0} index={0} onClick={setPageIndex}/>
+      <ShowIf condition={ correctedLowerPageIndex > 0 }>
+        <PagerItem key={ 0 } index={ 0 } onClick={ setPageIndex }/>
         <Pagination.Ellipsis disabled/>
       </ShowIf>
-      {paginationItemsBefore}
-      <Pagination.Item active>{correctedPageIndex + 1}</Pagination.Item>
-      {paginationItemsAfter}
-      <ShowIf condition={correctedUpperPageIndex < lastPageIndex}>
+      { paginationItemsBefore }
+      <Pagination.Item active>{ correctedPageIndex + 1 }</Pagination.Item>
+      { paginationItemsAfter }
+      <ShowIf condition={ correctedUpperPageIndex < lastPageIndex }>
         <Pagination.Ellipsis disabled/>
-        <PagerItem key={lastPageIndex} index={lastPageIndex} onClick={setPageIndex}/>
+        <PagerItem key={ lastPageIndex } index={ lastPageIndex } onClick={ setPageIndex }/>
       </ShowIf>
     </Pagination>
   )
diff --git a/src/components/common/pagination/pager.tsx b/src/components/common/pagination/pager.tsx
index 0953e2e54..bc5ff8e29 100644
--- a/src/components/common/pagination/pager.tsx
+++ b/src/components/common/pagination/pager.tsx
@@ -1,15 +1,15 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useEffect } from 'react'
 
 export interface PagerPageProps {
-    pageIndex: number
-    numberOfElementsPerPage: number
-    onLastPageIndexChange: (lastPageIndex: number) => void
+  pageIndex: number
+  numberOfElementsPerPage: number
+  onLastPageIndexChange: (lastPageIndex: number) => void
 }
 
 export const Pager: React.FC<PagerPageProps> = ({ children, numberOfElementsPerPage, pageIndex, onLastPageIndexChange }) => {
@@ -22,10 +22,11 @@ export const Pager: React.FC<PagerPageProps> = ({ children, numberOfElementsPerP
 
   return <Fragment>
     {
-      React.Children.toArray(children).filter((value, index) => {
-        const pageOfElement = Math.floor((index) / numberOfElementsPerPage)
-        return (pageOfElement === correctedPageIndex)
-      })
+      React.Children.toArray(children)
+           .filter((value, index) => {
+             const pageOfElement = Math.floor((index) / numberOfElementsPerPage)
+             return (pageOfElement === correctedPageIndex)
+           })
     }
   </Fragment>
 }
diff --git a/src/components/common/routing/not-found-error-screen.tsx b/src/components/common/routing/not-found-error-screen.tsx
index 8fda40955..9b7078940 100644
--- a/src/components/common/routing/not-found-error-screen.tsx
+++ b/src/components/common/routing/not-found-error-screen.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { LandingLayout } from '../../landing-layout/landing-layout'
diff --git a/src/components/common/routing/redirector.tsx b/src/components/common/routing/redirector.tsx
index 83cce4970..9cf5582c8 100644
--- a/src/components/common/routing/redirector.tsx
+++ b/src/components/common/routing/redirector.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useEffect, useState } from 'react'
 import { Redirect } from 'react-router'
@@ -27,7 +27,7 @@ export const Redirector: React.FC = () => {
   if (error) {
     return (<NotFoundErrorScreen/>)
   } else if (!error && error != null) {
-    return (<Redirect to={`/n/${id}`}/>)
+    return (<Redirect to={ `/n/${ id }` }/>)
   } else {
     return (<span>Loading</span>)
   }
diff --git a/src/components/common/show-if/show-if.tsx b/src/components/common/show-if/show-if.tsx
index 43e140a22..9a2ecd184 100644
--- a/src/components/common/show-if/show-if.tsx
+++ b/src/components/common/show-if/show-if.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment } from 'react'
 
@@ -11,5 +11,5 @@ export interface ShowIfProps {
 }
 
 export const ShowIf: React.FC<ShowIfProps> = ({ children, condition }) => {
-  return condition ? <Fragment>{children}</Fragment> : null
+  return condition ? <Fragment>{ children }</Fragment> : null
 }
diff --git a/src/components/common/user-avatar/user-avatar.tsx b/src/components/common/user-avatar/user-avatar.tsx
index 28a11b703..100d50928 100644
--- a/src/components/common/user-avatar/user-avatar.tsx
+++ b/src/components/common/user-avatar/user-avatar.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,15 +21,15 @@ const UserAvatar: React.FC<UserAvatarProps> = ({ name, photo, size, additionalCl
   const { t } = useTranslation()
 
   return (
-    <span className={'d-inline-flex align-items-center ' + additionalClasses}>
+    <span className={ 'd-inline-flex align-items-center ' + additionalClasses }>
       <img
-        src={photo}
-        className={`user-avatar rounded mr-1 ${size ?? ''}`}
-        alt={t('common.avatarOf', { name })}
-        title={name}
+        src={ photo }
+        className={ `user-avatar rounded mr-1 ${ size ?? '' }` }
+        alt={ t('common.avatarOf', { name }) }
+        title={ name }
       />
-      <ShowIf condition={showName}>
-        <span className="mx-1 user-line-name">{name}</span>
+      <ShowIf condition={ showName }>
+        <span className="mx-1 user-line-name">{ name }</span>
       </ShowIf>
     </span>
   )
diff --git a/src/components/document-read-only-page/ErrorWhileLoadingNoteAlert.tsx b/src/components/document-read-only-page/ErrorWhileLoadingNoteAlert.tsx
index 7ddbf2de3..c24d5c777 100644
--- a/src/components/document-read-only-page/ErrorWhileLoadingNoteAlert.tsx
+++ b/src/components/document-read-only-page/ErrorWhileLoadingNoteAlert.tsx
@@ -17,11 +17,11 @@ export const ErrorWhileLoadingNoteAlert: React.FC<ErrorWhileLoadingNoteAlertProp
   useTranslation()
 
   return (
-    <ShowIf condition={show}>
-      <Alert variant={'danger'} className={'my-2'}>
-        <b><Trans i18nKey={'views.readOnly.error.title'}/></b>
+    <ShowIf condition={ show }>
+      <Alert variant={ 'danger' } className={ 'my-2' }>
+        <b><Trans i18nKey={ 'views.readOnly.error.title' }/></b>
         <br/>
-        <Trans i18nKey={'views.readOnly.error.description'}/>
+        <Trans i18nKey={ 'views.readOnly.error.description' }/>
       </Alert>
     </ShowIf>
   )
diff --git a/src/components/document-read-only-page/LoadingNoteAlert.tsx b/src/components/document-read-only-page/LoadingNoteAlert.tsx
index 47a8d6328..2886094af 100644
--- a/src/components/document-read-only-page/LoadingNoteAlert.tsx
+++ b/src/components/document-read-only-page/LoadingNoteAlert.tsx
@@ -15,9 +15,9 @@ export interface LoadingNoteAlertProps {
 
 export const LoadingNoteAlert: React.FC<LoadingNoteAlertProps> = ({ show }) => {
   return (
-    <ShowIf condition={show}>
-      <Alert variant={'info'} className={'my-2'}>
-        <Trans i18nKey={'views.readOnly.loading'}/>
+    <ShowIf condition={ show }>
+      <Alert variant={ 'info' } className={ 'my-2' }>
+        <Trans i18nKey={ 'views.readOnly.loading' }/>
       </Alert>
     </ShowIf>
   )
diff --git a/src/components/document-read-only-page/document-infobar.tsx b/src/components/document-read-only-page/document-infobar.tsx
index f73dae3df..72dd2e7ce 100644
--- a/src/components/document-read-only-page/document-infobar.tsx
+++ b/src/components/document-read-only-page/document-infobar.tsx
@@ -37,30 +37,32 @@ export const DocumentInfobar: React.FC<DocumentInfobarProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={'d-flex flex-row my-3 document-infobar'}>
-      <div className={'col-md'}>&nbsp;</div>
-      <div className={'d-flex flex-fill'}>
-        <div className={'d-flex flex-column'}>
+    <div className={ 'd-flex flex-row my-3 document-infobar' }>
+      <div className={ 'col-md' }>&nbsp;</div>
+      <div className={ 'd-flex flex-fill' }>
+        <div className={ 'd-flex flex-column' }>
           <DocumentInfoTimeLine
-            mode={DocumentInfoLineWithTimeMode.CREATED}
-            time={createdTime}
-            userName={createdAuthor}
-            profileImageSrc={'/img/avatar.png'}/>
+            mode={ DocumentInfoLineWithTimeMode.CREATED }
+            time={ createdTime }
+            userName={ createdAuthor }
+            profileImageSrc={ '/img/avatar.png' }/>
           <DocumentInfoTimeLine
-            mode={DocumentInfoLineWithTimeMode.EDITED}
-            time={changedTime}
-            userName={changedAuthor}
-            profileImageSrc={'/img/avatar.png'}/>
+            mode={ DocumentInfoLineWithTimeMode.EDITED }
+            time={ changedTime }
+            userName={ changedAuthor }
+            profileImageSrc={ '/img/avatar.png' }/>
           <hr/>
         </div>
-        <span className={'ml-auto'}>
-          { viewCount } <Trans i18nKey={'views.readOnly.viewCount'}/>
-          <ShowIf condition={editable}>
-            <InternalLink text={''} href={`/n/${noteId}`} icon={'pencil'} className={'text-primary text-decoration-none mx-1'} title={t('views.readOnly.editNote')}/>
+        <span className={ 'ml-auto' }>
+          { viewCount } <Trans i18nKey={ 'views.readOnly.viewCount' }/>
+          <ShowIf condition={ editable }>
+            <InternalLink text={ '' } href={ `/n/${ noteId }` } icon={ 'pencil' }
+                          className={ 'text-primary text-decoration-none mx-1' }
+                          title={ t('views.readOnly.editNote') }/>
           </ShowIf>
         </span>
       </div>
-      <div className={'col-md'}>&nbsp;</div>
+      <div className={ 'col-md' }>&nbsp;</div>
     </div>
   )
 }
diff --git a/src/components/document-read-only-page/document-read-only-page.tsx b/src/components/document-read-only-page/document-read-only-page.tsx
index e088bf33b..dffd34623 100644
--- a/src/components/document-read-only-page/document-read-only-page.tsx
+++ b/src/components/document-read-only-page/document-read-only-page.tsx
@@ -38,27 +38,27 @@ export const DocumentReadOnlyPage: React.FC = () => {
   const noteDetails = useSelector((state: ApplicationState) => state.noteDetails)
 
   return (
-    <div className={'d-flex flex-column mvh-100 bg-light'}>
+    <div className={ 'd-flex flex-column mvh-100 bg-light' }>
       <MotdBanner/>
-      <AppBar mode={AppBarMode.BASIC}/>
-      <div className={'container'}>
-        <ErrorWhileLoadingNoteAlert show={error}/>
-        <LoadingNoteAlert show={loading}/>
+      <AppBar mode={ AppBarMode.BASIC }/>
+      <div className={ 'container' }>
+        <ErrorWhileLoadingNoteAlert show={ error }/>
+        <LoadingNoteAlert show={ loading }/>
       </div>
-      <ShowIf condition={!error && !loading}>
+      <ShowIf condition={ !error && !loading }>
         <DocumentInfobar
-          changedAuthor={noteDetails.lastChange.userId ?? ''}
-          changedTime={noteDetails.lastChange.timestamp}
-          createdAuthor={'Test'}
-          createdTime={noteDetails.createTime}
-          editable={true}
-          noteId={id}
-          viewCount={noteDetails.viewCount}
+          changedAuthor={ noteDetails.lastChange.userId ?? '' }
+          changedTime={ noteDetails.lastChange.timestamp }
+          createdAuthor={ 'Test' }
+          createdTime={ noteDetails.createTime }
+          editable={ true }
+          noteId={ id }
+          viewCount={ noteDetails.viewCount }
         />
-        <RenderIframe extraClasses={"flex-fill"}
-                      markdownContent={markdownContent}
-                      onFirstHeadingChange={onFirstHeadingChange}
-                      onFrontmatterChange={onFrontmatterChange}/>
+        <RenderIframe extraClasses={ 'flex-fill' }
+                      markdownContent={ markdownContent }
+                      onFirstHeadingChange={ onFirstHeadingChange }
+                      onFrontmatterChange={ onFrontmatterChange }/>
       </ShowIf>
     </div>
   )
diff --git a/src/components/editor-page/app-bar/app-bar.tsx b/src/components/editor-page/app-bar/app-bar.tsx
index 3829c9600..32045a8e0 100644
--- a/src/components/editor-page/app-bar/app-bar.tsx
+++ b/src/components/editor-page/app-bar/app-bar.tsx
@@ -37,20 +37,21 @@ export const AppBar: React.FC<AppBarProps> = ({ mode }) => {
   const userExists = useSelector((state: ApplicationState) => !!state.user)
 
   return (
-    <Navbar bg={'light'}>
+    <Navbar bg={ 'light' }>
       <Nav className="mr-auto d-flex align-items-center">
         <NavbarBranding/>
-        <ShowIf condition={mode === AppBarMode.EDITOR}>
+        <ShowIf condition={ mode === AppBarMode.EDITOR }>
           <EditorViewMode/>
           <SyncScrollButtons/>
         </ShowIf>
         <DarkModeButton/>
-        <Link to={`/p/${id}`} target='_blank'>
-          <Button title={t('editor.documentBar.slideMode')} className="ml-2 text-secondary" size="sm" variant="outline-light">
+        <Link to={ `/p/${ id }` } target='_blank'>
+          <Button title={ t('editor.documentBar.slideMode') } className="ml-2 text-secondary" size="sm"
+                  variant="outline-light">
             <ForkAwesomeIcon icon="television"/>
           </Button>
         </Link>
-        <ShowIf condition={mode === AppBarMode.EDITOR}>
+        <ShowIf condition={ mode === AppBarMode.EDITOR }>
           <HelpButton/>
         </ShowIf>
       </Nav>
@@ -58,11 +59,11 @@ export const AppBar: React.FC<AppBarProps> = ({ mode }) => {
         <Button className="mx-2" size="sm" variant="primary">
           <ForkAwesomeIcon icon="plus"/> <Trans i18nKey="editor.appBar.new"/>
         </Button>
-        <ShowIf condition={!userExists}>
-          <SignInButton size={'sm'} />
+        <ShowIf condition={ !userExists }>
+          <SignInButton size={ 'sm' }/>
         </ShowIf>
-        <ShowIf condition={userExists}>
-          <UserDropdown />
+        <ShowIf condition={ userExists }>
+          <UserDropdown/>
         </ShowIf>
       </Nav>
     </Navbar>
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 a648d33b2..2a39d8b1f 100644
--- a/src/components/editor-page/app-bar/dark-mode-button.tsx
+++ b/src/components/editor-page/app-bar/dark-mode-button.tsx
@@ -24,22 +24,22 @@ const DarkModeButton: React.FC = () => {
     <ToggleButtonGroup
       type="radio"
       name="dark-mode"
-      value={darkModeEnabled}
+      value={ darkModeEnabled }
       className="ml-2"
     >
       <ToggleButton
-        value={DarkModeState.DARK}
+        value={ DarkModeState.DARK }
         variant="outline-secondary"
-        title={t('editor.darkMode.switchToDark')}
-        onChange={() => setDarkMode(true)}
+        title={ t('editor.darkMode.switchToDark') }
+        onChange={ () => setDarkMode(true) }
       >
         <ForkAwesomeIcon icon="moon"/>
       </ToggleButton>
       <ToggleButton
-        value={DarkModeState.LIGHT}
+        value={ DarkModeState.LIGHT }
         variant="outline-secondary"
-        title={t('editor.darkMode.switchToLight')}
-        onChange={() => setDarkMode(false)}
+        title={ t('editor.darkMode.switchToLight') }
+        onChange={ () => setDarkMode(false) }
       >
         <ForkAwesomeIcon icon="sun-o"/>
       </ToggleButton>
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 55f8af414..6d02813fb 100644
--- a/src/components/editor-page/app-bar/editor-view-mode.tsx
+++ b/src/components/editor-page/app-bar/editor-view-mode.tsx
@@ -25,17 +25,17 @@ export const EditorViewMode: React.FC = () => {
     <ToggleButtonGroup
       type="radio"
       name="options"
-      value={editorMode}
-      onChange={(value: EditorMode) => {
+      value={ editorMode }
+      onChange={ (value: EditorMode) => {
         setEditorMode(value)
-      }}>
-      <ToggleButton value={EditorMode.PREVIEW} variant="outline-secondary" title={t('editor.viewMode.view')}>
+      } }>
+      <ToggleButton value={ EditorMode.PREVIEW } variant="outline-secondary" title={ t('editor.viewMode.view') }>
         <ForkAwesomeIcon icon="eye"/>
       </ToggleButton>
-      <ToggleButton value={EditorMode.BOTH} variant="outline-secondary" title={t('editor.viewMode.both')}>
+      <ToggleButton value={ EditorMode.BOTH } variant="outline-secondary" title={ t('editor.viewMode.both') }>
         <ForkAwesomeIcon icon="columns"/>
       </ToggleButton>
-      <ToggleButton value={EditorMode.EDITOR} variant="outline-secondary" title={t('editor.viewMode.edit')}>
+      <ToggleButton value={ EditorMode.EDITOR } variant="outline-secondary" title={ t('editor.viewMode.edit') }>
         <ForkAwesomeIcon icon="pencil"/>
       </ToggleButton>
     </ToggleButtonGroup>
diff --git a/src/components/editor-page/app-bar/help-button/cheatsheet.tsx b/src/components/editor-page/app-bar/help-button/cheatsheet.tsx
index 9326c99c5..850dce7b7 100644
--- a/src/components/editor-page/app-bar/help-button/cheatsheet.tsx
+++ b/src/components/editor-page/app-bar/help-button/cheatsheet.tsx
@@ -15,24 +15,24 @@ import './cheatsheet.scss'
 export const Cheatsheet: React.FC = () => {
   const { t } = useTranslation()
   const codes = [
-    `**${t('editor.editorToolbar.bold')}**`,
-    `*${t('editor.editorToolbar.italic')}*`,
-    `++${t('editor.editorToolbar.underline')}++`,
-    `~~${t('editor.editorToolbar.strikethrough')}~~`,
+    `**${ t('editor.editorToolbar.bold') }**`,
+    `*${ t('editor.editorToolbar.italic') }*`,
+    `++${ t('editor.editorToolbar.underline') }++`,
+    `~~${ t('editor.editorToolbar.strikethrough') }~~`,
     'H~2~O',
     '19^th^',
-    `==${t('editor.help.cheatsheet.highlightedText')}==`,
-    `# ${t('editor.editorToolbar.header')}`,
-    `\`${t('editor.editorToolbar.code')}\``,
+    `==${ t('editor.help.cheatsheet.highlightedText') }==`,
+    `# ${ t('editor.editorToolbar.header') }`,
+    `\`${ t('editor.editorToolbar.code') }\``,
     '```javascript=\nvar x = 5;\n```',
-    `> ${t('editor.editorToolbar.blockquote')}`,
-    `- ${t('editor.editorToolbar.unorderedList')}`,
-    `1. ${t('editor.editorToolbar.orderedList')}`,
-    `- [ ] ${t('editor.editorToolbar.checkList')}`,
-    `[${t('editor.editorToolbar.link')}](https://example.com)`,
-    `![${t('editor.editorToolbar.image')}](/icons/mstile-70x70.png)`,
+    `> ${ t('editor.editorToolbar.blockquote') }`,
+    `- ${ t('editor.editorToolbar.unorderedList') }`,
+    `1. ${ t('editor.editorToolbar.orderedList') }`,
+    `- [ ] ${ t('editor.editorToolbar.checkList') }`,
+    `[${ t('editor.editorToolbar.link') }](https://example.com)`,
+    `![${ t('editor.editorToolbar.image') }](/icons/mstile-70x70.png)`,
     ':smile:',
-    `:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
+    `:::info\n${ t('editor.help.cheatsheet.exampleAlert') }\n:::`
   ]
 
   const markdownIt = useMemo(() => {
@@ -43,26 +43,26 @@ export const Cheatsheet: React.FC = () => {
   return (
     <Table className="table-condensed table-cheatsheet">
       <thead>
-        <tr>
-          <th><Trans i18nKey='editor.help.cheatsheet.example'/></th>
-          <th><Trans i18nKey='editor.help.cheatsheet.syntax'/></th>
-        </tr>
+      <tr>
+        <th><Trans i18nKey='editor.help.cheatsheet.example'/></th>
+        <th><Trans i18nKey='editor.help.cheatsheet.syntax'/></th>
+      </tr>
       </thead>
       <tbody>
-        {codes.map((code, key) => {
-          return (
-            <tr key={key}>
-              <td>
-                <BasicMarkdownRenderer
-                  content={code}
-                  markdownIt={markdownIt}/>
-              </td>
-              <td className={'markdown-body'}>
-                <HighlightedCode code={code} wrapLines={true} startLineNumber={1} language={'markdown'}/>
-              </td>
-            </tr>
-          )
-        })}
+      { codes.map((code, key) => {
+        return (
+          <tr key={ key }>
+            <td>
+              <BasicMarkdownRenderer
+                content={ code }
+                markdownIt={ markdownIt }/>
+            </td>
+            <td className={ 'markdown-body' }>
+              <HighlightedCode code={ code } wrapLines={ true } startLineNumber={ 1 } language={ 'markdown' }/>
+            </td>
+          </tr>
+        )
+      }) }
       </tbody>
     </Table>
   )
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 05889486f..3084c306d 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
@@ -13,9 +13,9 @@ import { Links } from './links'
 import { Shortcut } from './shortcuts'
 
 export enum HelpTabStatus {
-  Cheatsheet='cheatsheet.title',
-  Shortcuts='shortcuts.title',
-  Links='links.title'
+  Cheatsheet = 'cheatsheet.title',
+  Shortcuts = 'shortcuts.title',
+  Links = 'links.title'
 }
 
 export const HelpButton: React.FC = () => {
@@ -36,35 +36,39 @@ export const HelpButton: React.FC = () => {
 
   return (
     <Fragment>
-      <Button title={t('editor.documentBar.help')} className='ml-2 text-secondary' size='sm' variant='outline-light'
-        onClick={() => setShow(true)}>
+      <Button title={ t('editor.documentBar.help') } className='ml-2 text-secondary' size='sm' variant='outline-light'
+              onClick={ () => setShow(true) }>
         <ForkAwesomeIcon icon="question-circle"/>
       </Button>
-      <Modal show={show} onHide={() => setShow(false)} animation={true} className='text-dark' size='lg'>
+      <Modal show={ show } onHide={ () => setShow(false) } animation={ true } className='text-dark' size='lg'>
         <Modal.Header closeButton>
           <Modal.Title>
-            <ForkAwesomeIcon icon='question-circle'/> <Trans i18nKey={'editor.documentBar.help'}/> – <Trans i18nKey={`editor.help.${tab}`}/>
+            <ForkAwesomeIcon icon='question-circle'/> <Trans i18nKey={ 'editor.documentBar.help' }/> – <Trans
+            i18nKey={ `editor.help.${ tab }` }/>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
           <nav className='nav nav-tabs'>
-            <Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Cheatsheet ? 'active' : ''}`}
-              onClick={() => setTab(HelpTabStatus.Cheatsheet)}
+            <Button variant={ 'light' }
+                    className={ `nav-link nav-item ${ tab === HelpTabStatus.Cheatsheet ? 'active' : '' }` }
+                    onClick={ () => setTab(HelpTabStatus.Cheatsheet) }
             >
-              <Trans i18nKey={'editor.help.cheatsheet.title'}/>
+              <Trans i18nKey={ 'editor.help.cheatsheet.title' }/>
             </Button>
-            <Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Shortcuts ? 'active' : ''}`}
-              onClick={() => setTab(HelpTabStatus.Shortcuts)}
+            <Button variant={ 'light' }
+                    className={ `nav-link nav-item ${ tab === HelpTabStatus.Shortcuts ? 'active' : '' }` }
+                    onClick={ () => setTab(HelpTabStatus.Shortcuts) }
             >
-              <Trans i18nKey={'editor.help.shortcuts.title'}/>
+              <Trans i18nKey={ 'editor.help.shortcuts.title' }/>
             </Button>
-            <Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Links ? 'active' : ''}`}
-              onClick={() => setTab(HelpTabStatus.Links)}
+            <Button variant={ 'light' }
+                    className={ `nav-link nav-item ${ tab === HelpTabStatus.Links ? 'active' : '' }` }
+                    onClick={ () => setTab(HelpTabStatus.Links) }
             >
-              <Trans i18nKey={'editor.help.links.title'}/>
+              <Trans i18nKey={ 'editor.help.links.title' }/>
             </Button>
           </nav>
-          {tabContent()}
+          { tabContent() }
         </Modal.Body>
       </Modal>
     </Fragment>
diff --git a/src/components/editor-page/app-bar/help-button/links.tsx b/src/components/editor-page/app-bar/help-button/links.tsx
index 97e98e5cd..7d42930ab 100644
--- a/src/components/editor-page/app-bar/help-button/links.tsx
+++ b/src/components/editor-page/app-bar/help-button/links.tsx
@@ -18,15 +18,15 @@ export const Links: React.FC = () => {
 
   const backendIssueTracker = useSelector((state: ApplicationState) => state.config.version.issueTrackerUrl)
   return (
-    <Row className={'justify-content-center pt-4'}>
-      <Col lg={4}>
+    <Row className={ 'justify-content-center pt-4' }>
+      <Col lg={ 4 }>
         <h3><Trans i18nKey='editor.help.contacts.title'/></h3>
         <div>
           <ul className="list-unstyled">
             <li>
               <TranslatedExternalLink
                 i18nKey='editor.help.contacts.community'
-                href={links.community}
+                href={ links.community }
                 icon='users'
                 className='text-primary'
               />
@@ -34,8 +34,8 @@ export const Links: React.FC = () => {
             <li>
               <TranslatedExternalLink
                 i18nKey='editor.help.contacts.meetUsOn'
-                i18nOption={{ service: 'Matrix' }}
-                href={links.chat}
+                i18nOption={ { service: 'Matrix' } }
+                href={ links.chat }
                 icon='hashtag'
                 className='text-primary'
               />
@@ -43,7 +43,7 @@ export const Links: React.FC = () => {
             <li>
               <TranslatedExternalLink
                 i18nKey='editor.help.contacts.reportIssue'
-                href={backendIssueTracker}
+                href={ backendIssueTracker }
                 icon='tag'
                 className='text-primary'
               />
@@ -51,7 +51,7 @@ export const Links: React.FC = () => {
             <li>
               <TranslatedExternalLink
                 i18nKey='editor.help.contacts.helpTranslating'
-                href={links.translate}
+                href={ links.translate }
                 icon='language'
                 className='text-primary'
               />
@@ -59,7 +59,7 @@ export const Links: React.FC = () => {
           </ul>
         </div>
       </Col>
-      <Col lg={4}>
+      <Col lg={ 4 }>
         <h3><Trans i18nKey='editor.help.documents.title'/></h3>
         <div>
           <ul className="list-unstyled">
diff --git a/src/components/editor-page/app-bar/help-button/shortcuts.tsx b/src/components/editor-page/app-bar/help-button/shortcuts.tsx
index 815f1931a..b3420ee5e 100644
--- a/src/components/editor-page/app-bar/help-button/shortcuts.tsx
+++ b/src/components/editor-page/app-bar/help-button/shortcuts.tsx
@@ -13,7 +13,7 @@ export const Shortcut: React.FC = () => {
   const modifierKey = isMac ? <kbd>⌘</kbd> : <kbd>Ctrl</kbd>
   const altKey = isMac ? <kbd>⌥</kbd> : <kbd>Alt</kbd>
 
-  const shortcutMap: {[category: string]: { [functionName: string]: JSX.Element[] }} = {
+  const shortcutMap: { [category: string]: { [functionName: string]: JSX.Element[] } } = {
     'View Mode': {
       'editor.help.shortcuts.view': [<kbd>Ctrl</kbd>, <> + </>, altKey, <> + </>, <kbd>V</kbd>],
       'editor.help.shortcuts.both': [<kbd>Ctrl</kbd>, <> + </>, altKey, <> + </>, <kbd>B</kbd>],
@@ -29,28 +29,30 @@ export const Shortcut: React.FC = () => {
     }
   }
   return (
-    <Row className={'justify-content-center pt-4'}>
-      {Object.keys(shortcutMap).map(category => {
-        return (
-          <Card key={category} className={'m-2 w-50'}>
-            <Card.Header>{category}</Card.Header>
-            <ListGroup variant="flush">
-              {Object.entries(shortcutMap[category]).map(([functionName, shortcuts]) => {
+    <Row className={ 'justify-content-center pt-4' }>
+      { Object.keys(shortcutMap)
+              .map(category => {
                 return (
-                  <ListGroup.Item key={functionName} className={'d-flex justify-content-between'}>
-                    <span><Trans i18nKey={functionName}/></span>
-                    <span>
+                  <Card key={ category } className={ 'm-2 w-50' }>
+                    <Card.Header>{ category }</Card.Header>
+                    <ListGroup variant="flush">
+                      { Object.entries(shortcutMap[category])
+                              .map(([functionName, shortcuts]) => {
+                                return (
+                                  <ListGroup.Item key={ functionName } className={ 'd-flex justify-content-between' }>
+                                    <span><Trans i18nKey={ functionName }/></span>
+                                    <span>
                       {
                         shortcuts.map((shortcut, shortcutIndex) =>
-                          <Fragment key={shortcutIndex}>{shortcut}</Fragment>)
+                          <Fragment key={ shortcutIndex }>{ shortcut }</Fragment>)
                       }
                     </span>
-                  </ListGroup.Item>
-                )
-              })}
-            </ListGroup>
-          </Card>)
-      })
+                                  </ListGroup.Item>
+                                )
+                              }) }
+                    </ListGroup>
+                  </Card>)
+              })
       }
     </Row>
   )
diff --git a/src/components/editor-page/app-bar/navbar-branding.tsx b/src/components/editor-page/app-bar/navbar-branding.tsx
index 4e21689ec..a1641fc07 100644
--- a/src/components/editor-page/app-bar/navbar-branding.tsx
+++ b/src/components/editor-page/app-bar/navbar-branding.tsx
@@ -22,9 +22,9 @@ export const NavbarBranding: React.FC = () => {
     <Navbar.Brand>
       <Link to="/intro" className="text-secondary text-decoration-none d-flex align-items-center">
         <HedgeDocLogoWithText
-          logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
-          size={HedgeDocLogoSize.SMALL}/>
-        <Branding inline={true}/>
+          logoType={ darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL }
+          size={ HedgeDocLogoSize.SMALL }/>
+        <Branding inline={ true }/>
       </Link>
     </Navbar.Brand>
   )
diff --git a/src/components/editor-page/app-bar/sync-scroll-buttons/buttonIcon.svg b/src/components/editor-page/app-bar/sync-scroll-buttons/buttonIcon.svg
index a4ccb32c5..5295e64b6 100644
--- a/src/components/editor-page/app-bar/sync-scroll-buttons/buttonIcon.svg
+++ b/src/components/editor-page/app-bar/sync-scroll-buttons/buttonIcon.svg
@@ -3,9 +3,9 @@
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xmlns:cc="http://creativecommons.org/ns#"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-        xmlns="http://www.w3.org/2000/svg"
         xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
         xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        xmlns="http://www.w3.org/2000/svg"
         width="512"
         height="512"
         viewBox="0 0 135.46666 135.46666"
@@ -13,75 +13,75 @@
         id="svg8"
         inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
         sodipodi:docname="buttonIcon.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     fit-margin-bottom="0"
-     fit-margin-right="0"
-     fit-margin-left="0"
-     fit-margin-top="0"
-     id="base"
-     pagecolor="#545b62"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="151.94971"
-     inkscape:cy="220.06486"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     inkscape:document-rotation="0"
-     showgrid="false"
-     units="px"
-     inkscape:window-width="3434"
-     inkscape:window-height="1321"
-     inkscape:window-x="0"
-     inkscape:window-y="84"
-     inkscape:window-maximized="1"
-     inkscape:pagecheckerboard="false" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(253.17277,890.86874)"
-     inkscape:label="Ebene 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       id="path864"
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
-       d="m -185.5862,-882.45881 c -1.05348,0.0354 -2.05943,0.44876 -2.83393,1.16582 l -17.37672,16.08016 c -1.77986,1.64837 -1.89553,4.45148 -0.25787,6.24199 1.63744,1.79079 4.43758,1.90901 6.21875,0.262 l 14.39653,-13.32218 14.39654,13.32218 c 1.78118,1.64702 4.5813,1.5288 6.21874,-0.262 1.63691,-1.79129 1.52077,-4.59444 -0.25993,-6.24199 l -17.37465,-16.08016 c -0.84861,-0.78564 -1.97318,-1.20418 -3.12746,-1.16582 z" />
-    <path
-       id="path851"
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
-       d="m -202.99806,-788.72004 c -1.12724,0.0475 -2.23794,0.52467 -3.05666,1.42007 -1.63766,1.79051 -1.52199,4.59363 0.25787,6.24199 l 17.37672,16.08016 c 0.7745,0.71706 1.78045,1.13042 2.83393,1.16582 1.15428,0.0384 2.27885,-0.38018 3.12746,-1.16582 l 17.37465,-16.08016 c 1.7807,-1.64754 1.89684,-4.4507 0.25993,-6.24199 -1.63744,-1.79081 -4.43756,-1.90902 -6.21874,-0.262 l -14.39654,13.32218 -14.39653,-13.32218 c -0.89058,-0.8235 -2.03485,-1.20561 -3.16209,-1.15807 z" />
-    <circle
-       r="16"
-       cy="-823.13544"
-       cx="-185.43944"
-       id="path845"
-       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5.565;stroke-linecap:round;stroke-linejoin:round" />
+    <defs
+            id="defs2"/>
+    <sodipodi:namedview
+            fit-margin-bottom="0"
+            fit-margin-right="0"
+            fit-margin-left="0"
+            fit-margin-top="0"
+            id="base"
+            pagecolor="#545b62"
+            bordercolor="#666666"
+            borderopacity="1.0"
+            inkscape:pageopacity="1"
+            inkscape:pageshadow="2"
+            inkscape:zoom="1.4"
+            inkscape:cx="151.94971"
+            inkscape:cy="220.06486"
+            inkscape:document-units="mm"
+            inkscape:current-layer="layer1"
+            inkscape:document-rotation="0"
+            showgrid="false"
+            units="px"
+            inkscape:window-width="3434"
+            inkscape:window-height="1321"
+            inkscape:window-x="0"
+            inkscape:window-y="84"
+            inkscape:window-maximized="1"
+            inkscape:pagecheckerboard="false"/>
+    <metadata
+            id="metadata5">
+        <rdf:RDF>
+            <cc:Work
+                    rdf:about="">
+                <dc:format>image/svg+xml</dc:format>
+                <dc:type
+                        rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+                <dc:title></dc:title>
+            </cc:Work>
+        </rdf:RDF>
+    </metadata>
     <g
-       style="display:inline;opacity:1;stroke:none;stroke-opacity:1"
-       id="g855">
-      <path
-         id="path858"
-         d="m -128.54012,-883.40784 -121.89532,111.71083 8.0967,8.83405 121.89531,-111.71083 z"
-         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.565;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1" />
-      <path
-         id="path860"
-         d="m -128.61914,-886.18945 a 2.7827783,2.7827783 0 0 0 -1.80078,0.73047 l -121.89453,111.71093 a 2.7827783,2.7827783 0 0 0 -0.17188,3.93164 l 8.09571,8.83399 a 2.7827783,2.7827783 0 0 0 3.93164,0.16992 l 121.89648,-111.70898 a 2.7827783,2.7827783 0 0 0 0.16992,-3.93164 l -8.0957,-8.83399 a 2.7827783,2.7827783 0 0 0 -2.13086,-0.90234 z m -0.0937,6.71289 4.33789,4.73047 -117.79297,107.95117 -4.33594,-4.73047 z"
-         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#545b62;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.565;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1" />
+            transform="translate(253.17277,890.86874)"
+            inkscape:label="Ebene 1"
+            inkscape:groupmode="layer"
+            id="layer1">
+        <path
+                id="path864"
+                style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
+                d="m -185.5862,-882.45881 c -1.05348,0.0354 -2.05943,0.44876 -2.83393,1.16582 l -17.37672,16.08016 c -1.77986,1.64837 -1.89553,4.45148 -0.25787,6.24199 1.63744,1.79079 4.43758,1.90901 6.21875,0.262 l 14.39653,-13.32218 14.39654,13.32218 c 1.78118,1.64702 4.5813,1.5288 6.21874,-0.262 1.63691,-1.79129 1.52077,-4.59444 -0.25993,-6.24199 l -17.37465,-16.08016 c -0.84861,-0.78564 -1.97318,-1.20418 -3.12746,-1.16582 z"/>
+        <path
+                id="path851"
+                style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
+                d="m -202.99806,-788.72004 c -1.12724,0.0475 -2.23794,0.52467 -3.05666,1.42007 -1.63766,1.79051 -1.52199,4.59363 0.25787,6.24199 l 17.37672,16.08016 c 0.7745,0.71706 1.78045,1.13042 2.83393,1.16582 1.15428,0.0384 2.27885,-0.38018 3.12746,-1.16582 l 17.37465,-16.08016 c 1.7807,-1.64754 1.89684,-4.4507 0.25993,-6.24199 -1.63744,-1.79081 -4.43756,-1.90902 -6.21874,-0.262 l -14.39654,13.32218 -14.39653,-13.32218 c -0.89058,-0.8235 -2.03485,-1.20561 -3.16209,-1.15807 z"/>
+        <circle
+                r="16"
+                cy="-823.13544"
+                cx="-185.43944"
+                id="path845"
+                style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5.565;stroke-linecap:round;stroke-linejoin:round"/>
+        <g
+                style="display:inline;opacity:1;stroke:none;stroke-opacity:1"
+                id="g855">
+            <path
+                    id="path858"
+                    d="m -128.54012,-883.40784 -121.89532,111.71083 8.0967,8.83405 121.89531,-111.71083 z"
+                    style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.565;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"/>
+            <path
+                    id="path860"
+                    d="m -128.61914,-886.18945 a 2.7827783,2.7827783 0 0 0 -1.80078,0.73047 l -121.89453,111.71093 a 2.7827783,2.7827783 0 0 0 -0.17188,3.93164 l 8.09571,8.83399 a 2.7827783,2.7827783 0 0 0 3.93164,0.16992 l 121.89648,-111.70898 a 2.7827783,2.7827783 0 0 0 0.16992,-3.93164 l -8.0957,-8.83399 a 2.7827783,2.7827783 0 0 0 -2.13086,-0.90234 z m -0.0937,6.71289 4.33789,4.73047 -117.79297,107.95117 -4.33594,-4.73047 z"
+                    style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#545b62;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.565;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"/>
+        </g>
     </g>
-  </g>
 </svg>
diff --git a/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss b/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss
index a16d67295..615f2e0a7 100644
--- a/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss
+++ b/src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss
@@ -9,6 +9,7 @@
     width: 20px;
     height: 20px;
   }
+
   .btn {
     svg g {
       @import "../../../../style/variables.light";
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 74296f641..bb50b5ea7 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
@@ -24,21 +24,21 @@ export const SyncScrollButtons: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <ToggleButtonGroup type="radio" defaultValue={[]} name="sync-scroll" className={'ml-2 sync-scroll-buttons'}
-      value={syncScrollEnabled}>
+    <ToggleButtonGroup type="radio" defaultValue={ [] } name="sync-scroll" className={ 'ml-2 sync-scroll-buttons' }
+                       value={ syncScrollEnabled }>
       <ToggleButton
-        variant={'outline-secondary'}
-        title={t('editor.appBar.syncScroll.enable')}
-        onChange={() => setEditorSyncScroll(true)}
-        value={SyncScrollState.SYNCED}
+        variant={ 'outline-secondary' }
+        title={ t('editor.appBar.syncScroll.enable') }
+        onChange={ () => setEditorSyncScroll(true) }
+        value={ SyncScrollState.SYNCED }
       >
         <EnabledScrollIcon/>
       </ToggleButton>
       <ToggleButton
-        variant={'outline-secondary'}
-        title={t('editor.appBar.syncScroll.disable')}
-        onChange={() => setEditorSyncScroll(false)}
-        value={SyncScrollState.UNSYNCED}
+        variant={ 'outline-secondary' }
+        title={ t('editor.appBar.syncScroll.disable') }
+        onChange={ () => setEditorSyncScroll(false) }
+        value={ SyncScrollState.UNSYNCED }
       >
         <DisabledScrollIcon/>
       </ToggleButton>
diff --git a/src/components/editor-page/document-bar/document-info/document-info-line.tsx b/src/components/editor-page/document-bar/document-info/document-info-line.tsx
index 41413c4db..a9a569a83 100644
--- a/src/components/editor-page/document-bar/document-info/document-info-line.tsx
+++ b/src/components/editor-page/document-bar/document-info/document-info-line.tsx
@@ -15,10 +15,10 @@ export interface DocumentInfoLineProps {
 
 export const DocumentInfoLine: React.FC<DocumentInfoLineProps> = ({ icon, size, children }) => {
   return (
-    <span className={'d-flex align-items-center'}>
-      <ForkAwesomeIcon icon={icon} size={size} fixedWidth={true} className={'mx-2'}/>
-      <i className={'d-flex align-items-center'}>
-        {children}
+    <span className={ 'd-flex align-items-center' }>
+      <ForkAwesomeIcon icon={ icon } size={ size } fixedWidth={ true } className={ 'mx-2' }/>
+      <i className={ 'd-flex align-items-center' }>
+        { children }
       </i>
     </span>
   )
diff --git a/src/components/editor-page/document-bar/document-info/document-info-modal.tsx b/src/components/editor-page/document-bar/document-info/document-info-modal.tsx
index 363512f88..7b0f61bbb 100644
--- a/src/components/editor-page/document-bar/document-info/document-info-modal.tsx
+++ b/src/components/editor-page/document-bar/document-info/document-info-modal.tsx
@@ -18,47 +18,49 @@ export interface DocumentInfoModalProps {
   onHide: () => void
 }
 
-export const DocumentInfoModal: React.FC<DocumentInfoModalProps> = ({show, onHide}) => {
-    return (
-      <CommonModal
-        show={show}
-        onHide={onHide}
-        closeButton={true}
-        titleI18nKey={'editor.modal.documentInfo.title'}>
-        <Modal.Body>
-          <ListGroup>
-            <ListGroup.Item>
-              <DocumentInfoTimeLine
-                size={'2x'}
-                mode={DocumentInfoLineWithTimeMode.CREATED}
-                time={DateTime.local().minus({ days: 11 })}
-                userName={'Tilman'}
-                profileImageSrc={'/img/avatar.png'}/>
-            </ListGroup.Item>
-            <ListGroup.Item>
-              <DocumentInfoTimeLine
-                size={'2x'}
-                mode={DocumentInfoLineWithTimeMode.EDITED}
-                time={DateTime.local().minus({ minutes: 3 })}
-                userName={'Philip'}
-                profileImageSrc={'/img/avatar.png'}/>
-            </ListGroup.Item>
-            <ListGroup.Item>
-              <DocumentInfoLine icon={'users'} size={'2x'}>
-                <Trans i18nKey='editor.modal.documentInfo.usersContributed'>
-                  <UnitalicBoldText text={'42'}/>
-                </Trans>
-              </DocumentInfoLine>
-            </ListGroup.Item>
-            <ListGroup.Item>
-              <DocumentInfoLine icon={'history'} size={'2x'}>
-                <Trans i18nKey='editor.modal.documentInfo.revisions'>
-                  <UnitalicBoldText text={'192'}/>
-                </Trans>
-              </DocumentInfoLine>
-            </ListGroup.Item>
-          </ListGroup>
-        </Modal.Body>
-      </CommonModal>
-    );
+export const DocumentInfoModal: React.FC<DocumentInfoModalProps> = ({ show, onHide }) => {
+  return (
+    <CommonModal
+      show={ show }
+      onHide={ onHide }
+      closeButton={ true }
+      titleI18nKey={ 'editor.modal.documentInfo.title' }>
+      <Modal.Body>
+        <ListGroup>
+          <ListGroup.Item>
+            <DocumentInfoTimeLine
+              size={ '2x' }
+              mode={ DocumentInfoLineWithTimeMode.CREATED }
+              time={ DateTime.local()
+                             .minus({ days: 11 }) }
+              userName={ 'Tilman' }
+              profileImageSrc={ '/img/avatar.png' }/>
+          </ListGroup.Item>
+          <ListGroup.Item>
+            <DocumentInfoTimeLine
+              size={ '2x' }
+              mode={ DocumentInfoLineWithTimeMode.EDITED }
+              time={ DateTime.local()
+                             .minus({ minutes: 3 }) }
+              userName={ 'Philip' }
+              profileImageSrc={ '/img/avatar.png' }/>
+          </ListGroup.Item>
+          <ListGroup.Item>
+            <DocumentInfoLine icon={ 'users' } size={ '2x' }>
+              <Trans i18nKey='editor.modal.documentInfo.usersContributed'>
+                <UnitalicBoldText text={ '42' }/>
+              </Trans>
+            </DocumentInfoLine>
+          </ListGroup.Item>
+          <ListGroup.Item>
+            <DocumentInfoLine icon={ 'history' } size={ '2x' }>
+              <Trans i18nKey='editor.modal.documentInfo.revisions'>
+                <UnitalicBoldText text={ '192' }/>
+              </Trans>
+            </DocumentInfoLine>
+          </ListGroup.Item>
+        </ListGroup>
+      </Modal.Body>
+    </CommonModal>
+  )
 }
diff --git a/src/components/editor-page/document-bar/document-info/document-info-time-line.tsx b/src/components/editor-page/document-bar/document-info/document-info-time-line.tsx
index adb5c0dc7..a9340fbee 100644
--- a/src/components/editor-page/document-bar/document-info/document-info-time-line.tsx
+++ b/src/components/editor-page/document-bar/document-info/document-info-time-line.tsx
@@ -32,10 +32,11 @@ export const DocumentInfoTimeLine: React.FC<DocumentInfoLineWithTimeProps> = ({
   const icon: IconName = mode === DocumentInfoLineWithTimeMode.CREATED ? 'plus' : 'pencil'
 
   return (
-    <DocumentInfoLine icon={icon} size={size}>
-      <Trans i18nKey={i18nKey} >
-        <UserAvatar photo={profileImageSrc} additionalClasses={'font-style-normal bold font-weight-bold'} name={userName} size={size ? 'lg' : undefined}/>
-        <TimeFromNow time={time}/>
+    <DocumentInfoLine icon={ icon } size={ size }>
+      <Trans i18nKey={ i18nKey }>
+        <UserAvatar photo={ profileImageSrc } additionalClasses={ 'font-style-normal bold font-weight-bold' }
+                    name={ userName } size={ size ? 'lg' : undefined }/>
+        <TimeFromNow time={ time }/>
       </Trans>
     </DocumentInfoLine>
   )
diff --git a/src/components/editor-page/document-bar/document-info/time-from-now.tsx b/src/components/editor-page/document-bar/document-info/time-from-now.tsx
index b9feebb2a..60b649a69 100644
--- a/src/components/editor-page/document-bar/document-info/time-from-now.tsx
+++ b/src/components/editor-page/document-bar/document-info/time-from-now.tsx
@@ -14,6 +14,7 @@ export interface TimeFromNowProps {
 
 export const TimeFromNow: React.FC<TimeFromNowProps> = ({ time }) => {
   return (
-    <time className={'mx-1'} title={time.toFormat('DDDD T')} dateTime={time.toString()}>{time.toRelative()}</time>
+    <time className={ 'mx-1' } title={ time.toFormat('DDDD T') }
+          dateTime={ time.toString() }>{ time.toRelative() }</time>
   )
 }
diff --git a/src/components/editor-page/document-bar/document-info/unitalic-bold-text.tsx b/src/components/editor-page/document-bar/document-info/unitalic-bold-text.tsx
index 7fe6a30a0..da40c1496 100644
--- a/src/components/editor-page/document-bar/document-info/unitalic-bold-text.tsx
+++ b/src/components/editor-page/document-bar/document-info/unitalic-bold-text.tsx
@@ -7,9 +7,9 @@
 import React from 'react'
 
 export interface UnitalicBoldTextProps {
-  text: string ;
+  text: string;
 }
 
 export const UnitalicBoldText: React.FC<UnitalicBoldTextProps> = ({ text }) => {
-  return <b className={'font-style-normal mr-1'}>{text}</b>
+  return <b className={ 'font-style-normal mr-1' }>{ text }</b>
 }
diff --git a/src/components/editor-page/document-bar/permissions/permission-group-entry.tsx b/src/components/editor-page/document-bar/permissions/permission-group-entry.tsx
index 49a781e50..7b564d89b 100644
--- a/src/components/editor-page/document-bar/permissions/permission-group-entry.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-group-entry.tsx
@@ -25,35 +25,35 @@ export const PermissionGroupEntry: React.FC<PermissionGroupEntryProps> = ({ titl
   const { t } = useTranslation()
 
   return (
-    <li className={'list-group-item d-flex flex-row justify-content-between align-items-center'}>
-      <Trans i18nKey={title}/>
+    <li className={ 'list-group-item d-flex flex-row justify-content-between align-items-center' }>
+      <Trans i18nKey={ title }/>
       <ToggleButtonGroup
         type='radio'
         name='edit-mode'
-        value={editMode}
-        onChange={onChangeEditMode}
+        value={ editMode }
+        onChange={ onChangeEditMode }
       >
         <ToggleButton
-          title={ t('editor.modal.permissions.denyGroup', { name: t(title) })}
-          variant={'light'}
-          className={'text-secondary'}
-          value={GroupMode.NONE}
+          title={ t('editor.modal.permissions.denyGroup', { name: t(title) }) }
+          variant={ 'light' }
+          className={ 'text-secondary' }
+          value={ GroupMode.NONE }
         >
           <ForkAwesomeIcon icon='ban'/>
         </ToggleButton>
         <ToggleButton
-          title={ t('editor.modal.permissions.viewOnlyGroup', { name: t(title) })}
-          variant={'light'}
-          className={'text-secondary'}
-          value={GroupMode.VIEW}
+          title={ t('editor.modal.permissions.viewOnlyGroup', { name: t(title) }) }
+          variant={ 'light' }
+          className={ 'text-secondary' }
+          value={ GroupMode.VIEW }
         >
           <ForkAwesomeIcon icon='eye'/>
         </ToggleButton>
         <ToggleButton
-          title={t('editor.modal.permissions.editGroup', { name: t(title) })}
-          variant={'light'}
-          className={'text-secondary'}
-          value={GroupMode.EDIT}
+          title={ t('editor.modal.permissions.editGroup', { name: t(title) }) }
+          variant={ 'light' }
+          className={ 'text-secondary' }
+          value={ GroupMode.EDIT }
         >
           <ForkAwesomeIcon icon='pencil'/>
         </ToggleButton>
diff --git a/src/components/editor-page/document-bar/permissions/permission-list.tsx b/src/components/editor-page/document-bar/permissions/permission-list.tsx
index faf6930fc..9a5b35e74 100644
--- a/src/components/editor-page/document-bar/permissions/permission-list.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-list.tsx
@@ -37,64 +37,64 @@ export const PermissionList: React.FC<PermissionListProps> = ({ list, identifier
   }
 
   return (
-    <ul className={'list-group'}>
-      {list.map(entry => (
-        <li key={entry.id} className={'list-group-item d-flex flex-row justify-content-between align-items-center'}>
-          {identifier(entry)}
+    <ul className={ 'list-group' }>
+      { list.map(entry => (
+        <li key={ entry.id } className={ 'list-group-item d-flex flex-row justify-content-between align-items-center' }>
+          { identifier(entry) }
           <div>
             <Button
               variant='light'
-              className={'text-danger mr-2'}
-              title={t(removeI18nKey, { name: entry.name })}
-              onClick={() => removeEntry(entry.id)}
+              className={ 'text-danger mr-2' }
+              title={ t(removeI18nKey, { name: entry.name }) }
+              onClick={ () => removeEntry(entry.id) }
             >
-              <ForkAwesomeIcon icon={'times'}/>
+              <ForkAwesomeIcon icon={ 'times' }/>
             </Button>
             <ToggleButtonGroup
               type='radio'
               name='edit-mode'
-              value={entry.canEdit ? EditMode.EDIT : EditMode.VIEW}
-              onChange={(value: EditMode) => changeEditMode(entry.id, value === EditMode.EDIT)}
+              value={ entry.canEdit ? EditMode.EDIT : EditMode.VIEW }
+              onChange={ (value: EditMode) => changeEditMode(entry.id, value === EditMode.EDIT) }
             >
               <ToggleButton
-                title={ t(viewI18nKey, { name: entry.name })}
-                variant={'light'}
-                className={'text-secondary'}
-                value={EditMode.VIEW}
+                title={ t(viewI18nKey, { name: entry.name }) }
+                variant={ 'light' }
+                className={ 'text-secondary' }
+                value={ EditMode.VIEW }
               >
                 <ForkAwesomeIcon icon='eye'/>
               </ToggleButton>
               <ToggleButton
-                title={t(editI18nKey, { name: entry.name })}
-                variant={'light'}
-                className={'text-secondary'}
-                value={EditMode.EDIT}
+                title={ t(editI18nKey, { name: entry.name }) }
+                variant={ 'light' }
+                className={ 'text-secondary' }
+                value={ EditMode.EDIT }
               >
                 <ForkAwesomeIcon icon='pencil'/>
               </ToggleButton>
             </ToggleButtonGroup>
           </div>
         </li>
-      ))}
-      <li className={'list-group-item'}>
-        <form onSubmit={event => {
+      )) }
+      <li className={ 'list-group-item' }>
+        <form onSubmit={ event => {
           event.preventDefault()
           addEntry()
-        }}>
-          <InputGroup className={'mr-1 mb-1'}>
+        } }>
+          <InputGroup className={ 'mr-1 mb-1' }>
             <FormControl
-              value={newEntry}
-              placeholder={t(addI18nKey)}
-              aria-label={t(addI18nKey)}
-              onChange={event => setNewEntry(event.currentTarget.value)}
+              value={ newEntry }
+              placeholder={ t(addI18nKey) }
+              aria-label={ t(addI18nKey) }
+              onChange={ event => setNewEntry(event.currentTarget.value) }
             />
             <Button
               variant='light'
-              className={'text-secondary ml-2'}
-              title={t(addI18nKey)}
-              onClick={addEntry}
+              className={ 'text-secondary ml-2' }
+              title={ t(addI18nKey) }
+              onClick={ addEntry }
             >
-              <ForkAwesomeIcon icon={'plus'}/>
+              <ForkAwesomeIcon icon={ 'plus' }/>
             </Button>
           </InputGroup>
         </form>
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 db9d29ceb..b5b9be530 100644
--- a/src/components/editor-page/document-bar/permissions/permission-modal.tsx
+++ b/src/components/editor-page/document-bar/permissions/permission-modal.tsx
@@ -69,22 +69,26 @@ export const PermissionModal: React.FC<PermissionsModalProps> = ({ show, onHide
 
   useEffect(() => {
     // set owner
-    getUserById(permissionsApiResponse.owner).then(response => {
-      setOwner({
-        name: response.name,
-        photo: response.photo
+    getUserById(permissionsApiResponse.owner)
+      .then(response => {
+        setOwner({
+          name: response.name,
+          photo: response.photo
+        })
       })
-    }).catch(() => setError(true))
+      .catch(() => setError(true))
     // set user List
     permissionsApiResponse.sharedTo.forEach(shareUser => {
-      getUserById(shareUser.username).then(response => {
-        setUserList(list => list.concat([{
-          id: response.id,
-          name: response.name,
-          photo: response.photo,
-          canEdit: shareUser.canEdit
-        }]))
-      }).catch(() => setError(true))
+      getUserById(shareUser.username)
+        .then(response => {
+          setUserList(list => list.concat([{
+            id: response.id,
+            name: response.name,
+            photo: response.photo,
+            canEdit: shareUser.canEdit
+          }]))
+        })
+        .catch(() => setError(true))
     })
     // set group List
     permissionsApiResponse.sharedToGroup.forEach(sharedGroup => {
@@ -122,45 +126,45 @@ export const PermissionModal: React.FC<PermissionsModalProps> = ({ show, onHide
 
   return (
     <CommonModal
-      show={show}
-      onHide={onHide}
-      closeButton={true}
-      titleI18nKey={'editor.modal.permissions.title'}>
+      show={ show }
+      onHide={ onHide }
+      closeButton={ true }
+      titleI18nKey={ 'editor.modal.permissions.title' }>
       <Modal.Body>
-        <h5 className={'mb-3'}><Trans i18nKey={'editor.modal.permissions.owner'}/></h5>
-        <ShowIf condition={error}>
+        <h5 className={ 'mb-3' }><Trans i18nKey={ 'editor.modal.permissions.owner' }/></h5>
+        <ShowIf condition={ error }>
           <Alert variant='danger'>
             <Trans i18nKey='editor.modal.permissions.error'/>
           </Alert>
         </ShowIf>
-        <ul className={'list-group'}>
-          <li className={'list-group-item d-flex flex-row align-items-center'}>
-            <UserAvatar name={owner?.name ?? ''} photo={owner?.photo ?? ''}/>
+        <ul className={ 'list-group' }>
+          <li className={ 'list-group-item d-flex flex-row align-items-center' }>
+            <UserAvatar name={ owner?.name ?? '' } photo={ owner?.photo ?? '' }/>
           </li>
         </ul>
-        <h5 className={'my-3'}><Trans i18nKey={'editor.modal.permissions.sharedWithUsers'}/></h5>
+        <h5 className={ 'my-3' }><Trans i18nKey={ 'editor.modal.permissions.sharedWithUsers' }/></h5>
         <PermissionList
-          list={userList}
-          identifier={entry => (<UserAvatar name={entry.name} photo={entry.photo}/>)}
-          changeEditMode={changeUserMode}
-          removeEntry={removeUser}
-          createEntry={addUser}
-          editI18nKey={'editor.modal.permissions.editUser'}
-          viewI18nKey={'editor.modal.permissions.viewOnlyUser'}
-          removeI18nKey={'editor.modal.permissions.removeUser'}
-          addI18nKey={'editor.modal.permissions.addUser'}
+          list={ userList }
+          identifier={ entry => (<UserAvatar name={ entry.name } photo={ entry.photo }/>) }
+          changeEditMode={ changeUserMode }
+          removeEntry={ removeUser }
+          createEntry={ addUser }
+          editI18nKey={ 'editor.modal.permissions.editUser' }
+          viewI18nKey={ 'editor.modal.permissions.viewOnlyUser' }
+          removeI18nKey={ 'editor.modal.permissions.removeUser' }
+          addI18nKey={ 'editor.modal.permissions.addUser' }
         />
-        <h5 className={'my-3'}><Trans i18nKey={'editor.modal.permissions.sharedWithGroups'}/></h5>
-        <ul className={'list-group'}>
+        <h5 className={ 'my-3' }><Trans i18nKey={ 'editor.modal.permissions.sharedWithGroups' }/></h5>
+        <ul className={ 'list-group' }>
           <PermissionGroupEntry
-            title={'editor.modal.permissions.allUser'}
-            editMode={allUserPermissions}
-            onChangeEditMode={setAllUserPermissions}
+            title={ 'editor.modal.permissions.allUser' }
+            editMode={ allUserPermissions }
+            onChangeEditMode={ setAllUserPermissions }
           />
           <PermissionGroupEntry
-            title={'editor.modal.permissions.allLoggedInUser'}
-            editMode={allLoggedInUserPermissions}
-            onChangeEditMode={setAllLoggedInUserPermissions}
+            title={ 'editor.modal.permissions.allLoggedInUser' }
+            editMode={ allLoggedInUserPermissions }
+            onChangeEditMode={ setAllLoggedInUserPermissions }
           />
         </ul>
       </Modal.Body>
diff --git a/src/components/editor-page/document-bar/revisions/revision-modal-list-entry.tsx b/src/components/editor-page/document-bar/revisions/revision-modal-list-entry.tsx
index 3399dc213..ab4919644 100644
--- a/src/components/editor-page/document-bar/revisions/revision-modal-list-entry.tsx
+++ b/src/components/editor-page/document-bar/revisions/revision-modal-list-entry.tsx
@@ -23,26 +23,29 @@ export interface RevisionModalListEntryProps {
 export const RevisionModalListEntry: React.FC<RevisionModalListEntryProps> = ({ active, onClick, revision, revisionAuthorListMap }) => (
   <ListGroup.Item
     as='li'
-    active={active}
-    onClick={onClick}
+    active={ active }
+    onClick={ onClick }
     className='user-select-none revision-item d-flex flex-column'
   >
     <span>
-      <ForkAwesomeIcon icon={'clock-o'} className='mx-2'/>
-      {DateTime.fromMillis(revision.timestamp * 1000).toFormat('DDDD T')}
+      <ForkAwesomeIcon icon={ 'clock-o' } className='mx-2'/>
+      { DateTime.fromMillis(revision.timestamp * 1000)
+                .toFormat('DDDD T') }
     </span>
     <span>
-      <ForkAwesomeIcon icon={'file-text-o'} className='mx-2'/>
-      <Trans i18nKey={'editor.modal.revision.length'}/>: {revision.length}
+      <ForkAwesomeIcon icon={ 'file-text-o' } className='mx-2'/>
+      <Trans i18nKey={ 'editor.modal.revision.length' }/>: { revision.length }
     </span>
-    <span className={'d-flex flex-row my-1 align-items-center'}>
-      <ForkAwesomeIcon icon={'user-o'} className={'mx-2'}/>
+    <span className={ 'd-flex flex-row my-1 align-items-center' }>
+      <ForkAwesomeIcon icon={ 'user-o' } className={ 'mx-2' }/>
       {
-        revisionAuthorListMap.get(revision.timestamp)?.map((user, index) => {
-          return (
-            <UserAvatar name={user.name} photo={user.photo} showName={false} additionalClasses={'mx-1'} key={index}/>
-          )
-        })
+        revisionAuthorListMap.get(revision.timestamp)
+                             ?.map((user, index) => {
+                               return (
+                                 <UserAvatar name={ user.name } photo={ user.photo } showName={ false }
+                                             additionalClasses={ 'mx-1' } key={ index }/>
+                               )
+                             })
       }
     </span>
   </ListGroup.Item>
diff --git a/src/components/editor-page/document-bar/revisions/revision-modal.tsx b/src/components/editor-page/document-bar/revisions/revision-modal.tsx
index 58f4fc1cf..042dec2b5 100644
--- a/src/components/editor-page/document-bar/revisions/revision-modal.tsx
+++ b/src/components/editor-page/document-bar/revisions/revision-modal.tsx
@@ -36,61 +36,66 @@ export const RevisionModal: React.FC<PermissionsModalProps> = ({ show, onHide })
   const { id } = useParams<{ id: string }>()
 
   useEffect(() => {
-    getAllRevisions(id).then(fetchedRevisions => {
-      fetchedRevisions.forEach(revision => {
-        const authorData = getUserDataForRevision(revision.authors)
-        revisionAuthorListMap.current.set(revision.timestamp, authorData)
+    getAllRevisions(id)
+      .then(fetchedRevisions => {
+        fetchedRevisions.forEach(revision => {
+          const authorData = getUserDataForRevision(revision.authors)
+          revisionAuthorListMap.current.set(revision.timestamp, authorData)
+        })
+        setRevisions(fetchedRevisions)
+        if (fetchedRevisions.length >= 1) {
+          setSelectedRevisionTimestamp(fetchedRevisions[0].timestamp)
+        }
       })
-      setRevisions(fetchedRevisions)
-      if (fetchedRevisions.length >= 1) {
-        setSelectedRevisionTimestamp(fetchedRevisions[0].timestamp)
-      }
-    }).catch(() => setError(true))
+      .catch(() => setError(true))
   }, [setRevisions, setError, id])
 
   useEffect(() => {
     if (selectedRevisionTimestamp === null) {
       return
     }
-    getRevision(id, selectedRevisionTimestamp).then(fetchedRevision => {
-      setSelectedRevision(fetchedRevision)
-    }).catch(() => setError(true))
+    getRevision(id, selectedRevisionTimestamp)
+      .then(fetchedRevision => {
+        setSelectedRevision(fetchedRevision)
+      })
+      .catch(() => setError(true))
   }, [selectedRevisionTimestamp, id])
 
   const markdownContent = useNoteMarkdownContent()
 
   return (
-    <CommonModal show={show} onHide={onHide} titleI18nKey={'editor.modal.revision.title'} icon={'history'} closeButton={true} size={'xl'} additionalClasses='revision-modal'>
+    <CommonModal show={ show } onHide={ onHide } titleI18nKey={ 'editor.modal.revision.title' } icon={ 'history' }
+                 closeButton={ true } size={ 'xl' } additionalClasses='revision-modal'>
       <Modal.Body>
         <Row>
-          <Col lg={4} className={'scroll-col'}>
+          <Col lg={ 4 } className={ 'scroll-col' }>
             <ListGroup as='ul'>
               {
                 revisions.map((revision, revisionIndex) => (
                   <RevisionModalListEntry
-                    key={revisionIndex}
-                    active={selectedRevisionTimestamp === revision.timestamp}
-                    revision={revision}
-                    revisionAuthorListMap={revisionAuthorListMap.current}
-                    onClick={() => setSelectedRevisionTimestamp(revision.timestamp)}
+                    key={ revisionIndex }
+                    active={ selectedRevisionTimestamp === revision.timestamp }
+                    revision={ revision }
+                    revisionAuthorListMap={ revisionAuthorListMap.current }
+                    onClick={ () => setSelectedRevisionTimestamp(revision.timestamp) }
                   />
                 ))
               }
             </ListGroup>
           </Col>
-          <Col lg={8} className={'scroll-col'}>
-            <ShowIf condition={error}>
+          <Col lg={ 8 } className={ 'scroll-col' }>
+            <ShowIf condition={ error }>
               <Alert variant='danger'>
                 <Trans i18nKey='editor.modal.revision.error'/>
               </Alert>
             </ShowIf>
-            <ShowIf condition={!error && !!selectedRevision}>
+            <ShowIf condition={ !error && !!selectedRevision }>
               <ReactDiffViewer
-                oldValue={selectedRevision?.content}
-                newValue={markdownContent}
-                splitView={false}
-                compareMethod={DiffMethod.WORDS}
-                useDarkTheme={darkModeEnabled}
+                oldValue={ selectedRevision?.content }
+                newValue={ markdownContent }
+                splitView={ false }
+                compareMethod={ DiffMethod.WORDS }
+                useDarkTheme={ darkModeEnabled }
               />
             </ShowIf>
           </Col>
@@ -99,20 +104,20 @@ export const RevisionModal: React.FC<PermissionsModalProps> = ({ show, onHide })
       <Modal.Footer>
         <Button
           variant='secondary'
-          onClick={onHide}>
-          <Trans i18nKey={'common.close'}/>
+          onClick={ onHide }>
+          <Trans i18nKey={ 'common.close' }/>
         </Button>
         <Button
           variant='danger'
-          disabled={!selectedRevisionTimestamp}
-          onClick={() => window.alert('Not yet implemented. Requires websocket.')}>
-          <Trans i18nKey={'editor.modal.revision.revertButton'}/>
+          disabled={ !selectedRevisionTimestamp }
+          onClick={ () => window.alert('Not yet implemented. Requires websocket.') }>
+          <Trans i18nKey={ 'editor.modal.revision.revertButton' }/>
         </Button>
         <Button
           variant='primary'
-          disabled={!selectedRevisionTimestamp}
-          onClick={() => downloadRevision(id, selectedRevision)}>
-          <Trans i18nKey={'editor.modal.revision.download'}/>
+          disabled={ !selectedRevisionTimestamp }
+          onClick={ () => downloadRevision(id, selectedRevision) }>
+          <Trans i18nKey={ 'editor.modal.revision.download' }/>
         </Button>
       </Modal.Footer>
     </CommonModal>
diff --git a/src/components/editor-page/document-bar/revisions/utils.ts b/src/components/editor-page/document-bar/revisions/utils.ts
index 7f7be02c2..4943cb40d 100644
--- a/src/components/editor-page/document-bar/revisions/utils.ts
+++ b/src/components/editor-page/document-bar/revisions/utils.ts
@@ -13,7 +13,7 @@ export const downloadRevision = (noteId: string, revision: Revision | null): voi
   if (!revision) {
     return
   }
-  download(revision.content, `${noteId}-${revision.timestamp}.md`, 'text/markdown')
+  download(revision.content, `${ noteId }-${ revision.timestamp }.md`, 'text/markdown')
 }
 
 export const getUserDataForRevision = (authors: string[]): UserResponse[] => {
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 5474da2d8..043376d65 100644
--- a/src/components/editor-page/document-bar/share/share-modal.tsx
+++ b/src/components/editor-page/document-bar/share/share-modal.tsx
@@ -31,21 +31,23 @@ export const ShareModal: React.FC<ShareModalProps> = ({ show, onHide }) => {
 
   return (
     <CommonModal
-      show={show}
-      onHide={onHide}
-      closeButton={true}
-      titleI18nKey={'editor.modal.shareLink.title'}>
+      show={ show }
+      onHide={ onHide }
+      closeButton={ true }
+      titleI18nKey={ 'editor.modal.shareLink.title' }>
       <Modal.Body>
-        <Trans i18nKey={'editor.modal.shareLink.editorDescription'}/>
-        <CopyableField content={`${baseUrl}/n/${id}?${editorMode}`} nativeShareButton={true}
-                       url={`${baseUrl}/n/${id}?${editorMode}`}/>
-        <ShowIf condition={noteFrontmatter.type === 'slide'}>
-          <Trans i18nKey={'editor.modal.shareLink.slidesDescription'}/>
-          <CopyableField content={`${baseUrl}/p/${id}`} nativeShareButton={true} url={`${baseUrl}/p/${id}`}/>
+        <Trans i18nKey={ 'editor.modal.shareLink.editorDescription' }/>
+        <CopyableField content={ `${ baseUrl }/n/${ id }?${ editorMode }` } nativeShareButton={ true }
+                       url={ `${ baseUrl }/n/${ id }?${ editorMode }` }/>
+        <ShowIf condition={ noteFrontmatter.type === 'slide' }>
+          <Trans i18nKey={ 'editor.modal.shareLink.slidesDescription' }/>
+          <CopyableField content={ `${ baseUrl }/p/${ id }` } nativeShareButton={ true }
+                         url={ `${ baseUrl }/p/${ id }` }/>
         </ShowIf>
-        <ShowIf condition={noteFrontmatter.type === ''}>
-          <Trans i18nKey={'editor.modal.shareLink.viewOnlyDescription'}/>
-          <CopyableField content={`${baseUrl}/s/${id}`} nativeShareButton={true} url={`${baseUrl}/s/${id}`}/>
+        <ShowIf condition={ noteFrontmatter.type === '' }>
+          <Trans i18nKey={ 'editor.modal.shareLink.viewOnlyDescription' }/>
+          <CopyableField content={ `${ baseUrl }/s/${ id }` } nativeShareButton={ true }
+                         url={ `${ baseUrl }/s/${ id }` }/>
         </ShowIf>
       </Modal.Body>
     </CommonModal>
diff --git a/src/components/editor-page/document-renderer-pane/hooks/use-adapted-line-markers-callback.ts b/src/components/editor-page/document-renderer-pane/hooks/use-adapted-line-markers-callback.ts
index de5b7f9db..9f3b7ab05 100644
--- a/src/components/editor-page/document-renderer-pane/hooks/use-adapted-line-markers-callback.ts
+++ b/src/components/editor-page/document-renderer-pane/hooks/use-adapted-line-markers-callback.ts
@@ -8,8 +8,8 @@ import { RefObject, useCallback } from 'react'
 import { LineMarkerPosition } from '../../../markdown-renderer/types'
 
 export const useAdaptedLineMarkerCallback = (documentRenderPaneRef: RefObject<HTMLDivElement> | undefined,
-                                             rendererRef: RefObject<HTMLDivElement>,
-                                             onLineMarkerPositionChanged: ((lineMarkerPosition: LineMarkerPosition[]) => void) | undefined): ((lineMarkerPosition: LineMarkerPosition[]) => void) => {
+  rendererRef: RefObject<HTMLDivElement>,
+  onLineMarkerPositionChanged: ((lineMarkerPosition: LineMarkerPosition[]) => void) | undefined): ((lineMarkerPosition: LineMarkerPosition[]) => void) => {
   return useCallback((linkMarkerPositions) => {
     if (!onLineMarkerPositionChanged || !documentRenderPaneRef || !documentRenderPaneRef.current || !rendererRef.current) {
       return
diff --git a/src/components/editor-page/document-renderer-pane/hooks/use-on-iframe-load.ts b/src/components/editor-page/document-renderer-pane/hooks/use-on-iframe-load.ts
index edb8ddaa5..8d4e3f7df 100644
--- a/src/components/editor-page/document-renderer-pane/hooks/use-on-iframe-load.ts
+++ b/src/components/editor-page/document-renderer-pane/hooks/use-on-iframe-load.ts
@@ -8,7 +8,7 @@ import { RefObject, useCallback, useRef } from 'react'
 import { IframeEditorToRendererCommunicator } from '../../../render-page/iframe-editor-to-renderer-communicator'
 
 export const useOnIframeLoad = (frameReference: RefObject<HTMLIFrameElement>, iframeCommunicator: IframeEditorToRendererCommunicator,
-                                rendererOrigin: string, renderPageUrl: string, onNavigateAway: () => void): () => void => {
+  rendererOrigin: string, renderPageUrl: string, onNavigateAway: () => void): () => void => {
   const sendToRenderPage = useRef<boolean>(true)
 
   return useCallback(() => {
@@ -24,7 +24,7 @@ export const useOnIframeLoad = (frameReference: RefObject<HTMLIFrameElement>, if
       return
     } else {
       onNavigateAway()
-      console.error("Navigated away from unknown URL")
+      console.error('Navigated away from unknown URL')
       frame.src = renderPageUrl
       sendToRenderPage.current = true
     }
diff --git a/src/components/editor-page/document-renderer-pane/show-on-prop-change-image-lightbox.tsx b/src/components/editor-page/document-renderer-pane/show-on-prop-change-image-lightbox.tsx
index 4f84b63b2..255652c64 100644
--- a/src/components/editor-page/document-renderer-pane/show-on-prop-change-image-lightbox.tsx
+++ b/src/components/editor-page/document-renderer-pane/show-on-prop-change-image-lightbox.tsx
@@ -26,7 +26,7 @@ export const ShowOnPropChangeImageLightbox: React.FC<ShowOnPropChangeImageLightb
   }, [details])
 
   return (
-    <ImageLightboxModal show={show} onHide={hideLightbox} src={details?.src}
-                        alt={details?.alt} title={details?.title}/>
+    <ImageLightboxModal show={ show } onHide={ hideLightbox } src={ details?.src }
+                        alt={ details?.alt } title={ details?.title }/>
   )
 }
diff --git a/src/components/editor-page/editor-modals/max-length-warning-modal.tsx b/src/components/editor-page/editor-modals/max-length-warning-modal.tsx
index e696396fa..1f31544f1 100644
--- a/src/components/editor-page/editor-modals/max-length-warning-modal.tsx
+++ b/src/components/editor-page/editor-modals/max-length-warning-modal.tsx
@@ -19,13 +19,14 @@ export const MaxLengthWarningModal: React.FC<MaxLengthWarningModalProps> = ({ sh
   useTranslation()
 
   return (
-    <CommonModal data-cy={'limitReachedModal'} show={show} onHide={onHide} titleI18nKey={'editor.error.limitReached.title'} closeButton={true}>
+    <CommonModal data-cy={ 'limitReachedModal' } show={ show } onHide={ onHide }
+                 titleI18nKey={ 'editor.error.limitReached.title' } closeButton={ true }>
       <Modal.Body>
-        <Trans i18nKey={'editor.error.limitReached.description'} values={{ maxLength }} />
-        <strong className='mt-2 d-block'><Trans i18nKey={'editor.error.limitReached.advice'}/></strong>
+        <Trans i18nKey={ 'editor.error.limitReached.description' } values={ { maxLength } }/>
+        <strong className='mt-2 d-block'><Trans i18nKey={ 'editor.error.limitReached.advice' }/></strong>
       </Modal.Body>
       <Modal.Footer>
-        <Button onClick={onHide}><Trans i18nKey={'common.close'}/></Button>
+        <Button onClick={ onHide }><Trans i18nKey={ 'common.close' }/></Button>
       </Modal.Footer>
     </CommonModal>
   )
diff --git a/src/components/editor-page/editor-page.tsx b/src/components/editor-page/editor-page.tsx
index f2efefc6b..44fb47ca2 100644
--- a/src/components/editor-page/editor-page.tsx
+++ b/src/components/editor-page/editor-page.tsx
@@ -58,7 +58,8 @@ export const EditorPage: React.FC = () => {
 
   useEffect(() => {
     const requestedMode = search.substr(1)
-    const mode = Object.values(EditorMode).find(mode => mode === requestedMode)
+    const mode = Object.values(EditorMode)
+                       .find(mode => mode === requestedMode)
     if (mode) {
       setEditorMode(mode)
     }
@@ -92,37 +93,37 @@ export const EditorPage: React.FC = () => {
   return (
     <Fragment>
       <MotdBanner/>
-      <div className={'d-flex flex-column vh-100'}>
-        <AppBar mode={AppBarMode.EDITOR}/>
+      <div className={ 'd-flex flex-column vh-100' }>
+        <AppBar mode={ AppBarMode.EDITOR }/>
 
-        <div className={'container'}>
-          <ErrorWhileLoadingNoteAlert show={error}/>
-          <LoadingNoteAlert show={loading}/>
+        <div className={ 'container' }>
+          <ErrorWhileLoadingNoteAlert show={ error }/>
+          <LoadingNoteAlert show={ loading }/>
         </div>
-        <ShowIf condition={!error && !loading}>
-          <div className={"flex-fill d-flex h-100 w-100 overflow-hidden flex-row"}>
+        <ShowIf condition={ !error && !loading }>
+          <div className={ 'flex-fill d-flex h-100 w-100 overflow-hidden flex-row' }>
             <Splitter
-              showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
+              showLeft={ editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH }
               left={
                 <EditorPane
-                  onContentChange={setNoteMarkdownContent}
-                  content={markdownContent}
-                  scrollState={scrollState.editorScrollState}
-                  onScroll={onEditorScroll}
-                  onMakeScrollSource={setEditorToScrollSource}/>
+                  onContentChange={ setNoteMarkdownContent }
+                  content={ markdownContent }
+                  scrollState={ scrollState.editorScrollState }
+                  onScroll={ onEditorScroll }
+                  onMakeScrollSource={ setEditorToScrollSource }/>
               }
-              showRight={editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH}
+              showRight={ editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH }
               right={
                 <RenderIframe
-                  markdownContent={markdownContent}
-                  onMakeScrollSource={setRendererToScrollSource}
-                  onFirstHeadingChange={updateNoteTitleByFirstHeading}
-                  onTaskCheckedChange={SetCheckboxInMarkdownContent}
-                  onFrontmatterChange={setNoteFrontmatter}
-                  onScroll={onMarkdownRendererScroll}
-                  scrollState={scrollState.rendererScrollState}/>
+                  markdownContent={ markdownContent }
+                  onMakeScrollSource={ setRendererToScrollSource }
+                  onFirstHeadingChange={ updateNoteTitleByFirstHeading }
+                  onTaskCheckedChange={ SetCheckboxInMarkdownContent }
+                  onFrontmatterChange={ setNoteFrontmatter }
+                  onScroll={ onMarkdownRendererScroll }
+                  scrollState={ scrollState.rendererScrollState }/>
               }
-              containerClassName={'overflow-hidden'}/>
+              containerClassName={ 'overflow-hidden' }/>
             <Sidebar/>
           </div>
         </ShowIf>
diff --git a/src/components/editor-page/editor-pane/autocompletion/code-block.ts b/src/components/editor-page/editor-pane/autocompletion/code-block.ts
index 2b4e1148d..70280b12f 100644
--- a/src/components/editor-page/editor-pane/autocompletion/code-block.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/code-block.ts
@@ -10,7 +10,7 @@ import { findWordAtCursor, Hinter, search } from './index'
 const wordRegExp = /^```((\w|-|_|\+)*)$/
 let allSupportedLanguages: string[] = []
 
-const codeBlockHint = (editor: Editor): Promise< Hints| null > => {
+const codeBlockHint = (editor: Editor): Promise<Hints | null> => {
   return import(/* webpackChunkName: "highlight.js" */ '../../../common/hljs/hljs').then((hljs) =>
     new Promise((resolve) => {
       const searchTerm = findWordAtCursor(editor)
@@ -21,7 +21,8 @@ const codeBlockHint = (editor: Editor): Promise< Hints| null > => {
       }
       const term = searchResult[1]
       if (allSupportedLanguages.length === 0) {
-        allSupportedLanguages = hljs.default.listLanguages().concat('csv', 'flow', 'html', 'js', 'markmap', 'abc', 'graphviz', 'mermaid', 'vega-lite')
+        allSupportedLanguages = hljs.default.listLanguages()
+                                    .concat('csv', 'flow', 'html', 'js', 'markmap', 'abc', 'graphviz', 'mermaid', 'vega-lite')
       }
       const suggestions = search(term, allSupportedLanguages)
       const cursor = editor.getCursor()
diff --git a/src/components/editor-page/editor-pane/autocompletion/collapsable-block.ts b/src/components/editor-page/editor-pane/autocompletion/collapsable-block.ts
index b1ef862aa..839ef92c6 100644
--- a/src/components/editor-page/editor-pane/autocompletion/collapsable-block.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/collapsable-block.ts
@@ -9,7 +9,7 @@ import { findWordAtCursor, Hinter } from './index'
 
 const wordRegExp = /^(<d(?:e|et|eta|etai|etail|etails)?)$/
 
-const collapsableBlockHint = (editor: Editor): Promise< Hints| null > => {
+const collapsableBlockHint = (editor: Editor): Promise<Hints | null> => {
   return new Promise((resolve) => {
     const searchTerm = findWordAtCursor(editor)
     const searchResult = wordRegExp.exec(searchTerm.text)
diff --git a/src/components/editor-page/editor-pane/autocompletion/container.ts b/src/components/editor-page/editor-pane/autocompletion/container.ts
index 6a8c732da..9fdba0749 100644
--- a/src/components/editor-page/editor-pane/autocompletion/container.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/container.ts
@@ -16,7 +16,8 @@ const spoilerSuggestion: Hint = {
 const suggestions = validAlertLevels.map((suggestion: string): Hint => ({
   text: ':::' + suggestion + '\n\n::: \n',
   displayText: suggestion
-})).concat(spoilerSuggestion)
+}))
+                                    .concat(spoilerSuggestion)
 
 const containerHint = (editor: Editor): Promise<Hints | null> => {
   return new Promise((resolve) => {
diff --git a/src/components/editor-page/editor-pane/autocompletion/emoji.ts b/src/components/editor-page/editor-pane/autocompletion/emoji.ts
index b5105a8a1..d778ab73a 100644
--- a/src/components/editor-page/editor-pane/autocompletion/emoji.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/emoji.ts
@@ -31,7 +31,7 @@ const findEmojiInDatabase = async (emojiIndex: Database, term: string): Promise<
   }
 }
 
-const convertEmojiEventToHint = (emojiData:EmojiClickEventDetail): Hint | undefined => {
+const convertEmojiEventToHint = (emojiData: EmojiClickEventDetail): Hint | undefined => {
   const shortCode = getEmojiShortCode(emojiData)
   if (!shortCode) {
     return undefined
@@ -40,7 +40,7 @@ const convertEmojiEventToHint = (emojiData:EmojiClickEventDetail): Hint | undefi
     text: shortCode,
     render: (parent: HTMLLIElement) => {
       const wrapper = document.createElement('div')
-      wrapper.innerHTML = `${getEmojiIcon(emojiData)}   ${shortCode}`
+      wrapper.innerHTML = `${ getEmojiIcon(emojiData) }   ${ shortCode }`
       parent.appendChild(wrapper)
     }
   }
diff --git a/src/components/editor-page/editor-pane/autocompletion/header.ts b/src/components/editor-page/editor-pane/autocompletion/header.ts
index f9d1e6a01..ff51c45e5 100644
--- a/src/components/editor-page/editor-pane/autocompletion/header.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/header.ts
@@ -11,7 +11,7 @@ const wordRegExp = /^(\s{0,3})(#{1,6})$/
 const allSupportedHeaders = ['# h1', '## h2', '### h3', '#### h4', '##### h5', '###### h6', '###### tags: `example`']
 const allSupportedHeadersTextToInsert = ['# ', '## ', '### ', '#### ', '##### ', '###### ', '###### tags: `example`']
 
-const headerHint = (editor: Editor): Promise< Hints| null > => {
+const headerHint = (editor: Editor): Promise<Hints | null> => {
   return new Promise((resolve) => {
     const searchTerm = findWordAtCursor(editor)
     const searchResult = wordRegExp.exec(searchTerm.text)
diff --git a/src/components/editor-page/editor-pane/autocompletion/image.ts b/src/components/editor-page/editor-pane/autocompletion/image.ts
index 750f03919..485f7f81e 100644
--- a/src/components/editor-page/editor-pane/autocompletion/image.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/image.ts
@@ -14,7 +14,7 @@ const allSupportedImages = [
   '![image alt][reference]'
 ]
 
-const imageHint = (editor: Editor): Promise< Hints| null > => {
+const imageHint = (editor: Editor): Promise<Hints | null> => {
   return new Promise((resolve) => {
     const searchTerm = findWordAtCursor(editor)
     const searchResult = wordRegExp.exec(searchTerm.text)
diff --git a/src/components/editor-page/editor-pane/autocompletion/index.ts b/src/components/editor-page/editor-pane/autocompletion/index.ts
index 3c8f3d492..694142ba2 100644
--- a/src/components/editor-page/editor-pane/autocompletion/index.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/index.ts
@@ -22,7 +22,7 @@ interface findWordAtCursorResponse {
 
 export interface Hinter {
   wordRegExp: RegExp,
-  hint: (editor: Editor) => Promise< Hints| null >
+  hint: (editor: Editor) => Promise<Hints | null>
 }
 
 const allowedChars = /[^\s]/
@@ -40,7 +40,8 @@ export const findWordAtCursor = (editor: Editor): findWordAtCursorResponse => {
   }
 
   return {
-    text: line.slice(start, end).toLowerCase(),
+    text: line.slice(start, end)
+              .toLowerCase(),
     start: start,
     end: end
   }
@@ -49,7 +50,8 @@ export const findWordAtCursor = (editor: Editor): findWordAtCursorResponse => {
 export const search = (term: string, list: string[]): string[] => {
   const suggestions: string[] = []
   list.forEach(item => {
-    if (item.toLowerCase().startsWith(term.toLowerCase())) {
+    if (item.toLowerCase()
+            .startsWith(term.toLowerCase())) {
       suggestions.push(item)
     }
   })
@@ -64,5 +66,5 @@ export const allHinters: Hinter[] = [
   ImageHinter,
   LinkAndExtraTagHinter,
   PDFHinter,
-  CollapsableBlockHinter,
+  CollapsableBlockHinter
 ]
diff --git a/src/components/editor-page/editor-pane/autocompletion/link-and-extra-tag.ts b/src/components/editor-page/editor-pane/autocompletion/link-and-extra-tag.ts
index 13f63c390..23c1bd7c4 100644
--- a/src/components/editor-page/editor-pane/autocompletion/link-and-extra-tag.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/link-and-extra-tag.ts
@@ -25,7 +25,7 @@ const allSupportedLinks = [
 
 ]
 
-const linkAndExtraTagHint = (editor: Editor): Promise< Hints| null > => {
+const linkAndExtraTagHint = (editor: Editor): Promise<Hints | null> => {
   return new Promise((resolve) => {
     const searchTerm = findWordAtCursor(editor)
     const searchResult = wordRegExp.exec(searchTerm.text)
@@ -46,12 +46,13 @@ const linkAndExtraTagHint = (editor: Editor): Promise< Hints| null > => {
             case 'name':
               // Get the user when a completion happens, this prevents to early calls resulting in 'Anonymous'
               return {
-                text: `[name=${userName}]`
+                text: `[name=${ userName }]`
               }
             case 'time':
               // show the current time when the autocompletion is opened and not when the function is loaded
               return {
-                text: `[time=${DateTime.local().toFormat('DDDD T')}]`
+                text: `[time=${ DateTime.local()
+                                        .toFormat('DDDD T') }]`
               }
             default:
               return {
diff --git a/src/components/editor-page/editor-pane/autocompletion/pdf.ts b/src/components/editor-page/editor-pane/autocompletion/pdf.ts
index 8503199dc..c9843801b 100644
--- a/src/components/editor-page/editor-pane/autocompletion/pdf.ts
+++ b/src/components/editor-page/editor-pane/autocompletion/pdf.ts
@@ -9,7 +9,7 @@ import { findWordAtCursor, Hinter } from './index'
 
 const wordRegExp = /^({[%}]?)$/
 
-const pdfHint = (editor: Editor): Promise< Hints| null > => {
+const pdfHint = (editor: Editor): Promise<Hints | null> => {
   return new Promise((resolve) => {
     const searchTerm = findWordAtCursor(editor)
     const searchResult = wordRegExp.exec(searchTerm.text)
diff --git a/src/components/editor-page/editor-pane/editor-pane.scss b/src/components/editor-page/editor-pane/editor-pane.scss
index cefcf41b9..35dd04e7e 100644
--- a/src/components/editor-page/editor-pane/editor-pane.scss
+++ b/src/components/editor-page/editor-pane/editor-pane.scss
@@ -30,6 +30,7 @@
   .CodeMirror-line, .CodeMirror-line-like {
     font-feature-settings: inherit;
   }
+
   .CodeMirror-line, .CodeMirror-line-like {
     font-variant-ligatures: none;
   }
diff --git a/src/components/editor-page/editor-pane/editor-pane.tsx b/src/components/editor-page/editor-pane/editor-pane.tsx
index 9e06e63b2..4a527d29f 100644
--- a/src/components/editor-page/editor-pane/editor-pane.tsx
+++ b/src/components/editor-page/editor-pane/editor-pane.tsx
@@ -83,9 +83,9 @@ interface DropEvent {
   pageX: number,
   pageY: number,
   dataTransfer: {
-    files: FileList
-    effectAllowed: string
-  } | null
+                  files: FileList
+                  effectAllowed: string
+                } | null
   preventDefault: () => void
 }
 
@@ -201,22 +201,22 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({ onContentC
   }), [t, editorPreferences])
 
   return (
-    <div className={'d-flex flex-column h-100 position-relative'} onMouseEnter={onMakeScrollSource}>
-      <MaxLengthWarningModal show={showMaxLengthWarning} onHide={onMaxLengthHide} maxLength={maxLength}/>
-      <ToolBar editor={editor}/>
+    <div className={ 'd-flex flex-column h-100 position-relative' } onMouseEnter={ onMakeScrollSource }>
+      <MaxLengthWarningModal show={ showMaxLengthWarning } onHide={ onMaxLengthHide } maxLength={ maxLength }/>
+      <ToolBar editor={ editor }/>
       <ControlledCodeMirror
-        className={`overflow-hidden w-100 flex-fill ${ligaturesEnabled ? '' : 'no-ligatures'}`}
-        value={content}
-        options={codeMirrorOptions}
-        onChange={onChange}
-        onPaste={onPaste}
-        onDrop={onDrop}
-        onCursorActivity={onCursorActivity}
-        editorDidMount={onEditorDidMount}
-        onBeforeChange={onBeforeChange}
-        onScroll={onEditorScroll}
+        className={ `overflow-hidden w-100 flex-fill ${ ligaturesEnabled ? '' : 'no-ligatures' }` }
+        value={ content }
+        options={ codeMirrorOptions }
+        onChange={ onChange }
+        onPaste={ onPaste }
+        onDrop={ onDrop }
+        onCursorActivity={ onCursorActivity }
+        editorDidMount={ onEditorDidMount }
+        onBeforeChange={ onBeforeChange }
+        onScroll={ onEditorScroll }
       />
-      <StatusBar {...statusBarInfo} />
+      <StatusBar { ...statusBarInfo } />
     </div>
   )
 }
diff --git a/src/components/editor-page/editor-pane/hints.scss b/src/components/editor-page/editor-pane/hints.scss
index 5fd9ad364..77fa7865e 100644
--- a/src/components/editor-page/editor-pane/hints.scss
+++ b/src/components/editor-page/editor-pane/hints.scss
@@ -13,7 +13,7 @@
   margin: 0;
   padding: 4px;
 
-  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
   border-radius: 3px;
   border: 1px solid silver;
 
diff --git a/src/components/editor-page/editor-pane/key-map.ts b/src/components/editor-page/editor-pane/key-map.ts
index 124478c1a..423c5df66 100644
--- a/src/components/editor-page/editor-pane/key-map.ts
+++ b/src/components/editor-page/editor-pane/key-map.ts
@@ -30,7 +30,8 @@ const tab = (editor: Editor) => {
   const tab = '\t'
 
   // contruct x length spaces
-  const spaces = Array((editor.getOption('indentUnit') ?? 0) + 1).join(' ')
+  const spaces = Array((editor.getOption('indentUnit') ?? 0) + 1)
+    .join(' ')
 
   // auto indent whole line when in list or blockquote
   const cursor = editor.getCursor()
@@ -43,7 +44,8 @@ const tab = (editor: Editor) => {
   const regex = /^(\s*)(>[> ]*|[*+-]\s|(\d+)([.)]))/
 
   let match
-  const multiple = editor.getSelection().split('\n').length > 1 ||
+  const multiple = editor.getSelection()
+                         .split('\n').length > 1 ||
     editor.getSelections().length > 1
 
   if (multiple) {
@@ -70,35 +72,35 @@ const tab = (editor: Editor) => {
 
 export const defaultKeyMap: KeyMap = !isMac
   ? {
-      F9: suppressKey,
-      F10: f10,
-      Esc: esc,
-      'Ctrl-S': suppressKey,
-      Enter: 'newlineAndIndentContinueMarkdownList',
-      Tab: tab,
-      Home: 'goLineLeftSmart',
-      End: 'goLineRight',
-      'Ctrl-I': makeSelectionItalic,
-      'Ctrl-B': makeSelectionBold,
-      'Ctrl-U': underlineSelection,
-      'Ctrl-D': strikeThroughSelection,
-      'Ctrl-M': markSelection,
-      'Ctrl-K': addLink
-    }
+    F9: suppressKey,
+    F10: f10,
+    Esc: esc,
+    'Ctrl-S': suppressKey,
+    Enter: 'newlineAndIndentContinueMarkdownList',
+    Tab: tab,
+    Home: 'goLineLeftSmart',
+    End: 'goLineRight',
+    'Ctrl-I': makeSelectionItalic,
+    'Ctrl-B': makeSelectionBold,
+    'Ctrl-U': underlineSelection,
+    'Ctrl-D': strikeThroughSelection,
+    'Ctrl-M': markSelection,
+    'Ctrl-K': addLink
+  }
   : {
-      F9: suppressKey,
-      F10: f10,
-      Esc: esc,
-      'Cmd-S': suppressKey,
-      Enter: 'newlineAndIndentContinueMarkdownList',
-      Tab: tab,
-      'Cmd-Left': 'goLineLeftSmart',
-      'Cmd-Right': 'goLineRight',
-      Home: 'goLineLeftSmart',
-      End: 'goLineRight',
-      'Cmd-I': makeSelectionItalic,
-      'Cmd-B': makeSelectionBold,
-      'Cmd-U': underlineSelection,
-      'Cmd-D': strikeThroughSelection,
-      'Cmd-M': markSelection
-    }
+    F9: suppressKey,
+    F10: f10,
+    Esc: esc,
+    'Cmd-S': suppressKey,
+    Enter: 'newlineAndIndentContinueMarkdownList',
+    Tab: tab,
+    'Cmd-Left': 'goLineLeftSmart',
+    'Cmd-Right': 'goLineRight',
+    Home: 'goLineLeftSmart',
+    End: 'goLineRight',
+    'Cmd-I': makeSelectionItalic,
+    'Cmd-B': makeSelectionBold,
+    'Cmd-U': underlineSelection,
+    'Cmd-D': strikeThroughSelection,
+    'Cmd-M': markSelection
+  }
diff --git a/src/components/editor-page/editor-pane/one-dark.scss b/src/components/editor-page/editor-pane/one-dark.scss
index 04f288994..32839f304 100644
--- a/src/components/editor-page/editor-pane/one-dark.scss
+++ b/src/components/editor-page/editor-pane/one-dark.scss
@@ -15,207 +15,254 @@ borrow some color from tomorrow-night-eighties
 /* Editor */
 .dark .panel,
 .dark #main-toolbar {
-    background: #1d222a;
+  background: #1d222a;
 }
+
 .dark #working-set-list-container,
 .dark #editor-holder .pane-header {
-    background: #15181e;
+  background: #15181e;
 }
+
 .dark .working-set-header,
 .dark #project-files-header .btn-alt-quiet {
-    background: rgba(204, 217, 255, 0.05);
+  background: rgba(204, 217, 255, 0.05);
 }
+
 .dark .working-set-header > span {
-    background: transparent;
+  background: transparent;
 }
+
 .dark .sidebar-selection,
 .dark .filetree-selection,
 .dark .sidebar-selection-extension,
 .dark .filetree-selection-extension {
-    background: #282c34;
+  background: #282c34;
 }
+
 .dark #status-bar,
 .dark #status-indicators {
-    background: #15181e;
-    border-top-color: #1d222a;
+  background: #15181e;
+  border-top-color: #1d222a;
 }
+
 .dark a,
 .dark .open-files-container li.selected a {
-    color: #528bff;
+  color: #528bff;
 }
+
 /* Code Styling */
 .cm-s-one-dark.CodeMirror,
 .cm-s-one-dark .CodeMirror-scroll {
-    /*  background-color: #282c34;*/
-    background-color: #1e2126;
-    color: #abb2bf;
+  /*  background-color: #282c34;*/
+  background-color: #1e2126;
+  color: #abb2bf;
 }
+
 .cm-s-one-dark .CodeMirror-activeline-background {
-    background: transparent;
+  background: transparent;
 }
+
 .cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline-background {
-    background: rgba(204, 217, 255, 0.05);
+  background: rgba(204, 217, 255, 0.05);
 }
+
 .show-line-padding .cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline-background {
-    box-shadow: inset 15px 0 0 0 #000;
+  box-shadow: inset 15px 0 0 0 #000;
 }
+
 .cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
-    background: transparent;
-    color: #5c6370;
+  background: transparent;
+  color: #5c6370;
 }
+
 .cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline .inline-widget .CodeMirror-gutter-elt {
-    color: red;
+  color: red;
 }
+
 .cm-s-one-dark .cm-string-2,
 .cm-s-one-dark .cm-hr {
-    color: #56b6c2;
+  color: #56b6c2;
 }
+
 .cm-s-one-dark .cm-number,
 .cm-s-one-dark .cm-attribute,
 .cm-s-one-dark .cm-qualifier,
 .cm-s-one-dark .cm-plus,
 .cm-s-one-dark .cm-atom {
-    color: #eda35e;
+  color: #eda35e;
 }
+
 .cm-s-one-dark .cm-def {
-    color: #c678dd;
+  color: #c678dd;
 }
+
 .cm-s-one-dark .cm-property,
 .cm-s-one-dark .cm-variable,
 .cm-s-one-dark .cm-variable-2,
 .cm-s-one-dark .cm-variable-3,
 .cm-s-one-dark .cm-operator,
-    /*.cm-meta,*/
+  /*.cm-meta,*/
 .cm-s-one-dark .cm-bracket {
-    color: #f76e79;
+  color: #f76e79;
 }
+
 /*borrow from tomorrow-night-eighties*/
 .cm-s-one-dark .cm-variable {
-    color: #99cc99;
+  color: #99cc99;
 }
+
 .cm-s-one-dark .cm-variable-2 {
-    color: #6699cc;
+  color: #6699cc;
 }
 
 .cm-s-one-dark .cm-comment {
-    color: #5c6370;
-    font-style: italic;
+  color: #5c6370;
+  font-style: italic;
 }
+
 .cm-s-one-dark .cm-error,
 .cm-s-one-dark .cm-minus {
-    color: #be5046;
+  color: #be5046;
 }
+
 .cm-s-one-dark .cm-header {
-    color: #eda35e;
+  color: #eda35e;
 }
+
 .cm-s-one-dark .cm-link {
-    color: #98c379;
-    text-decoration: none;
+  color: #98c379;
+  text-decoration: none;
 }
+
 .cm-s-one-dark .cm-rangeinfo {
-    color: #c678dd;
+  color: #c678dd;
 }
+
 .cm-s-one-dark .cm-keyword,
 .cm-s-one-dark .cm-builtin,
 .cm-s-one-dark .cm-tag {
-    color: #e06c75;
+  color: #e06c75;
 }
+
 .cm-s-one-dark .cm-m-markdown.cm-keyword,
 .cm-s-one-dark .cm-m-markdown.cm-builtin,
 .cm-s-one-dark .cm-m-markdown.cm-tag {
-    color: #98c379;
+  color: #98c379;
 }
+
 .cm-s-one-dark .cm-string {
-    /*  color: #98c379;*/
-    color: #6699cc;
+  /*  color: #98c379;*/
+  color: #6699cc;
 }
+
 /* Extra CSS */
 .cm-s-one-dark .CodeMirror-searching {
-    color: #fff !important;
-    border: 1px solid #528bff;
-    margin: 0 -1px;
-    background-color: rgba(204, 217, 255, 0.09);
-    box-shadow: 0px 0px 6px rgba(66, 133, 244, 0.4);
+  color: #fff !important;
+  border: 1px solid #528bff;
+  margin: 0 -1px;
+  background-color: rgba(204, 217, 255, 0.09);
+  box-shadow: 0px 0px 6px rgba(66, 133, 244, 0.4);
 }
+
 .cm-s-one-dark .CodeMirror-searching.searching-current-match {
-    color: #fff;
-    background-color: #528bff;
-    box-shadow: 0px 0px 6px rgba(66, 133, 244, 0.8);
+  color: #fff;
+  background-color: #528bff;
+  box-shadow: 0px 0px 6px rgba(66, 133, 244, 0.8);
 }
+
 .cm-s-one-dark .CodeMirror-cursor {
-    border-left: 2px solid #528bff !important;
+  border-left: 2px solid #528bff !important;
 }
+
 .cm-fat-cursor .CodeMirror-cursor {
-    border-left: 2px solid #3C5B9E !important;
-    background: #3C5B9E;
+  border-left: 2px solid #3C5B9E !important;
+  background: #3C5B9E;
 }
+
 .cm-s-one-dark .CodeMirror-gutters {
-    /*  background-color: #282c34;*/
-    background-color: #1e2126;
-    border-right: 1px solid rgba(204, 217, 255, 0.05);
+  /*  background-color: #282c34;*/
+  background-color: #1e2126;
+  border-right: 1px solid rgba(204, 217, 255, 0.05);
 }
+
 .cm-s-one-dark .CodeMirror-linenumber {
-    color: #393e46;
+  color: #393e46;
 }
+
 .cm-s-one-dark.CodeMirror .CodeMirror-selected {
-    background: rgba(204, 217, 255, 0.05);
+  background: rgba(204, 217, 255, 0.05);
 }
+
 .cm-s-one-dark.CodeMirror-focused .CodeMirror-selected {
-    background: rgba(204, 217, 255, 0.09);
+  background: rgba(204, 217, 255, 0.09);
 }
+
 .cm-s-one-dark .CodeMirror-matchingbracket,
 .cm-s-one-dark .CodeMirror-matchingtag {
-    /* Ensure visibility against gray inline editor background */
-    background-color: rgba(204, 217, 255, 0.09);
-    color: #abb2bf !important;
-    border-bottom: 1px solid #528bff;
+  /* Ensure visibility against gray inline editor background */
+  background-color: rgba(204, 217, 255, 0.09);
+  color: #abb2bf !important;
+  border-bottom: 1px solid #528bff;
 }
+
 .cm-s-one-dark .CodeMirror-overwrite .CodeMirror-cursor {
-    border-left: none !important;
-    border-bottom: 1px solid #fff;
-    width: 0.5em;
+  border-left: none !important;
+  border-bottom: 1px solid #fff;
+  width: 0.5em;
 }
+
 .cm-s-one-dark.CodeMirror .CodeMirror {
-    background: transparent;
+  background: transparent;
 }
+
 .cm-s-one-dark.CodeMirror .CodeMirror .CodeMirror-gutters {
-    background: transparent;
-    border-right: none;
+  background: transparent;
+  border-right: none;
 }
+
 .cm-s-one-dark.CodeMirror .CodeMirror .CodeMirror-activeline-background {
-    background: transparent;
+  background: transparent;
 }
+
 .cm-s-one-dark.CodeMirror .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
-    background: transparent;
-    color: #5c6370;
+  background: transparent;
+  color: #5c6370;
 }
+
 .cm-s-one-dark.CodeMirror .CodeMirror-focused .CodeMirror-activeline-background {
-    background: #000;
+  background: #000;
 }
+
 .cm-s-one-dark.CodeMirror .CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
-    background: rgba(204, 217, 255, 0.05);
-    color: #fff;
+  background: rgba(204, 217, 255, 0.05);
+  color: #fff;
 }
+
 .cm-s-one-dark .CodeMirror-foldgutter-open:after {
-    color: #393e46;
+  color: #393e46;
 }
+
 .cm-s-one-dark .CodeMirror-foldgutter-folded:after {
-    color: #5c6370;
+  color: #5c6370;
 }
+
 .cm-s-one-dark .CodeMirror.over-gutter .CodeMirror-foldgutter-open:after,
 .cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline .CodeMirror-foldgutter-open:after {
-    color: #5c6370;
+  color: #5c6370;
 }
+
 .cm-s-one-dark .CodeMirror-foldmarker {
-    border-color: #393e46;
-    color: #abb2bf;
-    background: rgba(204, 217, 255, 0.05);
+  border-color: #393e46;
+  color: #abb2bf;
+  background: rgba(204, 217, 255, 0.05);
 }
+
 /* Non-editor styling */
 .image-view,
 .not-editor {
-    background-color: #282c34;
+  background-color: #282c34;
 }
+
 .view-pane .image-view {
-    color: #abb2bf;
+  color: #abb2bf;
 }
diff --git a/src/components/editor-page/editor-pane/status-bar/status-bar.tsx b/src/components/editor-page/editor-pane/status-bar/status-bar.tsx
index 42d2c089d..0b1f6ac41 100644
--- a/src/components/editor-page/editor-pane/status-bar/status-bar.tsx
+++ b/src/components/editor-page/editor-pane/status-bar/status-bar.tsx
@@ -34,7 +34,8 @@ export const createStatusInfo = (editor: Editor, maxDocumentLength: number): Sta
   remainingCharacters: maxDocumentLength - editor.getValue().length,
   linesInDocument: editor.lineCount(),
   selectedColumns: editor.getSelection().length,
-  selectedLines: editor.getSelection().split('\n').length
+  selectedLines: editor.getSelection()
+                       .split('\n').length
 })
 
 export const StatusBar: React.FC<StatusBarInfo> = ({ position, selectedColumns, selectedLines, charactersInDocument, linesInDocument, remainingCharacters }) => {
@@ -53,25 +54,25 @@ export const StatusBar: React.FC<StatusBarInfo> = ({ position, selectedColumns,
   return (
     <div className="d-flex flex-row status-bar px-2">
       <div>
-        <span>{t('editor.statusBar.cursor', { line: position.line + 1, columns: position.ch + 1 })}</span>
-        <ShowIf condition={selectedColumns !== 0 && selectedLines !== 0}>
-          <ShowIf condition={selectedLines === 1}>
-            <span>&nbsp;–&nbsp;{t('editor.statusBar.selection.column', { count: selectedColumns })}</span>
+        <span>{ t('editor.statusBar.cursor', { line: position.line + 1, columns: position.ch + 1 }) }</span>
+        <ShowIf condition={ selectedColumns !== 0 && selectedLines !== 0 }>
+          <ShowIf condition={ selectedLines === 1 }>
+            <span>&nbsp;–&nbsp;{ t('editor.statusBar.selection.column', { count: selectedColumns }) }</span>
           </ShowIf>
-          <ShowIf condition={selectedLines > 1}>
-            <span>&nbsp;–&nbsp;{t('editor.statusBar.selection.line', { count: selectedLines })}</span>
+          <ShowIf condition={ selectedLines > 1 }>
+            <span>&nbsp;–&nbsp;{ t('editor.statusBar.selection.line', { count: selectedLines }) }</span>
           </ShowIf>
         </ShowIf>
       </div>
       <div className="ml-auto">
-        <span>{t('editor.statusBar.lines', { lines: linesInDocument })}</span>
+        <span>{ t('editor.statusBar.lines', { lines: linesInDocument }) }</span>
         &nbsp;–&nbsp;
         <span
-          data-cy={'remainingCharacters'}
-          title={getLengthTooltip}
-          className={remainingCharacters <= 0 ? 'text-danger' : remainingCharacters <= 100 ? 'text-warning' : ''}
+          data-cy={ 'remainingCharacters' }
+          title={ getLengthTooltip }
+          className={ remainingCharacters <= 0 ? 'text-danger' : remainingCharacters <= 100 ? 'text-warning' : '' }
         >
-          {t('editor.statusBar.length', { length: charactersInDocument })}
+          { t('editor.statusBar.length', { length: charactersInDocument }) }
         </span>
       </div>
     </div>
diff --git a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-boolean-property.tsx b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-boolean-property.tsx
index 00300a12a..e3e5710a4 100644
--- a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-boolean-property.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-boolean-property.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EditorConfiguration } from 'codemirror'
-import equal from "fast-deep-equal"
+import equal from 'fast-deep-equal'
 import React, { ChangeEvent, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -30,15 +30,16 @@ export const EditorPreferenceBooleanProperty: React.FC<EditorPreferenceBooleanPr
     } as EditorConfiguration)
   }, [property])
 
-  const i18nPrefix = `editor.modal.preferences.${property}`
+  const i18nPrefix = `editor.modal.preferences.${ property }`
 
   return (
-    <EditorPreferenceInput onChange={selectItem} property={property} type={EditorPreferenceInputType.SELECT} value={preference}>
-      <option value={'true'}>
-        {t(`${i18nPrefix}.on`)}
+    <EditorPreferenceInput onChange={ selectItem } property={ property } type={ EditorPreferenceInputType.SELECT }
+                           value={ preference }>
+      <option value={ 'true' }>
+        { t(`${ i18nPrefix }.on`) }
       </option>
-      <option value={'false'}>
-        {t(`${i18nPrefix}.off`)}
+      <option value={ 'false' }>
+        { t(`${ i18nPrefix }.off`) }
       </option>
     </EditorPreferenceInput>
   )
diff --git a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-input.tsx b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-input.tsx
index 2a69f95ff..1260557d2 100644
--- a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-input.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-input.tsx
@@ -23,17 +23,18 @@ export interface EditorPreferenceInputProps {
 export const EditorPreferenceInput: React.FC<EditorPreferenceInputProps> = ({ property, type, onChange, value, children }) => {
   useTranslation()
   return (
-    <Form.Group controlId={`editor-pref-${property}`}>
+    <Form.Group controlId={ `editor-pref-${ property }` }>
       <Form.Label>
-        <Trans i18nKey={`editor.modal.preferences.${property}${type===EditorPreferenceInputType.NUMBER ? '' : '.label'}`}/>
+        <Trans
+          i18nKey={ `editor.modal.preferences.${ property }${ type === EditorPreferenceInputType.NUMBER ? '' : '.label' }` }/>
       </Form.Label>
       <Form.Control
-        as={type === EditorPreferenceInputType.NUMBER ? 'input' : 'select'}
+        as={ type === EditorPreferenceInputType.NUMBER ? 'input' : 'select' }
         size='sm'
-        value={value}
-        onChange={onChange}
-        type={type === EditorPreferenceInputType.NUMBER ? 'number' : ''}>
-        {children}
+        value={ value }
+        onChange={ onChange }
+        type={ type === EditorPreferenceInputType.NUMBER ? 'number' : '' }>
+        { children }
       </Form.Control>
     </Form.Group>
   )
diff --git a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-ligatures-select.tsx b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-ligatures-select.tsx
index a4437bf78..98d6c90fa 100644
--- a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-ligatures-select.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-ligatures-select.tsx
@@ -11,7 +11,8 @@ import { setEditorLigatures } from '../../../../../redux/editor/methods'
 import { EditorPreferenceInput, EditorPreferenceInputType } from './editor-preference-input'
 
 export const EditorPreferenceLigaturesSelect: React.FC = () => {
-  const ligaturesEnabled = useSelector((state: ApplicationState) => Boolean(state.editorConfig.ligatures).toString())
+  const ligaturesEnabled = useSelector((state: ApplicationState) => Boolean(state.editorConfig.ligatures)
+    .toString())
   const saveLigatures = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
     const ligaturesActivated: boolean = event.target.value === 'true'
     setEditorLigatures(ligaturesActivated)
@@ -19,10 +20,10 @@ export const EditorPreferenceLigaturesSelect: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <EditorPreferenceInput onChange={saveLigatures} value={ligaturesEnabled} property={"ligatures"}
-                           type={EditorPreferenceInputType.BOOLEAN}>
-      <option value='true'>{t(`common.yes`)}</option>
-      <option value='false'>{t(`common.no`)}</option>
+    <EditorPreferenceInput onChange={ saveLigatures } value={ ligaturesEnabled } property={ 'ligatures' }
+                           type={ EditorPreferenceInputType.BOOLEAN }>
+      <option value='true'>{ t(`common.yes`) }</option>
+      <option value='false'>{ t(`common.no`) }</option>
     </EditorPreferenceInput>
   )
 }
diff --git a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-number-property.tsx b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-number-property.tsx
index fca8871fd..fedb3cbd8 100644
--- a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-number-property.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-number-property.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EditorConfiguration } from 'codemirror'
-import equal from "fast-deep-equal"
+import equal from 'fast-deep-equal'
 import React, { ChangeEvent, useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../../../redux'
@@ -29,6 +29,7 @@ export const EditorPreferenceNumberProperty: React.FC<EditorPreferenceNumberProp
   }, [property])
 
   return (
-    <EditorPreferenceInput onChange={selectItem} property={property} type={EditorPreferenceInputType.NUMBER} value={preference}/>
+    <EditorPreferenceInput onChange={ selectItem } property={ property } type={ EditorPreferenceInputType.NUMBER }
+                           value={ preference }/>
   )
 }
diff --git a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-select-property.tsx b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-select-property.tsx
index 1548c4e33..432e28ee9 100644
--- a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-select-property.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preference-select-property.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EditorConfiguration } from 'codemirror'
-import equal from "fast-deep-equal"
+import equal from 'fast-deep-equal'
 import React, { ChangeEvent, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -32,14 +32,15 @@ export const EditorPreferenceSelectProperty: React.FC<EditorPreferenceSelectProp
     } as EditorConfiguration)
   }, [property])
 
-  const i18nPrefix = `editor.modal.preferences.${property}`
+  const i18nPrefix = `editor.modal.preferences.${ property }`
 
   return (
-    <EditorPreferenceInput onChange={selectItem} property={property} type={EditorPreferenceInputType.SELECT} value={preference}>
-      {selections.map(selection =>
-        <option key={selection} value={selection}>
-          {t(`${i18nPrefix}.${selection}`) }
-        </option>)}
+    <EditorPreferenceInput onChange={ selectItem } property={ property } type={ EditorPreferenceInputType.SELECT }
+                           value={ preference }>
+      { selections.map(selection =>
+        <option key={ selection } value={ selection }>
+          { t(`${ i18nPrefix }.${ selection }`) }
+        </option>) }
     </EditorPreferenceInput>
   )
 }
diff --git a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preferences.tsx b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preferences.tsx
index b601fc380..5171220be 100644
--- a/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preferences.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/editor-preferences/editor-preferences.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import equal from "fast-deep-equal"
+import equal from 'fast-deep-equal'
 import React, { Fragment, useState } from 'react'
 import { Button, Form, ListGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
@@ -17,8 +17,8 @@ import { EditorPreferenceBooleanProperty } from './editor-preference-boolean-pro
 import { EditorPreferenceInput, EditorPreferenceInputType } from './editor-preference-input'
 import { EditorPreferenceLigaturesSelect } from './editor-preference-ligatures-select'
 import { EditorPreferenceNumberProperty } from './editor-preference-number-property'
-import { EditorPreferenceProperty } from "./editor-preference-property"
-import { EditorPreferenceSelectProperty } from "./editor-preference-select-property"
+import { EditorPreferenceProperty } from './editor-preference-property'
+import { EditorPreferenceSelectProperty } from './editor-preference-select-property'
 
 export const EditorPreferences: React.FC = () => {
   const { t } = useTranslation()
@@ -27,36 +27,40 @@ export const EditorPreferences: React.FC = () => {
 
   return (
     <Fragment>
-      <Button variant='light' onClick={() => setShowModal(true)} title={t('editor.editorToolbar.preferences')}>
+      <Button variant='light' onClick={ () => setShowModal(true) } title={ t('editor.editorToolbar.preferences') }>
         <ForkAwesomeIcon icon="wrench"/>
       </Button>
       <CommonModal
-        show={showModal}
-        onHide={() => setShowModal(false)}
-        titleI18nKey={'editor.modal.preferences.title'}
-        closeButton={true}
-        icon={'wrench'}>
+        show={ showModal }
+        onHide={ () => setShowModal(false) }
+        titleI18nKey={ 'editor.modal.preferences.title' }
+        closeButton={ true }
+        icon={ 'wrench' }>
         <Form>
           <ListGroup>
             <ListGroup.Item>
-              <EditorPreferenceSelectProperty property={EditorPreferenceProperty.THEME} selections={['one-dark', 'neat']}/>
+              <EditorPreferenceSelectProperty property={ EditorPreferenceProperty.THEME }
+                                              selections={ ['one-dark', 'neat'] }/>
             </ListGroup.Item>
             <ListGroup.Item>
-              <EditorPreferenceSelectProperty property={EditorPreferenceProperty.KEYMAP} selections={['sublime', 'emacs', 'vim']}/>
+              <EditorPreferenceSelectProperty property={ EditorPreferenceProperty.KEYMAP }
+                                              selections={ ['sublime', 'emacs', 'vim'] }/>
             </ListGroup.Item>
             <ListGroup.Item>
-              <EditorPreferenceBooleanProperty property={EditorPreferenceProperty.INDENT_WITH_TABS}/>
+              <EditorPreferenceBooleanProperty property={ EditorPreferenceProperty.INDENT_WITH_TABS }/>
             </ListGroup.Item>
-            <ShowIf condition={!indentWithTabs}>
+            <ShowIf condition={ !indentWithTabs }>
               <ListGroup.Item>
-                <EditorPreferenceNumberProperty property={EditorPreferenceProperty.INDENT_UNIT}/>
+                <EditorPreferenceNumberProperty property={ EditorPreferenceProperty.INDENT_UNIT }/>
               </ListGroup.Item>
             </ShowIf>
             <ListGroup.Item>
               <EditorPreferenceLigaturesSelect/>
             </ListGroup.Item>
             <ListGroup.Item>
-              <EditorPreferenceInput onChange={() => alert('This feature is not yet implemented.')} property={EditorPreferenceProperty.SPELL_CHECK} type={EditorPreferenceInputType.SELECT}>
+              <EditorPreferenceInput onChange={ () => alert('This feature is not yet implemented.') }
+                                     property={ EditorPreferenceProperty.SPELL_CHECK }
+                                     type={ EditorPreferenceInputType.SELECT }>
                 <option value='off'>Off</option>
                 <option value='en'>English</option>
               </EditorPreferenceInput>
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 cda51e2aa..ef24ddf16 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
@@ -23,13 +23,14 @@ export const EmojiPickerButton: React.FC<EmojiPickerButtonProps> = ({ editor })
   return (
     <Fragment>
       <EmojiPicker
-        show={showEmojiPicker}
-        onEmojiSelected={(emoji) => {
+        show={ showEmojiPicker }
+        onEmojiSelected={ (emoji) => {
           setShowEmojiPicker(false)
           addEmoji(emoji, editor)
-        }}
-        onDismiss={() => setShowEmojiPicker(false)}/>
-      <Button data-cy={'show-emoji-picker'} variant='light' onClick={() => setShowEmojiPicker(old => !old)} title={t('editor.editorToolbar.emoji')}>
+        } }
+        onDismiss={ () => setShowEmojiPicker(false) }/>
+      <Button data-cy={ 'show-emoji-picker' } variant='light' onClick={ () => setShowEmojiPicker(old => !old) }
+              title={ t('editor.editorToolbar.emoji') }>
         <ForkAwesomeIcon icon="smile-o"/>
       </Button>
     </Fragment>
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 4c37516bf..3765f1573 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
@@ -19,12 +19,13 @@ export interface EmojiPickerProps {
   onDismiss: () => void
 }
 
-export const customEmojis: CustomEmoji[] = Object.keys(ForkAwesomeIcons).map((name) => ({
-  name: `fa-${name}`,
-  shortcodes: [`fa-${name.toLowerCase()}`],
-  url: forkawesomeIcon,
-  category: 'ForkAwesome'
-}))
+export const customEmojis: CustomEmoji[] = Object.keys(ForkAwesomeIcons)
+                                                 .map((name) => ({
+                                                   name: `fa-${ name }`,
+                                                   shortcodes: [`fa-${ name.toLowerCase() }`],
+                                                   url: forkawesomeIcon,
+                                                   category: 'ForkAwesome'
+                                                 }))
 
 export const EMOJI_DATA_PATH = '/static/js/emoji-data.json'
 
@@ -92,6 +93,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({ show, onEmojiSelected,
   }, [darkModeEnabled])
 
   return (
-    <div className={`position-absolute emoji-picker-container ${!show ? 'd-none' : ''}`} ref={pickerContainerRef}/>
+    <div className={ `position-absolute emoji-picker-container ${ !show ? 'd-none' : '' }` }
+         ref={ pickerContainerRef }/>
   )
 }
diff --git a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/icon-names.ts b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/icon-names.ts
index 372a9b5a5..50fa4c398 100644
--- a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/icon-names.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/icon-names.ts
@@ -5,762 +5,762 @@
  */
 
 export enum ForkAwesomeIcons {
-  '500px'='500px',
-  'activitypub'='activitypub',
-  'address-book-o'='address-book-o',
-  'address-book'='address-book',
-  'address-card-o'='address-card-o',
-  'address-card'='address-card',
-  'adjust'='adjust',
-  'adn'='adn',
-  'align-center'='align-center',
-  'align-justify'='align-justify',
-  'align-left'='align-left',
-  'align-right'='align-right',
-  'amazon'='amazon',
-  'ambulance'='ambulance',
-  'american-sign-language-interpreting'='american-sign-language-interpreting',
-  'anchor'='anchor',
-  'android'='android',
-  'angellist'='angellist',
-  'angle-double-down'='angle-double-down',
-  'angle-double-left'='angle-double-left',
-  'angle-double-right'='angle-double-right',
-  'angle-double-up'='angle-double-up',
-  'angle-down'='angle-down',
-  'angle-left'='angle-left',
-  'angle-right'='angle-right',
-  'angle-up'='angle-up',
-  'apple'='apple',
-  'archive-org'='archive-org',
-  'archive'='archive',
-  'archlinux'='archlinux',
-  'area-chart'='area-chart',
-  'arrow-circle-down'='arrow-circle-down',
-  'arrow-circle-left'='arrow-circle-left',
-  'arrow-circle-o-down'='arrow-circle-o-down',
-  'arrow-circle-o-left'='arrow-circle-o-left',
-  'arrow-circle-o-right'='arrow-circle-o-right',
-  'arrow-circle-o-up'='arrow-circle-o-up',
-  'arrow-circle-right'='arrow-circle-right',
-  'arrow-circle-up'='arrow-circle-up',
-  'arrow-down'='arrow-down',
-  'arrow-left'='arrow-left',
-  'arrow-right'='arrow-right',
-  'arrows-alt'='arrows-alt',
-  'arrows-h'='arrows-h',
-  'arrows'='arrows',
-  'arrows-v'='arrows-v',
-  'arrow-up'='arrow-up',
-  'artstation'='artstation',
-  'assistive-listening-systems'='assistive-listening-systems',
-  'asterisk'='asterisk',
-  'at'='at',
-  'att'='att',
-  'audio-description'='audio-description',
-  'backward'='backward',
-  'balance-scale'='balance-scale',
-  'bandcamp'='bandcamp',
-  'ban'='ban',
-  'bar-chart'='bar-chart',
-  'barcode'='barcode',
-  'bars'='bars',
-  'bath'='bath',
-  'battery-empty'='battery-empty',
-  'battery-full'='battery-full',
-  'battery-half'='battery-half',
-  'battery-quarter'='battery-quarter',
-  'battery-three-quarters'='battery-three-quarters',
-  'bed'='bed',
-  'beer'='beer',
-  'behance-square'='behance-square',
-  'behance'='behance',
-  'bell-o'='bell-o',
-  'bell-rigning-o'='bell-rigning-o',
-  'bell-ringing'='bell-ringing',
-  'bell-slash-o'='bell-slash-o',
-  'bell-slash'='bell-slash',
-  'bell'='bell',
-  'bicycle'='bicycle',
-  'binoculars'='binoculars',
-  'biometric'='biometric',
-  'birthday-cake'='birthday-cake',
-  'bitbucket-square'='bitbucket-square',
-  'bitbucket'='bitbucket',
-  'black-tie'='black-tie',
-  'blind'='blind',
-  'bluetooth-b'='bluetooth-b',
-  'bluetooth'='bluetooth',
-  'bold'='bold',
-  'bolt'='bolt',
-  'bomb'='bomb',
-  'bookmark-o'='bookmark-o',
-  'bookmark'='bookmark',
-  'book'='book',
-  'bootstrap'='bootstrap',
-  'braille'='braille',
-  'briefcase'='briefcase',
-  'btc'='btc',
-  'bug'='bug',
-  'building-o'='building-o',
-  'building'='building',
-  'bullhorn'='bullhorn',
-  'bullseye'='bullseye',
-  'bus'='bus',
-  'buysellads'='buysellads',
-  'calculator'='calculator',
-  'calendar-check-o'='calendar-check-o',
-  'calendar-minus-o'='calendar-minus-o',
-  'calendar-o'='calendar-o',
-  'calendar-plus-o'='calendar-plus-o',
-  'calendar'='calendar',
-  'calendar-times-o'='calendar-times-o',
-  'camera-retro'='camera-retro',
-  'camera'='camera',
-  'caret-down'='caret-down',
-  'caret-left'='caret-left',
-  'caret-right'='caret-right',
-  'caret-square-o-down'='caret-square-o-down',
-  'caret-square-o-left'='caret-square-o-left',
-  'caret-square-o-right'='caret-square-o-right',
-  'caret-square-o-up'='caret-square-o-up',
-  'caret-up'='caret-up',
-  'car'='car',
-  'cart-arrow-down'='cart-arrow-down',
-  'cart-plus'='cart-plus',
-  'cc-amex'='cc-amex',
-  'cc-diners-club'='cc-diners-club',
-  'cc-discover'='cc-discover',
-  'cc-jcb'='cc-jcb',
-  'cc-mastercard'='cc-mastercard',
-  'cc-paypal'='cc-paypal',
-  'cc-stripe'='cc-stripe',
-  'cc'='cc',
-  'cc-visa'='cc-visa',
-  'certificate'='certificate',
-  'chain-broken'='chain-broken',
-  'check-circle-o'='check-circle-o',
-  'check-circle'='check-circle',
-  'check-square-o'='check-square-o',
-  'check-square'='check-square',
-  'check'='check',
-  'chevron-circle-down'='chevron-circle-down',
-  'chevron-circle-left'='chevron-circle-left',
-  'chevron-circle-right'='chevron-circle-right',
-  'chevron-circle-up'='chevron-circle-up',
-  'chevron-down'='chevron-down',
-  'chevron-left'='chevron-left',
-  'chevron-right'='chevron-right',
-  'chevron-up'='chevron-up',
-  'child'='child',
-  'chrome'='chrome',
-  'circle-o-notch'='circle-o-notch',
-  'circle-o'='circle-o',
-  'circle'='circle',
-  'circle-thin'='circle-thin',
-  'classicpress-circle'='classicpress-circle',
-  'classicpress'='classicpress',
-  'clipboard'='clipboard',
-  'clock-o'='clock-o',
-  'clone'='clone',
-  'cloud-download'='cloud-download',
-  'cloud'='cloud',
-  'cloud-upload'='cloud-upload',
-  'code-fork'='code-fork',
-  'codepen'='codepen',
-  'code'='code',
-  'codiepie'='codiepie',
-  'coffee'='coffee',
-  'cogs'='cogs',
-  'cog'='cog',
-  'columns'='columns',
-  'commenting-o'='commenting-o',
-  'commenting'='commenting',
-  'comment-o'='comment-o',
-  'comments-o'='comments-o',
-  'comments'='comments',
-  'comment'='comment',
-  'compass'='compass',
-  'compress'='compress',
-  'connectdevelop'='connectdevelop',
-  'contao'='contao',
-  'copyright'='copyright',
-  'creative-commons'='creative-commons',
-  'credit-card-alt'='credit-card-alt',
-  'credit-card'='credit-card',
-  'crop'='crop',
-  'crosshairs'='crosshairs',
-  'css3'='css3',
-  'c'='c',
-  'cubes'='cubes',
-  'cube'='cube',
-  'cutlery'='cutlery',
-  'dashcube'='dashcube',
-  'database'='database',
-  'deaf'='deaf',
-  'debian'='debian',
-  'delicious'='delicious',
-  'desktop'='desktop',
-  'deviantart'='deviantart',
-  'dev-to'='dev-to',
-  'diamond'='diamond',
-  'diaspora'='diaspora',
-  'digg'='digg',
-  'digitalocean'='digitalocean',
-  'discord-alt'='discord-alt',
-  'discord'='discord',
-  'dogmazic'='dogmazic',
-  'dot-circle-o'='dot-circle-o',
-  'download'='download',
-  'dribbble'='dribbble',
-  'dropbox'='dropbox',
-  'drupal'='drupal',
-  'edge'='edge',
-  'eercast'='eercast',
-  'eject'='eject',
-  'ellipsis-h'='ellipsis-h',
-  'ellipsis-v'='ellipsis-v',
-  'emby'='emby',
-  'empire'='empire',
-  'envelope-open-o'='envelope-open-o',
-  'envelope-open'='envelope-open',
-  'envelope-o'='envelope-o',
-  'envelope-square'='envelope-square',
-  'envelope'='envelope',
-  'envira'='envira',
-  'eraser'='eraser',
-  'ethereum'='ethereum',
-  'etsy'='etsy',
-  'eur'='eur',
-  'exchange'='exchange',
-  'exclamation-circle'='exclamation-circle',
-  'exclamation'='exclamation',
-  'exclamation-triangle'='exclamation-triangle',
-  'expand'='expand',
-  'expeditedssl'='expeditedssl',
-  'external-link-square'='external-link-square',
-  'external-link'='external-link',
-  'eyedropper'='eyedropper',
-  'eye-slash'='eye-slash',
-  'eye'='eye',
-  'facebook-messenger'='facebook-messenger',
-  'facebook-official'='facebook-official',
-  'facebook-square'='facebook-square',
-  'facebook'='facebook',
-  'fast-backward'='fast-backward',
-  'fast-forward'='fast-forward',
-  'fax'='fax',
-  'f-droid'='f-droid',
-  'female'='female',
-  'ffmpeg'='ffmpeg',
-  'fighter-jet'='fighter-jet',
-  'file-archive-o'='file-archive-o',
-  'file-audio-o'='file-audio-o',
-  'file-code-o'='file-code-o',
-  'file-epub'='file-epub',
-  'file-excel-o'='file-excel-o',
-  'file-image-o'='file-image-o',
-  'file-o'='file-o',
-  'file-pdf-o'='file-pdf-o',
-  'file-powerpoint-o'='file-powerpoint-o',
-  'files-o'='files-o',
-  'file'='file',
-  'file-text-o'='file-text-o',
-  'file-text'='file-text',
-  'file-video-o'='file-video-o',
-  'file-word-o'='file-word-o',
-  'film'='film',
-  'filter'='filter',
-  'fire-extinguisher'='fire-extinguisher',
-  'firefox'='firefox',
-  'fire'='fire',
-  'first-order'='first-order',
-  'flag-checkered'='flag-checkered',
-  'flag-o'='flag-o',
-  'flag'='flag',
-  'flask'='flask',
-  'flickr'='flickr',
-  'floppy-o'='floppy-o',
-  'folder-open-o'='folder-open-o',
-  'folder-open'='folder-open',
-  'folder-o'='folder-o',
-  'folder'='folder',
-  'font-awesome'='font-awesome',
-  'fonticons'='fonticons',
-  'font'='font',
-  'fork-awesome'='fork-awesome',
-  'fort-awesome'='fort-awesome',
-  'forumbee'='forumbee',
-  'forward'='forward',
-  'foursquare'='foursquare',
-  'free-code-camp'='free-code-camp',
-  'freedombox'='freedombox',
-  'friendica'='friendica',
-  'frown-o'='frown-o',
-  'funkwhale'='funkwhale',
-  'futbol-o'='futbol-o',
-  'gamepad'='gamepad',
-  'gavel'='gavel',
-  'gbp'='gbp',
-  'genderless'='genderless',
-  'get-pocket'='get-pocket',
-  'gg-circle'='gg-circle',
-  'gg'='gg',
-  'gift'='gift',
-  'gimp'='gimp',
-  'gitea'='gitea',
-  'github-alt'='github-alt',
-  'github-square'='github-square',
-  'github'='github',
-  'gitlab'='gitlab',
-  'git-square'='git-square',
-  'git'='git',
-  'glass'='glass',
-  'glide-g'='glide-g',
-  'glide'='glide',
-  'globe-e'='globe-e',
-  'globe'='globe',
-  'globe-w'='globe-w',
-  'gnupg'='gnupg',
-  'gnu-social'='gnu-social',
-  'google-plus-official'='google-plus-official',
-  'google-plus-square'='google-plus-square',
-  'google-plus'='google-plus',
-  'google'='google',
-  'google-wallet'='google-wallet',
-  'graduation-cap'='graduation-cap',
-  'gratipay'='gratipay',
-  'grav'='grav',
-  'hackaday'='hackaday',
-  'hacker-news'='hacker-news',
-  'hackster'='hackster',
-  'hal'='hal',
-  'hand-lizard-o'='hand-lizard-o',
-  'hand-o-down'='hand-o-down',
-  'hand-o-left'='hand-o-left',
-  'hand-o-right'='hand-o-right',
-  'hand-o-up'='hand-o-up',
-  'hand-paper-o'='hand-paper-o',
-  'hand-peace-o'='hand-peace-o',
-  'hand-pointer-o'='hand-pointer-o',
-  'hand-rock-o'='hand-rock-o',
-  'hand-scissors-o'='hand-scissors-o',
-  'handshake-o'='handshake-o',
-  'hand-spock-o'='hand-spock-o',
-  'hashnode'='hashnode',
-  'hashtag'='hashtag',
-  'hdd-o'='hdd-o',
-  'header'='header',
-  'headphones'='headphones',
-  'heartbeat'='heartbeat',
-  'heart-o'='heart-o',
-  'heart'='heart',
-  'history'='history',
-  'home'='home',
-  'hospital-o'='hospital-o',
-  'hourglass-end'='hourglass-end',
-  'hourglass-half'='hourglass-half',
-  'hourglass-o'='hourglass-o',
-  'hourglass-start'='hourglass-start',
-  'hourglass'='hourglass',
-  'houzz'='houzz',
-  'h-square'='h-square',
-  'html5'='html5',
-  'hubzilla'='hubzilla',
-  'i-cursor'='i-cursor',
-  'id-badge'='id-badge',
-  'id-card-o'='id-card-o',
-  'id-card'='id-card',
-  'ils'='ils',
-  'imdb'='imdb',
-  'inbox'='inbox',
-  'indent'='indent',
-  'industry'='industry',
-  'info-circle'='info-circle',
-  'info'='info',
-  'inkscape'='inkscape',
-  'inr'='inr',
-  'instagram'='instagram',
-  'internet-explorer'='internet-explorer',
-  'ioxhost'='ioxhost',
-  'italic'='italic',
-  'jirafeau'='jirafeau',
-  'joomla'='joomla',
-  'joplin'='joplin',
-  'jpy'='jpy',
-  'jsfiddle'='jsfiddle',
-  'julia'='julia',
-  'jupyter'='jupyter',
-  'keybase'='keybase',
-  'keyboard-o'='keyboard-o',
-  'key-modern'='key-modern',
-  'key'='key',
-  'krw'='krw',
-  'language'='language',
-  'laptop'='laptop',
-  'laravel'='laravel',
-  'lastfm-square'='lastfm-square',
-  'lastfm'='lastfm',
-  'leaf'='leaf',
-  'leanpub'='leanpub',
-  'lemon-o'='lemon-o',
-  'level-down'='level-down',
-  'level-up'='level-up',
-  'liberapay-square'='liberapay-square',
-  'liberapay'='liberapay',
-  'life-ring'='life-ring',
-  'lightbulb-o'='lightbulb-o',
-  'line-chart'='line-chart',
-  'linkedin-square'='linkedin-square',
-  'linkedin'='linkedin',
-  'link'='link',
-  'linode'='linode',
-  'linux'='linux',
-  'list-alt'='list-alt',
-  'list-ol'='list-ol',
-  'list'='list',
-  'list-ul'='list-ul',
-  'location-arrow'='location-arrow',
-  'lock'='lock',
-  'long-arrow-down'='long-arrow-down',
-  'long-arrow-left'='long-arrow-left',
-  'long-arrow-right'='long-arrow-right',
-  'long-arrow-up'='long-arrow-up',
-  'low-vision'='low-vision',
-  'magic'='magic',
-  'magnet'='magnet',
-  'male'='male',
-  'map-marker'='map-marker',
-  'map-o'='map-o',
-  'map-pin'='map-pin',
-  'map-signs'='map-signs',
-  'map'='map',
-  'mars-double'='mars-double',
-  'mars-stroke-h'='mars-stroke-h',
-  'mars-stroke'='mars-stroke',
-  'mars-stroke-v'='mars-stroke-v',
-  'mars'='mars',
-  'mastodon-alt'='mastodon-alt',
-  'mastodon-square'='mastodon-square',
-  'mastodon'='mastodon',
-  'matrix-org'='matrix-org',
-  'maxcdn'='maxcdn',
-  'meanpath'='meanpath',
-  'medium-square'='medium-square',
-  'medium'='medium',
-  'medkit'='medkit',
-  'meetup'='meetup',
-  'meh-o'='meh-o',
-  'mercury'='mercury',
-  'microchip'='microchip',
-  'microphone-slash'='microphone-slash',
-  'microphone'='microphone',
-  'minus-circle'='minus-circle',
-  'minus-square-o'='minus-square-o',
-  'minus-square'='minus-square',
-  'minus'='minus',
-  'mixcloud'='mixcloud',
-  'mobile'='mobile',
-  'modx'='modx',
-  'money'='money',
-  'moon-o'='moon-o',
-  'moon'='moon',
-  'motorcycle'='motorcycle',
-  'mouse-pointer'='mouse-pointer',
-  'music'='music',
-  'neuter'='neuter',
-  'newspaper-o'='newspaper-o',
-  'nextcloud-square'='nextcloud-square',
-  'nextcloud'='nextcloud',
-  'nodejs'='nodejs',
-  'object-group'='object-group',
-  'object-ungroup'='object-ungroup',
-  'odnoklassniki-square'='odnoklassniki-square',
-  'odnoklassniki'='odnoklassniki',
-  'opencart'='opencart',
-  'open-collective'='open-collective',
-  'openid'='openid',
-  'opera'='opera',
-  'optin-monster'='optin-monster',
-  'orcid'='orcid',
-  'outdent'='outdent',
-  'pagelines'='pagelines',
-  'paint-brush'='paint-brush',
-  'paperclip'='paperclip',
-  'paper-plane-o'='paper-plane-o',
-  'paper-plane'='paper-plane',
-  'paragraph'='paragraph',
-  'patreon'='patreon',
-  'pause-circle-o'='pause-circle-o',
-  'pause-circle'='pause-circle',
-  'pause'='pause',
-  'paw'='paw',
-  'paypal'='paypal',
-  'peertube'='peertube',
-  'pencil-square-o'='pencil-square-o',
-  'pencil-square'='pencil-square',
-  'pencil'='pencil',
-  'percent'='percent',
-  'phone-square'='phone-square',
-  'phone'='phone',
-  'php'='php',
-  'picture-o'='picture-o',
-  'pie-chart'='pie-chart',
-  'pinterest-p'='pinterest-p',
-  'pinterest-square'='pinterest-square',
-  'pinterest'='pinterest',
-  'pixelfed'='pixelfed',
-  'plane'='plane',
-  'play-circle-o'='play-circle-o',
-  'play-circle'='play-circle',
-  'play'='play',
-  'pleroma'='pleroma',
-  'plug'='plug',
-  'plus-circle'='plus-circle',
-  'plus-square-o'='plus-square-o',
-  'plus-square'='plus-square',
-  'plus'='plus',
-  'podcast'='podcast',
-  'power-off'='power-off',
-  'print'='print',
-  'product-hunt'='product-hunt',
-  'puzzle-piece'='puzzle-piece',
-  'python'='python',
-  'qq'='qq',
-  'qrcode'='qrcode',
-  'question-circle-o'='question-circle-o',
-  'question-circle'='question-circle',
-  'question'='question',
-  'quora'='quora',
-  'quote-left'='quote-left',
-  'quote-right'='quote-right',
-  'random'='random',
-  'ravelry'='ravelry',
-  'react'='react',
-  'rebel'='rebel',
-  'recycle'='recycle',
-  'reddit-alien'='reddit-alien',
-  'reddit-square'='reddit-square',
-  'reddit'='reddit',
-  'refresh'='refresh',
-  'registered'='registered',
-  'renren'='renren',
-  'repeat'='repeat',
-  'reply-all'='reply-all',
-  'reply'='reply',
-  'researchgate'='researchgate',
-  'retweet'='retweet',
-  'road'='road',
-  'rocket'='rocket',
-  'rss-square'='rss-square',
-  'rss'='rss',
-  'rub'='rub',
-  'safari'='safari',
-  'scissors'='scissors',
-  'scribd'='scribd',
-  'scuttlebutt'='scuttlebutt',
-  'search-minus'='search-minus',
-  'search-plus'='search-plus',
-  'search'='search',
-  'sellsy'='sellsy',
-  'server'='server',
-  'shaarli-o'='shaarli-o',
-  'shaarli'='shaarli',
-  'share-alt-square'='share-alt-square',
-  'share-alt'='share-alt',
-  'share-square-o'='share-square-o',
-  'share-square'='share-square',
-  'share'='share',
-  'shield'='shield',
-  'ship'='ship',
-  'shirtsinbulk'='shirtsinbulk',
-  'shopping-bag'='shopping-bag',
-  'shopping-basket'='shopping-basket',
-  'shopping-cart'='shopping-cart',
-  'shower'='shower',
-  'signalapp'='signalapp',
-  'signal'='signal',
-  'sign-in'='sign-in',
-  'sign-language'='sign-language',
-  'sign-out'='sign-out',
-  'simplybuilt'='simplybuilt',
-  'sitemap'='sitemap',
-  'skyatlas'='skyatlas',
-  'skype'='skype',
-  'slack'='slack',
-  'sliders'='sliders',
-  'slideshare'='slideshare',
-  'smile-o'='smile-o',
-  'snapchat-ghost'='snapchat-ghost',
-  'snapchat-square'='snapchat-square',
-  'snapchat'='snapchat',
-  'snowdrift'='snowdrift',
-  'snowflake-o'='snowflake-o',
-  'social-home'='social-home',
-  'sort-alpha-asc'='sort-alpha-asc',
-  'sort-alpha-desc'='sort-alpha-desc',
-  'sort-amount-asc'='sort-amount-asc',
-  'sort-amount-desc'='sort-amount-desc',
-  'sort-asc'='sort-asc',
-  'sort-desc'='sort-desc',
-  'sort-numeric-asc'='sort-numeric-asc',
-  'sort-numeric-desc'='sort-numeric-desc',
-  'sort'='sort',
-  'soundcloud'='soundcloud',
-  'space-shuttle'='space-shuttle',
-  'spell-check'='spell-check',
-  'spinner'='spinner',
-  'spoon'='spoon',
-  'spotify'='spotify',
-  'square-o'='square-o',
-  'square'='square',
-  'stack-exchange'='stack-exchange',
-  'stack-overflow'='stack-overflow',
-  'star-half-o'='star-half-o',
-  'star-half'='star-half',
-  'star-o'='star-o',
-  'star'='star',
-  'steam-square'='steam-square',
-  'steam'='steam',
-  'step-backward'='step-backward',
-  'step-forward'='step-forward',
-  'stethoscope'='stethoscope',
-  'sticky-note-o'='sticky-note-o',
-  'sticky-note'='sticky-note',
-  'stop-circle-o'='stop-circle-o',
-  'stop-circle'='stop-circle',
-  'stop'='stop',
-  'street-view'='street-view',
-  'strikethrough'='strikethrough',
-  'stumbleupon-circle'='stumbleupon-circle',
-  'stumbleupon'='stumbleupon',
-  'subscript'='subscript',
-  'subway'='subway',
-  'suitcase'='suitcase',
-  'sun-o'='sun-o',
-  'sun'='sun',
-  'superpowers'='superpowers',
-  'superscript'='superscript',
-  'syncthing'='syncthing',
-  'table'='table',
-  'tablet'='tablet',
-  'tachometer'='tachometer',
-  'tags'='tags',
-  'tag'='tag',
-  'tasks'='tasks',
-  'taxi'='taxi',
-  'telegram'='telegram',
-  'television'='television',
-  'tencent-weibo'='tencent-weibo',
-  'terminal'='terminal',
-  'text-height'='text-height',
-  'text-width'='text-width',
-  'themeisle'='themeisle',
-  'thermometer-empty'='thermometer-empty',
-  'thermometer-full'='thermometer-full',
-  'thermometer-half'='thermometer-half',
-  'thermometer-quarter'='thermometer-quarter',
-  'thermometer-three-quarters'='thermometer-three-quarters',
-  'th-large'='th-large',
-  'th-list'='th-list',
-  'th'='th',
-  'thumbs-down'='thumbs-down',
-  'thumbs-o-down'='thumbs-o-down',
-  'thumbs-o-up'='thumbs-o-up',
-  'thumbs-up'='thumbs-up',
-  'thumb-tack'='thumb-tack',
-  'ticket'='ticket',
-  'times-circle-o'='times-circle-o',
-  'times-circle'='times-circle',
-  'times'='times',
-  'tint'='tint',
-  'tipeee'='tipeee',
-  'toggle-off'='toggle-off',
-  'toggle-on'='toggle-on',
-  'tor-onion'='tor-onion',
-  'trademark'='trademark',
-  'train'='train',
-  'transgender-alt'='transgender-alt',
-  'transgender'='transgender',
-  'trash-o'='trash-o',
-  'trash'='trash',
-  'tree'='tree',
-  'trello'='trello',
-  'tripadvisor'='tripadvisor',
-  'trophy'='trophy',
-  'truck'='truck',
-  'try'='try',
-  'tty'='tty',
-  'tumblr-square'='tumblr-square',
-  'tumblr'='tumblr',
-  'twitch'='twitch',
-  'twitter-square'='twitter-square',
-  'twitter'='twitter',
-  'umbrella'='umbrella',
-  'underline'='underline',
-  'undo'='undo',
-  'universal-access'='universal-access',
-  'university'='university',
-  'unlock-alt'='unlock-alt',
-  'unlock'='unlock',
-  'unslpash'='unslpash',
-  'upload'='upload',
-  'usb'='usb',
-  'usd'='usd',
-  'user-circle-o'='user-circle-o',
-  'user-circle'='user-circle',
-  'user-md'='user-md',
-  'user-o'='user-o',
-  'user-plus'='user-plus',
-  'user-secret'='user-secret',
-  'users'='users',
-  'user'='user',
-  'user-times'='user-times',
-  'venus-double'='venus-double',
-  'venus-mars'='venus-mars',
-  'venus'='venus',
-  'viacoin'='viacoin',
-  'viadeo-square'='viadeo-square',
-  'viadeo'='viadeo',
-  'video-camera'='video-camera',
-  'vimeo-square'='vimeo-square',
-  'vimeo'='vimeo',
-  'vine'='vine',
-  'vk'='vk',
-  'volume-control-phone'='volume-control-phone',
-  'volume-down'='volume-down',
-  'volume-mute'='volume-mute',
-  'volume-off'='volume-off',
-  'volume-up'='volume-up',
-  'weibo'='weibo',
-  'weixin'='weixin',
-  'whatsapp'='whatsapp',
-  'wheelchair-alt'='wheelchair-alt',
-  'wheelchair'='wheelchair',
-  'wifi'='wifi',
-  'wikidata'='wikidata',
-  'wikipedia-w'='wikipedia-w',
-  'window-close-o'='window-close-o',
-  'window-close'='window-close',
-  'window-maximize'='window-maximize',
-  'window-minimize'='window-minimize',
-  'window-restore'='window-restore',
-  'windows'='windows',
-  'wire'='wire',
-  'wordpress'='wordpress',
-  'wpbeginner'='wpbeginner',
-  'wpexplorer'='wpexplorer',
-  'wpforms'='wpforms',
-  'wrench'='wrench',
-  'xing-square'='xing-square',
-  'xing'='xing',
-  'xmpp'='xmpp',
-  'yahoo'='yahoo',
-  'y-combinator'='y-combinator',
-  'yelp'='yelp',
-  'yoast'='yoast',
-  'youtube-play'='youtube-play',
-  'youtube-square'='youtube-square',
-  'youtube'='youtube',
-  'zotero'='zotero'
+  '500px' = '500px',
+  'activitypub' = 'activitypub',
+  'address-book-o' = 'address-book-o',
+  'address-book' = 'address-book',
+  'address-card-o' = 'address-card-o',
+  'address-card' = 'address-card',
+  'adjust' = 'adjust',
+  'adn' = 'adn',
+  'align-center' = 'align-center',
+  'align-justify' = 'align-justify',
+  'align-left' = 'align-left',
+  'align-right' = 'align-right',
+  'amazon' = 'amazon',
+  'ambulance' = 'ambulance',
+  'american-sign-language-interpreting' = 'american-sign-language-interpreting',
+  'anchor' = 'anchor',
+  'android' = 'android',
+  'angellist' = 'angellist',
+  'angle-double-down' = 'angle-double-down',
+  'angle-double-left' = 'angle-double-left',
+  'angle-double-right' = 'angle-double-right',
+  'angle-double-up' = 'angle-double-up',
+  'angle-down' = 'angle-down',
+  'angle-left' = 'angle-left',
+  'angle-right' = 'angle-right',
+  'angle-up' = 'angle-up',
+  'apple' = 'apple',
+  'archive-org' = 'archive-org',
+  'archive' = 'archive',
+  'archlinux' = 'archlinux',
+  'area-chart' = 'area-chart',
+  'arrow-circle-down' = 'arrow-circle-down',
+  'arrow-circle-left' = 'arrow-circle-left',
+  'arrow-circle-o-down' = 'arrow-circle-o-down',
+  'arrow-circle-o-left' = 'arrow-circle-o-left',
+  'arrow-circle-o-right' = 'arrow-circle-o-right',
+  'arrow-circle-o-up' = 'arrow-circle-o-up',
+  'arrow-circle-right' = 'arrow-circle-right',
+  'arrow-circle-up' = 'arrow-circle-up',
+  'arrow-down' = 'arrow-down',
+  'arrow-left' = 'arrow-left',
+  'arrow-right' = 'arrow-right',
+  'arrows-alt' = 'arrows-alt',
+  'arrows-h' = 'arrows-h',
+  'arrows' = 'arrows',
+  'arrows-v' = 'arrows-v',
+  'arrow-up' = 'arrow-up',
+  'artstation' = 'artstation',
+  'assistive-listening-systems' = 'assistive-listening-systems',
+  'asterisk' = 'asterisk',
+  'at' = 'at',
+  'att' = 'att',
+  'audio-description' = 'audio-description',
+  'backward' = 'backward',
+  'balance-scale' = 'balance-scale',
+  'bandcamp' = 'bandcamp',
+  'ban' = 'ban',
+  'bar-chart' = 'bar-chart',
+  'barcode' = 'barcode',
+  'bars' = 'bars',
+  'bath' = 'bath',
+  'battery-empty' = 'battery-empty',
+  'battery-full' = 'battery-full',
+  'battery-half' = 'battery-half',
+  'battery-quarter' = 'battery-quarter',
+  'battery-three-quarters' = 'battery-three-quarters',
+  'bed' = 'bed',
+  'beer' = 'beer',
+  'behance-square' = 'behance-square',
+  'behance' = 'behance',
+  'bell-o' = 'bell-o',
+  'bell-rigning-o' = 'bell-rigning-o',
+  'bell-ringing' = 'bell-ringing',
+  'bell-slash-o' = 'bell-slash-o',
+  'bell-slash' = 'bell-slash',
+  'bell' = 'bell',
+  'bicycle' = 'bicycle',
+  'binoculars' = 'binoculars',
+  'biometric' = 'biometric',
+  'birthday-cake' = 'birthday-cake',
+  'bitbucket-square' = 'bitbucket-square',
+  'bitbucket' = 'bitbucket',
+  'black-tie' = 'black-tie',
+  'blind' = 'blind',
+  'bluetooth-b' = 'bluetooth-b',
+  'bluetooth' = 'bluetooth',
+  'bold' = 'bold',
+  'bolt' = 'bolt',
+  'bomb' = 'bomb',
+  'bookmark-o' = 'bookmark-o',
+  'bookmark' = 'bookmark',
+  'book' = 'book',
+  'bootstrap' = 'bootstrap',
+  'braille' = 'braille',
+  'briefcase' = 'briefcase',
+  'btc' = 'btc',
+  'bug' = 'bug',
+  'building-o' = 'building-o',
+  'building' = 'building',
+  'bullhorn' = 'bullhorn',
+  'bullseye' = 'bullseye',
+  'bus' = 'bus',
+  'buysellads' = 'buysellads',
+  'calculator' = 'calculator',
+  'calendar-check-o' = 'calendar-check-o',
+  'calendar-minus-o' = 'calendar-minus-o',
+  'calendar-o' = 'calendar-o',
+  'calendar-plus-o' = 'calendar-plus-o',
+  'calendar' = 'calendar',
+  'calendar-times-o' = 'calendar-times-o',
+  'camera-retro' = 'camera-retro',
+  'camera' = 'camera',
+  'caret-down' = 'caret-down',
+  'caret-left' = 'caret-left',
+  'caret-right' = 'caret-right',
+  'caret-square-o-down' = 'caret-square-o-down',
+  'caret-square-o-left' = 'caret-square-o-left',
+  'caret-square-o-right' = 'caret-square-o-right',
+  'caret-square-o-up' = 'caret-square-o-up',
+  'caret-up' = 'caret-up',
+  'car' = 'car',
+  'cart-arrow-down' = 'cart-arrow-down',
+  'cart-plus' = 'cart-plus',
+  'cc-amex' = 'cc-amex',
+  'cc-diners-club' = 'cc-diners-club',
+  'cc-discover' = 'cc-discover',
+  'cc-jcb' = 'cc-jcb',
+  'cc-mastercard' = 'cc-mastercard',
+  'cc-paypal' = 'cc-paypal',
+  'cc-stripe' = 'cc-stripe',
+  'cc' = 'cc',
+  'cc-visa' = 'cc-visa',
+  'certificate' = 'certificate',
+  'chain-broken' = 'chain-broken',
+  'check-circle-o' = 'check-circle-o',
+  'check-circle' = 'check-circle',
+  'check-square-o' = 'check-square-o',
+  'check-square' = 'check-square',
+  'check' = 'check',
+  'chevron-circle-down' = 'chevron-circle-down',
+  'chevron-circle-left' = 'chevron-circle-left',
+  'chevron-circle-right' = 'chevron-circle-right',
+  'chevron-circle-up' = 'chevron-circle-up',
+  'chevron-down' = 'chevron-down',
+  'chevron-left' = 'chevron-left',
+  'chevron-right' = 'chevron-right',
+  'chevron-up' = 'chevron-up',
+  'child' = 'child',
+  'chrome' = 'chrome',
+  'circle-o-notch' = 'circle-o-notch',
+  'circle-o' = 'circle-o',
+  'circle' = 'circle',
+  'circle-thin' = 'circle-thin',
+  'classicpress-circle' = 'classicpress-circle',
+  'classicpress' = 'classicpress',
+  'clipboard' = 'clipboard',
+  'clock-o' = 'clock-o',
+  'clone' = 'clone',
+  'cloud-download' = 'cloud-download',
+  'cloud' = 'cloud',
+  'cloud-upload' = 'cloud-upload',
+  'code-fork' = 'code-fork',
+  'codepen' = 'codepen',
+  'code' = 'code',
+  'codiepie' = 'codiepie',
+  'coffee' = 'coffee',
+  'cogs' = 'cogs',
+  'cog' = 'cog',
+  'columns' = 'columns',
+  'commenting-o' = 'commenting-o',
+  'commenting' = 'commenting',
+  'comment-o' = 'comment-o',
+  'comments-o' = 'comments-o',
+  'comments' = 'comments',
+  'comment' = 'comment',
+  'compass' = 'compass',
+  'compress' = 'compress',
+  'connectdevelop' = 'connectdevelop',
+  'contao' = 'contao',
+  'copyright' = 'copyright',
+  'creative-commons' = 'creative-commons',
+  'credit-card-alt' = 'credit-card-alt',
+  'credit-card' = 'credit-card',
+  'crop' = 'crop',
+  'crosshairs' = 'crosshairs',
+  'css3' = 'css3',
+  'c' = 'c',
+  'cubes' = 'cubes',
+  'cube' = 'cube',
+  'cutlery' = 'cutlery',
+  'dashcube' = 'dashcube',
+  'database' = 'database',
+  'deaf' = 'deaf',
+  'debian' = 'debian',
+  'delicious' = 'delicious',
+  'desktop' = 'desktop',
+  'deviantart' = 'deviantart',
+  'dev-to' = 'dev-to',
+  'diamond' = 'diamond',
+  'diaspora' = 'diaspora',
+  'digg' = 'digg',
+  'digitalocean' = 'digitalocean',
+  'discord-alt' = 'discord-alt',
+  'discord' = 'discord',
+  'dogmazic' = 'dogmazic',
+  'dot-circle-o' = 'dot-circle-o',
+  'download' = 'download',
+  'dribbble' = 'dribbble',
+  'dropbox' = 'dropbox',
+  'drupal' = 'drupal',
+  'edge' = 'edge',
+  'eercast' = 'eercast',
+  'eject' = 'eject',
+  'ellipsis-h' = 'ellipsis-h',
+  'ellipsis-v' = 'ellipsis-v',
+  'emby' = 'emby',
+  'empire' = 'empire',
+  'envelope-open-o' = 'envelope-open-o',
+  'envelope-open' = 'envelope-open',
+  'envelope-o' = 'envelope-o',
+  'envelope-square' = 'envelope-square',
+  'envelope' = 'envelope',
+  'envira' = 'envira',
+  'eraser' = 'eraser',
+  'ethereum' = 'ethereum',
+  'etsy' = 'etsy',
+  'eur' = 'eur',
+  'exchange' = 'exchange',
+  'exclamation-circle' = 'exclamation-circle',
+  'exclamation' = 'exclamation',
+  'exclamation-triangle' = 'exclamation-triangle',
+  'expand' = 'expand',
+  'expeditedssl' = 'expeditedssl',
+  'external-link-square' = 'external-link-square',
+  'external-link' = 'external-link',
+  'eyedropper' = 'eyedropper',
+  'eye-slash' = 'eye-slash',
+  'eye' = 'eye',
+  'facebook-messenger' = 'facebook-messenger',
+  'facebook-official' = 'facebook-official',
+  'facebook-square' = 'facebook-square',
+  'facebook' = 'facebook',
+  'fast-backward' = 'fast-backward',
+  'fast-forward' = 'fast-forward',
+  'fax' = 'fax',
+  'f-droid' = 'f-droid',
+  'female' = 'female',
+  'ffmpeg' = 'ffmpeg',
+  'fighter-jet' = 'fighter-jet',
+  'file-archive-o' = 'file-archive-o',
+  'file-audio-o' = 'file-audio-o',
+  'file-code-o' = 'file-code-o',
+  'file-epub' = 'file-epub',
+  'file-excel-o' = 'file-excel-o',
+  'file-image-o' = 'file-image-o',
+  'file-o' = 'file-o',
+  'file-pdf-o' = 'file-pdf-o',
+  'file-powerpoint-o' = 'file-powerpoint-o',
+  'files-o' = 'files-o',
+  'file' = 'file',
+  'file-text-o' = 'file-text-o',
+  'file-text' = 'file-text',
+  'file-video-o' = 'file-video-o',
+  'file-word-o' = 'file-word-o',
+  'film' = 'film',
+  'filter' = 'filter',
+  'fire-extinguisher' = 'fire-extinguisher',
+  'firefox' = 'firefox',
+  'fire' = 'fire',
+  'first-order' = 'first-order',
+  'flag-checkered' = 'flag-checkered',
+  'flag-o' = 'flag-o',
+  'flag' = 'flag',
+  'flask' = 'flask',
+  'flickr' = 'flickr',
+  'floppy-o' = 'floppy-o',
+  'folder-open-o' = 'folder-open-o',
+  'folder-open' = 'folder-open',
+  'folder-o' = 'folder-o',
+  'folder' = 'folder',
+  'font-awesome' = 'font-awesome',
+  'fonticons' = 'fonticons',
+  'font' = 'font',
+  'fork-awesome' = 'fork-awesome',
+  'fort-awesome' = 'fort-awesome',
+  'forumbee' = 'forumbee',
+  'forward' = 'forward',
+  'foursquare' = 'foursquare',
+  'free-code-camp' = 'free-code-camp',
+  'freedombox' = 'freedombox',
+  'friendica' = 'friendica',
+  'frown-o' = 'frown-o',
+  'funkwhale' = 'funkwhale',
+  'futbol-o' = 'futbol-o',
+  'gamepad' = 'gamepad',
+  'gavel' = 'gavel',
+  'gbp' = 'gbp',
+  'genderless' = 'genderless',
+  'get-pocket' = 'get-pocket',
+  'gg-circle' = 'gg-circle',
+  'gg' = 'gg',
+  'gift' = 'gift',
+  'gimp' = 'gimp',
+  'gitea' = 'gitea',
+  'github-alt' = 'github-alt',
+  'github-square' = 'github-square',
+  'github' = 'github',
+  'gitlab' = 'gitlab',
+  'git-square' = 'git-square',
+  'git' = 'git',
+  'glass' = 'glass',
+  'glide-g' = 'glide-g',
+  'glide' = 'glide',
+  'globe-e' = 'globe-e',
+  'globe' = 'globe',
+  'globe-w' = 'globe-w',
+  'gnupg' = 'gnupg',
+  'gnu-social' = 'gnu-social',
+  'google-plus-official' = 'google-plus-official',
+  'google-plus-square' = 'google-plus-square',
+  'google-plus' = 'google-plus',
+  'google' = 'google',
+  'google-wallet' = 'google-wallet',
+  'graduation-cap' = 'graduation-cap',
+  'gratipay' = 'gratipay',
+  'grav' = 'grav',
+  'hackaday' = 'hackaday',
+  'hacker-news' = 'hacker-news',
+  'hackster' = 'hackster',
+  'hal' = 'hal',
+  'hand-lizard-o' = 'hand-lizard-o',
+  'hand-o-down' = 'hand-o-down',
+  'hand-o-left' = 'hand-o-left',
+  'hand-o-right' = 'hand-o-right',
+  'hand-o-up' = 'hand-o-up',
+  'hand-paper-o' = 'hand-paper-o',
+  'hand-peace-o' = 'hand-peace-o',
+  'hand-pointer-o' = 'hand-pointer-o',
+  'hand-rock-o' = 'hand-rock-o',
+  'hand-scissors-o' = 'hand-scissors-o',
+  'handshake-o' = 'handshake-o',
+  'hand-spock-o' = 'hand-spock-o',
+  'hashnode' = 'hashnode',
+  'hashtag' = 'hashtag',
+  'hdd-o' = 'hdd-o',
+  'header' = 'header',
+  'headphones' = 'headphones',
+  'heartbeat' = 'heartbeat',
+  'heart-o' = 'heart-o',
+  'heart' = 'heart',
+  'history' = 'history',
+  'home' = 'home',
+  'hospital-o' = 'hospital-o',
+  'hourglass-end' = 'hourglass-end',
+  'hourglass-half' = 'hourglass-half',
+  'hourglass-o' = 'hourglass-o',
+  'hourglass-start' = 'hourglass-start',
+  'hourglass' = 'hourglass',
+  'houzz' = 'houzz',
+  'h-square' = 'h-square',
+  'html5' = 'html5',
+  'hubzilla' = 'hubzilla',
+  'i-cursor' = 'i-cursor',
+  'id-badge' = 'id-badge',
+  'id-card-o' = 'id-card-o',
+  'id-card' = 'id-card',
+  'ils' = 'ils',
+  'imdb' = 'imdb',
+  'inbox' = 'inbox',
+  'indent' = 'indent',
+  'industry' = 'industry',
+  'info-circle' = 'info-circle',
+  'info' = 'info',
+  'inkscape' = 'inkscape',
+  'inr' = 'inr',
+  'instagram' = 'instagram',
+  'internet-explorer' = 'internet-explorer',
+  'ioxhost' = 'ioxhost',
+  'italic' = 'italic',
+  'jirafeau' = 'jirafeau',
+  'joomla' = 'joomla',
+  'joplin' = 'joplin',
+  'jpy' = 'jpy',
+  'jsfiddle' = 'jsfiddle',
+  'julia' = 'julia',
+  'jupyter' = 'jupyter',
+  'keybase' = 'keybase',
+  'keyboard-o' = 'keyboard-o',
+  'key-modern' = 'key-modern',
+  'key' = 'key',
+  'krw' = 'krw',
+  'language' = 'language',
+  'laptop' = 'laptop',
+  'laravel' = 'laravel',
+  'lastfm-square' = 'lastfm-square',
+  'lastfm' = 'lastfm',
+  'leaf' = 'leaf',
+  'leanpub' = 'leanpub',
+  'lemon-o' = 'lemon-o',
+  'level-down' = 'level-down',
+  'level-up' = 'level-up',
+  'liberapay-square' = 'liberapay-square',
+  'liberapay' = 'liberapay',
+  'life-ring' = 'life-ring',
+  'lightbulb-o' = 'lightbulb-o',
+  'line-chart' = 'line-chart',
+  'linkedin-square' = 'linkedin-square',
+  'linkedin' = 'linkedin',
+  'link' = 'link',
+  'linode' = 'linode',
+  'linux' = 'linux',
+  'list-alt' = 'list-alt',
+  'list-ol' = 'list-ol',
+  'list' = 'list',
+  'list-ul' = 'list-ul',
+  'location-arrow' = 'location-arrow',
+  'lock' = 'lock',
+  'long-arrow-down' = 'long-arrow-down',
+  'long-arrow-left' = 'long-arrow-left',
+  'long-arrow-right' = 'long-arrow-right',
+  'long-arrow-up' = 'long-arrow-up',
+  'low-vision' = 'low-vision',
+  'magic' = 'magic',
+  'magnet' = 'magnet',
+  'male' = 'male',
+  'map-marker' = 'map-marker',
+  'map-o' = 'map-o',
+  'map-pin' = 'map-pin',
+  'map-signs' = 'map-signs',
+  'map' = 'map',
+  'mars-double' = 'mars-double',
+  'mars-stroke-h' = 'mars-stroke-h',
+  'mars-stroke' = 'mars-stroke',
+  'mars-stroke-v' = 'mars-stroke-v',
+  'mars' = 'mars',
+  'mastodon-alt' = 'mastodon-alt',
+  'mastodon-square' = 'mastodon-square',
+  'mastodon' = 'mastodon',
+  'matrix-org' = 'matrix-org',
+  'maxcdn' = 'maxcdn',
+  'meanpath' = 'meanpath',
+  'medium-square' = 'medium-square',
+  'medium' = 'medium',
+  'medkit' = 'medkit',
+  'meetup' = 'meetup',
+  'meh-o' = 'meh-o',
+  'mercury' = 'mercury',
+  'microchip' = 'microchip',
+  'microphone-slash' = 'microphone-slash',
+  'microphone' = 'microphone',
+  'minus-circle' = 'minus-circle',
+  'minus-square-o' = 'minus-square-o',
+  'minus-square' = 'minus-square',
+  'minus' = 'minus',
+  'mixcloud' = 'mixcloud',
+  'mobile' = 'mobile',
+  'modx' = 'modx',
+  'money' = 'money',
+  'moon-o' = 'moon-o',
+  'moon' = 'moon',
+  'motorcycle' = 'motorcycle',
+  'mouse-pointer' = 'mouse-pointer',
+  'music' = 'music',
+  'neuter' = 'neuter',
+  'newspaper-o' = 'newspaper-o',
+  'nextcloud-square' = 'nextcloud-square',
+  'nextcloud' = 'nextcloud',
+  'nodejs' = 'nodejs',
+  'object-group' = 'object-group',
+  'object-ungroup' = 'object-ungroup',
+  'odnoklassniki-square' = 'odnoklassniki-square',
+  'odnoklassniki' = 'odnoklassniki',
+  'opencart' = 'opencart',
+  'open-collective' = 'open-collective',
+  'openid' = 'openid',
+  'opera' = 'opera',
+  'optin-monster' = 'optin-monster',
+  'orcid' = 'orcid',
+  'outdent' = 'outdent',
+  'pagelines' = 'pagelines',
+  'paint-brush' = 'paint-brush',
+  'paperclip' = 'paperclip',
+  'paper-plane-o' = 'paper-plane-o',
+  'paper-plane' = 'paper-plane',
+  'paragraph' = 'paragraph',
+  'patreon' = 'patreon',
+  'pause-circle-o' = 'pause-circle-o',
+  'pause-circle' = 'pause-circle',
+  'pause' = 'pause',
+  'paw' = 'paw',
+  'paypal' = 'paypal',
+  'peertube' = 'peertube',
+  'pencil-square-o' = 'pencil-square-o',
+  'pencil-square' = 'pencil-square',
+  'pencil' = 'pencil',
+  'percent' = 'percent',
+  'phone-square' = 'phone-square',
+  'phone' = 'phone',
+  'php' = 'php',
+  'picture-o' = 'picture-o',
+  'pie-chart' = 'pie-chart',
+  'pinterest-p' = 'pinterest-p',
+  'pinterest-square' = 'pinterest-square',
+  'pinterest' = 'pinterest',
+  'pixelfed' = 'pixelfed',
+  'plane' = 'plane',
+  'play-circle-o' = 'play-circle-o',
+  'play-circle' = 'play-circle',
+  'play' = 'play',
+  'pleroma' = 'pleroma',
+  'plug' = 'plug',
+  'plus-circle' = 'plus-circle',
+  'plus-square-o' = 'plus-square-o',
+  'plus-square' = 'plus-square',
+  'plus' = 'plus',
+  'podcast' = 'podcast',
+  'power-off' = 'power-off',
+  'print' = 'print',
+  'product-hunt' = 'product-hunt',
+  'puzzle-piece' = 'puzzle-piece',
+  'python' = 'python',
+  'qq' = 'qq',
+  'qrcode' = 'qrcode',
+  'question-circle-o' = 'question-circle-o',
+  'question-circle' = 'question-circle',
+  'question' = 'question',
+  'quora' = 'quora',
+  'quote-left' = 'quote-left',
+  'quote-right' = 'quote-right',
+  'random' = 'random',
+  'ravelry' = 'ravelry',
+  'react' = 'react',
+  'rebel' = 'rebel',
+  'recycle' = 'recycle',
+  'reddit-alien' = 'reddit-alien',
+  'reddit-square' = 'reddit-square',
+  'reddit' = 'reddit',
+  'refresh' = 'refresh',
+  'registered' = 'registered',
+  'renren' = 'renren',
+  'repeat' = 'repeat',
+  'reply-all' = 'reply-all',
+  'reply' = 'reply',
+  'researchgate' = 'researchgate',
+  'retweet' = 'retweet',
+  'road' = 'road',
+  'rocket' = 'rocket',
+  'rss-square' = 'rss-square',
+  'rss' = 'rss',
+  'rub' = 'rub',
+  'safari' = 'safari',
+  'scissors' = 'scissors',
+  'scribd' = 'scribd',
+  'scuttlebutt' = 'scuttlebutt',
+  'search-minus' = 'search-minus',
+  'search-plus' = 'search-plus',
+  'search' = 'search',
+  'sellsy' = 'sellsy',
+  'server' = 'server',
+  'shaarli-o' = 'shaarli-o',
+  'shaarli' = 'shaarli',
+  'share-alt-square' = 'share-alt-square',
+  'share-alt' = 'share-alt',
+  'share-square-o' = 'share-square-o',
+  'share-square' = 'share-square',
+  'share' = 'share',
+  'shield' = 'shield',
+  'ship' = 'ship',
+  'shirtsinbulk' = 'shirtsinbulk',
+  'shopping-bag' = 'shopping-bag',
+  'shopping-basket' = 'shopping-basket',
+  'shopping-cart' = 'shopping-cart',
+  'shower' = 'shower',
+  'signalapp' = 'signalapp',
+  'signal' = 'signal',
+  'sign-in' = 'sign-in',
+  'sign-language' = 'sign-language',
+  'sign-out' = 'sign-out',
+  'simplybuilt' = 'simplybuilt',
+  'sitemap' = 'sitemap',
+  'skyatlas' = 'skyatlas',
+  'skype' = 'skype',
+  'slack' = 'slack',
+  'sliders' = 'sliders',
+  'slideshare' = 'slideshare',
+  'smile-o' = 'smile-o',
+  'snapchat-ghost' = 'snapchat-ghost',
+  'snapchat-square' = 'snapchat-square',
+  'snapchat' = 'snapchat',
+  'snowdrift' = 'snowdrift',
+  'snowflake-o' = 'snowflake-o',
+  'social-home' = 'social-home',
+  'sort-alpha-asc' = 'sort-alpha-asc',
+  'sort-alpha-desc' = 'sort-alpha-desc',
+  'sort-amount-asc' = 'sort-amount-asc',
+  'sort-amount-desc' = 'sort-amount-desc',
+  'sort-asc' = 'sort-asc',
+  'sort-desc' = 'sort-desc',
+  'sort-numeric-asc' = 'sort-numeric-asc',
+  'sort-numeric-desc' = 'sort-numeric-desc',
+  'sort' = 'sort',
+  'soundcloud' = 'soundcloud',
+  'space-shuttle' = 'space-shuttle',
+  'spell-check' = 'spell-check',
+  'spinner' = 'spinner',
+  'spoon' = 'spoon',
+  'spotify' = 'spotify',
+  'square-o' = 'square-o',
+  'square' = 'square',
+  'stack-exchange' = 'stack-exchange',
+  'stack-overflow' = 'stack-overflow',
+  'star-half-o' = 'star-half-o',
+  'star-half' = 'star-half',
+  'star-o' = 'star-o',
+  'star' = 'star',
+  'steam-square' = 'steam-square',
+  'steam' = 'steam',
+  'step-backward' = 'step-backward',
+  'step-forward' = 'step-forward',
+  'stethoscope' = 'stethoscope',
+  'sticky-note-o' = 'sticky-note-o',
+  'sticky-note' = 'sticky-note',
+  'stop-circle-o' = 'stop-circle-o',
+  'stop-circle' = 'stop-circle',
+  'stop' = 'stop',
+  'street-view' = 'street-view',
+  'strikethrough' = 'strikethrough',
+  'stumbleupon-circle' = 'stumbleupon-circle',
+  'stumbleupon' = 'stumbleupon',
+  'subscript' = 'subscript',
+  'subway' = 'subway',
+  'suitcase' = 'suitcase',
+  'sun-o' = 'sun-o',
+  'sun' = 'sun',
+  'superpowers' = 'superpowers',
+  'superscript' = 'superscript',
+  'syncthing' = 'syncthing',
+  'table' = 'table',
+  'tablet' = 'tablet',
+  'tachometer' = 'tachometer',
+  'tags' = 'tags',
+  'tag' = 'tag',
+  'tasks' = 'tasks',
+  'taxi' = 'taxi',
+  'telegram' = 'telegram',
+  'television' = 'television',
+  'tencent-weibo' = 'tencent-weibo',
+  'terminal' = 'terminal',
+  'text-height' = 'text-height',
+  'text-width' = 'text-width',
+  'themeisle' = 'themeisle',
+  'thermometer-empty' = 'thermometer-empty',
+  'thermometer-full' = 'thermometer-full',
+  'thermometer-half' = 'thermometer-half',
+  'thermometer-quarter' = 'thermometer-quarter',
+  'thermometer-three-quarters' = 'thermometer-three-quarters',
+  'th-large' = 'th-large',
+  'th-list' = 'th-list',
+  'th' = 'th',
+  'thumbs-down' = 'thumbs-down',
+  'thumbs-o-down' = 'thumbs-o-down',
+  'thumbs-o-up' = 'thumbs-o-up',
+  'thumbs-up' = 'thumbs-up',
+  'thumb-tack' = 'thumb-tack',
+  'ticket' = 'ticket',
+  'times-circle-o' = 'times-circle-o',
+  'times-circle' = 'times-circle',
+  'times' = 'times',
+  'tint' = 'tint',
+  'tipeee' = 'tipeee',
+  'toggle-off' = 'toggle-off',
+  'toggle-on' = 'toggle-on',
+  'tor-onion' = 'tor-onion',
+  'trademark' = 'trademark',
+  'train' = 'train',
+  'transgender-alt' = 'transgender-alt',
+  'transgender' = 'transgender',
+  'trash-o' = 'trash-o',
+  'trash' = 'trash',
+  'tree' = 'tree',
+  'trello' = 'trello',
+  'tripadvisor' = 'tripadvisor',
+  'trophy' = 'trophy',
+  'truck' = 'truck',
+  'try' = 'try',
+  'tty' = 'tty',
+  'tumblr-square' = 'tumblr-square',
+  'tumblr' = 'tumblr',
+  'twitch' = 'twitch',
+  'twitter-square' = 'twitter-square',
+  'twitter' = 'twitter',
+  'umbrella' = 'umbrella',
+  'underline' = 'underline',
+  'undo' = 'undo',
+  'universal-access' = 'universal-access',
+  'university' = 'university',
+  'unlock-alt' = 'unlock-alt',
+  'unlock' = 'unlock',
+  'unslpash' = 'unslpash',
+  'upload' = 'upload',
+  'usb' = 'usb',
+  'usd' = 'usd',
+  'user-circle-o' = 'user-circle-o',
+  'user-circle' = 'user-circle',
+  'user-md' = 'user-md',
+  'user-o' = 'user-o',
+  'user-plus' = 'user-plus',
+  'user-secret' = 'user-secret',
+  'users' = 'users',
+  'user' = 'user',
+  'user-times' = 'user-times',
+  'venus-double' = 'venus-double',
+  'venus-mars' = 'venus-mars',
+  'venus' = 'venus',
+  'viacoin' = 'viacoin',
+  'viadeo-square' = 'viadeo-square',
+  'viadeo' = 'viadeo',
+  'video-camera' = 'video-camera',
+  'vimeo-square' = 'vimeo-square',
+  'vimeo' = 'vimeo',
+  'vine' = 'vine',
+  'vk' = 'vk',
+  'volume-control-phone' = 'volume-control-phone',
+  'volume-down' = 'volume-down',
+  'volume-mute' = 'volume-mute',
+  'volume-off' = 'volume-off',
+  'volume-up' = 'volume-up',
+  'weibo' = 'weibo',
+  'weixin' = 'weixin',
+  'whatsapp' = 'whatsapp',
+  'wheelchair-alt' = 'wheelchair-alt',
+  'wheelchair' = 'wheelchair',
+  'wifi' = 'wifi',
+  'wikidata' = 'wikidata',
+  'wikipedia-w' = 'wikipedia-w',
+  'window-close-o' = 'window-close-o',
+  'window-close' = 'window-close',
+  'window-maximize' = 'window-maximize',
+  'window-minimize' = 'window-minimize',
+  'window-restore' = 'window-restore',
+  'windows' = 'windows',
+  'wire' = 'wire',
+  'wordpress' = 'wordpress',
+  'wpbeginner' = 'wpbeginner',
+  'wpexplorer' = 'wpexplorer',
+  'wpforms' = 'wpforms',
+  'wrench' = 'wrench',
+  'xing-square' = 'xing-square',
+  'xing' = 'xing',
+  'xmpp' = 'xmpp',
+  'yahoo' = 'yahoo',
+  'y-combinator' = 'y-combinator',
+  'yelp' = 'yelp',
+  'yoast' = 'yoast',
+  'youtube-play' = 'youtube-play',
+  'youtube-square' = 'youtube-square',
+  'youtube' = 'youtube',
+  'zotero' = 'zotero'
 }
diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx b/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
index 3850a7c64..907f104d7 100644
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
@@ -38,42 +38,42 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
 
   return (
     <CommonModal
-      show={showModal}
-      onHide={() => onDismiss()}
-      titleI18nKey={'editor.editorToolbar.table.customSize'}
-      closeButton={true}
-      icon={'table'}>
-      <div className={'col-lg-10 d-flex flex-row p-3 align-items-center'}>
+      show={ showModal }
+      onHide={ () => onDismiss() }
+      titleI18nKey={ 'editor.editorToolbar.table.customSize' }
+      closeButton={ true }
+      icon={ 'table' }>
+      <div className={ 'col-lg-10 d-flex flex-row p-3 align-items-center' }>
         <Form.Control
-          type={'number'}
-          min={1}
-          placeholder={t('editor.editorToolbar.table.cols')}
-          isInvalid={tableSize.columns <= 0}
-          onChange={(event) => {
+          type={ 'number' }
+          min={ 1 }
+          placeholder={ t('editor.editorToolbar.table.cols') }
+          isInvalid={ tableSize.columns <= 0 }
+          onChange={ (event) => {
             const value = Number.parseInt(event.currentTarget.value)
             setTableSize(old => ({
               rows: old.rows,
               columns: isNaN(value) ? 0 : value
             }))
-          }}
+          } }
         />
-        <ForkAwesomeIcon icon='times' className='mx-2' fixedWidth={true}/>
+        <ForkAwesomeIcon icon='times' className='mx-2' fixedWidth={ true }/>
         <Form.Control
-          type={'number'}
-          min={1}
-          placeholder={t('editor.editorToolbar.table.rows')}
-          isInvalid={tableSize.rows <= 0}
-          onChange={(event) => {
+          type={ 'number' }
+          min={ 1 }
+          placeholder={ t('editor.editorToolbar.table.rows') }
+          isInvalid={ tableSize.rows <= 0 }
+          onChange={ (event) => {
             const value = Number.parseInt(event.currentTarget.value)
             setTableSize(old => ({
               rows: isNaN(value) ? 0 : value,
               columns: old.columns
             }))
-          }}/>
+          } }/>
       </div>
       <ModalFooter>
-        <Button onClick={onClick} disabled={tableSize.rows <= 0 || tableSize.columns <= 0}>
-          {t('editor.editorToolbar.table.create')}
+        <Button onClick={ onClick } disabled={ tableSize.rows <= 0 || tableSize.columns <= 0 }>
+          { t('editor.editorToolbar.table.create') }
         </Button>
       </ModalFooter>
     </CommonModal>
diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker-button.tsx b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker-button.tsx
index 4896d7b3e..f4515686d 100644
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker-button.tsx
@@ -23,14 +23,15 @@ export const TablePickerButton: React.FC<TablePickerButtonProps> = ({ editor })
   return (
     <Fragment>
       <TablePicker
-        show={showTablePicker}
-        onDismiss={() => setShowTablePicker(false)}
-        onTablePicked={(rows, cols) => {
+        show={ showTablePicker }
+        onDismiss={ () => setShowTablePicker(false) }
+        onTablePicked={ (rows, cols) => {
           setShowTablePicker(false)
           addTable(editor, rows, cols)
-        }}
+        } }
       />
-      <Button data-cy={'show-table-overlay'} variant='light' onClick={() => setShowTablePicker(old => !old)} title={t('editor.editorToolbar.table.title')}>
+      <Button data-cy={ 'show-table-overlay' } variant='light' onClick={ () => setShowTablePicker(old => !old) }
+              title={ t('editor.editorToolbar.table.title') }>
         <ForkAwesomeIcon icon="table"/>
       </Button>
     </Fragment>
diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss
index b8bc640c8..9a511f0c3 100644
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss
@@ -5,7 +5,6 @@
  */
 
 
-
 .table-picker-container {
   z-index: 1111;
 
diff --git a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx
index d90507964..7ebd59523 100644
--- a/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx
@@ -45,40 +45,43 @@ export const TablePicker: React.FC<TablePickerProps> = ({ show, onDismiss, onTab
   }, [onTablePicked, tableSize])
 
   return (
-    <div className={`position-absolute table-picker-container p-2 ${!show || showDialog ? 'd-none' : ''} bg-light`} ref={containerRef} role="grid">
-      <p className={'lead'}>
+    <div className={ `position-absolute table-picker-container p-2 ${ !show || showDialog ? 'd-none' : '' } bg-light` }
+         ref={ containerRef } role="grid">
+      <p className={ 'lead' }>
         { tableSize
           ? t('editor.editorToolbar.table.size', { cols: tableSize?.columns, rows: tableSize.rows })
           : t('editor.editorToolbar.table.title')
         }
       </p>
-      <div className={'table-container'}>
-        {createNumberRangeArray(8).map((row: number) => (
-          createNumberRangeArray(10).map((col: number) => (
-            <div
-              key={`${row}_${col}`}
-              className={`table-cell ${tableSize && row < tableSize.rows && col < tableSize.columns ? 'bg-primary' : ''}`}
-              onMouseEnter={() => {
-                setTableSize({
-                  rows: row + 1,
-                  columns: col + 1
-                })
-              }}
-              title={t('editor.editorToolbar.table.size', { cols: col + 1, rows: row + 1 })}
-              onClick={onClick}
-            />
-          )
-          )
-        ))}
+      <div className={ 'table-container' }>
+        { createNumberRangeArray(8)
+          .map((row: number) => (
+            createNumberRangeArray(10)
+              .map((col: number) => (
+                  <div
+                    key={ `${ row }_${ col }` }
+                    className={ `table-cell ${ tableSize && row < tableSize.rows && col < tableSize.columns ? 'bg-primary' : '' }` }
+                    onMouseEnter={ () => {
+                      setTableSize({
+                        rows: row + 1,
+                        columns: col + 1
+                      })
+                    } }
+                    title={ t('editor.editorToolbar.table.size', { cols: col + 1, rows: row + 1 }) }
+                    onClick={ onClick }
+                  />
+                )
+              )
+          )) }
       </div>
       <div className="d-flex justify-content-center mt-2">
-        <Button data-cy={'show-custom-table-modal'} className={'text-center'} onClick={() => setShowDialog(true)}>
-          <ForkAwesomeIcon icon="table"/>&nbsp;{t('editor.editorToolbar.table.customSize')}
+        <Button data-cy={ 'show-custom-table-modal' } className={ 'text-center' } onClick={ () => setShowDialog(true) }>
+          <ForkAwesomeIcon icon="table"/>&nbsp;{ t('editor.editorToolbar.table.customSize') }
         </Button>
         <CustomTableSizeModal
-          showModal={showDialog}
-          onDismiss={() => setShowDialog(false)}
-          onTablePicked={onTablePicked}
+          showModal={ showDialog }
+          onDismiss={ () => setShowDialog(false) }
+          onTablePicked={ onTablePicked }
         />
       </div>
     </div>
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 93d11d5c3..8db60f914 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
@@ -47,69 +47,86 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
 
   return (
     <ButtonToolbar className='bg-light'>
-      <ButtonGroup className={'mx-1 flex-wrap'}>
-        <Button data-cy={'format-bold'} variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
+      <ButtonGroup className={ 'mx-1 flex-wrap' }>
+        <Button data-cy={ 'format-bold' } variant='light' onClick={ () => makeSelectionBold(editor) }
+                title={ t('editor.editorToolbar.bold') }>
           <ForkAwesomeIcon icon="bold"/>
         </Button>
-        <Button data-cy={'format-italic'} variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
+        <Button data-cy={ 'format-italic' } variant='light' onClick={ () => makeSelectionItalic(editor) }
+                title={ t('editor.editorToolbar.italic') }>
           <ForkAwesomeIcon icon="italic"/>
         </Button>
-        <Button data-cy={'format-underline'} variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
+        <Button data-cy={ 'format-underline' } variant='light' onClick={ () => underlineSelection(editor) }
+                title={ t('editor.editorToolbar.underline') }>
           <ForkAwesomeIcon icon="underline"/>
         </Button>
-        <Button data-cy={'format-strikethrough'} variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
+        <Button data-cy={ 'format-strikethrough' } variant='light' onClick={ () => strikeThroughSelection(editor) }
+                title={ t('editor.editorToolbar.strikethrough') }>
           <ForkAwesomeIcon icon="strikethrough"/>
         </Button>
-        <Button data-cy={'format-subscript'} variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
+        <Button data-cy={ 'format-subscript' } variant='light' onClick={ () => subscriptSelection(editor) }
+                title={ t('editor.editorToolbar.subscript') }>
           <ForkAwesomeIcon icon="subscript"/>
         </Button>
-        <Button data-cy={'format-superscript'} variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
+        <Button data-cy={ 'format-superscript' } variant='light' onClick={ () => superscriptSelection(editor) }
+                title={ t('editor.editorToolbar.superscript') }>
           <ForkAwesomeIcon icon="superscript"/>
         </Button>
       </ButtonGroup>
-      <ButtonGroup className={'mx-1 flex-wrap'}>
-        <Button data-cy={'format-heading'} variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
+      <ButtonGroup className={ 'mx-1 flex-wrap' }>
+        <Button data-cy={ 'format-heading' } variant='light' onClick={ () => addHeaderLevel(editor) }
+                title={ t('editor.editorToolbar.header') }>
           <ForkAwesomeIcon icon="header"/>
         </Button>
-        <Button data-cy={'format-code-block'} variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
+        <Button data-cy={ 'format-code-block' } variant='light' onClick={ () => addCodeFences(editor) }
+                title={ t('editor.editorToolbar.code') }>
           <ForkAwesomeIcon icon="code"/>
         </Button>
-        <Button data-cy={'format-block-quote'} variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
+        <Button data-cy={ 'format-block-quote' } variant='light' onClick={ () => addQuotes(editor) }
+                title={ t('editor.editorToolbar.blockquote') }>
           <ForkAwesomeIcon icon="quote-right"/>
         </Button>
-        <Button data-cy={'format-unordered-list'} variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
+        <Button data-cy={ 'format-unordered-list' } variant='light' onClick={ () => addList(editor) }
+                title={ t('editor.editorToolbar.unorderedList') }>
           <ForkAwesomeIcon icon="list"/>
         </Button>
-        <Button data-cy={'format-ordered-list'} variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
+        <Button data-cy={ 'format-ordered-list' } variant='light' onClick={ () => addOrderedList(editor) }
+                title={ t('editor.editorToolbar.orderedList') }>
           <ForkAwesomeIcon icon="list-ol"/>
         </Button>
-        <Button data-cy={'format-check-list'} variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
+        <Button data-cy={ 'format-check-list' } variant='light' onClick={ () => addTaskList(editor) }
+                title={ t('editor.editorToolbar.checkList') }>
           <ForkAwesomeIcon icon="check-square"/>
         </Button>
       </ButtonGroup>
-      <ButtonGroup className={'mx-1 flex-wrap'}>
-        <Button data-cy={'format-link'} variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
+      <ButtonGroup className={ 'mx-1 flex-wrap' }>
+        <Button data-cy={ 'format-link' } variant='light' onClick={ () => addLink(editor) }
+                title={ t('editor.editorToolbar.link') }>
           <ForkAwesomeIcon icon="link"/>
         </Button>
-        <Button data-cy={'format-image'} variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
+        <Button data-cy={ 'format-image' } variant='light' onClick={ () => addImage(editor) }
+                title={ t('editor.editorToolbar.image') }>
           <ForkAwesomeIcon icon="picture-o"/>
         </Button>
-        <UploadImageButton editor={editor}/>
+        <UploadImageButton editor={ editor }/>
       </ButtonGroup>
-      <ButtonGroup className={'mx-1 flex-wrap'}>
-        <TablePickerButton editor={editor}/>
-        <Button data-cy={'format-add-line'} variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
+      <ButtonGroup className={ 'mx-1 flex-wrap' }>
+        <TablePickerButton editor={ editor }/>
+        <Button data-cy={ 'format-add-line' } variant='light' onClick={ () => addLine(editor) }
+                title={ t('editor.editorToolbar.line') }>
           <ForkAwesomeIcon icon="minus"/>
         </Button>
-        <Button data-cy={'format-collapsable-block'} variant='light' onClick={() => addCollapsableBlock(editor)} title={t('editor.editorToolbar.collapsableBlock')}>
+        <Button data-cy={ 'format-collapsable-block' } variant='light' onClick={ () => addCollapsableBlock(editor) }
+                title={ t('editor.editorToolbar.collapsableBlock') }>
           <ForkAwesomeIcon icon="caret-square-o-down"/>
         </Button>
-        <Button data-cy={'format-add-comment'} variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
+        <Button data-cy={ 'format-add-comment' } variant='light' onClick={ () => addComment(editor) }
+                title={ t('editor.editorToolbar.comment') }>
           <ForkAwesomeIcon icon="comment"/>
         </Button>
-        <EmojiPickerButton editor={editor}/>
+        <EmojiPickerButton editor={ editor }/>
       </ButtonGroup>
-      <ButtonGroup className={'mx-1 flex-wrap'}>
+      <ButtonGroup className={ 'mx-1 flex-wrap' }>
         <EditorPreferences/>
       </ButtonGroup>
     </ButtonToolbar>
diff --git a/src/components/editor-page/editor-pane/tool-bar/upload-image-button.tsx b/src/components/editor-page/editor-pane/tool-bar/upload-image-button.tsx
index 8967b5e75..f67b2c977 100644
--- a/src/components/editor-page/editor-pane/tool-bar/upload-image-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/upload-image-button.tsx
@@ -37,10 +37,10 @@ export const UploadImageButton: React.FC<UploadImageButtonProps> = ({ editor })
 
   return (
     <Fragment>
-      <Button variant='light' onClick={buttonClick} title={t('editor.editorToolbar.uploadImage')}>
-        <ForkAwesomeIcon icon={'upload'}/>
+      <Button variant='light' onClick={ buttonClick } title={ t('editor.editorToolbar.uploadImage') }>
+        <ForkAwesomeIcon icon={ 'upload' }/>
       </Button>
-      <UploadInput onLoad={onUploadImage} acceptedFiles={supportedMimeTypesJoined} onClickRef={clickRef}/>
+      <UploadInput onLoad={ onUploadImage } acceptedFiles={ supportedMimeTypesJoined } onClickRef={ clickRef }/>
     </Fragment>
   )
 }
diff --git a/src/components/editor-page/editor-pane/tool-bar/utils/emojiUtils.ts b/src/components/editor-page/editor-pane/tool-bar/utils/emojiUtils.ts
index 2e9322eda..9ee26f2cf 100644
--- a/src/components/editor-page/editor-pane/tool-bar/utils/emojiUtils.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/utils/emojiUtils.ts
@@ -12,18 +12,18 @@ export const getEmojiIcon = (emoji: EmojiClickEventDetail): string => {
   }
   if (emoji.name) {
     // noinspection CheckTagEmptyBody
-    return `<i class="fa ${emoji.name}"></i>`
+    return `<i class="fa ${ emoji.name }"></i>`
   }
   return ''
 }
 
-export const getEmojiShortCode = (emoji: EmojiClickEventDetail): string|undefined => {
+export const getEmojiShortCode = (emoji: EmojiClickEventDetail): string | undefined => {
   if (!emoji.emoji.shortcodes) {
     return undefined
   }
   let skinToneModifier = ''
   if ((emoji.emoji as NativeEmoji).skins && emoji.skinTone !== 0) {
-    skinToneModifier = `:skin-tone-${emoji.skinTone as number}:`
+    skinToneModifier = `:skin-tone-${ emoji.skinTone as number }:`
   }
-  return `:${emoji.emoji.shortcodes[0]}:${skinToneModifier}`
+  return `:${ emoji.emoji.shortcodes[0] }:${ skinToneModifier }`
 }
diff --git a/src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.test.ts b/src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.test.ts
index a2a97e076..ee02c6d29 100644
--- a/src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.test.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.test.ts
@@ -119,9 +119,12 @@ const mockListSelections = (positions: FromTo, empty: boolean): (() => CodeMirro
 
 const expectFromToReplacement = (position: FromTo, expectedReplacement: string, done: () => void): ((replacement: string | string[], from: CodeMirror.Position, to?: CodeMirror.Position) => void) => {
   return (replacement: string | string[], from: CodeMirror.Position, to?: CodeMirror.Position) => {
-    expect(from).toEqual(position.from)
-    expect(to).toEqual(position.to)
-    expect(replacement).toEqual(expectedReplacement)
+    expect(from)
+      .toEqual(position.from)
+    expect(to)
+      .toEqual(position.to)
+    expect(replacement)
+      .toEqual(expectedReplacement)
     done()
   }
 }
@@ -410,18 +413,19 @@ describe('test addHeaderLevel', () => {
   const { cursor, firstLine, multiline, multilineOffset } = buildRanges()
 
   const noHeading = testContent.split('\n')[0]
-  const firstHeading = `# ${noHeading}`
-  const secondHeading = `## ${noHeading}`
+  const firstHeading = `# ${ noHeading }`
+  const secondHeading = `## ${ noHeading }`
 
   const firstLineNoHeading = testContent.split('\n')[1]
-  const firstLineFirstHeading = `# ${firstLineNoHeading}`
+  const firstLineFirstHeading = `# ${ firstLineNoHeading }`
 
   it('no heading before', done => {
     const editor = buildEditor({
       getCursor: () => cursor.from,
       listSelections: mockListSelections(cursor, true),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(firstHeading)
+        expect(replacement)
+          .toEqual(firstHeading)
         done()
       },
       getLine: (): string => (noHeading)
@@ -434,7 +438,8 @@ describe('test addHeaderLevel', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(cursor, true),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(secondHeading)
+        expect(replacement)
+          .toEqual(secondHeading)
         done()
       },
       getLine: (): string => (firstHeading)
@@ -447,7 +452,8 @@ describe('test addHeaderLevel', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(firstLineFirstHeading)
+        expect(replacement)
+          .toEqual(firstLineFirstHeading)
         done()
       },
       getLine: (): string => (firstLineNoHeading)
@@ -460,7 +466,8 @@ describe('test addHeaderLevel', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(multiline, false),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(firstLineFirstHeading)
+        expect(replacement)
+          .toEqual(firstLineFirstHeading)
         done()
       },
       getLine: (): string => (firstLineNoHeading)
@@ -473,7 +480,8 @@ describe('test addHeaderLevel', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(multilineOffset, false),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(firstLineFirstHeading)
+        expect(replacement)
+          .toEqual(firstLineFirstHeading)
         done()
       },
       getLine: (): string => (firstLineNoHeading)
@@ -492,7 +500,8 @@ describe('test addCodeFences', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => '',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('```\n\n```')
+        expect(replacement)
+          .toEqual('```\n\n```')
         done()
       }
     })
@@ -506,7 +515,8 @@ describe('test addCodeFences', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => '1st line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('```\n1st line\n```')
+        expect(replacement)
+          .toEqual('```\n1st line\n```')
         done()
       }
     })
@@ -555,7 +565,8 @@ describe('test addQuotes', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`> ${textFirstLine}`)
+        expect(replacement)
+          .toEqual(`> ${ textFirstLine }`)
         done()
       }
     })
@@ -568,7 +579,7 @@ describe('test addQuotes', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `> ${textFirstLine}`, done)
+      replaceRange: expectFromToReplacement(firstLine, `> ${ textFirstLine }`, done)
     })
     addQuotes(editor)
   })
@@ -602,7 +613,8 @@ describe('test unordered list', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`- ${textFirstLine}`)
+        expect(replacement)
+          .toEqual(`- ${ textFirstLine }`)
         done()
       }
     })
@@ -614,7 +626,7 @@ describe('test unordered list', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `- ${textFirstLine}`, done)
+      replaceRange: expectFromToReplacement(firstLine, `- ${ textFirstLine }`, done)
     })
     addList(editor)
   })
@@ -625,7 +637,8 @@ describe('test unordered list', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('- 2nd line3rd line')
+        expect(replacement)
+          .toEqual('- 2nd line3rd line')
         done()
       }
     })
@@ -638,7 +651,8 @@ describe('test unordered list', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('- line3rd ')
+        expect(replacement)
+          .toEqual('- line3rd ')
         done()
       }
     })
@@ -655,7 +669,8 @@ describe('test ordered list', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`1. ${textFirstLine}`)
+        expect(replacement)
+          .toEqual(`1. ${ textFirstLine }`)
         done()
       }
     })
@@ -667,7 +682,7 @@ describe('test ordered list', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `1. ${textFirstLine}`, done)
+      replaceRange: expectFromToReplacement(firstLine, `1. ${ textFirstLine }`, done)
     })
     addOrderedList(editor)
   })
@@ -678,7 +693,8 @@ describe('test ordered list', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('1. 2nd line3rd line')
+        expect(replacement)
+          .toEqual('1. 2nd line3rd line')
         done()
       }
     })
@@ -691,7 +707,8 @@ describe('test ordered list', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('1. line3rd ')
+        expect(replacement)
+          .toEqual('1. line3rd ')
         done()
       }
     })
@@ -709,7 +726,8 @@ describe('test todo list', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`- [ ] ${textFirstLine}`)
+        expect(replacement)
+          .toEqual(`- [ ] ${ textFirstLine }`)
         done()
       }
     })
@@ -721,7 +739,7 @@ describe('test todo list', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `- [ ] ${textFirstLine}`, done)
+      replaceRange: expectFromToReplacement(firstLine, `- [ ] ${ textFirstLine }`, done)
     })
     addTaskList(editor)
   })
@@ -732,7 +750,8 @@ describe('test todo list', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('- [ ] 2nd line3rd line')
+        expect(replacement)
+          .toEqual('- [ ] 2nd line3rd line')
         done()
       }
     })
@@ -745,7 +764,8 @@ describe('test todo list', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('- [ ] line3rd ')
+        expect(replacement)
+          .toEqual('- [ ] line3rd ')
         done()
       }
     })
@@ -764,7 +784,8 @@ describe('test addLink', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('[](https://)')
+        expect(replacement)
+          .toEqual('[](https://)')
         done()
       }
     })
@@ -776,7 +797,7 @@ describe('test addLink', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `[${textFirstLine}](https://)`, done)
+      replaceRange: expectFromToReplacement(firstLine, `[${ textFirstLine }](https://)`, done)
     })
     addLink(editor)
   })
@@ -787,7 +808,8 @@ describe('test addLink', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('[2nd line3rd line](https://)')
+        expect(replacement)
+          .toEqual('[2nd line3rd line](https://)')
         done()
       }
     })
@@ -800,7 +822,8 @@ describe('test addLink', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('[line3rd ](https://)')
+        expect(replacement)
+          .toEqual('[line3rd ](https://)')
         done()
       }
     })
@@ -819,7 +842,8 @@ describe('test addImage', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('![](https://)')
+        expect(replacement)
+          .toEqual('![](https://)')
         done()
       }
     })
@@ -831,7 +855,7 @@ describe('test addImage', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `![${textFirstLine}](https://)`, done)
+      replaceRange: expectFromToReplacement(firstLine, `![${ textFirstLine }](https://)`, done)
     })
     addImage(editor)
   })
@@ -842,7 +866,8 @@ describe('test addImage', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('![2nd line3rd line](https://)')
+        expect(replacement)
+          .toEqual('![2nd line3rd line](https://)')
         done()
       }
     })
@@ -855,7 +880,8 @@ describe('test addImage', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('![line3rd ](https://)')
+        expect(replacement)
+          .toEqual('![line3rd ](https://)')
         done()
       }
     })
@@ -874,7 +900,8 @@ describe('test addLine', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`${textFirstLine}\n----`)
+        expect(replacement)
+          .toEqual(`${ textFirstLine }\n----`)
         done()
       }
     })
@@ -886,7 +913,7 @@ describe('test addLine', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `${textFirstLine}\n----`, done)
+      replaceRange: expectFromToReplacement(firstLine, `${ textFirstLine }\n----`, done)
     })
     addLine(editor)
   })
@@ -897,7 +924,8 @@ describe('test addLine', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => '2nd line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('2nd line\n----')
+        expect(replacement)
+          .toEqual('2nd line\n----')
         done()
       }
     })
@@ -910,7 +938,8 @@ describe('test addLine', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => '2nd line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('2nd line\n----')
+        expect(replacement)
+          .toEqual('2nd line\n----')
         done()
       }
     })
@@ -929,7 +958,8 @@ describe('test collapsable block', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`${textFirstLine}\n:::spoiler Toggle label\n  Toggled content\n:::`)
+        expect(replacement)
+          .toEqual(`${ textFirstLine }\n:::spoiler Toggle label\n  Toggled content\n:::`)
         done()
       }
     })
@@ -941,7 +971,7 @@ describe('test collapsable block', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `${textFirstLine}\n:::spoiler Toggle label\n  Toggled content\n:::`, done)
+      replaceRange: expectFromToReplacement(firstLine, `${ textFirstLine }\n:::spoiler Toggle label\n  Toggled content\n:::`, done)
     })
     addCollapsableBlock(editor)
   })
@@ -952,7 +982,8 @@ describe('test collapsable block', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => '2nd line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('2nd line\n:::spoiler Toggle label\n  Toggled content\n:::')
+        expect(replacement)
+          .toEqual('2nd line\n:::spoiler Toggle label\n  Toggled content\n:::')
         done()
       }
     })
@@ -965,7 +996,8 @@ describe('test collapsable block', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => '2nd line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('2nd line\n:::spoiler Toggle label\n  Toggled content\n:::')
+        expect(replacement)
+          .toEqual('2nd line\n:::spoiler Toggle label\n  Toggled content\n:::')
         done()
       }
     })
@@ -984,7 +1016,8 @@ describe('test addComment', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`${textFirstLine}\n> []`)
+        expect(replacement)
+          .toEqual(`${ textFirstLine }\n> []`)
         done()
       }
     })
@@ -996,7 +1029,7 @@ describe('test addComment', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `${textFirstLine}\n> []`, done)
+      replaceRange: expectFromToReplacement(firstLine, `${ textFirstLine }\n> []`, done)
     })
     addComment(editor)
   })
@@ -1007,7 +1040,8 @@ describe('test addComment', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => '2nd line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('2nd line\n> []')
+        expect(replacement)
+          .toEqual('2nd line\n> []')
         done()
       }
     })
@@ -1020,7 +1054,8 @@ describe('test addComment', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => '2nd line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual('2nd line\n> []')
+        expect(replacement)
+          .toEqual('2nd line\n> []')
         done()
       }
     })
@@ -1039,7 +1074,8 @@ describe('test addTable', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`${textFirstLine}\n${table}`)
+        expect(replacement)
+          .toEqual(`${ textFirstLine }\n${ table }`)
         done()
       }
     })
@@ -1051,7 +1087,7 @@ describe('test addTable', () => {
       getCursor: () => cursor.from,
       listSelections: mockListSelections(firstLine, false),
       getLine: (): string => (textFirstLine),
-      replaceRange: expectFromToReplacement(firstLine, `${textFirstLine}\n${table}`, done)
+      replaceRange: expectFromToReplacement(firstLine, `${ textFirstLine }\n${ table }`, done)
     })
     addTable(editor, 1, 3)
   })
@@ -1062,7 +1098,8 @@ describe('test addTable', () => {
       listSelections: mockListSelections(multiline, false),
       getLine: (): string => '2nd line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`2nd line\n${table}`)
+        expect(replacement)
+          .toEqual(`2nd line\n${ table }`)
         done()
       }
     })
@@ -1075,7 +1112,8 @@ describe('test addTable', () => {
       listSelections: mockListSelections(multilineOffset, false),
       getLine: (): string => '2nd line',
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(`2nd line\n${table}`)
+        expect(replacement)
+          .toEqual(`2nd line\n${ table }`)
         done()
       }
     })
@@ -1112,7 +1150,8 @@ describe('test addEmoji with native emoji', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(':1234:')
+        expect(replacement)
+          .toEqual(':1234:')
         done()
       }
     })
@@ -1173,7 +1212,8 @@ describe('test addEmoji with native emoji', () => {
       listSelections: mockListSelections(cursor, true),
       getLine: (): string => (textFirstLine),
       replaceRange: (replacement: string | string[]) => {
-        expect(replacement).toEqual(forkAwesomeIcon)
+        expect(replacement)
+          .toEqual(forkAwesomeIcon)
         done()
       }
     })
diff --git a/src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.ts b/src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.ts
index 0ae0e9538..2560e1fc5 100644
--- a/src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.ts
+++ b/src/components/editor-page/editor-pane/tool-bar/utils/toolbarButtonUtils.ts
@@ -17,27 +17,31 @@ export const subscriptSelection = (editor: Editor): void => wrapTextWith(editor,
 export const superscriptSelection = (editor: Editor): void => wrapTextWith(editor, '^')
 export const markSelection = (editor: Editor): void => wrapTextWith(editor, '==')
 
-export const addHeaderLevel = (editor: Editor): void => changeLines(editor, line => line.startsWith('#') ? `#${line}` : `# ${line}`)
+export const addHeaderLevel = (editor: Editor): void => changeLines(editor, line => line.startsWith('#') ? `#${ line }` : `# ${ line }`)
 export const addCodeFences = (editor: Editor): void => wrapTextWithOrJustPut(editor, '```\n', '\n```')
 export const addQuotes = (editor: Editor): void => insertOnStartOfLines(editor, '> ')
 
 export const addList = (editor: Editor): void => createList(editor, () => '- ')
-export const addOrderedList = (editor: Editor): void => createList(editor, j => `${j}. `)
+export const addOrderedList = (editor: Editor): void => createList(editor, j => `${ j }. `)
 export const addTaskList = (editor: Editor): void => createList(editor, () => '- [ ] ')
 
 export const addImage = (editor: Editor): void => addLink(editor, '!')
 
-export const addLine = (editor: Editor): void => changeLines(editor, line => `${line}\n----`)
-export const addCollapsableBlock = (editor: Editor): void => changeLines(editor, line => `${line}\n:::spoiler Toggle label\n  Toggled content\n:::`)
-export const addComment = (editor: Editor): void => changeLines(editor, line => `${line}\n> []`)
+export const addLine = (editor: Editor): void => changeLines(editor, line => `${ line }\n----`)
+export const addCollapsableBlock = (editor: Editor): void => changeLines(editor, line => `${ line }\n:::spoiler Toggle label\n  Toggled content\n:::`)
+export const addComment = (editor: Editor): void => changeLines(editor, line => `${ line }\n> []`)
 export const addTable = (editor: Editor, rows: number, columns: number): void => {
   const rowArray = createNumberRangeArray(rows)
-  const colArray = createNumberRangeArray(columns).map(col => col + 1)
+  const colArray = createNumberRangeArray(columns)
+    .map(col => col + 1)
   const head = '|  # ' + colArray.join(' |  # ') + ' |'
-  const divider = '| ' + colArray.map(() => '----').join(' | ') + ' |'
-  const body = rowArray.map(() => '| ' + colArray.map(() => 'Text').join(' | ') + ' |').join('\n')
-  const table = `${head}\n${divider}\n${body}`
-  changeLines(editor, line => `${line}\n${table}`)
+  const divider = '| ' + colArray.map(() => '----')
+                                 .join(' | ') + ' |'
+  const body = rowArray.map(() => '| ' + colArray.map(() => 'Text')
+                                                 .join(' | ') + ' |')
+                       .join('\n')
+  const table = `${ head }\n${ divider }\n${ body }`
+  changeLines(editor, line => `${ line }\n${ table }`)
 }
 
 export const addEmoji = (emoji: EmojiClickEventDetail, editor: Editor): void => {
@@ -72,7 +76,7 @@ const wrapTextWithOrJustPut = (editor: Editor, symbol: string, endSymbol?: strin
     const cursor = editor.getCursor()
     const lineNumber = cursor.line
     const line = editor.getLine(lineNumber)
-    const replacement = /\s*\\n/.exec(line) ? `${symbol}${endSymbol ?? ''}` : `${symbol}${line}${endSymbol ?? ''}`
+    const replacement = /\s*\\n/.exec(line) ? `${ symbol }${ endSymbol ?? '' }` : `${ symbol }${ line }${ endSymbol ?? '' }`
     editor.replaceRange(replacement,
       { line: cursor.line, ch: 0 },
       { line: cursor.line, ch: line.length },
@@ -89,7 +93,8 @@ export const insertOnStartOfLines = (editor: Editor, symbol: string): void => {
     const to = range.empty() ? { line: cursor.line, ch: editor.getLine(cursor.line).length } : range.to()
     const selection = editor.getRange(from, to)
     const lines = selection.split('\n')
-    editor.replaceRange(lines.map(line => `${symbol}${line}`).join('\n'), from, to, '+input')
+    editor.replaceRange(lines.map(line => `${ symbol }${ line }`)
+                             .join('\n'), from, to, '+input')
   }
   editor.setSelections(ranges)
 }
@@ -117,7 +122,8 @@ export const createList = (editor: Editor, listMark: (i: number) => string): voi
 
     const selection = editor.getRange(from, to)
     const lines = selection.split('\n')
-    editor.replaceRange(lines.map((line, i) => `${listMark(i + 1)}${line}`).join('\n'), from, to, '+input')
+    editor.replaceRange(lines.map((line, i) => `${ listMark(i + 1) }${ line }`)
+                             .join('\n'), from, to, '+input')
   }
   editor.setSelections(ranges)
 }
@@ -131,9 +137,9 @@ export const addLink = (editor: Editor, prefix?: string): void => {
     const selection = editor.getRange(from, to)
     const linkRegex = /^(?:https?|ftp|mailto):/
     if (linkRegex.exec(selection)) {
-      editor.replaceRange(`${prefix || ''}[](${selection})`, from, to, '+input')
+      editor.replaceRange(`${ prefix || '' }[](${ selection })`, from, to, '+input')
     } else {
-      editor.replaceRange(`${prefix || ''}[${selection}](https://)`, from, to, '+input')
+      editor.replaceRange(`${ prefix || '' }[${ selection }](https://)`, from, to, '+input')
     }
   }
 }
@@ -144,6 +150,6 @@ export const insertAtCursor = (editor: Editor, text: string): void => {
   for (const range of ranges) {
     const from = range.empty() ? { line: cursor.line, ch: cursor.ch } : range.from()
     const to = range.empty() ? { line: cursor.line, ch: cursor.ch } : range.to()
-    editor.replaceRange(`${text}`, from, to, '+input')
+    editor.replaceRange(`${ text }`, from, to, '+input')
   }
 }
diff --git a/src/components/editor-page/editor-pane/upload-handler.ts b/src/components/editor-page/editor-pane/upload-handler.ts
index 3fe59ba5d..5239e87f6 100644
--- a/src/components/editor-page/editor-pane/upload-handler.ts
+++ b/src/components/editor-page/editor-pane/upload-handler.ts
@@ -20,7 +20,7 @@ export const handleUpload = (file: File, editor: Editor): void => {
     return
   }
   const cursor = editor.getCursor()
-  const uploadPlaceholder = `![${i18n.t('editor.upload.uploadFile', { fileName: file.name })}]()`
+  const uploadPlaceholder = `![${ i18n.t('editor.upload.uploadFile', { fileName: file.name }) }]()`
   const noteId = store.getState().noteDetails.id
   editor.replaceRange(uploadPlaceholder, cursor, cursor, '+input')
   uploadFile(noteId, mimeType, file)
@@ -41,8 +41,8 @@ export const handleUpload = (file: File, editor: Editor): void => {
 const getCorrectSyntaxForLink = (mimeType: string, link: string): string => {
   switch (mimeType) {
     case 'application/pdf':
-      return `{%pdf ${link} %}`
+      return `{%pdf ${ link } %}`
     default:
-      return `![](${link})`
+      return `![](${ link })`
   }
 }
diff --git a/src/components/editor-page/hooks/useViewModeShortcuts.ts b/src/components/editor-page/hooks/useViewModeShortcuts.ts
index 910f51d8c..6359f2025 100644
--- a/src/components/editor-page/hooks/useViewModeShortcuts.ts
+++ b/src/components/editor-page/hooks/useViewModeShortcuts.ts
@@ -25,7 +25,7 @@ const shortcutHandler = (event: KeyboardEvent): void => {
   }
 }
 
-export const useViewModeShortcuts = ():void => {
+export const useViewModeShortcuts = (): void => {
   useEffect(() => {
     document.addEventListener('keydown', shortcutHandler, false)
     return () => {
diff --git a/src/components/editor-page/note-frontmatter/note-frontmatter.test.ts b/src/components/editor-page/note-frontmatter/note-frontmatter.test.ts
index 9a63d078f..3a22fb237 100644
--- a/src/components/editor-page/note-frontmatter/note-frontmatter.test.ts
+++ b/src/components/editor-page/note-frontmatter/note-frontmatter.test.ts
@@ -29,13 +29,19 @@ describe('yaml frontmatter tests', () => {
 
   const testFrontmatter = (input: string, expectedRaw: Partial<RawNoteFrontmatter>, expectedFinished: Partial<NoteFrontmatter>) => {
     md.render(input)
-    expect(raw).not.toBe(undefined)
-    expect(raw).toEqual(expectedRaw)
-    expect(finished).not.toBe(undefined)
-    expect(finished).toEqual({
-      ...defaultYAML,
-      ...expectedFinished
-    })
+    expect(raw)
+      .not
+      .toBe(undefined)
+    expect(raw)
+      .toEqual(expectedRaw)
+    expect(finished)
+      .not
+      .toBe(undefined)
+    expect(finished)
+      .toEqual({
+        ...defaultYAML,
+        ...expectedFinished
+      })
   }
 
   beforeEach(() => {
@@ -127,63 +133,63 @@ describe('yaml frontmatter tests', () => {
   })
 
   /*
-  it('slideOptions nothing', () => {
-    testFrontmatter(`---
-    slideOptions:
-    ___
-    `,
-    {
-      slideOptions: null
-    },
-    {
-      slideOptions: {
-        theme: 'white',
-        transition: 'none'
-      }
-    })
-  })
+   it('slideOptions nothing', () => {
+   testFrontmatter(`---
+   slideOptions:
+   ___
+   `,
+   {
+   slideOptions: null
+   },
+   {
+   slideOptions: {
+   theme: 'white',
+   transition: 'none'
+   }
+   })
+   })
 
-  it('slideOptions.theme only', () => {
-    testFrontmatter(`---
-    slideOptions:
-      theme: sky
-    ___
-    `,
-    {
-      slideOptions: {
-        theme: 'sky',
-        transition: undefined
-      }
-    },
-    {
-      slideOptions: {
-        theme: 'sky',
-        transition: 'none'
-      }
-    })
-  })
+   it('slideOptions.theme only', () => {
+   testFrontmatter(`---
+   slideOptions:
+   theme: sky
+   ___
+   `,
+   {
+   slideOptions: {
+   theme: 'sky',
+   transition: undefined
+   }
+   },
+   {
+   slideOptions: {
+   theme: 'sky',
+   transition: 'none'
+   }
+   })
+   })
 
-  it('slideOptions full', () => {
-    testFrontmatter(`---
-    slideOptions:
-      transition: zoom
-      theme: sky
-    ___
-    `,
-    {
-      slideOptions: {
-        theme: 'sky',
-        transition: 'zoom'
-      }
-    },
-    {
-      slideOptions: {
-        theme: 'sky',
-        transition: 'zoom'
-      }
-    })
-  })
-  */
+   it('slideOptions full', () => {
+   testFrontmatter(`---
+   slideOptions:
+   transition: zoom
+   theme: sky
+   ___
+   `,
+   {
+   slideOptions: {
+   theme: 'sky',
+   transition: 'zoom'
+   }
+   },
+   {
+   slideOptions: {
+   theme: 'sky',
+   transition: 'zoom'
+   }
+   })
+   })
+   */
 
   it('opengraph nothing', () => {
     testFrontmatter(`---
diff --git a/src/components/editor-page/note-frontmatter/note-frontmatter.ts b/src/components/editor-page/note-frontmatter/note-frontmatter.ts
index 7fa8a7151..e6d791461 100644
--- a/src/components/editor-page/note-frontmatter/note-frontmatter.ts
+++ b/src/components/editor-page/note-frontmatter/note-frontmatter.ts
@@ -240,7 +240,7 @@ export class NoteFrontmatter {
   // slideOptions: RevealOptions
   opengraph: Map<string, string>
 
-  constructor (rawData: RawNoteFrontmatter) {
+  constructor(rawData: RawNoteFrontmatter) {
     this.title = rawData?.title ?? ''
     this.description = rawData?.description ?? ''
     this.robots = rawData?.robots ?? ''
@@ -253,11 +253,12 @@ export class NoteFrontmatter {
     this.dir = (rawData?.dir as NoteFrontmatter['dir']) ?? 'ltr'
 
     /* this.slideOptions = (rawData?.slideOptions as RevealOptions) ?? {
-      transition: 'none',
-      theme: 'white'
-    } */
+     transition: 'none',
+     theme: 'white'
+     } */
     if (typeof rawData?.tags === 'string') {
-      this.tags = rawData?.tags?.split(',').map(entry => entry.trim()) ?? []
+      this.tags = rawData?.tags?.split(',')
+                         .map(entry => entry.trim()) ?? []
       this.deprecatedTagsSyntax = true
     } else if (typeof rawData?.tags === 'object') {
       this.tags = rawData?.tags?.filter(tag => tag !== null) ?? []
diff --git a/src/components/editor-page/renderer-pane/hooks/use-on-iframe-load.ts b/src/components/editor-page/renderer-pane/hooks/use-on-iframe-load.ts
index edb8ddaa5..8d4e3f7df 100644
--- a/src/components/editor-page/renderer-pane/hooks/use-on-iframe-load.ts
+++ b/src/components/editor-page/renderer-pane/hooks/use-on-iframe-load.ts
@@ -8,7 +8,7 @@ import { RefObject, useCallback, useRef } from 'react'
 import { IframeEditorToRendererCommunicator } from '../../../render-page/iframe-editor-to-renderer-communicator'
 
 export const useOnIframeLoad = (frameReference: RefObject<HTMLIFrameElement>, iframeCommunicator: IframeEditorToRendererCommunicator,
-                                rendererOrigin: string, renderPageUrl: string, onNavigateAway: () => void): () => void => {
+  rendererOrigin: string, renderPageUrl: string, onNavigateAway: () => void): () => void => {
   const sendToRenderPage = useRef<boolean>(true)
 
   return useCallback(() => {
@@ -24,7 +24,7 @@ export const useOnIframeLoad = (frameReference: RefObject<HTMLIFrameElement>, if
       return
     } else {
       onNavigateAway()
-      console.error("Navigated away from unknown URL")
+      console.error('Navigated away from unknown URL')
       frame.src = renderPageUrl
       sendToRenderPage.current = true
     }
diff --git a/src/components/editor-page/renderer-pane/render-iframe.tsx b/src/components/editor-page/renderer-pane/render-iframe.tsx
index a64a7bda3..dd306fd24 100644
--- a/src/components/editor-page/renderer-pane/render-iframe.tsx
+++ b/src/components/editor-page/renderer-pane/render-iframe.tsx
@@ -33,19 +33,24 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
 
   const frameReference = useRef<HTMLIFrameElement>(null)
   const rendererOrigin = useSelector((state: ApplicationState) => state.config.iframeCommunication.rendererOrigin)
-  const renderPageUrl = `${rendererOrigin}/render`
+  const renderPageUrl = `${ rendererOrigin }/render`
   const resetRendererReady = useCallback(() => setRendererReady(false), [])
   const iframeCommunicator = useMemo(() => new IframeEditorToRendererCommunicator(), [])
   const onIframeLoad = useOnIframeLoad(frameReference, iframeCommunicator, rendererOrigin, renderPageUrl, resetRendererReady)
 
   useEffect(() => () => iframeCommunicator.unregisterEventListener(), [iframeCommunicator])
-  useEffect(() => iframeCommunicator.onFirstHeadingChange(onFirstHeadingChange), [iframeCommunicator, onFirstHeadingChange])
-  useEffect(() => iframeCommunicator.onFrontmatterChange(onFrontmatterChange), [iframeCommunicator, onFrontmatterChange])
+  useEffect(() => iframeCommunicator.onFirstHeadingChange(onFirstHeadingChange), [iframeCommunicator,
+    onFirstHeadingChange])
+  useEffect(() => iframeCommunicator.onFrontmatterChange(onFrontmatterChange), [iframeCommunicator,
+    onFrontmatterChange])
   useEffect(() => iframeCommunicator.onSetScrollState(onScroll), [iframeCommunicator, onScroll])
-  useEffect(() => iframeCommunicator.onSetScrollSourceToRenderer(onMakeScrollSource), [iframeCommunicator, onMakeScrollSource])
-  useEffect(() => iframeCommunicator.onTaskCheckboxChange(onTaskCheckedChange), [iframeCommunicator, onTaskCheckedChange])
+  useEffect(() => iframeCommunicator.onSetScrollSourceToRenderer(onMakeScrollSource), [iframeCommunicator,
+    onMakeScrollSource])
+  useEffect(() => iframeCommunicator.onTaskCheckboxChange(onTaskCheckedChange), [iframeCommunicator,
+    onTaskCheckedChange])
   useEffect(() => iframeCommunicator.onImageClicked(setLightboxDetails), [iframeCommunicator])
-  useEffect(() => iframeCommunicator.onRendererReady(() => setRendererReady(true)), [darkMode, iframeCommunicator, scrollState])
+  useEffect(() => iframeCommunicator.onRendererReady(() => setRendererReady(true)), [darkMode, iframeCommunicator,
+    scrollState])
   useEffect(() => {
     if (rendererReady) {
       iframeCommunicator.sendSetDarkmode(darkMode)
@@ -73,9 +78,9 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
   }, [iframeCommunicator, markdownContent, rendererReady])
 
   return <Fragment>
-    <ShowOnPropChangeImageLightbox details={lightboxDetails}/>
-    <iframe data-cy={'documentIframe'} onLoad={onIframeLoad} title="render" src={renderPageUrl}
-            {...isTestMode() ? {} : { sandbox: 'allow-downloads allow-same-origin allow-scripts allow-popups' }}
-            ref={frameReference} className={`h-100 w-100 border-0 ${extraClasses ?? ''}`}/>
+    <ShowOnPropChangeImageLightbox details={ lightboxDetails }/>
+    <iframe data-cy={ 'documentIframe' } onLoad={ onIframeLoad } title="render" src={ renderPageUrl }
+            { ...isTestMode() ? {} : { sandbox: 'allow-downloads allow-same-origin allow-scripts allow-popups' } }
+            ref={ frameReference } className={ `h-100 w-100 border-0 ${ extraClasses ?? '' }` }/>
   </Fragment>
 }
diff --git a/src/components/editor-page/renderer-pane/show-on-prop-change-image-lightbox.tsx b/src/components/editor-page/renderer-pane/show-on-prop-change-image-lightbox.tsx
index 4f84b63b2..255652c64 100644
--- a/src/components/editor-page/renderer-pane/show-on-prop-change-image-lightbox.tsx
+++ b/src/components/editor-page/renderer-pane/show-on-prop-change-image-lightbox.tsx
@@ -26,7 +26,7 @@ export const ShowOnPropChangeImageLightbox: React.FC<ShowOnPropChangeImageLightb
   }, [details])
 
   return (
-    <ImageLightboxModal show={show} onHide={hideLightbox} src={details?.src}
-                        alt={details?.alt} title={details?.title}/>
+    <ImageLightboxModal show={ show } onHide={ hideLightbox } src={ details?.src }
+                        alt={ details?.alt } title={ details?.title }/>
   )
 }
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 d34dfe92e..706470449 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
@@ -17,15 +17,15 @@ export const YamlArrayDeprecationAlert: React.FC = () => {
   useTranslation()
   const yamlDeprecatedTags = useSelector((state: ApplicationState) => state.noteDetails.frontmatter.deprecatedTagsSyntax)
 
-  return <ShowIf condition={yamlDeprecatedTags}>
-    <Alert data-cy={'yamlArrayDeprecationAlert'} className={'text-wrap'} variant='warning' dir='auto'>
-        <span className={'text-wrap'}>
-          <span className={'text-wrap'}>
-        <Trans i18nKey='editor.deprecatedTags' />
+  return <ShowIf condition={ yamlDeprecatedTags }>
+    <Alert data-cy={ 'yamlArrayDeprecationAlert' } className={ 'text-wrap' } variant='warning' dir='auto'>
+        <span className={ 'text-wrap' }>
+          <span className={ 'text-wrap' }>
+        <Trans i18nKey='editor.deprecatedTags'/>
         </span>
       </span>
       <br/>
-      <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} href={links.faq} className={'text-primary'}/>
+      <TranslatedExternalLink i18nKey={ 'common.readForMoreInfo' } href={ links.faq } className={ 'text-primary' }/>
     </Alert>
   </ShowIf>
 }
diff --git a/src/components/editor-page/sidebar/delete-note-sidebar-entry.tsx b/src/components/editor-page/sidebar/delete-note-sidebar-entry.tsx
index 2d763e13b..9bdd6d53f 100644
--- a/src/components/editor-page/sidebar/delete-note-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/delete-note-sidebar-entry.tsx
@@ -16,21 +16,21 @@ export const DeleteNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ hi
 
   return (
     <Fragment>
-      <SidebarButton icon={"trash"} className={className} hide={hide} onClick={() => setShowDialog(true)}>
-        <Trans i18nKey={'landing.history.menu.deleteNote'}/>
+      <SidebarButton icon={ 'trash' } className={ className } hide={ hide } onClick={ () => setShowDialog(true) }>
+        <Trans i18nKey={ 'landing.history.menu.deleteNote' }/>
       </SidebarButton>
       <DeletionModal
-        onConfirm={() => setShowDialog(false)}
-        deletionButtonI18nKey={'editor.modal.deleteNote.button'}
-        show={showDialog}
-        onHide={() => setShowDialog(false)}
-        titleI18nKey={'editor.modal.deleteNote.title'}>
-        <h5><Trans i18nKey={'editor.modal.deleteNote.question'}/></h5>
+        onConfirm={ () => setShowDialog(false) }
+        deletionButtonI18nKey={ 'editor.modal.deleteNote.button' }
+        show={ showDialog }
+        onHide={ () => setShowDialog(false) }
+        titleI18nKey={ 'editor.modal.deleteNote.title' }>
+        <h5><Trans i18nKey={ 'editor.modal.deleteNote.question' }/></h5>
         <ul>
           <li> noteTitle</li>
         </ul>
         <h6>
-          <Trans i18nKey={'editor.modal.deleteNote.warning'}/>
+          <Trans i18nKey={ 'editor.modal.deleteNote.warning' }/>
         </h6>
       </DeletionModal>
     </Fragment>
diff --git a/src/components/editor-page/sidebar/document-info-sidebar-entry.tsx b/src/components/editor-page/sidebar/document-info-sidebar-entry.tsx
index 795b22a94..18b0194cc 100644
--- a/src/components/editor-page/sidebar/document-info-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/document-info-sidebar-entry.tsx
@@ -10,16 +10,16 @@ import { DocumentInfoModal } from '../document-bar/document-info/document-info-m
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'
 
-export const DocumentInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({className, hide}) => {
+export const DocumentInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   const [showModal, setShowModal] = useState(false)
   useTranslation()
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={"line-chart"} onClick={() => setShowModal(true)}>
-        <Trans i18nKey={'editor.modal.documentInfo.title'} />
+      <SidebarButton hide={ hide } className={ className } icon={ 'line-chart' } onClick={ () => setShowModal(true) }>
+        <Trans i18nKey={ 'editor.modal.documentInfo.title' }/>
       </SidebarButton>
-      <DocumentInfoModal show={showModal} onHide={() => setShowModal(false)}/>
+      <DocumentInfoModal show={ showModal } onHide={ () => setShowModal(false) }/>
     </Fragment>
   )
 }
diff --git a/src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx b/src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx
index 6cf985a21..f1ca3872c 100644
--- a/src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx
@@ -19,8 +19,8 @@ export const ExportMarkdownSidebarEntry: React.FC = () => {
   }, [markdownContent])
 
   return (
-    <SidebarButton data-cy={"menu-export-markdown"} onClick={onClick} icon={'file-text'}>
-      <Trans i18nKey={'editor.export.markdown-file'}/>
+    <SidebarButton data-cy={ 'menu-export-markdown' } onClick={ onClick } icon={ 'file-text' }>
+      <Trans i18nKey={ 'editor.export.markdown-file' }/>
     </SidebarButton>
   )
 }
diff --git a/src/components/editor-page/sidebar/export-menu-sidebar-menu.tsx b/src/components/editor-page/sidebar/export-menu-sidebar-menu.tsx
index f81dc0288..91aa35dbb 100644
--- a/src/components/editor-page/sidebar/export-menu-sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/export-menu-sidebar-menu.tsx
@@ -29,32 +29,33 @@ export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = (
 
   return (
     <Fragment>
-      <SidebarButton data-cy={"menu-export"} hide={hide} icon={expand ? "arrow-left" : "cloud-download"}
-                     className={className} onClick={onClickHandler}>
-        <Trans i18nKey={'editor.documentBar.export'}/>
+      <SidebarButton data-cy={ 'menu-export' } hide={ hide } icon={ expand ? 'arrow-left' : 'cloud-download' }
+                     className={ className } onClick={ onClickHandler }>
+        <Trans i18nKey={ 'editor.documentBar.export' }/>
       </SidebarButton>
-      <SidebarMenu expand={expand}>
-        <SidebarButton icon={"github"}>
+      <SidebarMenu expand={ expand }>
+        <SidebarButton icon={ 'github' }>
           Gist
         </SidebarButton>
-        <SidebarButton icon={"gitlab"}>
+        <SidebarButton icon={ 'gitlab' }>
           Gitlab Snippet
         </SidebarButton>
 
         <ExportMarkdownSidebarEntry/>
 
-        <SidebarButton icon={"file-code-o"}>
+        <SidebarButton icon={ 'file-code-o' }>
           HTML
         </SidebarButton>
-        <SidebarButton icon={"file-code-o"}>
+        <SidebarButton icon={ 'file-code-o' }>
           <Trans i18nKey='editor.export.rawHtml'/>
         </SidebarButton>
-        <SidebarButton icon={"file-pdf-o"}>
-          <a className='small text-muted' dir={'auto'} href={links.faq} target={'_blank'} rel='noopener noreferrer'>
-            <Trans i18nKey={'editor.export.pdf'}/>
+        <SidebarButton icon={ 'file-pdf-o' }>
+          <a className='small text-muted' dir={ 'auto' } href={ links.faq } target={ '_blank' }
+             rel='noopener noreferrer'>
+            <Trans i18nKey={ 'editor.export.pdf' }/>
             &nbsp;
-            <span className={'text-primary'}>
-                <Trans i18nKey={'common.why'}/>
+            <span className={ 'text-primary' }>
+                <Trans i18nKey={ 'common.why' }/>
               </span>
           </a>
         </SidebarButton>
diff --git a/src/components/editor-page/sidebar/import-markdown-sidebar-entry.tsx b/src/components/editor-page/sidebar/import-markdown-sidebar-entry.tsx
index dfe62bb2d..24681be15 100644
--- a/src/components/editor-page/sidebar/import-markdown-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/import-markdown-sidebar-entry.tsx
@@ -20,7 +20,7 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
       const fileReader = new FileReader()
       fileReader.addEventListener('load', () => {
         const newContent = fileReader.result as string
-        setNoteMarkdownContent(markdownContent.length === 0 ? newContent : `${markdownContent}\n${newContent}`)
+        setNoteMarkdownContent(markdownContent.length === 0 ? newContent : `${ markdownContent }\n${ newContent }`)
       })
       fileReader.addEventListener('loadend', () => {
         resolve()
@@ -39,11 +39,11 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
 
   return (
     <Fragment>
-      <SidebarButton data-cy={"menu-import-markdown"} icon={"file-text-o"} onClick={buttonClick}>
-        <Trans i18nKey={'editor.import.file'}/>
+      <SidebarButton data-cy={ 'menu-import-markdown' } icon={ 'file-text-o' } onClick={ buttonClick }>
+        <Trans i18nKey={ 'editor.import.file' }/>
       </SidebarButton>
-      <UploadInput onLoad={onImportMarkdown} data-cy={"menu-import-markdown-input"}
-                   acceptedFiles={'.md, text/markdown, text/plain'} onClickRef={clickRef}/>
+      <UploadInput onLoad={ onImportMarkdown } data-cy={ 'menu-import-markdown-input' }
+                   acceptedFiles={ '.md, text/markdown, text/plain' } onClickRef={ clickRef }/>
     </Fragment>
   )
 }
diff --git a/src/components/editor-page/sidebar/import-menu-sidebar-menu.tsx b/src/components/editor-page/sidebar/import-menu-sidebar-menu.tsx
index 3979e523a..4b01877ad 100644
--- a/src/components/editor-page/sidebar/import-menu-sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/import-menu-sidebar-menu.tsx
@@ -29,19 +29,19 @@ export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = (
 
   return (
     <Fragment>
-      <SidebarButton data-cy={"menu-import"} hide={hide} icon={expand ? "arrow-left" : "cloud-upload"}
-                     className={className} onClick={onClickHandler}>
-        <Trans i18nKey={'editor.documentBar.import'}/>
+      <SidebarButton data-cy={ 'menu-import' } hide={ hide } icon={ expand ? 'arrow-left' : 'cloud-upload' }
+                     className={ className } onClick={ onClickHandler }>
+        <Trans i18nKey={ 'editor.documentBar.import' }/>
       </SidebarButton>
-      <SidebarMenu expand={expand}>
-        <SidebarButton icon={"github"}>
+      <SidebarMenu expand={ expand }>
+        <SidebarButton icon={ 'github' }>
           Gist
         </SidebarButton>
-        <SidebarButton icon={"gitlab"}>
+        <SidebarButton icon={ 'gitlab' }>
           Gitlab Snippet
         </SidebarButton>
-        <SidebarButton icon={"clipboard"}>
-          <Trans i18nKey={'editor.import.clipboard'}/>
+        <SidebarButton icon={ 'clipboard' }>
+          <Trans i18nKey={ 'editor.import.clipboard' }/>
         </SidebarButton>
         <ImportMarkdownSidebarEntry/>
       </SidebarMenu>
diff --git a/src/components/editor-page/sidebar/permissions-sidebar-entry.tsx b/src/components/editor-page/sidebar/permissions-sidebar-entry.tsx
index cd6b2a0f7..26d30b549 100644
--- a/src/components/editor-page/sidebar/permissions-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/permissions-sidebar-entry.tsx
@@ -10,16 +10,16 @@ import { PermissionModal } from '../document-bar/permissions/permission-modal'
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'
 
-export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({className, hide}) => {
+export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   const [showModal, setShowModal] = useState(false)
   useTranslation()
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={"lock"} onClick={() => setShowModal(true)}>
-        <Trans i18nKey={'editor.modal.permissions.title'}/>
+      <SidebarButton hide={ hide } className={ className } icon={ 'lock' } onClick={ () => setShowModal(true) }>
+        <Trans i18nKey={ 'editor.modal.permissions.title' }/>
       </SidebarButton>
-      <PermissionModal show={showModal} onHide={() => setShowModal(false)}/>
+      <PermissionModal show={ showModal } onHide={ () => setShowModal(false) }/>
     </Fragment>
   )
 }
diff --git a/src/components/editor-page/sidebar/pin-note-sidebar-entry.tsx b/src/components/editor-page/sidebar/pin-note-sidebar-entry.tsx
index 68ab85766..7282e786b 100644
--- a/src/components/editor-page/sidebar/pin-note-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/pin-note-sidebar-entry.tsx
@@ -16,8 +16,8 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
   const i18nKey = isPinned ? 'editor.documentBar.pinNoteToHistory' : 'editor.documentBar.pinnedToHistory'
 
   return (
-    <SidebarButton icon={'thumb-tack'} className={className} hide={hide}>
-      <Trans i18nKey={i18nKey}/>
+    <SidebarButton icon={ 'thumb-tack' } className={ className } hide={ hide }>
+      <Trans i18nKey={ i18nKey }/>
     </SidebarButton>
   )
 }
diff --git a/src/components/editor-page/sidebar/revision-sidebar-entry.tsx b/src/components/editor-page/sidebar/revision-sidebar-entry.tsx
index 0520e77f2..0c215052b 100644
--- a/src/components/editor-page/sidebar/revision-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/revision-sidebar-entry.tsx
@@ -10,15 +10,15 @@ import { RevisionModal } from '../document-bar/revisions/revision-modal'
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'
 
-export const RevisionSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({className, hide}) => {
+export const RevisionSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   const [showModal, setShowModal] = useState(false)
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={"history"} onClick={() => setShowModal(true)}>
-        <Trans i18nKey={'editor.modal.revision.title'}/>
+      <SidebarButton hide={ hide } className={ className } icon={ 'history' } onClick={ () => setShowModal(true) }>
+        <Trans i18nKey={ 'editor.modal.revision.title' }/>
       </SidebarButton>
-      <RevisionModal show={showModal} onHide={() => setShowModal(false)}/>
+      <RevisionModal show={ showModal } onHide={ () => setShowModal(false) }/>
     </Fragment>
   )
 }
diff --git a/src/components/editor-page/sidebar/share-sidebar-entry.tsx b/src/components/editor-page/sidebar/share-sidebar-entry.tsx
index 12aa2dba5..f739e6821 100644
--- a/src/components/editor-page/sidebar/share-sidebar-entry.tsx
+++ b/src/components/editor-page/sidebar/share-sidebar-entry.tsx
@@ -10,16 +10,16 @@ import { ShareModal } from '../document-bar/share/share-modal'
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'
 
-export const ShareSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({className, hide}) => {
+export const ShareSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
   const [showModal, setShowModal] = useState(false)
   useTranslation()
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={"share"} onClick={() => setShowModal(true)}>
-        <Trans i18nKey={'editor.modal.shareLink.title'}/>
+      <SidebarButton hide={ hide } className={ className } icon={ 'share' } onClick={ () => setShowModal(true) }>
+        <Trans i18nKey={ 'editor.modal.shareLink.title' }/>
       </SidebarButton>
-      <ShareModal show={showModal} onHide={() => setShowModal(false)}/>
+      <ShareModal show={ showModal } onHide={ () => setShowModal(false) }/>
     </Fragment>
   )
 }
diff --git a/src/components/editor-page/sidebar/sidebar-button.tsx b/src/components/editor-page/sidebar/sidebar-button.tsx
index e3bc60d40..18d025061 100644
--- a/src/components/editor-page/sidebar/sidebar-button.tsx
+++ b/src/components/editor-page/sidebar/sidebar-button.tsx
@@ -10,19 +10,19 @@ import { IconName } from '../../common/fork-awesome/types'
 import { ShowIf } from '../../common/show-if/show-if'
 import { SidebarEntryProps } from './types'
 
-export type SidebarEntryVariant = "primary"
+export type SidebarEntryVariant = 'primary'
 
-export const SidebarButton: React.FC<SidebarEntryProps> = ({children,  icon,  className, variant,buttonRef, hide, ...props }) => {
+export const SidebarButton: React.FC<SidebarEntryProps> = ({ children, icon, className, variant, buttonRef, hide, ...props }) => {
   return (
-    <button ref={buttonRef}
-            className={`sidebar-entry ${hide ? 'hide' : ''} ${variant ? `sidebar-entry-${variant}` : ''} ${className ?? ''}`} {...props} >
-      <ShowIf condition={!!icon}>
-        <span className={'sidebar-icon'}>
-          <ForkAwesomeIcon icon={icon as IconName}/>
+    <button ref={ buttonRef }
+            className={ `sidebar-entry ${ hide ? 'hide' : '' } ${ variant ? `sidebar-entry-${ variant }` : '' } ${ className ?? '' }` } { ...props } >
+      <ShowIf condition={ !!icon }>
+        <span className={ 'sidebar-icon' }>
+          <ForkAwesomeIcon icon={ icon as IconName }/>
         </span>
       </ShowIf>
-      <span className={'sidebar-text'}>
-        {children}
+      <span className={ 'sidebar-text' }>
+        { children }
       </span>
     </button>
   )
diff --git a/src/components/editor-page/sidebar/sidebar-menu.tsx b/src/components/editor-page/sidebar/sidebar-menu.tsx
index e31ae6df1..4e93e5b8e 100644
--- a/src/components/editor-page/sidebar/sidebar-menu.tsx
+++ b/src/components/editor-page/sidebar/sidebar-menu.tsx
@@ -7,12 +7,12 @@
 import React from 'react'
 import { SidebarMenuProps } from './types'
 
-export const SidebarMenu: React.FC<SidebarMenuProps> = ({children, expand}) => {
-    return (
-      <div className={`sidebar-menu ${expand ? 'show' : ''}`}>
-        <div className={`d-flex flex-column`}>
-          {children}
-        </div>
+export const SidebarMenu: React.FC<SidebarMenuProps> = ({ children, expand }) => {
+  return (
+    <div className={ `sidebar-menu ${ expand ? 'show' : '' }` }>
+      <div className={ `d-flex flex-column` }>
+        { children }
       </div>
-    );
+    </div>
+  )
 }
diff --git a/src/components/editor-page/sidebar/sidebar.tsx b/src/components/editor-page/sidebar/sidebar.tsx
index 73e21be07..80893bc5d 100644
--- a/src/components/editor-page/sidebar/sidebar.tsx
+++ b/src/components/editor-page/sidebar/sidebar.tsx
@@ -14,7 +14,7 @@ import { PermissionsSidebarEntry } from './permissions-sidebar-entry'
 import { PinNoteSidebarEntry } from './pin-note-sidebar-entry'
 import { RevisionSidebarEntry } from './revision-sidebar-entry'
 import { ShareSidebarEntry } from './share-sidebar-entry'
-import "./style/theme.scss"
+import './style/theme.scss'
 import { DocumentSidebarMenuSelection } from './types'
 import { UsersOnlineSidebarMenu } from './users-online-sidebar-menu/users-online-sidebar-menu'
 
@@ -36,19 +36,19 @@ export const Sidebar: React.FC = () => {
 
   return (
     <div className="slide-sidebar">
-      <div ref={sideBarRef} className={`sidebar-inner ${selectionIsNotNone ? 'show' : ''}`}>
-        <UsersOnlineSidebarMenu menuId={DocumentSidebarMenuSelection.USERS_ONLINE}
-                                selectedMenuId={selectedMenu} onClick={toggleValue}/>
-        <DocumentInfoSidebarEntry hide={selectionIsNotNone}/>
-        <RevisionSidebarEntry hide={selectionIsNotNone}/>
-        <PermissionsSidebarEntry hide={selectionIsNotNone}/>
-        <ImportMenuSidebarMenu menuId={DocumentSidebarMenuSelection.IMPORT}
-                               selectedMenuId={selectedMenu} onClick={toggleValue}/>
-        <ExportMenuSidebarMenu menuId={DocumentSidebarMenuSelection.EXPORT}
-                               selectedMenuId={selectedMenu} onClick={toggleValue}/>
-        <ShareSidebarEntry hide={selectionIsNotNone}/>
-        <DeleteNoteSidebarEntry hide={selectionIsNotNone}/>
-        <PinNoteSidebarEntry hide={selectionIsNotNone}/>
+      <div ref={ sideBarRef } className={ `sidebar-inner ${ selectionIsNotNone ? 'show' : '' }` }>
+        <UsersOnlineSidebarMenu menuId={ DocumentSidebarMenuSelection.USERS_ONLINE }
+                                selectedMenuId={ selectedMenu } onClick={ toggleValue }/>
+        <DocumentInfoSidebarEntry hide={ selectionIsNotNone }/>
+        <RevisionSidebarEntry hide={ selectionIsNotNone }/>
+        <PermissionsSidebarEntry hide={ selectionIsNotNone }/>
+        <ImportMenuSidebarMenu menuId={ DocumentSidebarMenuSelection.IMPORT }
+                               selectedMenuId={ selectedMenu } onClick={ toggleValue }/>
+        <ExportMenuSidebarMenu menuId={ DocumentSidebarMenuSelection.EXPORT }
+                               selectedMenuId={ selectedMenu } onClick={ toggleValue }/>
+        <ShareSidebarEntry hide={ selectionIsNotNone }/>
+        <DeleteNoteSidebarEntry hide={ selectionIsNotNone }/>
+        <PinNoteSidebarEntry hide={ selectionIsNotNone }/>
       </div>
     </div>
   )
diff --git a/src/components/editor-page/sidebar/style/colors.scss b/src/components/editor-page/sidebar/style/colors.scss
index a826a463b..5dee8cc5e 100644
--- a/src/components/editor-page/sidebar/style/colors.scss
+++ b/src/components/editor-page/sidebar/style/colors.scss
@@ -7,7 +7,7 @@
 .slide-sidebar {
   background: $body-bg;
 
-  .sidebar-menu>div {
+  .sidebar-menu > div {
     background: $sidebar-menu-bg;
     box-shadow: inset 0 7px 7px -6px $sidebar-menu-shadow;
   }
diff --git a/src/components/editor-page/sidebar/types.ts b/src/components/editor-page/sidebar/types.ts
index df44c484b..f7ab7f986 100644
--- a/src/components/editor-page/sidebar/types.ts
+++ b/src/components/editor-page/sidebar/types.ts
@@ -21,7 +21,7 @@ export interface SidebarEntryProps {
   hide?: boolean
   className?: string
   onClick?: () => void
-  "data-cy"?: string
+  'data-cy'?: string
 }
 
 export interface SidebarMenuProps {
diff --git a/src/components/editor-page/sidebar/upload-input.tsx b/src/components/editor-page/sidebar/upload-input.tsx
index cf2270221..9884a61d1 100644
--- a/src/components/editor-page/sidebar/upload-input.tsx
+++ b/src/components/editor-page/sidebar/upload-input.tsx
@@ -10,7 +10,7 @@ export interface UploadInputProps {
   onLoad: (file: File) => Promise<void>
   acceptedFiles: string
   onClickRef: MutableRefObject<(() => void) | undefined>
-  "data-cy"?: string
+  'data-cy'?: string
 }
 
 export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles, onClickRef, ...props }) => {
@@ -25,11 +25,13 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles,
         return
       }
       const file = fileInput.files[0]
-      onLoad(file).then(() => {
-        fileInput.value = ''
-      }).catch((error) => {
-        console.error(error)
-      })
+      onLoad(file)
+        .then(() => {
+          fileInput.value = ''
+        })
+        .catch((error) => {
+          console.error(error)
+        })
     })
     fileInput.click()
   }, [onLoad])
@@ -39,6 +41,7 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles,
   })
 
   return (
-    <input data-cy={props["data-cy"]} type='file' ref={fileInputReference} className='d-none' accept={acceptedFiles}/>
+    <input data-cy={ props['data-cy'] } type='file' ref={ fileInputReference } className='d-none'
+           accept={ acceptedFiles }/>
   )
 }
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 033c868b7..8376eef7d 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
@@ -18,6 +18,6 @@ export interface ActiveIndicatorProps {
 
 export const ActiveIndicator: React.FC<ActiveIndicatorProps> = ({ status }) => {
   return (
-    <span className={`activeIndicator ${status}`}/>
+    <span className={ `activeIndicator ${ status }` }/>
   )
 }
diff --git a/src/components/editor-page/sidebar/users-online-sidebar-menu/user-line.tsx b/src/components/editor-page/sidebar/users-online-sidebar-menu/user-line.tsx
index 79a9fbe8b..9ea088fe7 100644
--- a/src/components/editor-page/sidebar/users-online-sidebar-menu/user-line.tsx
+++ b/src/components/editor-page/sidebar/users-online-sidebar-menu/user-line.tsx
@@ -18,11 +18,12 @@ export interface UserLineProps {
 
 export const UserLine: React.FC<UserLineProps> = ({ name, photo, color, status }) => {
   return (
-    <div className={'d-flex align-items-center h-100 w-100'}>
-      <div className='d-inline-flex align-items-bottom user-line-color-indicator' style={{ borderLeftColor: color }}/>
-      <UserAvatar photo={photo} name={name} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'}/>
-      <div className={"active-indicator-container"}>
-        <ActiveIndicator status={status} />
+    <div className={ 'd-flex align-items-center h-100 w-100' }>
+      <div className='d-inline-flex align-items-bottom user-line-color-indicator' style={ { borderLeftColor: color } }/>
+      <UserAvatar photo={ photo } name={ name }
+                  additionalClasses={ 'flex-fill overflow-hidden px-2 text-nowrap w-100' }/>
+      <div className={ 'active-indicator-container' }>
+        <ActiveIndicator status={ status }/>
       </div>
     </div>
   )
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 70c5e24b6..e753ce4ad 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,18 +14,18 @@ import './online-counter.scss'
 import { UserLine } from './user-line'
 
 export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
-                                                                             className,
-                                                                             menuId,
-                                                                             onClick,
-                                                                             selectedMenuId
-                                                                           }) => {
+  className,
+  menuId,
+  onClick,
+  selectedMenuId
+}) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const [counter] = useState(2)
   useTranslation()
 
   useEffect(() => {
-    const value = `${counter}`
-    buttonRef.current?.style.setProperty('--users-online', `"${value}"`)
+    const value = `${ counter }`
+    buttonRef.current?.style.setProperty('--users-online', `"${ value }"`)
   }, [counter])
 
   const hide = selectedMenuId !== DocumentSidebarMenuSelection.NONE && selectedMenuId !== menuId
@@ -36,16 +36,19 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} buttonRef={buttonRef} onClick={onClickHandler} icon={expand ? "arrow-left" : "users"}
-                     variant={'primary'} className={`online-entry ${className ?? ''}`}>
-        <Trans i18nKey={'editor.onlineStatus.online'}/>
+      <SidebarButton hide={ hide } buttonRef={ buttonRef } onClick={ onClickHandler }
+                     icon={ expand ? 'arrow-left' : 'users' }
+                     variant={ 'primary' } className={ `online-entry ${ className ?? '' }` }>
+        <Trans i18nKey={ 'editor.onlineStatus.online' }/>
       </SidebarButton>
-      <SidebarMenu expand={expand}>
+      <SidebarMenu expand={ expand }>
         <SidebarButton>
-          <UserLine name="Philip Molares" photo="/img/avatar.png" color="red" status={ActiveIndicatorStatus.INACTIVE}/>
+          <UserLine name="Philip Molares" photo="/img/avatar.png" color="red"
+                    status={ ActiveIndicatorStatus.INACTIVE }/>
         </SidebarButton>
         <SidebarButton>
-          <UserLine name="Tilman Vatteroth" photo="/img/avatar.png" color="blue" status={ActiveIndicatorStatus.ACTIVE}/>
+          <UserLine name="Tilman Vatteroth" photo="/img/avatar.png" color="blue"
+                    status={ ActiveIndicatorStatus.ACTIVE }/>
         </SidebarButton>
       </SidebarMenu>
     </Fragment>
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 ba42dd739..589a94351 100644
--- a/src/components/editor-page/splitter/split-divider/split-divider.tsx
+++ b/src/components/editor-page/splitter/split-divider/split-divider.tsx
@@ -14,8 +14,8 @@ export interface SplitDividerProps {
 export const SplitDivider: React.FC<SplitDividerProps> = ({ onGrab }) => {
   return (
     <div
-      onMouseDown={() => onGrab()}
-      onTouchStart={() => onGrab()}
-      className={'split-divider'}/>
+      onMouseDown={ () => onGrab() }
+      onTouchStart={ () => onGrab() }
+      className={ 'split-divider' }/>
   )
 }
diff --git a/src/components/editor-page/splitter/splitter.tsx b/src/components/editor-page/splitter/splitter.tsx
index a8adf3169..91326ff98 100644
--- a/src/components/editor-page/splitter/splitter.tsx
+++ b/src/components/editor-page/splitter/splitter.tsx
@@ -54,18 +54,19 @@ export const Splitter: React.FC<SplitterProps> = ({ containerClassName, left, ri
   const onGrab = useCallback(() => setDoResizing(true), [])
 
   return (
-    <div ref={splitContainer} className={`flex-fill flex-row d-flex ${containerClassName || ''}`}
-         onMouseUp={stopResizing} onTouchEnd={stopResizing} onMouseMove={onMouseMove} onTouchMove={onTouchMove}>
-      <div className={`splitter left ${!showLeft ? 'd-none' : ''}`} style={{ flexBasis: `calc(${realSplit}% - 5px)` }}>
-        {left}
+    <div ref={ splitContainer } className={ `flex-fill flex-row d-flex ${ containerClassName || '' }` }
+         onMouseUp={ stopResizing } onTouchEnd={ stopResizing } onMouseMove={ onMouseMove } onTouchMove={ onTouchMove }>
+      <div className={ `splitter left ${ !showLeft ? 'd-none' : '' }` }
+           style={ { flexBasis: `calc(${ realSplit }% - 5px)` } }>
+        { left }
       </div>
-      <ShowIf condition={showLeft && showRight}>
+      <ShowIf condition={ showLeft && showRight }>
         <div className='splitter separator'>
-          <SplitDivider onGrab={onGrab}/>
+          <SplitDivider onGrab={ onGrab }/>
         </div>
       </ShowIf>
-      <div className={`splitter right ${!showRight ? 'd-none' : ''}`}>
-        {right}
+      <div className={ `splitter right ${ !showRight ? 'd-none' : '' }` }>
+        { right }
       </div>
     </div>
   )
diff --git a/src/components/editor-page/synced-scroll/hooks/use-synced-scrolling.ts b/src/components/editor-page/synced-scroll/hooks/use-synced-scrolling.ts
index 1ff044c56..eada03495 100644
--- a/src/components/editor-page/synced-scroll/hooks/use-synced-scrolling.ts
+++ b/src/components/editor-page/synced-scroll/hooks/use-synced-scrolling.ts
@@ -11,10 +11,10 @@ import { useOnUserScroll } from './use-on-user-scroll'
 import { useScrollToLineMark } from './use-scroll-to-line-mark'
 
 export const useSyncedScrolling = (outerContainerRef: React.RefObject<HTMLElement>,
-                                   rendererRef: React.RefObject<HTMLElement>,
-                                   numberOfLines: number,
-                                   scrollState?: ScrollState,
-                                   onScroll?: (scrollState: ScrollState) => void): [(lineMarkers: LineMarkerPosition[]) => void, () => void] => {
+  rendererRef: React.RefObject<HTMLElement>,
+  numberOfLines: number,
+  scrollState?: ScrollState,
+  onScroll?: (scrollState: ScrollState) => void): [(lineMarkers: LineMarkerPosition[]) => void, () => void] => {
   const [lineMarks, setLineMarks] = useState<LineMarkerPosition[]>()
 
   const onLineMarkerPositionChanged = useCallback((linkMarkerPositions: LineMarkerPosition[]) => {
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 c1b2d1133..5956205f8 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
@@ -19,28 +19,31 @@ export interface TableOfContentsProps {
 }
 
 export const slugify = (content: string): string => {
-  return encodeURIComponent(content.trim().toLowerCase().replace(/\s+/g, '-'))
+  return encodeURIComponent(content.trim()
+                                   .toLowerCase()
+                                   .replace(/\s+/g, '-'))
 }
 
 const convertLevel = (toc: TocAst, levelsToShowUnderThis: number, headerCounts: Map<string, number>,
-                      wrapInListItem: boolean, baseUrl?: string): ReactElement | null => {
+  wrapInListItem: boolean, baseUrl?: string): ReactElement | null => {
   if (levelsToShowUnderThis < 0) {
     return null
   }
 
   const rawName = toc.n.trim()
   const nameCount = (headerCounts.get(rawName) ?? -1) + 1
-  const slug = `#${slugify(rawName)}${nameCount > 0 ? `-${nameCount}` : ''}`
+  const slug = `#${ slugify(rawName) }${ nameCount > 0 ? `-${ nameCount }` : '' }`
   const headlineUrl = new URL(slug, baseUrl).toString()
 
   headerCounts.set(rawName, nameCount)
 
   const content = (
     <Fragment>
-      <ShowIf condition={toc.l > 0}>
-        <a href={headlineUrl} title={rawName} onClick={createJumpToMarkClickEventHandler(slug.substr(1))}>{rawName}</a>
+      <ShowIf condition={ toc.l > 0 }>
+        <a href={ headlineUrl } title={ rawName }
+           onClick={ createJumpToMarkClickEventHandler(slug.substr(1)) }>{ rawName }</a>
       </ShowIf>
-      <ShowIf condition={toc.c.length > 0}>
+      <ShowIf condition={ toc.c.length > 0 }>
         <ul>
           {
             toc.c.map(child =>
@@ -53,8 +56,8 @@ const convertLevel = (toc: TocAst, levelsToShowUnderThis: number, headerCounts:
 
   if (wrapInListItem) {
     return (
-      <li key={headlineUrl}>
-        {content}
+      <li key={ headlineUrl }>
+        { content }
       </li>
     )
   } else {
@@ -63,20 +66,21 @@ const convertLevel = (toc: TocAst, levelsToShowUnderThis: number, headerCounts:
 }
 
 export const TableOfContents: React.FC<TableOfContentsProps> = ({
-                                                                  ast,
-                                                                  maxDepth = 3,
-                                                                  className,
-                                                                  baseUrl
-                                                                }) => {
+  ast,
+  maxDepth = 3,
+  className,
+  baseUrl
+}) => {
   useTranslation()
-  const tocTree = useMemo(() => convertLevel(ast, maxDepth, new Map<string, number>(), false, baseUrl), [ast, maxDepth, baseUrl])
+  const tocTree = useMemo(() => convertLevel(ast, maxDepth, new Map<string, number>(), false, baseUrl), [ast, maxDepth,
+    baseUrl])
 
   return (
-    <div className={`markdown-toc ${className ?? ''}`}>
-      <ShowIf condition={ast.c.length === 0}>
-        <Trans i18nKey={'editor.infoToc'}/>
+    <div className={ `markdown-toc ${ className ?? '' }` }>
+      <ShowIf condition={ ast.c.length === 0 }>
+        <Trans i18nKey={ 'editor.infoToc' }/>
       </ShowIf>
-      {tocTree}
+      { tocTree }
     </div>
   )
 }
diff --git a/src/components/editor-page/utils.ts b/src/components/editor-page/utils.ts
index 36d996a8b..5113548a7 100644
--- a/src/components/editor-page/utils.ts
+++ b/src/components/editor-page/utils.ts
@@ -4,4 +4,5 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export const isMac = navigator.platform.toLowerCase().includes('mac')
+export const isMac = navigator.platform.toLowerCase()
+                              .includes('mac')
diff --git a/src/components/error-boundary/error-boundary.tsx b/src/components/error-boundary/error-boundary.tsx
index 5adc9cf99..d64391e04 100644
--- a/src/components/error-boundary/error-boundary.tsx
+++ b/src/components/error-boundary/error-boundary.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Component, ErrorInfo, ReactElement, ReactNodeArray } from 'react'
 import { Button, Container } from 'react-bootstrap'
@@ -16,37 +16,39 @@ export class ErrorBoundary extends Component {
     hasError: boolean
   }
 
-  constructor (props: Readonly<unknown>) {
+  constructor(props: Readonly<unknown>) {
     super(props)
     this.state = { hasError: false }
   }
 
-  static getDerivedStateFromError (_error: Error): { hasError: boolean } {
+  static getDerivedStateFromError(_error: Error): { hasError: boolean } {
     // Update state so the next render will show the fallback UI.
     return { hasError: true }
   }
 
-  componentDidCatch (error: Error, errorInfo: ErrorInfo): void {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     console.error('error caught', error)
     console.error('additional information', errorInfo)
   }
 
-  refreshPage (): void {
+  refreshPage(): void {
     window.location.reload()
   }
 
-  render (): ReactElement | undefined | null | string | number | boolean | Record<string, unknown> | ReactNodeArray {
+  render(): ReactElement | undefined | null | string | number | boolean | Record<string, unknown> | ReactNodeArray {
     if (this.state.hasError) {
       return (
         <Container className="text-light d-flex flex-column mvh-100">
           <div className='text-light d-flex flex-column align-items-center justify-content-center my-5'>
             <h1>An unknown error occurred</h1>
-            <p>Don't worry, this happens sometimes. If this is the first time you see this page then try reloading the app.</p>
+            <p>Don't worry, this happens sometimes. If this is the first time you see this page then try reloading the
+              app.</p>
             If you can reproduce this error, then we would be glad if you&#32;
-            <ExternalLink text={'open an issue on github'} href={frontendVersion.issueTrackerUrl} className={'text-primary'}/>&#32;
-            or <ExternalLink text={'contact us on matrix.'} href={links.chat} className={'text-primary'}/>
-            <Button onClick={() => this.refreshPage()} title={'Reload App'} className={'mt-4'}>
-              <ForkAwesomeIcon icon={'refresh'}/>&nbsp;Reload App
+            <ExternalLink text={ 'open an issue on github' } href={ frontendVersion.issueTrackerUrl }
+                          className={ 'text-primary' }/>&#32;
+            or <ExternalLink text={ 'contact us on matrix.' } href={ links.chat } className={ 'text-primary' }/>
+            <Button onClick={ () => this.refreshPage() } title={ 'Reload App' } className={ 'mt-4' }>
+              <ForkAwesomeIcon icon={ 'refresh' }/>&nbsp;Reload App
             </Button>
           </div>
         </Container>
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 11e88f9fb..77e19a91b 100644
--- a/src/components/history-page/entry-menu/delete-note-item.tsx
+++ b/src/components/history-page/entry-menu/delete-note-item.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { DropdownItemWithDeletionModal } from './dropdown-item-with-deletion-modal'
@@ -15,13 +15,13 @@ export interface DeleteNoteItemProps {
 export const DeleteNoteItem: React.FC<DeleteNoteItemProps> = ({ noteTitle, onConfirm }) => {
   return (
     <DropdownItemWithDeletionModal
-      onConfirm={onConfirm}
-      itemI18nKey={'landing.history.menu.deleteNote'}
-      modalButtonI18nKey={'editor.modal.deleteNote.button'}
-      modalIcon={'trash'}
-      modalTitleI18nKey={'editor.modal.deleteNote.title'}
-      modalQuestionI18nKey={'editor.modal.deleteNote.question'}
-      modalWarningI18nKey={'editor.modal.deleteNote.warning'}
-      noteTitle={noteTitle} />
+      onConfirm={ onConfirm }
+      itemI18nKey={ 'landing.history.menu.deleteNote' }
+      modalButtonI18nKey={ 'editor.modal.deleteNote.button' }
+      modalIcon={ 'trash' }
+      modalTitleI18nKey={ 'editor.modal.deleteNote.title' }
+      modalQuestionI18nKey={ 'editor.modal.deleteNote.question' }
+      modalWarningI18nKey={ 'editor.modal.deleteNote.warning' }
+      noteTitle={ noteTitle }/>
   )
 }
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 c7d1bb1d4..640f975f1 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
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useState } from 'react'
 import { Dropdown } from 'react-bootstrap'
@@ -33,24 +33,24 @@ export const DropdownItemWithDeletionModal: React.FC<DropdownItemWithDeletionMod
 
   return (
     <Fragment>
-      <Dropdown.Item onClick={() => setShowDialog(true)} className={className}>
-        <ForkAwesomeIcon icon={modalIcon} fixedWidth={true} className="mx-2"/>
-        <Trans i18nKey={itemI18nKey}/>
+      <Dropdown.Item onClick={ () => setShowDialog(true) } className={ className }>
+        <ForkAwesomeIcon icon={ modalIcon } fixedWidth={ true } className="mx-2"/>
+        <Trans i18nKey={ itemI18nKey }/>
       </Dropdown.Item>
       <DeletionModal
-        onConfirm={() => {
+        onConfirm={ () => {
           setShowDialog(false)
           onConfirm()
-        }}
-        deletionButtonI18nKey={modalButtonI18nKey}
-        show={showDialog}
-        onHide={() => setShowDialog(false)}
-        titleI18nKey={modalTitleI18nKey}>
-        <h5><Trans i18nKey={modalQuestionI18nKey}/></h5>
+        } }
+        deletionButtonI18nKey={ modalButtonI18nKey }
+        show={ showDialog }
+        onHide={ () => setShowDialog(false) }
+        titleI18nKey={ modalTitleI18nKey }>
+        <h5><Trans i18nKey={ modalQuestionI18nKey }/></h5>
         <ul>
           <li>{ noteTitle }</li>
         </ul>
-        <h6><Trans i18nKey={modalWarningI18nKey}/></h6>
+        <h6><Trans i18nKey={ modalWarningI18nKey }/></h6>
       </DeletionModal>
     </Fragment>
   )
diff --git a/src/components/history-page/entry-menu/entry-menu.tsx b/src/components/history-page/entry-menu/entry-menu.tsx
index bd31df302..fb671a48e 100644
--- a/src/components/history-page/entry-menu/entry-menu.tsx
+++ b/src/components/history-page/entry-menu/entry-menu.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
@@ -28,9 +28,10 @@ export const EntryMenu: React.FC<EntryMenuProps> = ({ id, title, location, isDar
   useTranslation()
 
   return (
-    <Dropdown className={`d-inline-flex ${className || ''}`}>
-      <Dropdown.Toggle variant={isDark ? 'secondary' : 'light'} id={`dropdown-card-${id}`} className='no-arrow history-menu d-inline-flex align-items-center'>
-        <ForkAwesomeIcon icon="ellipsis-v" fixedWidth={true}/>
+    <Dropdown className={ `d-inline-flex ${ className || '' }` }>
+      <Dropdown.Toggle variant={ isDark ? 'secondary' : 'light' } id={ `dropdown-card-${ id }` }
+                       className='no-arrow history-menu d-inline-flex align-items-center'>
+        <ForkAwesomeIcon icon="ellipsis-v" fixedWidth={ true }/>
       </Dropdown.Toggle>
 
       <Dropdown.Menu>
@@ -39,23 +40,23 @@ export const EntryMenu: React.FC<EntryMenuProps> = ({ id, title, location, isDar
           <Trans i18nKey="landing.history.menu.recentNotes"/>
         </Dropdown.Header>
 
-        <ShowIf condition={location === HistoryEntryOrigin.LOCAL}>
+        <ShowIf condition={ location === HistoryEntryOrigin.LOCAL }>
           <Dropdown.Item disabled>
-            <ForkAwesomeIcon icon="laptop" fixedWidth={true} className="mx-2"/>
+            <ForkAwesomeIcon icon="laptop" fixedWidth={ true } className="mx-2"/>
             <Trans i18nKey="landing.history.menu.entryLocal"/>
           </Dropdown.Item>
         </ShowIf>
-        <ShowIf condition={location === HistoryEntryOrigin.REMOTE}>
+        <ShowIf condition={ location === HistoryEntryOrigin.REMOTE }>
           <Dropdown.Item disabled>
-            <ForkAwesomeIcon icon="cloud" fixedWidth={true} className="mx-2"/>
+            <ForkAwesomeIcon icon="cloud" fixedWidth={ true } className="mx-2"/>
             <Trans i18nKey="landing.history.menu.entryRemote"/>
           </Dropdown.Item>
         </ShowIf>
-        <RemoveNoteEntryItem onConfirm={onRemove} noteTitle={title} />
+        <RemoveNoteEntryItem onConfirm={ onRemove } noteTitle={ title }/>
 
         <Dropdown.Divider/>
 
-        <DeleteNoteItem onConfirm={onDelete} noteTitle={title} />
+        <DeleteNoteItem onConfirm={ onDelete } noteTitle={ title }/>
       </Dropdown.Menu>
     </Dropdown>
   )
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 306a1971e..ede5132ba 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,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { DropdownItemWithDeletionModal } from './dropdown-item-with-deletion-modal'
@@ -15,13 +15,13 @@ export interface RemoveNoteEntryItemProps {
 export const RemoveNoteEntryItem: React.FC<RemoveNoteEntryItemProps> = ({ noteTitle, onConfirm }) => {
   return (
     <DropdownItemWithDeletionModal
-      onConfirm={onConfirm}
-      itemI18nKey={'landing.history.menu.removeEntry'}
-      modalButtonI18nKey={'landing.history.modal.removeNote.button'}
-      modalIcon={'archive'}
-      modalTitleI18nKey={'landing.history.modal.removeNote.title'}
-      modalQuestionI18nKey={'landing.history.modal.removeNote.question'}
-      modalWarningI18nKey={'landing.history.modal.removeNote.warning'}
-      noteTitle={noteTitle} />
+      onConfirm={ onConfirm }
+      itemI18nKey={ 'landing.history.menu.removeEntry' }
+      modalButtonI18nKey={ 'landing.history.modal.removeNote.button' }
+      modalIcon={ 'archive' }
+      modalTitleI18nKey={ 'landing.history.modal.removeNote.title' }
+      modalQuestionI18nKey={ 'landing.history.modal.removeNote.question' }
+      modalWarningI18nKey={ 'landing.history.modal.removeNote.warning' }
+      noteTitle={ noteTitle }/>
   )
 }
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 b3902387f..7273c49b9 100644
--- a/src/components/history-page/history-card/history-card-list.tsx
+++ b/src/components/history-page/history-card/history-card-list.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Row } from 'react-bootstrap'
@@ -13,15 +13,15 @@ import { HistoryCard } from './history-card'
 export const HistoryCardList: React.FC<HistoryEntriesProps> = ({ entries, onPinClick, onRemoveClick, onDeleteClick, pageIndex, onLastPageIndexChange }) => {
   return (
     <Row className="justify-content-start">
-      <Pager numberOfElementsPerPage={9} pageIndex={pageIndex} onLastPageIndexChange={onLastPageIndexChange}>
+      <Pager numberOfElementsPerPage={ 9 } pageIndex={ pageIndex } onLastPageIndexChange={ onLastPageIndexChange }>
         {
           entries.map((entry) => (
             <HistoryCard
-              key={entry.id}
-              entry={entry}
-              onPinClick={onPinClick}
-              onRemoveClick={onRemoveClick}
-              onDeleteClick={onDeleteClick}
+              key={ entry.id }
+              entry={ entry }
+              onPinClick={ onPinClick }
+              onRemoveClick={ onRemoveClick }
+              onDeleteClick={ onDeleteClick }
             />))
         }
       </Pager>
diff --git a/src/components/history-page/history-card/history-card.tsx b/src/components/history-page/history-card/history-card.tsx
index 63af14f6c..307185732 100644
--- a/src/components/history-page/history-card/history-card.tsx
+++ b/src/components/history-page/history-card/history-card.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DateTime } from 'luxon'
 import React from 'react'
@@ -18,35 +18,38 @@ import './history-card.scss'
 export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick, onRemoveClick, onDeleteClick }) => {
   return (
     <div className="p-2 col-xs-12 col-sm-6 col-md-6 col-lg-4">
-      <Card className="card-min-height" text={'dark'} bg={'light'}>
+      <Card className="card-min-height" text={ 'dark' } bg={ 'light' }>
         <Card.Body className="p-2 d-flex flex-row justify-content-between">
-          <div className={'d-flex flex-column'}>
-            <PinButton isDark={false} isPinned={entry.pinned} onPinClick={() => onPinClick(entry.id, entry.location)}/>
+          <div className={ 'd-flex flex-column' }>
+            <PinButton isDark={ false } isPinned={ entry.pinned }
+                       onPinClick={ () => onPinClick(entry.id, entry.location) }/>
           </div>
-          <Link to={`/n/${entry.id}`} className="text-decoration-none flex-fill text-dark">
-            <div className={'d-flex flex-column justify-content-between'}>
-              <Card.Title className="m-0 mt-1dot5">{entry.title}</Card.Title>
+          <Link to={ `/n/${ entry.id }` } className="text-decoration-none flex-fill text-dark">
+            <div className={ 'd-flex flex-column justify-content-between' }>
+              <Card.Title className="m-0 mt-1dot5">{ entry.title }</Card.Title>
               <div>
                 <div className="text-black-50 mt-2">
-                  <ForkAwesomeIcon icon="clock-o"/> {DateTime.fromISO(entry.lastVisited).toRelative()}<br/>
-                  {formatHistoryDate(entry.lastVisited)}
+                  <ForkAwesomeIcon icon="clock-o"/> { DateTime.fromISO(entry.lastVisited)
+                                                              .toRelative() }<br/>
+                  { formatHistoryDate(entry.lastVisited) }
                 </div>
-                <div className={'card-footer-min-height p-0'}>
+                <div className={ 'card-footer-min-height p-0' }>
                   {
-                    entry.tags.map((tag) => <Badge variant={'dark'} className={'mr-1 mb-1'} key={tag}>{tag}</Badge>)
+                    entry.tags.map((tag) => <Badge variant={ 'dark' } className={ 'mr-1 mb-1' }
+                                                   key={ tag }>{ tag }</Badge>)
                   }
                 </div>
               </div>
             </div>
           </Link>
-          <div className={'d-flex flex-column'}>
+          <div className={ 'd-flex flex-column' }>
             <EntryMenu
-              id={entry.id}
-              title={entry.title}
-              location={entry.location}
-              isDark={false}
-              onRemove={() => onRemoveClick(entry.id, entry.location)}
-              onDelete={() => onDeleteClick(entry.id, entry.location)}
+              id={ entry.id }
+              title={ entry.title }
+              location={ entry.location }
+              isDark={ false }
+              onRemove={ () => onRemoveClick(entry.id, entry.location) }
+              onDelete={ () => onDeleteClick(entry.id, entry.location) }
             />
           </div>
         </Card.Body>
diff --git a/src/components/history-page/history-content/history-content.tsx b/src/components/history-page/history-content/history-content.tsx
index a7ec726e8..d5623bc95 100644
--- a/src/components/history-page/history-content/history-content.tsx
+++ b/src/components/history-page/history-content/history-content.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useState } from 'react'
 import { Alert, Row } from 'react-bootstrap'
@@ -31,12 +31,12 @@ export interface HistoryEntryProps {
 }
 
 export interface HistoryEntriesProps {
-    entries: LocatedHistoryEntry[]
-    onPinClick: OnEntryClick
-    onRemoveClick: OnEntryClick
-    onDeleteClick: OnEntryClick
-    pageIndex: number
-    onLastPageIndexChange: (lastPageIndex: number) => void
+  entries: LocatedHistoryEntry[]
+  onPinClick: OnEntryClick
+  onRemoveClick: OnEntryClick
+  onDeleteClick: OnEntryClick
+  pageIndex: number
+  onLastPageIndexChange: (lastPageIndex: number) => void
 }
 
 export const HistoryContent: React.FC<HistoryContentProps> = ({ viewState, entries, onPinClick, onRemoveClick, onDeleteClick }) => {
@@ -46,9 +46,9 @@ export const HistoryContent: React.FC<HistoryContentProps> = ({ viewState, entri
 
   if (entries.length === 0) {
     return (
-      <Row className={'justify-content-center'}>
-        <Alert variant={'secondary'}>
-          <Trans i18nKey={'landing.history.noHistory'}/>
+      <Row className={ 'justify-content-center' }>
+        <Alert variant={ 'secondary' }>
+          <Trans i18nKey={ 'landing.history.noHistory' }/>
         </Alert>
       </Row>
     )
@@ -57,29 +57,29 @@ export const HistoryContent: React.FC<HistoryContentProps> = ({ viewState, entri
   const mapViewStateToComponent = (viewState: ViewStateEnum) => {
     switch (viewState) {
       case ViewStateEnum.TABLE:
-        return <HistoryTable entries={entries}
-          onPinClick={onPinClick}
-          onRemoveClick={onRemoveClick}
-          onDeleteClick={onDeleteClick}
-          pageIndex={pageIndex}
-          onLastPageIndexChange={setLastPageIndex}/>
+        return <HistoryTable entries={ entries }
+                             onPinClick={ onPinClick }
+                             onRemoveClick={ onRemoveClick }
+                             onDeleteClick={ onDeleteClick }
+                             pageIndex={ pageIndex }
+                             onLastPageIndexChange={ setLastPageIndex }/>
       case ViewStateEnum.CARD:
       default:
-        return <HistoryCardList entries={entries}
-          onPinClick={onPinClick}
-          onRemoveClick={onRemoveClick}
-          onDeleteClick={onDeleteClick}
-          pageIndex={pageIndex}
-          onLastPageIndexChange={setLastPageIndex}/>
+        return <HistoryCardList entries={ entries }
+                                onPinClick={ onPinClick }
+                                onRemoveClick={ onRemoveClick }
+                                onDeleteClick={ onDeleteClick }
+                                pageIndex={ pageIndex }
+                                onLastPageIndexChange={ setLastPageIndex }/>
     }
   }
 
   return (
     <Fragment>
-      {mapViewStateToComponent(viewState)}
+      { mapViewStateToComponent(viewState) }
       <Row className="justify-content-center">
-        <PagerPagination numberOfPageButtonsToShowAfterAndBeforeCurrent={2} lastPageIndex={lastPageIndex}
-          onPageChange={setPageIndex}/>
+        <PagerPagination numberOfPageButtonsToShowAfterAndBeforeCurrent={ 2 } lastPageIndex={ lastPageIndex }
+                         onPageChange={ setPageIndex }/>
       </Row>
     </Fragment>)
 }
diff --git a/src/components/history-page/history-page.tsx b/src/components/history-page/history-page.tsx
index 05d9e4628..abdb7d680 100644
--- a/src/components/history-page/history-page.tsx
+++ b/src/components/history-page/history-page.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
 import { Row } from 'react-bootstrap'
@@ -96,7 +96,7 @@ export const HistoryPage: React.FC = () => {
       version: 2,
       entries: mergeEntryArrays(localHistoryEntries, remoteHistoryEntries)
     }
-    download(JSON.stringify(dataObject), `history_${(new Date()).getTime()}.json`, 'application/json')
+    download(JSON.stringify(dataObject), `history_${ (new Date()).getTime() }.json`, 'application/json')
   }, [localHistoryEntries, remoteHistoryEntries])
 
   const clearHistory = useCallback(() => {
@@ -164,7 +164,7 @@ export const HistoryPage: React.FC = () => {
       }
       updateHistoryEntry(entryId, changedEntry)
         .then(() => setRemoteHistoryEntries((entries) => (
-          entries.map((entry) => {
+            entries.map((entry) => {
               if (entry.id === entryId) {
                 entry.pinned = !entry.pinned
               }
@@ -186,44 +186,44 @@ export const HistoryPage: React.FC = () => {
 
   const tags = useMemo<string[]>(() => {
     return allEntries.map(entry => entry.tags)
-      .reduce((a, b) => ([...a, ...b]), [])
-      .filter((value, index, array) => {
-        if (index === 0) {
-          return true
-        }
-        return (value !== array[index - 1])
-      })
+                     .reduce((a, b) => ([...a, ...b]), [])
+                     .filter((value, index, array) => {
+                       if (index === 0) {
+                         return true
+                       }
+                       return (value !== array[index - 1])
+                     })
   }, [allEntries])
 
   const entriesToShow = useMemo<LocatedHistoryEntry[]>(() =>
-    sortAndFilterEntries(allEntries, toolbarState),
-  [allEntries, toolbarState])
+      sortAndFilterEntries(allEntries, toolbarState),
+    [allEntries, toolbarState])
 
   return <Fragment>
-    <ErrorModal show={error !== ''} onHide={resetError}
-      titleI18nKey={error !== '' ? `landing.history.error.${error}.title` : ''}>
+    <ErrorModal show={ error !== '' } onHide={ resetError }
+                titleI18nKey={ error !== '' ? `landing.history.error.${ error }.title` : '' }>
       <h5>
-        <Trans i18nKey={error !== '' ? `landing.history.error.${error}.text` : ''}/>
+        <Trans i18nKey={ error !== '' ? `landing.history.error.${ error }.text` : '' }/>
       </h5>
     </ErrorModal>
     <h1 className="mb-4"><Trans i18nKey="landing.navigation.history"/></h1>
-    <Row className={'justify-content-center mt-5 mb-3'}>
+    <Row className={ 'justify-content-center mt-5 mb-3' }>
       <HistoryToolbar
-        onSettingsChange={setToolbarState}
-        tags={tags}
-        onClearHistory={clearHistory}
-        onRefreshHistory={refreshHistory}
-        onExportHistory={exportHistory}
-        onImportHistory={importHistory}
-        onUploadAll={uploadAll}
+        onSettingsChange={ setToolbarState }
+        tags={ tags }
+        onClearHistory={ clearHistory }
+        onRefreshHistory={ refreshHistory }
+        onExportHistory={ exportHistory }
+        onImportHistory={ importHistory }
+        onUploadAll={ uploadAll }
       />
     </Row>
     <HistoryContent
-      viewState={toolbarState.viewState}
-      entries={entriesToShow}
-      onPinClick={pinClick}
-      onRemoveClick={removeFromHistoryClick}
-      onDeleteClick={deleteNoteClick}
+      viewState={ toolbarState.viewState }
+      entries={ entriesToShow }
+      onPinClick={ pinClick }
+      onRemoveClick={ removeFromHistoryClick }
+      onDeleteClick={ deleteNoteClick }
     />
   </Fragment>
 }
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 ee900c8dc..511a927d5 100644
--- a/src/components/history-page/history-table/history-table-row.tsx
+++ b/src/components/history-page/history-table/history-table-row.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Badge } from 'react-bootstrap'
@@ -16,26 +16,27 @@ export const HistoryTableRow: React.FC<HistoryEntryProps> = ({ entry, onPinClick
   return (
     <tr>
       <td>
-        <Link to={`/n/${entry.id}`} className="text-light">
-          {entry.title}
+        <Link to={ `/n/${ entry.id }` } className="text-light">
+          { entry.title }
         </Link>
       </td>
-      <td>{formatHistoryDate(entry.lastVisited)}</td>
+      <td>{ formatHistoryDate(entry.lastVisited) }</td>
       <td>
         {
-          entry.tags.map((tag) => <Badge variant={'light'} className={'mr-1 mb-1'}
-            key={tag}>{tag}</Badge>)
+          entry.tags.map((tag) => <Badge variant={ 'light' } className={ 'mr-1 mb-1' }
+                                         key={ tag }>{ tag }</Badge>)
         }
       </td>
       <td>
-        <PinButton isDark={true} isPinned={entry.pinned} onPinClick={() => onPinClick(entry.id, entry.location)} className={'mb-1 mr-1'}/>
+        <PinButton isDark={ true } isPinned={ entry.pinned } onPinClick={ () => onPinClick(entry.id, entry.location) }
+                   className={ 'mb-1 mr-1' }/>
         <EntryMenu
-          id={entry.id}
-          title={entry.title}
-          location={entry.location}
-          isDark={true}
-          onRemove={() => onRemoveClick(entry.id, entry.location)}
-          onDelete={() => onDeleteClick(entry.id, entry.location)}
+          id={ entry.id }
+          title={ entry.title }
+          location={ entry.location }
+          isDark={ true }
+          onRemove={ () => onRemoveClick(entry.id, entry.location) }
+          onDelete={ () => onDeleteClick(entry.id, entry.location) }
         />
       </td>
     </tr>
diff --git a/src/components/history-page/history-table/history-table.tsx b/src/components/history-page/history-table/history-table.tsx
index dd65075a1..d654cbe6f 100644
--- a/src/components/history-page/history-table/history-table.tsx
+++ b/src/components/history-page/history-table/history-table.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Table } from 'react-bootstrap'
@@ -15,28 +15,28 @@ import './history-table.scss'
 export const HistoryTable: React.FC<HistoryEntriesProps> = ({ entries, onPinClick, onRemoveClick, onDeleteClick, pageIndex, onLastPageIndexChange }) => {
   useTranslation()
   return (
-    <Table striped bordered hover size="sm" variant="dark" className={'history-table'}>
+    <Table striped bordered hover size="sm" variant="dark" className={ 'history-table' }>
       <thead>
-        <tr>
-          <th><Trans i18nKey={'landing.history.tableHeader.title'}/></th>
-          <th><Trans i18nKey={'landing.history.tableHeader.lastVisit'}/></th>
-          <th><Trans i18nKey={'landing.history.tableHeader.tags'}/></th>
-          <th><Trans i18nKey={'landing.history.tableHeader.actions'}/></th>
-        </tr>
+      <tr>
+        <th><Trans i18nKey={ 'landing.history.tableHeader.title' }/></th>
+        <th><Trans i18nKey={ 'landing.history.tableHeader.lastVisit' }/></th>
+        <th><Trans i18nKey={ 'landing.history.tableHeader.tags' }/></th>
+        <th><Trans i18nKey={ 'landing.history.tableHeader.actions' }/></th>
+      </tr>
       </thead>
       <tbody>
-        <Pager numberOfElementsPerPage={12} pageIndex={pageIndex} onLastPageIndexChange={onLastPageIndexChange}>
-          {
-            entries.map((entry) =>
-              <HistoryTableRow
-                key={entry.id}
-                entry={entry}
-                onPinClick={onPinClick}
-                onRemoveClick={onRemoveClick}
-                onDeleteClick={onDeleteClick}
-              />)
-          }
-        </Pager>
+      <Pager numberOfElementsPerPage={ 12 } pageIndex={ pageIndex } onLastPageIndexChange={ onLastPageIndexChange }>
+        {
+          entries.map((entry) =>
+            <HistoryTableRow
+              key={ entry.id }
+              entry={ entry }
+              onPinClick={ onPinClick }
+              onRemoveClick={ onRemoveClick }
+              onDeleteClick={ onDeleteClick }
+            />)
+        }
+      </Pager>
       </tbody>
     </Table>
   )
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 b7ad587a4..250067e0f 100644
--- a/src/components/history-page/history-toolbar/clear-history-button.tsx
+++ b/src/components/history-page/history-toolbar/clear-history-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useState } from 'react'
 import { Button } from 'react-bootstrap'
@@ -23,21 +23,21 @@ export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearH
 
   return (
     <Fragment>
-      <Button variant={'light'} title={t('landing.history.toolbar.clear')} onClick={handleShow}>
-        <ForkAwesomeIcon icon={'trash'}/>
+      <Button variant={ 'light' } title={ t('landing.history.toolbar.clear') } onClick={ handleShow }>
+        <ForkAwesomeIcon icon={ 'trash' }/>
       </Button>
       <DeletionModal
-        onConfirm={() => {
+        onConfirm={ () => {
           onClearHistory()
           handleClose()
-        }}
-        deletionButtonI18nKey={'landing.history.toolbar.clear'}
-        show={show}
-        onHide={handleClose}
-        titleI18nKey={'landing.history.modal.clearHistory.title'}
+        } }
+        deletionButtonI18nKey={ 'landing.history.toolbar.clear' }
+        show={ show }
+        onHide={ handleClose }
+        titleI18nKey={ 'landing.history.modal.clearHistory.title' }
       >
-        <h5><Trans i18nKey={'landing.history.modal.clearHistory.question'}/></h5>
-        <h6><Trans i18nKey={'landing.history.modal.clearHistory.disclaimer'}/></h6>
+        <h5><Trans i18nKey={ 'landing.history.modal.clearHistory.question' }/></h5>
+        <h6><Trans i18nKey={ 'landing.history.modal.clearHistory.disclaimer' }/></h6>
       </DeletionModal>
     </Fragment>
   )
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 08237d369..2f492351c 100644
--- a/src/components/history-page/history-toolbar/export-history-button.tsx
+++ b/src/components/history-page/history-toolbar/export-history-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
@@ -17,7 +17,7 @@ export const ExportHistoryButton: React.FC<ExportHistoryButtonProps> = ({ onExpo
   const { t } = useTranslation()
 
   return (
-    <Button variant={'light'} title={t('landing.history.toolbar.export')} onClick={onExportHistory}>
+    <Button variant={ 'light' } title={ t('landing.history.toolbar.export') } onClick={ onExportHistory }>
       <ForkAwesomeIcon icon='download'/>
     </Button>
   )
diff --git a/src/components/history-page/history-toolbar/history-toolbar.tsx b/src/components/history-page/history-toolbar/history-toolbar.tsx
index 381bea8e8..7b5139b82 100644
--- a/src/components/history-page/history-toolbar/history-toolbar.tsx
+++ b/src/components/history-page/history-toolbar/history-toolbar.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import { Button, Form, FormControl, InputGroup, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
@@ -90,57 +90,61 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
   }, [onSettingsChange, state])
 
   return (
-    <Form inline={true}>
-      <InputGroup className={'mr-1 mb-1'}>
-        <Typeahead id={'tagsSelection'} options={tags} multiple={true} placeholder={t('landing.history.toolbar.selectTags')}
-          onChange={selectedTagsChanged}/>
+    <Form inline={ true }>
+      <InputGroup className={ 'mr-1 mb-1' }>
+        <Typeahead id={ 'tagsSelection' } options={ tags } multiple={ true }
+                   placeholder={ t('landing.history.toolbar.selectTags') }
+                   onChange={ selectedTagsChanged }/>
       </InputGroup>
-      <InputGroup className={'mr-1 mb-1'}>
+      <InputGroup className={ 'mr-1 mb-1' }>
         <FormControl
-          placeholder={t('landing.history.toolbar.searchKeywords')}
-          aria-label={t('landing.history.toolbar.searchKeywords')}
-          onChange={keywordSearchChanged}
+          placeholder={ t('landing.history.toolbar.searchKeywords') }
+          aria-label={ t('landing.history.toolbar.searchKeywords') }
+          onChange={ keywordSearchChanged }
         />
       </InputGroup>
-      <InputGroup className={'mr-1 mb-1'}>
-        <SortButton onDirectionChange={titleSortChanged} direction={state.titleSortDirection} variant={'light'}><Trans
-          i18nKey={'landing.history.toolbar.sortByTitle'}/></SortButton>
+      <InputGroup className={ 'mr-1 mb-1' }>
+        <SortButton onDirectionChange={ titleSortChanged } direction={ state.titleSortDirection }
+                    variant={ 'light' }><Trans
+          i18nKey={ 'landing.history.toolbar.sortByTitle' }/></SortButton>
       </InputGroup>
-      <InputGroup className={'mr-1 mb-1'}>
-        <SortButton onDirectionChange={lastVisitedSortChanged} direction={state.lastVisitedSortDirection}
-          variant={'light'}><Trans i18nKey={'landing.history.toolbar.sortByLastVisited'}/></SortButton>
+      <InputGroup className={ 'mr-1 mb-1' }>
+        <SortButton onDirectionChange={ lastVisitedSortChanged } direction={ state.lastVisitedSortDirection }
+                    variant={ 'light' }><Trans i18nKey={ 'landing.history.toolbar.sortByLastVisited' }/></SortButton>
       </InputGroup>
-      <InputGroup className={'mr-1 mb-1'}>
-        <ExportHistoryButton onExportHistory={onExportHistory}/>
+      <InputGroup className={ 'mr-1 mb-1' }>
+        <ExportHistoryButton onExportHistory={ onExportHistory }/>
       </InputGroup>
-      <InputGroup className={'mr-1 mb-1'}>
-        <ImportHistoryButton onImportHistory={onImportHistory}/>
+      <InputGroup className={ 'mr-1 mb-1' }>
+        <ImportHistoryButton onImportHistory={ onImportHistory }/>
       </InputGroup>
-      <InputGroup className={'mr-1 mb-1'}>
-        <ClearHistoryButton onClearHistory={onClearHistory}/>
+      <InputGroup className={ 'mr-1 mb-1' }>
+        <ClearHistoryButton onClearHistory={ onClearHistory }/>
       </InputGroup>
-      <InputGroup className={'mr-1 mb-1'}>
-        <Button variant={'light'} title={t('landing.history.toolbar.refresh')} onClick={onRefreshHistory}>
+      <InputGroup className={ 'mr-1 mb-1' }>
+        <Button variant={ 'light' } title={ t('landing.history.toolbar.refresh') } onClick={ onRefreshHistory }>
           <ForkAwesomeIcon icon='refresh'/>
         </Button>
       </InputGroup>
-      <ShowIf condition={userExists}>
-        <InputGroup className={'mr-1 mb-1'}>
-          <Button variant={'light'} title={t('landing.history.toolbar.uploadAll')} onClick={onUploadAll}>
+      <ShowIf condition={ userExists }>
+        <InputGroup className={ 'mr-1 mb-1' }>
+          <Button variant={ 'light' } title={ t('landing.history.toolbar.uploadAll') } onClick={ onUploadAll }>
             <ForkAwesomeIcon icon='cloud-upload'/>
           </Button>
         </InputGroup>
       </ShowIf>
-      <InputGroup className={'mr-1 mb-1'}>
-        <ToggleButtonGroup type="radio" name="options" dir='ltr' value={state.viewState} className={'button-height'}
-          onChange={(newViewState: ViewStateEnum) => {
-            toggleViewChanged(newViewState)
-          }}>
-          <ToggleButton className={'btn-light'} value={ViewStateEnum.CARD} title={t('landing.history.toolbar.cards')}>
-            <ForkAwesomeIcon icon={'sticky-note'} className={'fa-fix-line-height'}/>
+      <InputGroup className={ 'mr-1 mb-1' }>
+        <ToggleButtonGroup type="radio" name="options" dir='ltr' value={ state.viewState } className={ 'button-height' }
+                           onChange={ (newViewState: ViewStateEnum) => {
+                             toggleViewChanged(newViewState)
+                           } }>
+          <ToggleButton className={ 'btn-light' } value={ ViewStateEnum.CARD }
+                        title={ t('landing.history.toolbar.cards') }>
+            <ForkAwesomeIcon icon={ 'sticky-note' } className={ 'fa-fix-line-height' }/>
           </ToggleButton>
-          <ToggleButton className={'btn-light'} value={ViewStateEnum.TABLE} title={t('landing.history.toolbar.table')}>
-            <ForkAwesomeIcon icon={'table'} className={'fa-fix-line-height'}/>
+          <ToggleButton className={ 'btn-light' } value={ ViewStateEnum.TABLE }
+                        title={ t('landing.history.toolbar.table') }>
+            <ForkAwesomeIcon icon={ 'table' } className={ 'fa-fix-line-height' }/>
           </ToggleButton>
         </ToggleButtonGroup>
       </InputGroup>
diff --git a/src/components/history-page/history-toolbar/import-history-button.tsx b/src/components/history-page/history-toolbar/import-history-button.tsx
index 490c82488..e59d353aa 100644
--- a/src/components/history-page/history-toolbar/import-history-button.tsx
+++ b/src/components/history-page/history-toolbar/import-history-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useRef, useState } from 'react'
 import { Button } from 'react-bootstrap'
@@ -74,21 +74,21 @@ export const ImportHistoryButton: React.FC<ImportHistoryButtonProps> = ({ onImpo
 
   return (
     <div>
-      <input type='file' className="d-none" accept=".json" onChange={handleUpload} ref={uploadInput}/>
-      <Button variant={'light'}
-        title={t('landing.history.toolbar.import')}
-        onClick={() => uploadInput.current?.click()}
+      <input type='file' className="d-none" accept=".json" onChange={ handleUpload } ref={ uploadInput }/>
+      <Button variant={ 'light' }
+              title={ t('landing.history.toolbar.import') }
+              onClick={ () => uploadInput.current?.click() }
       >
         <ForkAwesomeIcon icon='upload'/>
       </Button>
       <ErrorModal
-        show={show}
-        onHide={handleClose}
+        show={ show }
+        onHide={ handleClose }
         titleI18nKey='landing.history.modal.importHistoryError.title'
         icon='exclamation-circle'
       >
         <h5>
-          <Trans i18nKey={i18nKey} values={fileName !== '' ? { fileName: fileName } : {}}/>
+          <Trans i18nKey={ i18nKey } values={ fileName !== '' ? { fileName: fileName } : {} }/>
         </h5>
       </ErrorModal>
     </div>
diff --git a/src/components/history-page/pin-button/pin-button.tsx b/src/components/history-page/pin-button/pin-button.tsx
index 4db232417..e1988f76d 100644
--- a/src/components/history-page/pin-button/pin-button.tsx
+++ b/src/components/history-page/pin-button/pin-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
@@ -18,8 +18,8 @@ export interface PinButtonProps {
 
 export const PinButton: React.FC<PinButtonProps> = ({ isPinned, onPinClick, isDark, className }) => {
   return (
-    <Button variant={isDark ? 'secondary' : 'light'}
-      className={`history-pin ${className || ''} ${isPinned ? 'pinned' : ''}`} onClick={onPinClick}>
+    <Button variant={ isDark ? 'secondary' : 'light' }
+            className={ `history-pin ${ className || '' } ${ isPinned ? 'pinned' : '' }` } onClick={ onPinClick }>
       <ForkAwesomeIcon icon="thumb-tack"/>
     </Button>
   )
diff --git a/src/components/history-page/sort-button/sort-button.tsx b/src/components/history-page/sort-button/sort-button.tsx
index a5c212180..a66e048af 100644
--- a/src/components/history-page/sort-button/sort-button.tsx
+++ b/src/components/history-page/sort-button/sort-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ButtonProps } from 'react-bootstrap'
@@ -10,9 +10,9 @@ import { IconName } from '../../common/fork-awesome/types'
 import { IconButton } from '../../common/icon-button/icon-button'
 
 export enum SortModeEnum {
-    up = 1,
-    down = -1,
-    no = 0
+  up = 1,
+  down = -1,
+  no = 0
 }
 
 const getIcon = (direction: SortModeEnum): IconName => {
@@ -29,8 +29,8 @@ const getIcon = (direction: SortModeEnum): IconName => {
 }
 
 export interface SortButtonProps extends ButtonProps {
-    onDirectionChange: (direction: SortModeEnum) => void
-    direction: SortModeEnum
+  onDirectionChange: (direction: SortModeEnum) => void
+  direction: SortModeEnum
 }
 
 const toggleDirection = (direction: SortModeEnum) => {
@@ -50,5 +50,6 @@ export const SortButton: React.FC<SortButtonProps> = ({ children, variant, onDir
     onDirectionChange(toggleDirection(direction))
   }
 
-  return <IconButton onClick={toggleSort} variant={variant} icon={getIcon(direction)} border={true}>{children}</IconButton>
+  return <IconButton onClick={ toggleSort } variant={ variant } icon={ getIcon(direction) }
+                     border={ true }>{ children }</IconButton>
 }
diff --git a/src/components/history-page/utils.ts b/src/components/history-page/utils.ts
index aff094e1f..740271cf4 100644
--- a/src/components/history-page/utils.ts
+++ b/src/components/history-page/utils.ts
@@ -6,26 +6,22 @@
 
 import { DateTime } from 'luxon'
 import { SortModeEnum } from './sort-button/sort-button'
-import {
-  HistoryEntry,
-  HistoryEntryOrigin,
-  LocatedHistoryEntry
-} from './history-page'
+import { HistoryEntry, HistoryEntryOrigin, LocatedHistoryEntry } from './history-page'
 import { HistoryToolbarState } from './history-toolbar/history-toolbar'
 
-export function collectEntries (localEntries: HistoryEntry[], remoteEntries: HistoryEntry[]): LocatedHistoryEntry[] {
+export function collectEntries(localEntries: HistoryEntry[], remoteEntries: HistoryEntry[]): LocatedHistoryEntry[] {
   const locatedLocalEntries = locateEntries(localEntries, HistoryEntryOrigin.LOCAL)
   const locatedRemoteEntries = locateEntries(remoteEntries, HistoryEntryOrigin.REMOTE)
   return mergeEntryArrays(locatedLocalEntries, locatedRemoteEntries)
 }
 
-export function sortAndFilterEntries (entries: LocatedHistoryEntry[], toolbarState: HistoryToolbarState): LocatedHistoryEntry[] {
+export function sortAndFilterEntries(entries: LocatedHistoryEntry[], toolbarState: HistoryToolbarState): LocatedHistoryEntry[] {
   const filteredBySelectedTagsEntries = filterBySelectedTags(entries, toolbarState.selectedTags)
   const filteredByKeywordSearchEntries = filterByKeywordSearch(filteredBySelectedTagsEntries, toolbarState.keywordSearch)
   return sortEntries(filteredByKeywordSearchEntries, toolbarState)
 }
 
-function locateEntries (entries: HistoryEntry[], location: HistoryEntryOrigin): LocatedHistoryEntry[] {
+function locateEntries(entries: HistoryEntry[], location: HistoryEntryOrigin): LocatedHistoryEntry[] {
   return entries.map(entry => {
     return {
       ...entry,
@@ -34,7 +30,7 @@ function locateEntries (entries: HistoryEntry[], location: HistoryEntryOrigin):
   })
 }
 
-export function mergeEntryArrays<T extends HistoryEntry> (localEntries: T[], remoteEntries: T[]): T[] {
+export function mergeEntryArrays<T extends HistoryEntry>(localEntries: T[], remoteEntries: T[]): T[] {
   const filteredLocalEntries = localEntries.filter(localEntry => {
     const entry = remoteEntries.find(remoteEntry => remoteEntry.id === localEntry.id)
     return !entry
@@ -43,14 +39,14 @@ export function mergeEntryArrays<T extends HistoryEntry> (localEntries: T[], rem
   return filteredLocalEntries.concat(remoteEntries)
 }
 
-function filterBySelectedTags (entries: LocatedHistoryEntry[], selectedTags: string[]): LocatedHistoryEntry[] {
+function filterBySelectedTags(entries: LocatedHistoryEntry[], selectedTags: string[]): LocatedHistoryEntry[] {
   return entries.filter(entry => {
-    return (selectedTags.length === 0 || arrayCommonCheck(entry.tags, selectedTags))
-  }
+      return (selectedTags.length === 0 || arrayCommonCheck(entry.tags, selectedTags))
+    }
   )
 }
 
-function arrayCommonCheck<T> (array1: T[], array2: T[]): boolean {
+function arrayCommonCheck<T>(array1: T[], array2: T[]): boolean {
   const foundElement = array1.find((element1) =>
     array2.find((element2) =>
       element2 === element1
@@ -59,12 +55,13 @@ function arrayCommonCheck<T> (array1: T[], array2: T[]): boolean {
   return !!foundElement
 }
 
-function filterByKeywordSearch (entries: LocatedHistoryEntry[], keywords: string): LocatedHistoryEntry[] {
+function filterByKeywordSearch(entries: LocatedHistoryEntry[], keywords: string): LocatedHistoryEntry[] {
   const searchTerm = keywords.toLowerCase()
-  return entries.filter(entry => entry.title.toLowerCase().includes(searchTerm))
+  return entries.filter(entry => entry.title.toLowerCase()
+                                      .includes(searchTerm))
 }
 
-function sortEntries (entries: LocatedHistoryEntry[], viewState: HistoryToolbarState): LocatedHistoryEntry[] {
+function sortEntries(entries: LocatedHistoryEntry[], viewState: HistoryToolbarState): LocatedHistoryEntry[] {
   return entries.sort((firstEntry, secondEntry) => {
     if (firstEntry.pinned && !secondEntry.pinned) {
       return -1
@@ -90,8 +87,9 @@ function sortEntries (entries: LocatedHistoryEntry[], viewState: HistoryToolbarS
   })
 }
 
-export function formatHistoryDate (date: string): string {
-  return DateTime.fromISO(date).toFormat('DDDD T')
+export function formatHistoryDate(date: string): string {
+  return DateTime.fromISO(date)
+                 .toFormat('DDDD T')
 }
 
 export interface V1HistoryEntry {
@@ -102,19 +100,20 @@ export interface V1HistoryEntry {
   pinned: boolean;
 }
 
-export function convertV1History (oldHistory: V1HistoryEntry[]): HistoryEntry[] {
+export function convertV1History(oldHistory: V1HistoryEntry[]): HistoryEntry[] {
   return oldHistory.map((entry: V1HistoryEntry) => {
     return {
       id: entry.id,
       title: entry.text,
-      lastVisited: DateTime.fromMillis(entry.time).toISO(),
+      lastVisited: DateTime.fromMillis(entry.time)
+                           .toISO(),
       tags: entry.tags,
       pinned: entry.pinned
     }
   })
 }
 
-export function loadHistoryFromLocalStore (): HistoryEntry[] {
+export function loadHistoryFromLocalStore(): HistoryEntry[] {
   const historyJsonString = window.localStorage.getItem('history')
 
   if (!historyJsonString) {
@@ -128,6 +127,6 @@ export function loadHistoryFromLocalStore (): HistoryEntry[] {
   }
 }
 
-export function setHistoryToLocalStore (entries: HistoryEntry[]): void {
+export function setHistoryToLocalStore(entries: HistoryEntry[]): void {
   window.localStorage.setItem('history', JSON.stringify(entries))
 }
diff --git a/src/components/intro-page/cover-buttons/cover-buttons.tsx b/src/components/intro-page/cover-buttons/cover-buttons.tsx
index b811b1e5b..b3d1d9798 100644
--- a/src/components/intro-page/cover-buttons/cover-buttons.tsx
+++ b/src/components/intro-page/cover-buttons/cover-buttons.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
@@ -17,7 +17,8 @@ import './cover-buttons.scss'
 export const CoverButtons: React.FC = () => {
   useTranslation()
   const userExists = useSelector((state: ApplicationState) => !!state.user)
-  const anyAuthProviderActivated = useSelector((state: ApplicationState) => Object.values(state.config.authProviders).includes(true))
+  const anyAuthProviderActivated = useSelector((state: ApplicationState) => Object.values(state.config.authProviders)
+                                                                                  .includes(true))
 
   if (userExists) {
     return null
@@ -30,7 +31,7 @@ export const CoverButtons: React.FC = () => {
         variant="success"
         size="lg"
       />
-      <ShowIf condition={anyAuthProviderActivated}>
+      <ShowIf condition={ anyAuthProviderActivated }>
         <span className="m-2">
           <Trans i18nKey="common.or"/>
         </span>
diff --git a/src/components/intro-page/feature-links.tsx b/src/components/intro-page/feature-links.tsx
index ac4dae714..f5390efa3 100644
--- a/src/components/intro-page/feature-links.tsx
+++ b/src/components/intro-page/feature-links.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Col, Row } from 'react-bootstrap'
@@ -14,24 +14,24 @@ export const FeatureLinks: React.FC = () => {
   useTranslation()
   return (
     <Row className="mb-5">
-      <Col md={4}>
-        <Link to={'/n/features#Share-Notes'} className="text-light">
+      <Col md={ 4 }>
+        <Link to={ '/n/features#Share-Notes' } className="text-light">
           <ForkAwesomeIcon icon="bolt" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.collaboration"/>
           </h5>
         </Link>
       </Col>
-      <Col md={4}>
-        <Link to={'/n/features#MathJax'} className="text-light">
+      <Col md={ 4 }>
+        <Link to={ '/n/features#MathJax' } className="text-light">
           <ForkAwesomeIcon icon="bar-chart" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.katex"/>
           </h5>
         </Link>
       </Col>
-      <Col md={4}>
-        <Link to={'/n/features#Slide-Mode'} className="text-light">
+      <Col md={ 4 }>
+        <Link to={ '/n/features#Slide-Mode' } className="text-light">
           <ForkAwesomeIcon icon="television" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.slides"/>
diff --git a/src/components/intro-page/intro-page.tsx b/src/components/intro-page/intro-page.tsx
index 0914b92b4..0cb82b0d4 100644
--- a/src/components/intro-page/intro-page.tsx
+++ b/src/components/intro-page/intro-page.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -20,18 +20,18 @@ export const IntroPage: React.FC = () => {
   const { t } = useTranslation()
 
   return <Fragment>
-    <h1 dir='auto' className={'align-items-center d-flex justify-content-center flex-column'}>
-      <HedgeDocLogoWithText logoType={HedgeDocLogoType.COLOR_VERTICAL} size={HedgeDocLogoSize.BIG}/>
+    <h1 dir='auto' className={ 'align-items-center d-flex justify-content-center flex-column' }>
+      <HedgeDocLogoWithText logoType={ HedgeDocLogoType.COLOR_VERTICAL } size={ HedgeDocLogoSize.BIG }/>
     </h1>
     <p className="lead">
       <Trans i18nKey="app.slogan"/>
     </p>
-    <div className={'mb-5'}>
-      <Branding delimiter={false}/>
+    <div className={ 'mb-5' }>
+      <Branding delimiter={ false }/>
     </div>
 
     <CoverButtons/>
-    <img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
+    <img alt={ t('landing.intro.screenShotAltText') } src={ screenshot } className="img-fluid mb-5"/>
     <FeatureLinks/>
   </Fragment>
 }
diff --git a/src/components/landing-layout/footer/footer.tsx b/src/components/landing-layout/footer/footer.tsx
index d204c560f..95177f50b 100644
--- a/src/components/landing-layout/footer/footer.tsx
+++ b/src/components/landing-layout/footer/footer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { LanguagePicker } from './language-picker'
diff --git a/src/components/landing-layout/footer/language-picker.tsx b/src/components/landing-layout/footer/language-picker.tsx
index 9da756e44..379b76fc1 100644
--- a/src/components/landing-layout/footer/language-picker.tsx
+++ b/src/components/landing-layout/footer/language-picker.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { Settings } from 'luxon'
 import React, { useCallback } from 'react'
@@ -41,9 +41,11 @@ const languages = {
 }
 
 const findLanguageCode = (wantedLanguage: string): string => {
-  let foundLanguage = Object.keys(languages).find((supportedLanguage) => wantedLanguage === supportedLanguage)
+  let foundLanguage = Object.keys(languages)
+                            .find((supportedLanguage) => wantedLanguage === supportedLanguage)
   if (!foundLanguage) {
-    foundLanguage = Object.keys(languages).find((supportedLanguage) => wantedLanguage.substr(0, 2) === supportedLanguage)
+    foundLanguage = Object.keys(languages)
+                          .find((supportedLanguage) => wantedLanguage.substr(0, 2) === supportedLanguage)
   }
   return foundLanguage || ''
 }
@@ -62,13 +64,14 @@ const LanguagePicker: React.FC = () => {
       as="select"
       size="sm"
       className="mb-2 mx-auto w-auto"
-      value={findLanguageCode(i18n.language)}
-      onChange={onChangeLang()}
+      value={ findLanguageCode(i18n.language) }
+      onChange={ onChangeLang() }
     >
       {
-        Object.entries(languages).map(([language, languageName]) => {
-          return <option key={language} value={language}>{languageName}</option>
-        })
+        Object.entries(languages)
+              .map(([language, languageName]) => {
+                return <option key={ language } value={ language }>{ languageName }</option>
+              })
       }
     </Form.Control>
   )
diff --git a/src/components/landing-layout/footer/powered-by-links.tsx b/src/components/landing-layout/footer/powered-by-links.tsx
index cc0e28043..80eb07bdd 100644
--- a/src/components/landing-layout/footer/powered-by-links.tsx
+++ b/src/components/landing-layout/footer/powered-by-links.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -22,15 +22,15 @@ export const PoweredByLinks: React.FC = () => {
   return (
     <p>
       <Trans i18nKey="landing.footer.poweredBy">
-        <ExternalLink href={links.webpage} text="HedgeDoc"/>
+        <ExternalLink href={ links.webpage } text="HedgeDoc"/>
       </Trans>
       &nbsp;|&nbsp;
       <TranslatedInternalLink href='/n/release-notes' i18nKey='landing.footer.releases'/>
       {
         specialLinks.map(([i18nKey, href]) =>
-          <Fragment key={i18nKey}>
+          <Fragment key={ i18nKey }>
             &nbsp;|&nbsp;
-            <TranslatedExternalLink href={href} i18nKey={'landing.footer.' + i18nKey}/>
+            <TranslatedExternalLink href={ href } i18nKey={ 'landing.footer.' + i18nKey }/>
           </Fragment>
         )
       }
diff --git a/src/components/landing-layout/footer/social-links.tsx b/src/components/landing-layout/footer/social-links.tsx
index cd9a38dd1..55d7053c6 100644
--- a/src/components/landing-layout/footer/social-links.tsx
+++ b/src/components/landing-layout/footer/social-links.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -13,13 +13,13 @@ const SocialLink: React.FC = () => {
   useTranslation()
   return (
     <p>
-      <Trans i18nKey="landing.footer.followUs" components={[
-        <ExternalLink href={links.githubOrg} icon='github' text="GitHub"/>,
-        <ExternalLink href={links.community} icon='users' text="Discourse"/>,
-        <ExternalLink href={links.chat} icon="comment" text="Matrix"/>,
-        <ExternalLink href={links.mastodon} icon='mastodon' text="Mastodon"/>,
-        <ExternalLink href={links.translate} icon="globe" text="POEditor"/>
-      ]}/>
+      <Trans i18nKey="landing.footer.followUs" components={ [
+        <ExternalLink href={ links.githubOrg } icon='github' text="GitHub"/>,
+        <ExternalLink href={ links.community } icon='users' text="Discourse"/>,
+        <ExternalLink href={ links.chat } icon="comment" text="Matrix"/>,
+        <ExternalLink href={ links.mastodon } icon='mastodon' text="Mastodon"/>,
+        <ExternalLink href={ links.translate } icon="globe" text="POEditor"/>
+      ] }/>
     </p>
   )
 }
diff --git a/src/components/landing-layout/footer/version-info.tsx b/src/components/landing-layout/footer/version-info.tsx
index 16c6369b6..0455f23d8 100644
--- a/src/components/landing-layout/footer/version-info.tsx
+++ b/src/components/landing-layout/footer/version-info.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import equal from 'fast-deep-equal'
 import React, { Fragment, useState } from 'react'
@@ -27,34 +27,36 @@ export const VersionInfo: React.FC = () => {
   const serverVersion = useSelector((state: ApplicationState) => state.config.version, equal)
 
   const column = (title: string, version: string, sourceCodeLink: string, issueTrackerLink: string) => (
-    <Col md={6} className={'flex-column'}>
-      <h5>{title}</h5>
-      <CopyableField content={version}/>
-      <ShowIf condition={!!sourceCodeLink}>
-        <TranslatedExternalLink i18nKey={'landing.versionInfo.sourceCode'} className={'btn btn-sm btn-primary d-block mb-2'} href={sourceCodeLink}/>
+    <Col md={ 6 } className={ 'flex-column' }>
+      <h5>{ title }</h5>
+      <CopyableField content={ version }/>
+      <ShowIf condition={ !!sourceCodeLink }>
+        <TranslatedExternalLink i18nKey={ 'landing.versionInfo.sourceCode' }
+                                className={ 'btn btn-sm btn-primary d-block mb-2' } href={ sourceCodeLink }/>
       </ShowIf>
-      <ShowIf condition={!!issueTrackerLink}>
-        <TranslatedExternalLink i18nKey={'landing.versionInfo.issueTracker'} className={'btn btn-sm btn-primary d-block mb-2'} href={issueTrackerLink}/>
+      <ShowIf condition={ !!issueTrackerLink }>
+        <TranslatedExternalLink i18nKey={ 'landing.versionInfo.issueTracker' }
+                                className={ 'btn btn-sm btn-primary d-block mb-2' } href={ issueTrackerLink }/>
       </ShowIf>
     </Col>
   )
 
   return (
     <Fragment>
-      <Link id='version' to={'#'} className={'text-light'} onClick={handleShow}>
-        <Trans i18nKey={'landing.versionInfo.versionInfo'}/>
+      <Link id='version' to={ '#' } className={ 'text-light' } onClick={ handleShow }>
+        <Trans i18nKey={ 'landing.versionInfo.versionInfo' }/>
       </Link>
-      <Modal id='versionModal' show={show} onHide={handleClose} animation={true}>
+      <Modal id='versionModal' show={ show } onHide={ handleClose } animation={ true }>
         <Modal.Body className="text-dark">
-          <h3><Trans i18nKey={'landing.versionInfo.title'}/></h3>
+          <h3><Trans i18nKey={ 'landing.versionInfo.title' }/></h3>
           <Row>
-            {column(t('landing.versionInfo.serverVersion'), serverVersion.version, serverVersion.sourceCodeUrl, serverVersion.issueTrackerUrl)}
-            {column(t('landing.versionInfo.clientVersion'), frontendVersion.version, frontendVersion.sourceCodeUrl, frontendVersion.issueTrackerUrl)}
+            { column(t('landing.versionInfo.serverVersion'), serverVersion.version, serverVersion.sourceCodeUrl, serverVersion.issueTrackerUrl) }
+            { column(t('landing.versionInfo.clientVersion'), frontendVersion.version, frontendVersion.sourceCodeUrl, frontendVersion.issueTrackerUrl) }
           </Row>
         </Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" onClick={handleClose}>
-            <Trans i18nKey={'common.close'}/>
+          <Button variant="secondary" onClick={ handleClose }>
+            <Trans i18nKey={ 'common.close' }/>
           </Button>
         </Modal.Footer>
       </Modal>
diff --git a/src/components/landing-layout/landing-layout.tsx b/src/components/landing-layout/landing-layout.tsx
index 5226802f3..29289cfb0 100644
--- a/src/components/landing-layout/landing-layout.tsx
+++ b/src/components/landing-layout/landing-layout.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Container } from 'react-bootstrap'
@@ -18,9 +18,9 @@ export const LandingLayout: React.FC = ({ children }) => {
     <Container className="text-light d-flex flex-column mvh-100">
       <MotdBanner/>
       <HeaderBar/>
-      <div className={'d-flex flex-column justify-content-between flex-fill text-center'}>
+      <div className={ 'd-flex flex-column justify-content-between flex-fill text-center' }>
         <div>
-          {children}
+          { children }
         </div>
         <Footer/>
       </div>
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 cc3cba92a..15902e925 100644
--- a/src/components/landing-layout/navigation/header-bar/header-bar.tsx
+++ b/src/components/landing-layout/navigation/header-bar/header-bar.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment } from 'react'
 import { Navbar } from 'react-bootstrap'
@@ -31,19 +31,19 @@ const HeaderBar: React.FC = () => {
         </HeaderNavLink>
       </div>
       <div className="d-inline-flex">
-        {!userExists
+        { !userExists
           ? <Fragment>
-              <span className={'mx-1 d-flex'}>
+              <span className={ 'mx-1 d-flex' }>
                 <NewGuestNoteButton/>
               </span>
-              <SignInButton size="sm"/>
-            </Fragment>
+            <SignInButton size="sm"/>
+          </Fragment>
           : <Fragment>
-              <span className={'mx-1 d-flex'}>
+              <span className={ 'mx-1 d-flex' }>
                 <NewUserNoteButton/>
               </span>
-              <UserDropdown/>
-            </Fragment>
+            <UserDropdown/>
+          </Fragment>
         }
       </div>
     </Navbar>
diff --git a/src/components/landing-layout/navigation/header-nav-link.tsx b/src/components/landing-layout/navigation/header-nav-link.tsx
index b49f57238..07270dbc9 100644
--- a/src/components/landing-layout/navigation/header-nav-link.tsx
+++ b/src/components/landing-layout/navigation/header-nav-link.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Nav } from 'react-bootstrap'
@@ -16,8 +16,8 @@ export interface HeaderNavLinkProps {
 export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, id, children }) => {
   return (
     <Nav.Item>
-      <LinkContainer to={to}>
-        <Nav.Link id={id} className="text-light" href={to}>{children}</Nav.Link>
+      <LinkContainer to={ to }>
+        <Nav.Link id={ id } className="text-light" href={ to }>{ children }</Nav.Link>
       </LinkContainer>
     </Nav.Item>
   )
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 161aea7a8..c0d6ea1d2 100644
--- a/src/components/landing-layout/navigation/new-guest-note-button.tsx
+++ b/src/components/landing-layout/navigation/new-guest-note-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
@@ -13,7 +13,7 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 export const NewGuestNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
-    <LinkContainer to={'/new'} title={t('landing.navigation.newGuestNote')}>
+    <LinkContainer to={ '/new' } title={ t('landing.navigation.newGuestNote') }>
       <Button
         variant="primary"
         size="sm"
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 dad245a6b..d6cac58c2 100644
--- a/src/components/landing-layout/navigation/new-user-note-button.tsx
+++ b/src/components/landing-layout/navigation/new-user-note-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
@@ -13,7 +13,7 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 export const NewUserNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
-    <LinkContainer to={'/new'} title={t('landing.navigation.newNote')}>
+    <LinkContainer to={ '/new' } title={ t('landing.navigation.newNote') }>
       <Button
         variant="primary"
         size="sm"
diff --git a/src/components/landing-layout/navigation/sign-in-button.tsx b/src/components/landing-layout/navigation/sign-in-button.tsx
index 2379bee9d..c1c858aa4 100644
--- a/src/components/landing-layout/navigation/sign-in-button.tsx
+++ b/src/components/landing-layout/navigation/sign-in-button.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
@@ -14,18 +14,19 @@ import { ApplicationState } from '../../../redux'
 import { ShowIf } from '../../common/show-if/show-if'
 
 type SignInButtonProps = {
-  className?: string
-} & Omit<ButtonProps, 'href'>
+                           className?: string
+                         } & Omit<ButtonProps, 'href'>
 
 export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props }) => {
   const { t } = useTranslation()
-  const anyAuthProviderActive = useSelector((state: ApplicationState) => Object.values(state.config.authProviders).includes(true))
+  const anyAuthProviderActive = useSelector((state: ApplicationState) => Object.values(state.config.authProviders)
+                                                                               .includes(true))
   return (
-    <ShowIf condition={anyAuthProviderActive}>
-      <LinkContainer to="/login" title={t('login.signIn')}>
+    <ShowIf condition={ anyAuthProviderActive }>
+      <LinkContainer to="/login" title={ t('login.signIn') }>
         <Button
-          variant={variant || 'success'}
-          {...props}
+          variant={ variant || 'success' }
+          { ...props }
         >
           <Trans i18nKey="login.signIn"/>
         </Button>
diff --git a/src/components/landing-layout/navigation/user-dropdown.tsx b/src/components/landing-layout/navigation/user-dropdown.tsx
index 3ab8de723..b823bba87 100644
--- a/src/components/landing-layout/navigation/user-dropdown.tsx
+++ b/src/components/landing-layout/navigation/user-dropdown.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import equal from 'fast-deep-equal'
 import React from 'react'
@@ -25,28 +25,28 @@ export const UserDropdown: React.FC = () => {
 
   return (
     <Dropdown alignRight>
-      <Dropdown.Toggle size="sm" variant="dark" id="dropdown-user" className={'d-flex align-items-center'}>
-        <UserAvatar name={user.name} photo={user.photo}/>
+      <Dropdown.Toggle size="sm" variant="dark" id="dropdown-user" className={ 'd-flex align-items-center' }>
+        <UserAvatar name={ user.name } photo={ user.photo }/>
       </Dropdown.Toggle>
 
       <Dropdown.Menu className='text-start'>
-        <LinkContainer to={'/n/features'}>
+        <LinkContainer to={ '/n/features' }>
           <Dropdown.Item dir='auto'>
-            <ForkAwesomeIcon icon="bolt" fixedWidth={true} className="mx-2"/>
+            <ForkAwesomeIcon icon="bolt" fixedWidth={ true } className="mx-2"/>
             <Trans i18nKey="editor.help.documents.features"/>
           </Dropdown.Item>
         </LinkContainer>
-        <LinkContainer to={'/profile'}>
+        <LinkContainer to={ '/profile' }>
           <Dropdown.Item dir='auto'>
-            <ForkAwesomeIcon icon="user" fixedWidth={true} className="mx-2"/>
+            <ForkAwesomeIcon icon="user" fixedWidth={ true } className="mx-2"/>
             <Trans i18nKey="profile.userProfile"/>
           </Dropdown.Item>
         </LinkContainer>
         <Dropdown.Item dir='auto'
-          onClick={() => {
-            clearUser()
-          }}>
-          <ForkAwesomeIcon icon="sign-out" fixedWidth={true} className="mx-2"/>
+                       onClick={ () => {
+                         clearUser()
+                       } }>
+          <ForkAwesomeIcon icon="sign-out" fixedWidth={ true } className="mx-2"/>
           <Trans i18nKey="login.signOut"/>
         </Dropdown.Item>
       </Dropdown.Menu>
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 9beb63aea..c4bb4f7e8 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,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
@@ -18,13 +18,13 @@ export interface SocialButtonProps {
 
 export const SocialLinkButton: React.FC<SocialButtonProps> = ({ title, backgroundClass, href, icon, children }) => {
   return (
-    <a href={href} title={title}
-      className={'btn social-link-button p-0 d-inline-flex align-items-stretch ' + backgroundClass}>
+    <a href={ href } title={ title }
+       className={ 'btn social-link-button p-0 d-inline-flex align-items-stretch ' + backgroundClass }>
       <span className="icon-part d-flex align-items-center">
-        <ForkAwesomeIcon icon={icon} className={'social-icon'} fixedWidth={true}/>
+        <ForkAwesomeIcon icon={ icon } className={ 'social-icon' } fixedWidth={ true }/>
       </span>
       <span className="text-part d-flex align-items-center mx-auto">
-        {children}
+        { children }
       </span>
     </a>
   )
diff --git a/src/components/login-page/auth/via-internal.tsx b/src/components/login-page/auth/via-internal.tsx
index 491e81535..ab3d449d3 100644
--- a/src/components/login-page/auth/via-internal.tsx
+++ b/src/components/login-page/auth/via-internal.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { FormEvent, useCallback, useState } from 'react'
 import { Alert, Button, Card, Form } from 'react-bootstrap'
@@ -32,33 +32,33 @@ export const ViaInternal: React.FC = () => {
     <Card className="bg-dark mb-4">
       <Card.Body>
         <Card.Title>
-          <Trans i18nKey="login.signInVia" values={{ service: t('login.auth.username') }}/>
+          <Trans i18nKey="login.signInVia" values={ { service: t('login.auth.username') } }/>
         </Card.Title>
-        <Form onSubmit={onLoginSubmit}>
+        <Form onSubmit={ onLoginSubmit }>
           <Form.Group controlId="internal-username">
             <Form.Control
-              isInvalid={error}
+              isInvalid={ error }
               type="text"
               size="sm"
-              placeholder={t('login.auth.username')}
-              onChange={(event) => setUsername(event.currentTarget.value)} className="bg-dark text-light"
+              placeholder={ t('login.auth.username') }
+              onChange={ (event) => setUsername(event.currentTarget.value) } className="bg-dark text-light"
               autoComplete='username'
             />
           </Form.Group>
 
           <Form.Group controlId="internal-password">
             <Form.Control
-              isInvalid={error}
+              isInvalid={ error }
               type="password"
               size="sm"
-              placeholder={t('login.auth.password')}
-              onChange={(event) => setPassword(event.currentTarget.value)}
+              placeholder={ t('login.auth.password') }
+              onChange={ (event) => setPassword(event.currentTarget.value) }
               className="bg-dark text-light"
               autoComplete='current-password'
             />
           </Form.Group>
 
-          <Alert className="small" show={error} variant="danger">
+          <Alert className="small" show={ error } variant="danger">
             <Trans i18nKey="login.auth.error.usernamePassword"/>
           </Alert>
 
@@ -69,8 +69,8 @@ export const ViaInternal: React.FC = () => {
               className='mx-2'>
               <Trans i18nKey="login.signIn"/>
             </Button>
-            <ShowIf condition={allowRegister}>
-              <Link to={'/register'}>
+            <ShowIf condition={ allowRegister }>
+              <Link to={ '/register' }>
                 <Button
                   type='button'
                   variant='secondary'
diff --git a/src/components/login-page/auth/via-ldap.tsx b/src/components/login-page/auth/via-ldap.tsx
index d28e9fb85..fdff5b24e 100644
--- a/src/components/login-page/auth/via-ldap.tsx
+++ b/src/components/login-page/auth/via-ldap.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { FormEvent, useCallback, useState } from 'react'
 import { Alert, Button, Card, Form } from 'react-bootstrap'
@@ -21,7 +21,7 @@ export const ViaLdap: React.FC = () => {
   const [password, setPassword] = useState('')
   const [error, setError] = useState(false)
 
-  const name = ldapCustomName ? `${ldapCustomName} (LDAP)` : 'LDAP'
+  const name = ldapCustomName ? `${ ldapCustomName } (LDAP)` : 'LDAP'
 
   const onLoginSubmit = useCallback((event: FormEvent) => {
     doLdapLogin(username, password)
@@ -34,33 +34,33 @@ export const ViaLdap: React.FC = () => {
     <Card className="bg-dark mb-4">
       <Card.Body>
         <Card.Title>
-          <Trans i18nKey="login.signInVia" values={{ service: name }}/>
+          <Trans i18nKey="login.signInVia" values={ { service: name } }/>
         </Card.Title>
-        <Form onSubmit={onLoginSubmit}>
+        <Form onSubmit={ onLoginSubmit }>
           <Form.Group controlId="ldap-username">
             <Form.Control
-              isInvalid={error}
+              isInvalid={ error }
               type="text"
               size="sm"
-              placeholder={t('login.auth.username')}
-              onChange={(event) => setUsername(event.currentTarget.value)} className="bg-dark text-light"
+              placeholder={ t('login.auth.username') }
+              onChange={ (event) => setUsername(event.currentTarget.value) } className="bg-dark text-light"
               autoComplete='username'
             />
           </Form.Group>
 
           <Form.Group controlId="ldap-password">
             <Form.Control
-              isInvalid={error}
+              isInvalid={ error }
               type="password"
               size="sm"
-              placeholder={t('login.auth.password')}
-              onChange={(event) => setPassword(event.currentTarget.value)}
+              placeholder={ t('login.auth.password') }
+              onChange={ (event) => setPassword(event.currentTarget.value) }
               className="bg-dark text-light"
               autoComplete='current-password'
             />
           </Form.Group>
 
-          <Alert className="small" show={error} variant="danger">
+          <Alert className="small" show={ error } variant="danger">
             <Trans i18nKey="login.auth.error.usernamePassword"/>
           </Alert>
 
diff --git a/src/components/login-page/auth/via-one-click.tsx b/src/components/login-page/auth/via-one-click.tsx
index 9e3d0f103..2373fe127 100644
--- a/src/components/login-page/auth/via-one-click.tsx
+++ b/src/components/login-page/auth/via-one-click.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { useSelector } from 'react-redux'
@@ -29,7 +29,7 @@ interface OneClickMetadata {
 }
 
 const buildBackendAuthUrl = (backendUrl: string, backendName: string): string => {
-  return `${backendUrl}/auth/${backendName}`
+  return `${ backendUrl }/auth/${ backendName }`
 }
 
 const getMetadata = (backendUrl: string, oneClickType: OneClickType): OneClickMetadata => {
@@ -113,12 +113,12 @@ export const ViaOneClick: React.FC<ViaOneClickProps> = ({ oneClickType, optional
 
   return (
     <SocialLinkButton
-      backgroundClass={className}
-      icon={icon}
-      href={url}
-      title={text}
+      backgroundClass={ className }
+      icon={ icon }
+      href={ url }
+      title={ text }
     >
-      {text}
+      { text }
     </SocialLinkButton>
   )
 }
diff --git a/src/components/login-page/auth/via-openid.tsx b/src/components/login-page/auth/via-openid.tsx
index 6af2a4254..efa57b10f 100644
--- a/src/components/login-page/auth/via-openid.tsx
+++ b/src/components/login-page/auth/via-openid.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { FormEvent, useState } from 'react'
 import { Alert, Button, Card, Form } from 'react-bootstrap'
@@ -20,7 +20,8 @@ export const ViaOpenId: React.FC = () => {
   }
 
   const onFormSubmit = (event: FormEvent) => {
-    doAsyncLogin().catch(() => setError(true))
+    doAsyncLogin()
+      .catch(() => setError(true))
     event.preventDefault()
   }
 
@@ -28,22 +29,22 @@ export const ViaOpenId: React.FC = () => {
     <Card className="bg-dark mb-4">
       <Card.Body>
         <Card.Title>
-          <Trans i18nKey="login.signInVia" values={{ service: 'OpenID' }}/>
+          <Trans i18nKey="login.signInVia" values={ { service: 'OpenID' } }/>
         </Card.Title>
 
-        <Form onSubmit={onFormSubmit}>
+        <Form onSubmit={ onFormSubmit }>
           <Form.Group controlId="openid">
             <Form.Control
-              isInvalid={error}
+              isInvalid={ error }
               type="text"
               size="sm"
-              placeholder={'OpenID'}
-              onChange={(event) => setOpenId(event.currentTarget.value)}
+              placeholder={ 'OpenID' }
+              onChange={ (event) => setOpenId(event.currentTarget.value) }
               className="bg-dark text-light"
             />
           </Form.Group>
 
-          <Alert className="small" show={error} variant="danger">
+          <Alert className="small" show={ error } variant="danger">
             <Trans i18nKey="login.auth.error.openIdLogin"/>
           </Alert>
 
diff --git a/src/components/login-page/login-page.tsx b/src/components/login-page/login-page.tsx
index 65683b026..46d2e9960 100644
--- a/src/components/login-page/login-page.tsx
+++ b/src/components/login-page/login-page.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import equal from 'fast-deep-equal'
 import React, { Fragment } from 'react'
@@ -48,34 +48,34 @@ export const LoginPage: React.FC = () => {
   return <Fragment>
     <div className="my-3">
       <Row className="h-100 flex justify-content-center">
-        <ShowIf condition={authProviders.internal || authProviders.ldap || authProviders.openid}>
-          <Col xs={12} sm={10} lg={4}>
-            <ShowIf condition={authProviders.internal}><ViaInternal/></ShowIf>
-            <ShowIf condition={authProviders.ldap}><ViaLdap/></ShowIf>
-            <ShowIf condition={authProviders.openid}><ViaOpenId/></ShowIf>
+        <ShowIf condition={ authProviders.internal || authProviders.ldap || authProviders.openid }>
+          <Col xs={ 12 } sm={ 10 } lg={ 4 }>
+            <ShowIf condition={ authProviders.internal }><ViaInternal/></ShowIf>
+            <ShowIf condition={ authProviders.ldap }><ViaLdap/></ShowIf>
+            <ShowIf condition={ authProviders.openid }><ViaOpenId/></ShowIf>
           </Col>
         </ShowIf>
-        <ShowIf condition={oneClickProviders.includes(true)}>
-          <Col xs={12} sm={10} lg={4}>
+        <ShowIf condition={ oneClickProviders.includes(true) }>
+          <Col xs={ 12 } sm={ 10 } lg={ 4 }>
             <Card className="bg-dark mb-4">
               <Card.Body>
                 <Card.Title>
-                  <Trans i18nKey="login.signInVia" values={{ service: '' }}/>
+                  <Trans i18nKey="login.signInVia" values={ { service: '' } }/>
                 </Card.Title>
                 {
                   Object.values(OneClickType)
-                    .filter((value) => authProviders[value])
-                    .map((value) => (
-                      <div
-                        className="p-2 d-flex flex-column social-button-container"
-                        key={value}
-                      >
-                        <ViaOneClick
-                          oneClickType={value}
-                          optionalName={oneClickCustomName(value)}
-                        />
-                      </div>
-                    ))
+                        .filter((value) => authProviders[value])
+                        .map((value) => (
+                          <div
+                            className="p-2 d-flex flex-column social-button-container"
+                            key={ value }
+                          >
+                            <ViaOneClick
+                              oneClickType={ value }
+                              optionalName={ oneClickCustomName(value) }
+                            />
+                          </div>
+                        ))
                 }
               </Card.Body>
             </Card>
diff --git a/src/components/markdown-renderer/basic-markdown-renderer.tsx b/src/components/markdown-renderer/basic-markdown-renderer.tsx
index ef5708a63..a63ec8501 100644
--- a/src/components/markdown-renderer/basic-markdown-renderer.tsx
+++ b/src/components/markdown-renderer/basic-markdown-renderer.tsx
@@ -33,14 +33,15 @@ export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & Additi
     onAfterRendering
   }) => {
   const maxLength = useSelector((state: ApplicationState) => state.config.maxDocumentLength)
-  const trimmedContent = useMemo(() => content.length > maxLength ? content.substr(0, maxLength) : content, [content, maxLength])
+  const trimmedContent = useMemo(() => content.length > maxLength ? content.substr(0, maxLength) : content, [content,
+    maxLength])
   const markdownReactDom = useConvertMarkdownToReactDom(trimmedContent, markdownIt, componentReplacers, onBeforeRendering, onAfterRendering)
 
   return (
-    <div className={`${className ?? ''} d-flex flex-column align-items-center`}>
-      <DocumentLengthLimitReachedAlert contentLength={content.length}/>
-      <div ref={documentReference} className={'markdown-body w-100 d-flex flex-column align-items-center'}>
-        {markdownReactDom}
+    <div className={ `${ className ?? '' } d-flex flex-column align-items-center` }>
+      <DocumentLengthLimitReachedAlert contentLength={ content.length }/>
+      <div ref={ documentReference } className={ 'markdown-body w-100 d-flex flex-column align-items-center' }>
+        { markdownReactDom }
       </div>
     </div>
   )
diff --git a/src/components/markdown-renderer/document-length-limit-reached-alert.tsx b/src/components/markdown-renderer/document-length-limit-reached-alert.tsx
index bb723ba9c..e0b910f2b 100644
--- a/src/components/markdown-renderer/document-length-limit-reached-alert.tsx
+++ b/src/components/markdown-renderer/document-length-limit-reached-alert.tsx
@@ -20,9 +20,9 @@ export const DocumentLengthLimitReachedAlert: React.FC<DocumentLengthLimitReache
   const maxLength = useSelector((state: ApplicationState) => state.config.maxDocumentLength)
 
   return (
-    <ShowIf condition={contentLength > maxLength}>
-      <Alert variant='danger' dir={'auto'} data-cy={'limitReachedMessage'}>
-        <Trans i18nKey={'editor.error.limitReached.description'} values={{ maxLength }}/>
+    <ShowIf condition={ contentLength > maxLength }>
+      <Alert variant='danger' dir={ 'auto' } data-cy={ 'limitReachedMessage' }>
+        <Trans i18nKey={ 'editor.error.limitReached.description' } values={ { maxLength } }/>
       </Alert>
     </ShowIf>)
 }
diff --git a/src/components/markdown-renderer/full-markdown-renderer.tsx b/src/components/markdown-renderer/full-markdown-renderer.tsx
index a973b81c9..36b502ddd 100644
--- a/src/components/markdown-renderer/full-markdown-renderer.tsx
+++ b/src/components/markdown-renderer/full-markdown-renderer.tsx
@@ -89,16 +89,16 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
   }, [setShowYamlError, showYamlError])
 
   return (
-    <div ref={rendererRef} className={'position-relative'}>
-      <InvalidYamlAlert showYamlError={showYamlError}/>
+    <div ref={ rendererRef } className={ 'position-relative' }>
+      <InvalidYamlAlert showYamlError={ showYamlError }/>
       <BasicMarkdownRenderer
-        className={className}
-        content={content}
-        componentReplacers={allReplacers}
-        markdownIt={markdownIt}
-        documentReference={documentElement}
-        onBeforeRendering={clearFrontmatter}
-        onAfterRendering={checkYamlErrorState}/>
+        className={ className }
+        content={ content }
+        componentReplacers={ allReplacers }
+        markdownIt={ markdownIt }
+        documentReference={ documentElement }
+        onBeforeRendering={ clearFrontmatter }
+        onAfterRendering={ checkYamlErrorState }/>
     </div>
   )
 }
diff --git a/src/components/markdown-renderer/github-markdown.scss b/src/components/markdown-renderer/github-markdown.scss
index c499be96e..5f3655de8 100644
--- a/src/components/markdown-renderer/github-markdown.scss
+++ b/src/components/markdown-renderer/github-markdown.scss
@@ -62,16 +62,18 @@
   content: ' ';
   display: inline-block;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E");
-}.markdown-body {
-   -ms-text-size-adjust: 100%;
-   -webkit-text-size-adjust: 100%;
-   line-height: 1.5;
- //  color: #24292e;
-   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
-   font-size: 16px;
-   line-height: 1.5;
-   word-wrap: break-word;
- }
+}
+
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  line-height: 1.5;
+  //  color: #24292e;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
 
 .markdown-body details {
   display: block;
@@ -107,7 +109,7 @@
 .markdown-body code,
 .markdown-body kbd,
 .markdown-body pre {
-  font-family: monospace,monospace;
+  font-family: monospace, monospace;
   font-size: 1em;
 }
 
@@ -190,7 +192,7 @@
 .markdown-body kbd {
   display: inline-block;
   padding: 3px 5px;
-  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   line-height: 10px;
   color: #444d56;
   vertical-align: middle;
@@ -283,7 +285,7 @@
 
 .markdown-body code,
 .markdown-body pre {
-  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   font-size: 12px;
 }
 
@@ -299,102 +301,102 @@
   appearance: none;
 }
 
-.markdown-body :checked+.radio-label {
+.markdown-body :checked + .radio-label {
   position: relative;
   z-index: 1;
   border-color: #0366d6;
 }
 
 .markdown-body .border {
-  border: 1px solid #e1e4e8!important;
+  border: 1px solid #e1e4e8 !important;
 }
 
 .markdown-body .border-0 {
-  border: 0!important;
+  border: 0 !important;
 }
 
 .markdown-body .border-bottom {
-  border-bottom: 1px solid #e1e4e8!important;
+  border-bottom: 1px solid #e1e4e8 !important;
 }
 
 .markdown-body .rounded-1 {
-  border-radius: 3px!important;
+  border-radius: 3px !important;
 }
 
 .markdown-body .bg-white {
-  background-color: #fff!important;
+  background-color: #fff !important;
 }
 
 .markdown-body .bg-gray-light {
-  background-color: #fafbfc!important;
+  background-color: #fafbfc !important;
 }
 
 .markdown-body .text-gray-light {
-  color: #6a737d!important;
+  color: #6a737d !important;
 }
 
 .markdown-body .mb-0 {
-  margin-bottom: 0!important;
+  margin-bottom: 0 !important;
 }
 
 .markdown-body .my-2 {
-  margin-top: 8px!important;
-  margin-bottom: 8px!important;
+  margin-top: 8px !important;
+  margin-bottom: 8px !important;
 }
 
 .markdown-body .pl-0 {
-  padding-left: 0!important;
+  padding-left: 0 !important;
 }
 
 .markdown-body .py-0 {
-  padding-top: 0!important;
-  padding-bottom: 0!important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
 }
 
 .markdown-body .pl-1 {
-  padding-left: 4px!important;
+  padding-left: 4px !important;
 }
 
 .markdown-body .pl-2 {
-  padding-left: 8px!important;
+  padding-left: 8px !important;
 }
 
 .markdown-body .py-2 {
-  padding-top: 8px!important;
-  padding-bottom: 8px!important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
 }
 
 .markdown-body .pl-3,
 .markdown-body .px-3 {
-  padding-left: 16px!important;
+  padding-left: 16px !important;
 }
 
 .markdown-body .px-3 {
-  padding-right: 16px!important;
+  padding-right: 16px !important;
 }
 
 .markdown-body .pl-4 {
-  padding-left: 24px!important;
+  padding-left: 24px !important;
 }
 
 .markdown-body .pl-5 {
-  padding-left: 32px!important;
+  padding-left: 32px !important;
 }
 
 .markdown-body .pl-6 {
-  padding-left: 40px!important;
+  padding-left: 40px !important;
 }
 
 .markdown-body .f6 {
-  font-size: 12px!important;
+  font-size: 12px !important;
 }
 
 .markdown-body .lh-condensed {
-  line-height: 1.25!important;
+  line-height: 1.25 !important;
 }
 
 .markdown-body .text-bold {
-  font-weight: 600!important;
+  font-weight: 600 !important;
 }
 
 .markdown-body .pl-c {
@@ -522,77 +524,77 @@
 }
 
 .markdown-body .mb-0 {
-  margin-bottom: 0!important;
+  margin-bottom: 0 !important;
 }
 
 .markdown-body .my-2 {
-  margin-bottom: 8px!important;
+  margin-bottom: 8px !important;
 }
 
 .markdown-body .my-2 {
-  margin-top: 8px!important;
+  margin-top: 8px !important;
 }
 
 .markdown-body .pl-0 {
-  padding-left: 0!important;
+  padding-left: 0 !important;
 }
 
 .markdown-body .py-0 {
-  padding-top: 0!important;
-  padding-bottom: 0!important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
 }
 
 .markdown-body .pl-1 {
-  padding-left: 4px!important;
+  padding-left: 4px !important;
 }
 
 .markdown-body .pl-2 {
-  padding-left: 8px!important;
+  padding-left: 8px !important;
 }
 
 .markdown-body .py-2 {
-  padding-top: 8px!important;
-  padding-bottom: 8px!important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
 }
 
 .markdown-body .pl-3 {
-  padding-left: 16px!important;
+  padding-left: 16px !important;
 }
 
 .markdown-body .pl-4 {
-  padding-left: 24px!important;
+  padding-left: 24px !important;
 }
 
 .markdown-body .pl-5 {
-  padding-left: 32px!important;
+  padding-left: 32px !important;
 }
 
 .markdown-body .pl-6 {
-  padding-left: 40px!important;
+  padding-left: 40px !important;
 }
 
 .markdown-body .pl-7 {
-  padding-left: 48px!important;
+  padding-left: 48px !important;
 }
 
 .markdown-body .pl-8 {
-  padding-left: 64px!important;
+  padding-left: 64px !important;
 }
 
 .markdown-body .pl-9 {
-  padding-left: 80px!important;
+  padding-left: 80px !important;
 }
 
 .markdown-body .pl-10 {
-  padding-left: 96px!important;
+  padding-left: 96px !important;
 }
 
 .markdown-body .pl-11 {
-  padding-left: 112px!important;
+  padding-left: 112px !important;
 }
 
 .markdown-body .pl-12 {
-  padding-left: 128px!important;
+  padding-left: 128px !important;
 }
 
 .markdown-body hr {
@@ -602,7 +604,7 @@
 .markdown-body kbd {
   display: inline-block;
   padding: 3px 5px;
-  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   line-height: 10px;
   color: #444d56;
   vertical-align: middle;
@@ -622,12 +624,12 @@
   clear: both;
 }
 
-.markdown-body>:first-child {
-  margin-top: 0!important;
+.markdown-body > :first-child {
+  margin-top: 0 !important;
 }
 
-.markdown-body>:last-child {
-  margin-bottom: 0!important;
+.markdown-body > :last-child {
+  margin-bottom: 0 !important;
 }
 
 .markdown-body a:not([href]) {
@@ -661,11 +663,11 @@
   border-left: .25em solid #dfe2e5;
 }
 
-.markdown-body blockquote>:first-child {
+.markdown-body blockquote > :first-child {
   margin-top: 0;
 }
 
-.markdown-body blockquote>:last-child {
+.markdown-body blockquote > :last-child {
   margin-bottom: 0;
 }
 
@@ -697,25 +699,25 @@
 
 .markdown-body h2 {
   body.dark &, & {
-  font-size: 1.5em;
+    font-size: 1.5em;
   }
 }
 
 .markdown-body h3 {
   body.dark &, & {
-  font-size: 1.25em;
+    font-size: 1.25em;
   }
 }
 
 .markdown-body h4 {
   body.dark &, & {
-  font-size: 1em;
+    font-size: 1em;
   }
 }
 
 .markdown-body h5 {
   body.dark &, & {
-  font-size: .875em;
+    font-size: .875em;
   }
 }
 
@@ -723,6 +725,7 @@
   body.dark &, & {
     font-size: .85em;
   }
+
   body.dark & {
     color: #b4c7d5;
   }
@@ -745,11 +748,11 @@
   word-wrap: break-all;
 }
 
-.markdown-body li>p {
+.markdown-body li > p {
   margin-top: 16px;
 }
 
-.markdown-body li+li {
+.markdown-body li + li {
   margin-top: .25em;
 }
 
@@ -787,7 +790,7 @@
 }
 
 .markdown-body table tr {
- // background-color: #fff;
+  // background-color: #fff;
   border-top: 1px solid #c6cbd1;
 }
 
@@ -813,7 +816,7 @@
   padding: .2em .4em;
   margin: 0;
   font-size: 85%;
-  background-color: rgba(27,31,35,.05);
+  background-color: rgba(27, 31, 35, .05);
   border-radius: 3px;
 }
 
@@ -821,7 +824,7 @@
   word-wrap: normal;
 }
 
-.markdown-body pre>code {
+.markdown-body pre > code {
   padding: 0;
   margin: 0;
   font-size: 100%;
@@ -864,7 +867,7 @@
 
 .markdown-body .commit-tease-sha {
   display: inline-block;
-  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   font-size: 90%;
   color: #444d56;
 }
@@ -889,10 +892,10 @@
   min-width: 50px;
   padding-right: 10px;
   padding-left: 10px;
-  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   font-size: 12px;
   line-height: 20px;
-  color: rgba(27,31,35,.3);
+  color: rgba(27, 31, 35, .3);
   text-align: right;
   white-space: nowrap;
   vertical-align: top;
@@ -904,7 +907,7 @@
 }
 
 .markdown-body .blob-num:hover {
-  color: rgba(27,31,35,.6);
+  color: rgba(27, 31, 35, .6);
 }
 
 .markdown-body .blob-num:before {
@@ -921,7 +924,7 @@
 
 .markdown-body .blob-code-inner {
   overflow: visible;
-  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   font-size: 12px;
   color: #24292e;
   word-wrap: normal;
@@ -998,7 +1001,7 @@
   list-style-type: none;
 }
 
-.markdown-body .task-list-item+.task-list-item {
+.markdown-body .task-list-item + .task-list-item {
   margin-top: 3px;
 }
 
diff --git a/src/components/markdown-renderer/hooks/use-extract-first-headline.ts b/src/components/markdown-renderer/hooks/use-extract-first-headline.ts
index 09c80955e..7b14319e6 100644
--- a/src/components/markdown-renderer/hooks/use-extract-first-headline.ts
+++ b/src/components/markdown-renderer/hooks/use-extract-first-headline.ts
@@ -14,7 +14,7 @@ export const useExtractFirstHeadline = (documentElement: React.RefObject<HTMLDiv
 
     let innerText = ''
 
-    if ((node as HTMLElement).classList?.contains("katex-mathml")) {
+    if ((node as HTMLElement).classList?.contains('katex-mathml')) {
       return ''
     }
 
@@ -34,7 +34,8 @@ export const useExtractFirstHeadline = (documentElement: React.RefObject<HTMLDiv
 
   useEffect(() => {
     if (onFirstHeadingChange && documentElement.current) {
-      const firstHeading = documentElement.current.getElementsByTagName('h1').item(0)
+      const firstHeading = documentElement.current.getElementsByTagName('h1')
+                                          .item(0)
       const headingText = extractInnerText(firstHeading)
       if (headingText === lastFirstHeading.current) {
         return
diff --git a/src/components/markdown-renderer/hooks/use-post-toc-ast-on-change.ts b/src/components/markdown-renderer/hooks/use-post-toc-ast-on-change.ts
index ed27916ac..6db684875 100644
--- a/src/components/markdown-renderer/hooks/use-post-toc-ast-on-change.ts
+++ b/src/components/markdown-renderer/hooks/use-post-toc-ast-on-change.ts
@@ -8,7 +8,7 @@ import equal from 'fast-deep-equal'
 import { TocAst } from 'markdown-it-toc-done-right'
 import { RefObject, useEffect, useRef } from 'react'
 
-export const usePostTocAstOnChange = (tocAst: RefObject<TocAst|undefined>, onTocChange?: (ast: TocAst) => void): void => {
+export const usePostTocAstOnChange = (tocAst: RefObject<TocAst | undefined>, onTocChange?: (ast: TocAst) => void): void => {
   const lastTocAst = useRef<TocAst>()
   useEffect(() => {
     if (onTocChange && tocAst.current && !equal(tocAst, lastTocAst.current)) {
diff --git a/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts b/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts
index bbcdda704..654e83e91 100644
--- a/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts
+++ b/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts
@@ -27,7 +27,7 @@ import { VimeoReplacer } from '../replace-components/vimeo/vimeo-replacer'
 import { YoutubeReplacer } from '../replace-components/youtube/youtube-replacer'
 
 export const useReplacerInstanceListCreator = (onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void,
-                                               onImageClick?: ImageClickHandler, baseUrl?: string): () => ComponentReplacer[] => useMemo(() =>
+  onImageClick?: ImageClickHandler, baseUrl?: string): () => ComponentReplacer[] => useMemo(() =>
   () => [
     new LinkReplacer(baseUrl),
     new LinemarkerReplacer(),
diff --git a/src/components/markdown-renderer/invalid-yaml-alert.tsx b/src/components/markdown-renderer/invalid-yaml-alert.tsx
index 6b15c16aa..3b7015a42 100644
--- a/src/components/markdown-renderer/invalid-yaml-alert.tsx
+++ b/src/components/markdown-renderer/invalid-yaml-alert.tsx
@@ -18,7 +18,7 @@ export const InvalidYamlAlert: React.FC<InvalidYamlAlertProps> = ({ showYamlErro
   useTranslation()
 
   return (
-    <ShowIf condition={showYamlError}>
+    <ShowIf condition={ showYamlError }>
       <Alert variant='warning' dir='auto'>
         <Trans i18nKey='editor.invalidYaml'>
           <InternalLink text='yaml-metadata' href='/n/yaml-metadata' className='text-primary'/>
diff --git a/src/components/markdown-renderer/markdown-it-configurator/BasicMarkdownItConfigurator.tsx b/src/components/markdown-renderer/markdown-it-configurator/BasicMarkdownItConfigurator.tsx
index a3db4ce72..9d450ccd2 100644
--- a/src/components/markdown-renderer/markdown-it-configurator/BasicMarkdownItConfigurator.tsx
+++ b/src/components/markdown-renderer/markdown-it-configurator/BasicMarkdownItConfigurator.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import MarkdownIt from 'markdown-it'
 import abbreviation from 'markdown-it-abbr'
@@ -22,7 +22,7 @@ import { twitterEmojis } from '../markdown-it-plugins/twitter-emojis'
 import { MarkdownItConfigurator } from './MarkdownItConfigurator'
 
 export class BasicMarkdownItConfigurator extends MarkdownItConfigurator {
-  protected configure (markdownIt: MarkdownIt): void {
+  protected configure(markdownIt: MarkdownIt): void {
     this.configurations.push(
       twitterEmojis,
       abbreviation,
diff --git a/src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx b/src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx
index 105136c7c..87e8c8af8 100644
--- a/src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx
+++ b/src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx
@@ -24,7 +24,7 @@ import { YoutubeReplacer } from '../replace-components/youtube/youtube-replacer'
 import { BasicMarkdownItConfigurator } from './BasicMarkdownItConfigurator'
 
 export class FullMarkdownItConfigurator extends BasicMarkdownItConfigurator {
-  constructor (
+  constructor(
     private useFrontmatter: boolean,
     private passYamlErrorState: (error: boolean) => void,
     private onRawMeta: (rawMeta: RawNoteFrontmatter) => void,
@@ -34,7 +34,7 @@ export class FullMarkdownItConfigurator extends BasicMarkdownItConfigurator {
     super()
   }
 
-  protected configure (markdownIt: MarkdownIt): void {
+  protected configure(markdownIt: MarkdownIt): void {
     super.configure(markdownIt)
 
     this.configurations.push(
diff --git a/src/components/markdown-renderer/markdown-it-configurator/MarkdownItConfigurator.tsx b/src/components/markdown-renderer/markdown-it-configurator/MarkdownItConfigurator.tsx
index 8c3bd8e37..51e5e3a1f 100644
--- a/src/components/markdown-renderer/markdown-it-configurator/MarkdownItConfigurator.tsx
+++ b/src/components/markdown-renderer/markdown-it-configurator/MarkdownItConfigurator.tsx
@@ -1,23 +1,21 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import MarkdownIt from 'markdown-it'
 
 export abstract class MarkdownItConfigurator {
-  protected configurations:MarkdownIt.PluginSimple[] = [];
-  protected postConfigurations:MarkdownIt.PluginSimple[] = [];
+  protected configurations: MarkdownIt.PluginSimple[] = []
+  protected postConfigurations: MarkdownIt.PluginSimple[] = []
 
-  protected abstract configure(markdownIt: MarkdownIt): void;
-
-  public pushConfig (plugin: MarkdownIt.PluginSimple): this {
+  public pushConfig(plugin: MarkdownIt.PluginSimple): this {
     this.configurations.push(plugin)
     return this
   }
 
-  public buildConfiguredMarkdownIt (): MarkdownIt {
+  public buildConfiguredMarkdownIt(): MarkdownIt {
     const markdownIt = new MarkdownIt('default', {
       html: true,
       breaks: true,
@@ -29,4 +27,6 @@ export abstract class MarkdownItConfigurator {
     this.postConfigurations.forEach((postConfiguration) => markdownIt.use(postConfiguration))
     return markdownIt
   }
+
+  protected abstract configure(markdownIt: MarkdownIt): void;
 }
diff --git a/src/components/markdown-renderer/markdown-it-plugins/alert-container.ts b/src/components/markdown-renderer/markdown-it-plugins/alert-container.ts
index 3feae4d03..1bb5d0bbf 100644
--- a/src/components/markdown-renderer/markdown-it-plugins/alert-container.ts
+++ b/src/components/markdown-renderer/markdown-it-plugins/alert-container.ts
@@ -18,7 +18,7 @@ const createRenderContainer = (level: ValidAlertLevels): RenderContainerReturn =
   return (tokens: Token[], index: number, options: MarkdownIt.Options, env: unknown, self: Renderer) => {
     tokens[index].attrJoin('role', 'alert')
     tokens[index].attrJoin('class', 'alert')
-    tokens[index].attrJoin('class', `alert-${level}`)
+    tokens[index].attrJoin('class', `alert-${ level }`)
     return self.renderToken(tokens, index, options)
   }
 }
diff --git a/src/components/markdown-renderer/markdown-it-plugins/emoji/mapping.ts b/src/components/markdown-renderer/markdown-it-plugins/emoji/mapping.ts
index 8418a06ca..38523a533 100644
--- a/src/components/markdown-renderer/markdown-it-plugins/emoji/mapping.ts
+++ b/src/components/markdown-renderer/markdown-it-plugins/emoji/mapping.ts
@@ -26,18 +26,18 @@ const emojiSkinToneModifierMap = [1, 2, 3, 4, 5]
   .reduce((reduceObject, modifierValue) => {
     const lightSkinCode = 127995
     const codepoint = lightSkinCode + (modifierValue - 1)
-    const shortcode = `skin-tone-${modifierValue}`
-    reduceObject[shortcode] = `&#${codepoint};`
+    const shortcode = `skin-tone-${ modifierValue }`
+    reduceObject[shortcode] = `&#${ codepoint };`
     return reduceObject
   }, {} as ShortCodeMap)
 
 const forkAwesomeIconMap = Object.keys(ForkAwesomeIcons)
-  .reduce((reduceObject, icon) => {
-    const shortcode = `fa-${icon}`
-    // noinspection CheckTagEmptyBody
-    reduceObject[shortcode] = `<i class="fa fa-${icon}"></i>`
-    return reduceObject
-  }, {} as ShortCodeMap)
+                                 .reduce((reduceObject, icon) => {
+                                   const shortcode = `fa-${ icon }`
+                                   // noinspection CheckTagEmptyBody
+                                   reduceObject[shortcode] = `<i class="fa fa-${ icon }"></i>`
+                                   return reduceObject
+                                 }, {} as ShortCodeMap)
 
 export const combinedEmojiData = {
   ...shortCodeMap,
diff --git a/src/components/markdown-renderer/markdown-it-plugins/headline-anchors.ts b/src/components/markdown-renderer/markdown-it-plugins/headline-anchors.ts
index ab95a7d1f..d6632c8b7 100644
--- a/src/components/markdown-renderer/markdown-it-plugins/headline-anchors.ts
+++ b/src/components/markdown-renderer/markdown-it-plugins/headline-anchors.ts
@@ -13,7 +13,7 @@ export const headlineAnchors: MarkdownIt.PluginSimple = (markdownIt) => {
     permalinkBefore: true,
     permalinkClass: 'heading-anchor text-dark',
     permalinkSymbol: '<i class="fa fa-link"></i>',
-    permalinkHref: (slug: string): string => `#${slug}`
+    permalinkHref: (slug: string): string => `#${ slug }`
   }
 
   anchor(markdownIt, options)
diff --git a/src/components/markdown-renderer/markdown-it-plugins/quote-extra.ts b/src/components/markdown-renderer/markdown-it-plugins/quote-extra.ts
index 67155b6a4..e7ed2f9f2 100644
--- a/src/components/markdown-renderer/markdown-it-plugins/quote-extra.ts
+++ b/src/components/markdown-renderer/markdown-it-plugins/quote-extra.ts
@@ -20,7 +20,7 @@ const replaceQuoteExtraTime: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<span class="quote-extra"><i class="fa fa-clock-o mx-1"></i> ${match}</span>`
+    return `<span class="quote-extra"><i class="fa fa-clock-o mx-1"></i> ${ match }</span>`
   }
 }
 
@@ -32,7 +32,7 @@ const replaceQuoteExtraColor: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<span class="quote-extra" data-color='${match}' style='color: ${match}'><i class="fa fa-tag"></i></span>`
+    return `<span class="quote-extra" data-color='${ match }' style='color: ${ match }'><i class="fa fa-tag"></i></span>`
   }
 }
 
@@ -42,6 +42,6 @@ const replaceQuoteExtraAuthor: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<span class="quote-extra"><i class="fa fa-user mx-1"></i> ${match}</span>`
+    return `<span class="quote-extra"><i class="fa fa-user mx-1"></i> ${ match }</span>`
   }
 }
diff --git a/src/components/markdown-renderer/markdown-it-plugins/spoiler-container.ts b/src/components/markdown-renderer/markdown-it-plugins/spoiler-container.ts
index 280914dff..a4802146c 100644
--- a/src/components/markdown-renderer/markdown-it-plugins/spoiler-container.ts
+++ b/src/components/markdown-renderer/markdown-it-plugins/spoiler-container.ts
@@ -11,7 +11,7 @@ import Token from 'markdown-it/lib/token'
 import { MarkdownItPlugin } from '../replace-components/ComponentReplacer'
 import { RenderContainerReturn } from './alert-container'
 
-export const spoilerRegEx = /^spoiler\s+(.*)$/;
+export const spoilerRegEx = /^spoiler\s+(.*)$/
 
 const createSpoilerContainer = (): RenderContainerReturn => {
   return (tokens: Token[], index: number) => {
@@ -19,7 +19,7 @@ const createSpoilerContainer = (): RenderContainerReturn => {
 
     if (tokens[index].nesting === 1 && matches && matches[1]) {
       // opening tag
-      return `<details><summary>${escapeHtml(matches[1])}</summary>`
+      return `<details><summary>${ escapeHtml(matches[1]) }</summary>`
 
     } else {
       // closing tag
diff --git a/src/components/markdown-renderer/regex-plugins/replace-legacy-pdf-short-code.ts b/src/components/markdown-renderer/regex-plugins/replace-legacy-pdf-short-code.ts
index c3244f953..d0545128e 100644
--- a/src/components/markdown-renderer/regex-plugins/replace-legacy-pdf-short-code.ts
+++ b/src/components/markdown-renderer/regex-plugins/replace-legacy-pdf-short-code.ts
@@ -14,7 +14,7 @@ export const legacyPdfShortCode: MarkdownIt.PluginSimple = (markdownIt) => {
     name: 'legacy-pdf-short-code',
     regex: finalRegex,
     replace: (match: string) => {
-      return `<a target="_blank" rel="noopener noreferrer" href="${match}">${match}</a>`
+      return `<a target="_blank" rel="noopener noreferrer" href="${ match }">${ match }</a>`
     }
   })
 }
diff --git a/src/components/markdown-renderer/regex-plugins/replace-legacy-slideshare-short-code.ts b/src/components/markdown-renderer/regex-plugins/replace-legacy-slideshare-short-code.ts
index 726d05b3d..d6ff5f8c2 100644
--- a/src/components/markdown-renderer/regex-plugins/replace-legacy-slideshare-short-code.ts
+++ b/src/components/markdown-renderer/regex-plugins/replace-legacy-slideshare-short-code.ts
@@ -14,7 +14,7 @@ export const legacySlideshareShortCode: MarkdownIt.PluginSimple = (markdownIt) =
     name: 'legacy-slideshare-short-code',
     regex: finalRegex,
     replace: (match: string) => {
-      return `<a target="_blank" rel="noopener noreferrer" href="https://www.slideshare.net/${match}">https://www.slideshare.net/${match}</a>`
+      return `<a target="_blank" rel="noopener noreferrer" href="https://www.slideshare.net/${ match }">https://www.slideshare.net/${ match }</a>`
     }
   })
 }
diff --git a/src/components/markdown-renderer/regex-plugins/replace-legacy-speakerdeck-short-code.ts b/src/components/markdown-renderer/regex-plugins/replace-legacy-speakerdeck-short-code.ts
index 80f09cabb..de28f123e 100644
--- a/src/components/markdown-renderer/regex-plugins/replace-legacy-speakerdeck-short-code.ts
+++ b/src/components/markdown-renderer/regex-plugins/replace-legacy-speakerdeck-short-code.ts
@@ -14,7 +14,7 @@ export const legacySpeakerdeckShortCode: MarkdownIt.PluginSimple = (markdownIt)
       name: 'legacy-speakerdeck-short-code',
       regex: finalRegex,
       replace: (match: string) => {
-        return `<a target="_blank" rel="noopener noreferrer" href="https://speakerdeck.com/${match}">https://speakerdeck.com/${match}</a>`
+        return `<a target="_blank" rel="noopener noreferrer" href="https://speakerdeck.com/${ match }">https://speakerdeck.com/${ match }</a>`
       }
     }
   )
diff --git a/src/components/markdown-renderer/replace-components/ComponentReplacer.ts b/src/components/markdown-renderer/replace-components/ComponentReplacer.ts
index d23608fb3..15295c555 100644
--- a/src/components/markdown-renderer/replace-components/ComponentReplacer.ts
+++ b/src/components/markdown-renderer/replace-components/ComponentReplacer.ts
@@ -15,5 +15,5 @@ export type NativeRenderer = () => ReactElement
 export type MarkdownItPlugin = MarkdownIt.PluginSimple | MarkdownIt.PluginWithOptions | MarkdownIt.PluginWithParams
 
 export abstract class ComponentReplacer {
-  public abstract getReplacement (node: DomElement, subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): (ReactElement | null | undefined);
+  public abstract getReplacement(node: DomElement, subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): (ReactElement | null | undefined);
 }
diff --git a/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx b/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx
index 4016a94e8..16f1c4f3c 100644
--- a/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx
@@ -21,8 +21,11 @@ export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
     const actualContainer = container.current
     import(/* webpackChunkName: "abc.js" */ 'abcjs').then((imp) => {
       imp.renderAbc(actualContainer, code)
-    }).catch(() => { console.error('error while loading abcjs') })
+    })
+                                                    .catch(() => {
+                                                      console.error('error while loading abcjs')
+                                                    })
   }, [code])
 
-  return <div ref={container} className={'abcjs-score bg-white text-black text-center overflow-x-auto'}/>
+  return <div ref={ container } className={ 'abcjs-score bg-white text-black text-center overflow-x-auto' }/>
 }
diff --git a/src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx b/src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx
index 73979fa72..3d6bac255 100644
--- a/src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
@@ -10,13 +10,13 @@ import { ComponentReplacer } from '../ComponentReplacer'
 import { AbcFrame } from './abc-frame'
 
 export class AbcReplacer implements ComponentReplacer {
-  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'abc' || !codeNode.children || !codeNode.children[0]) {
       return
     }
 
     const code = codeNode.children[0].data as string
 
-    return <AbcFrame code={code}/>
+    return <AbcFrame code={ code }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx b/src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx
index f2a5096aa..e82febfe8 100644
--- a/src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
@@ -14,12 +14,12 @@ export interface AsciinemaFrameProps {
 export const AsciinemaFrame: React.FC<AsciinemaFrameProps> = ({ id }) => {
   return (
     <OneClickEmbedding
-      containerClassName={'embed-responsive embed-responsive-16by9'}
-      previewContainerClassName={'embed-responsive-item'}
-      hoverIcon={'play'}
-      loadingImageUrl={`https://asciinema.org/a/${id}.png`}>
-      <iframe className='embed-responsive-item' title={`asciinema cast ${id}`}
-        src={`https://asciinema.org/a/${id}/embed?autoplay=1`}/>
+      containerClassName={ 'embed-responsive embed-responsive-16by9' }
+      previewContainerClassName={ 'embed-responsive-item' }
+      hoverIcon={ 'play' }
+      loadingImageUrl={ `https://asciinema.org/a/${ id }.png` }>
+      <iframe className='embed-responsive-item' title={ `asciinema cast ${ id }` }
+              src={ `https://asciinema.org/a/${ id }/embed?autoplay=1` }/>
     </OneClickEmbedding>
   )
 }
diff --git a/src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx b/src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx
index 6ead4e42f..a516b54e0 100644
--- a/src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import MarkdownIt from 'markdown-it'
@@ -16,19 +16,19 @@ import { replaceAsciinemaLink } from './replace-asciinema-link'
 export class AsciinemaReplacer extends ComponentReplacer {
   private counterMap: Map<string, number> = new Map<string, number>()
 
-  public getReplacement (node: DomElement): React.ReactElement | undefined {
+  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
+    markdownItRegex(markdownIt, replaceAsciinemaLink)
+  }
+
+  public getReplacement(node: DomElement): React.ReactElement | undefined {
     const attributes = getAttributesFromHedgeDocTag(node, 'asciinema')
     if (attributes && attributes.id) {
       const asciinemaId = attributes.id
       const count = (this.counterMap.get(asciinemaId) || 0) + 1
       this.counterMap.set(asciinemaId, count)
       return (
-        <AsciinemaFrame id={asciinemaId}/>
+        <AsciinemaFrame id={ asciinemaId }/>
       )
     }
   }
-
-  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
-    markdownItRegex(markdownIt, replaceAsciinemaLink)
-  }
 }
diff --git a/src/components/markdown-renderer/replace-components/asciinema/replace-asciinema-link.ts b/src/components/markdown-renderer/replace-components/asciinema/replace-asciinema-link.ts
index 8e72ca122..c109f8672 100644
--- a/src/components/markdown-renderer/replace-components/asciinema/replace-asciinema-link.ts
+++ b/src/components/markdown-renderer/replace-components/asciinema/replace-asciinema-link.ts
@@ -19,6 +19,6 @@ export const replaceAsciinemaLink: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<app-asciinema id="${match}"></app-asciinema>`
+    return `<app-asciinema id="${ match }"></app-asciinema>`
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/csv/csv-parser.test.ts b/src/components/markdown-renderer/replace-components/csv/csv-parser.test.ts
index 0014021b3..8aa40ead0 100644
--- a/src/components/markdown-renderer/replace-components/csv/csv-parser.test.ts
+++ b/src/components/markdown-renderer/replace-components/csv/csv-parser.test.ts
@@ -10,18 +10,21 @@ describe('test CSV parser', () => {
   it('normal table', () => {
     const input = 'A;B;C\nD;E;F\nG;H;I'
     const expected = [['A', 'B', 'C'], ['D', 'E', 'F'], ['G', 'H', 'I']]
-    expect(parseCsv(input, ';')).toEqual(expected)
+    expect(parseCsv(input, ';'))
+      .toEqual(expected)
   })
 
   it('blank lines', () => {
     const input = 'A;B;C\n\nG;H;I'
     const expected = [['A', 'B', 'C'], ['G', 'H', 'I']]
-    expect(parseCsv(input, ';')).toEqual(expected)
+    expect(parseCsv(input, ';'))
+      .toEqual(expected)
   })
 
   it('items with delimiter', () => {
     const input = 'A;B;C\n"D;E;F"\nG;H;I'
     const expected = [['A', 'B', 'C'], ['"D;E;F"'], ['G', 'H', 'I']]
-    expect(parseCsv(input, ';')).toEqual(expected)
+    expect(parseCsv(input, ';'))
+      .toEqual(expected)
   })
 })
diff --git a/src/components/markdown-renderer/replace-components/csv/csv-parser.ts b/src/components/markdown-renderer/replace-components/csv/csv-parser.ts
index 90698c47e..fc46301b2 100644
--- a/src/components/markdown-renderer/replace-components/csv/csv-parser.ts
+++ b/src/components/markdown-renderer/replace-components/csv/csv-parser.ts
@@ -10,5 +10,6 @@ export const parseCsv = (csvText: string, csvColumnDelimiter: string): string[][
     return []
   }
   const splitRegex = new RegExp(`${csvColumnDelimiter}(?=(?:[^"]*"[^"]*")*[^"]*$)`)
-  return rows.filter(row => row !== '').map(row => row.split(splitRegex))
+  return rows.filter(row => row !== '')
+             .map(row => row.split(splitRegex))
 }
diff --git a/src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx b/src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx
index c6a35dbe6..7705da25b 100644
--- a/src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
@@ -10,7 +10,7 @@ import { ComponentReplacer } from '../ComponentReplacer'
 import { CsvTable } from './csv-table'
 
 export class CsvReplacer extends ComponentReplacer {
-  public getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  public getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'csv' || !codeNode.children || !codeNode.children[0]) {
       return
     }
@@ -29,6 +29,6 @@ export class CsvReplacer extends ComponentReplacer {
       showHeader = extraInfos[3] !== undefined
     }
 
-    return <CsvTable code={code} delimiter={delimiter} showHeader={showHeader}/>
+    return <CsvTable code={ code } delimiter={ delimiter } showHeader={ showHeader }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/csv/csv-table.tsx b/src/components/markdown-renderer/replace-components/csv/csv-table.tsx
index 0c3f5b6c6..c04aa8ddf 100644
--- a/src/components/markdown-renderer/replace-components/csv/csv-table.tsx
+++ b/src/components/markdown-renderer/replace-components/csv/csv-table.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useMemo } from 'react'
 import { parseCsv } from './csv-parser'
@@ -29,17 +29,17 @@ export const CsvTable: React.FC<CsvTableProps> = ({ code, delimiter, showHeader,
     if (row !== []) {
       return (
         <thead>
-          <tr>
-            {
-              row.map((column, columnNumber) => (
-                <th
-                  key={`header-${columnNumber}`}
-                >
-                  {column}
-                </th>
-              ))
-            }
-          </tr>
+        <tr>
+          {
+            row.map((column, columnNumber) => (
+              <th
+                key={ `header-${ columnNumber }` }
+              >
+                { column }
+              </th>
+            ))
+          }
+        </tr>
         </thead>
       )
     }
@@ -48,30 +48,30 @@ export const CsvTable: React.FC<CsvTableProps> = ({ code, delimiter, showHeader,
   const renderTableBody = (rows: string[][]) => {
     return (
       <tbody>
-        {
-          rows.map((row, rowNumber) => (
-            <tr className={tableRowClassName} key={`row-${rowNumber}`}>
-              {
-                row.map((column, columnIndex) => (
-                  <td
-                    className={tableColumnClassName}
-                    key={`cell-${rowNumber}-${columnIndex}`}
-                  >
-                    {column.replace(/^"|"$/g, '')}
-                  </td>
-                ))
-              }
-            </tr>
-          ))
-        }
+      {
+        rows.map((row, rowNumber) => (
+          <tr className={ tableRowClassName } key={ `row-${ rowNumber }` }>
+            {
+              row.map((column, columnIndex) => (
+                <td
+                  className={ tableColumnClassName }
+                  key={ `cell-${ rowNumber }-${ columnIndex }` }
+                >
+                  { column.replace(/^"|"$/g, '') }
+                </td>
+              ))
+            }
+          </tr>
+        ))
+      }
       </tbody>
     )
   }
 
   return (
-    <table className={'csv-html-table table-striped'}>
-      {renderTableHeader(headerRow)}
-      {renderTableBody(rowsWithColumns)}
+    <table className={ 'csv-html-table table-striped' }>
+      { renderTableHeader(headerRow) }
+      { renderTableBody(rowsWithColumns) }
     </table>
   )
 }
diff --git a/src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx b/src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx
index 55b190496..8a74ee735 100644
--- a/src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
@@ -10,13 +10,13 @@ import { ComponentReplacer } from '../ComponentReplacer'
 import { FlowChart } from './flowchart/flowchart'
 
 export class FlowchartReplacer extends ComponentReplacer {
-  public getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  public getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'flow' || !codeNode.children || !codeNode.children[0]) {
       return
     }
 
     const code = codeNode.children[0].data as string
 
-    return <FlowChart code={code}/>
+    return <FlowChart code={ code }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx b/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx
index 1fcdcc63b..d85688012 100644
--- a/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx
+++ b/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useEffect, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
@@ -41,19 +41,23 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
       } catch (error) {
         setError(true)
       }
-    }).catch(() => { console.error('error while loading flowchart.js') })
+    })
+                                                                 .catch(() => {
+                                                                   console.error('error while loading flowchart.js')
+                                                                 })
 
     return () => {
-      Array.from(currentDiagramRef.children).forEach(value => value.remove())
+      Array.from(currentDiagramRef.children)
+           .forEach(value => value.remove())
     }
   }, [code, darkModeActivated])
 
   if (error) {
     return (
-      <Alert variant={'danger'}>
-        <Trans i18nKey={'renderer.flowchart.invalidSyntax'}/>
+      <Alert variant={ 'danger' }>
+        <Trans i18nKey={ 'renderer.flowchart.invalidSyntax' }/>
       </Alert>)
   } else {
-    return <div ref={diagramRef} className={'text-center'}/>
+    return <div ref={ diagramRef } className={ 'text-center' }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/gist/gist-frame.tsx b/src/components/markdown-renderer/replace-components/gist/gist-frame.tsx
index 2ec7ebe96..74fab494d 100644
--- a/src/components/markdown-renderer/replace-components/gist/gist-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/gist/gist-frame.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import './gist-frame.scss'
@@ -29,7 +29,7 @@ export const GistFrame: React.FC<GistFrameProps> = ({ id }) => {
           </style>
           <script type="text/javascript">
             function doLoad() {
-                window.parent.postMessage({eventType: 'gistResize', size: document.body.scrollHeight, id: '${id}'}, '*')
+                window.parent.postMessage({eventType: 'gistResize', size: document.body.scrollHeight, id: '${ id }'}, '*')
                 tweakLinks();
             }
             function tweakLinks() {
@@ -41,7 +41,7 @@ export const GistFrame: React.FC<GistFrameProps> = ({ id }) => {
           </script>
         </head>
         <body onload="doLoad()">
-          <script type="text/javascript" src="https://gist.github.com/${id}.js"></script>
+          <script type="text/javascript" src="https://gist.github.com/${ id }.js"></script>
         </body>
       </html>`)
   }, [id])
@@ -67,9 +67,9 @@ export const GistFrame: React.FC<GistFrameProps> = ({ id }) => {
     <iframe
       sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups"
       width='100%'
-      height={`${frameHeight}px`}
+      height={ `${ frameHeight }px` }
       frameBorder='0'
-      title={`gist ${id}`}
-      src={`data:text/html;base64,${btoa(iframeHtml)}`}/>
+      title={ `gist ${ id }` }
+      src={ `data:text/html;base64,${ btoa(iframeHtml) }` }/>
   )
 }
diff --git a/src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx b/src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx
index cf5d03b59..70b2b8f46 100644
--- a/src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import MarkdownIt from 'markdown-it'
@@ -19,22 +19,23 @@ import { replaceLegacyGistShortCode } from './replace-legacy-gist-short-code'
 export class GistReplacer extends ComponentReplacer {
   private counterMap: Map<string, number> = new Map<string, number>()
 
-  public getReplacement (node: DomElement): React.ReactElement | undefined {
+  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
+    markdownItRegex(markdownIt, replaceGistLink)
+    markdownItRegex(markdownIt, replaceLegacyGistShortCode)
+  }
+
+  public getReplacement(node: DomElement): React.ReactElement | undefined {
     const attributes = getAttributesFromHedgeDocTag(node, 'gist')
     if (attributes && attributes.id) {
       const gistId = attributes.id
       const count = (this.counterMap.get(gistId) || 0) + 1
       this.counterMap.set(gistId, count)
       return (
-        <OneClickEmbedding previewContainerClassName={'gist-frame'} loadingImageUrl={preview} hoverIcon={'github'} tooltip={'click to load gist'}>
-          <GistFrame id={gistId}/>
+        <OneClickEmbedding previewContainerClassName={ 'gist-frame' } loadingImageUrl={ preview } hoverIcon={ 'github' }
+                           tooltip={ 'click to load gist' }>
+          <GistFrame id={ gistId }/>
         </OneClickEmbedding>
       )
     }
   }
-
-  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
-    markdownItRegex(markdownIt, replaceGistLink)
-    markdownItRegex(markdownIt, replaceLegacyGistShortCode)
-  }
 }
diff --git a/src/components/markdown-renderer/replace-components/gist/replace-gist-link.ts b/src/components/markdown-renderer/replace-components/gist/replace-gist-link.ts
index ae2e78c0a..94d598974 100644
--- a/src/components/markdown-renderer/replace-components/gist/replace-gist-link.ts
+++ b/src/components/markdown-renderer/replace-components/gist/replace-gist-link.ts
@@ -19,6 +19,6 @@ export const replaceGistLink: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<app-gist id="${match}"></app-gist>`
+    return `<app-gist id="${ match }"></app-gist>`
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/gist/replace-legacy-gist-short-code.ts b/src/components/markdown-renderer/replace-components/gist/replace-legacy-gist-short-code.ts
index 6d3762b79..a1af2ec93 100644
--- a/src/components/markdown-renderer/replace-components/gist/replace-legacy-gist-short-code.ts
+++ b/src/components/markdown-renderer/replace-components/gist/replace-legacy-gist-short-code.ts
@@ -14,6 +14,6 @@ export const replaceLegacyGistShortCode: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<app-gist id="${match}"></app-gist>`
+    return `<app-gist id="${ match }"></app-gist>`
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx b/src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx
index dd3c57965..5ee7e2203 100644
--- a/src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
@@ -22,7 +22,8 @@ export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
     }
     setError(error)
     console.error(error)
-    container.current.querySelectorAll('svg').forEach(child => child.remove())
+    container.current.querySelectorAll('svg')
+             .forEach(child => child.remove())
   }, [])
 
   useEffect(() => {
@@ -43,19 +44,22 @@ export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
             useWorker: false,
             zoom: false
           })
-            .onerror(showError)
-            .renderDot(code)
+                        .onerror(showError)
+                        .renderDot(code)
         } catch (error) {
           showError(error)
         }
-      }).catch(() => { console.error('error while loading graphviz') })
+      })
+      .catch(() => {
+        console.error('error while loading graphviz')
+      })
   }, [code, error, showError])
 
   return <Fragment>
-    <ShowIf condition={!!error}>
-      <Alert variant={'warning'}>{error}</Alert>
+    <ShowIf condition={ !!error }>
+      <Alert variant={ 'warning' }>{ error }</Alert>
     </ShowIf>
-    <div className={'text-center overflow-x-auto'} ref={container} />
+    <div className={ 'text-center overflow-x-auto' } ref={ container }/>
   </Fragment>
 }
 
diff --git a/src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx b/src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx
index fef4d54ee..6af3a7bfd 100644
--- a/src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
@@ -10,13 +10,13 @@ import { ComponentReplacer } from '../ComponentReplacer'
 import { GraphvizFrame } from './graphviz-frame'
 
 export class GraphvizReplacer implements ComponentReplacer {
-  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'graphviz' || !codeNode.children || !codeNode.children[0]) {
       return
     }
 
     const code = codeNode.children[0].data as string
 
-    return <GraphvizFrame code={code}/>
+    return <GraphvizFrame code={ code }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss
index 8c9077877..0f53c417d 100644
--- a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss
+++ b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss
@@ -17,6 +17,7 @@
 
   code.hljs {
     background-color: rgba(27, 31, 35, .05);
+
     body.dark & {
       background-color: rgb(27, 31, 35);
     }
diff --git a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx
index c2081dbc5..a331d1362 100644
--- a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx
+++ b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx
@@ -28,38 +28,44 @@ export const escapeHtml = (unsafe: string): string => {
 
 const replaceCode = (code: string): ReactElement[][] => {
   return code.split('\n')
-    .filter(line => !!line)
-    .map(line => ReactHtmlParser(line))
+             .filter(line => !!line)
+             .map(line => ReactHtmlParser(line))
 }
 
 export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language, startLineNumber, wrapLines }) => {
   const [dom, setDom] = useState<ReactElement[]>()
 
   useEffect(() => {
-    import(/* webpackChunkName: "highlight.js" */ '../../../../common/hljs/hljs').then(( hljs)  => {
-      const languageSupported = (lang: string) => hljs.default.listLanguages().includes(lang)
+    import(/* webpackChunkName: "highlight.js" */ '../../../../common/hljs/hljs').then((hljs) => {
+      const languageSupported = (lang: string) => hljs.default.listLanguages()
+                                                      .includes(lang)
       const unreplacedCode = !!language && languageSupported(language) ? hljs.default.highlight(language, code).value : escapeHtml(code)
-      const replacedDom = replaceCode(unreplacedCode).map((line, index) => (
-        <Fragment key={index}>
-          <span className={'linenumber'}>
+      const replacedDom = replaceCode(unreplacedCode)
+        .map((line, index) => (
+          <Fragment key={ index }>
+          <span className={ 'linenumber' }>
             { (startLineNumber || 1) + index }
           </span>
-          <div className={'codeline'}>
-            {line}
-          </div>
-        </Fragment>
-      ))
+            <div className={ 'codeline' }>
+              { line }
+            </div>
+          </Fragment>
+        ))
       setDom(replacedDom)
-    }).catch(() => { console.error('error while loading highlight.js') })
+    })
+                                                                                 .catch(() => {
+                                                                                   console.error('error while loading highlight.js')
+                                                                                 })
   }, [code, language, startLineNumber])
 
   return (
     <Fragment>
-      <code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
+      <code
+        className={ `hljs ${ startLineNumber !== undefined ? 'showGutter' : '' } ${ wrapLines ? 'wrapLines' : '' }` }>
         { dom }
       </code>
-      <div className={'text-right button-inside'}>
-        <CopyToClipboardButton content={code} data-cy="copy-code-button"/>
+      <div className={ 'text-right button-inside' }>
+        <CopyToClipboardButton content={ code } data-cy="copy-code-button"/>
       </div>
     </Fragment>)
 }
diff --git a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
index 2e43ad444..bb5356031 100644
--- a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
@@ -10,9 +10,9 @@ import { ComponentReplacer } from '../ComponentReplacer'
 import { HighlightedCode } from './highlighted-code/highlighted-code'
 
 export class HighlightedCodeReplacer extends ComponentReplacer {
-  private lastLineNumber = 0;
+  private lastLineNumber = 0
 
-  public getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  public getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || !codeNode.children || !codeNode.children[0]) {
       return
     }
@@ -36,9 +36,10 @@ export class HighlightedCodeReplacer extends ComponentReplacer {
 
     if (showLineNumbers) {
       this.lastLineNumber = startLineNumber + code.split('\n')
-        .filter(line => !!line).length
+                                                  .filter(line => !!line).length
     }
 
-    return <HighlightedCode language={language} startLineNumber={showLineNumbers ? startLineNumber : undefined} wrapLines={wrapLines} code={code}/>
+    return <HighlightedCode language={ language } startLineNumber={ showLineNumbers ? startLineNumber : undefined }
+                            wrapLines={ wrapLines } code={ code }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/image/image-lightbox-modal.tsx b/src/components/markdown-renderer/replace-components/image/image-lightbox-modal.tsx
index e2d65ff29..06f57d086 100644
--- a/src/components/markdown-renderer/replace-components/image/image-lightbox-modal.tsx
+++ b/src/components/markdown-renderer/replace-components/image/image-lightbox-modal.tsx
@@ -7,7 +7,7 @@
 import React from 'react'
 import { Modal } from 'react-bootstrap'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
-import "./lightbox.scss"
+import './lightbox.scss'
 import { ProxyImageFrame } from './proxy-image-frame'
 
 export interface ImageLightboxModalProps {
@@ -21,20 +21,21 @@ export interface ImageLightboxModalProps {
 export const ImageLightboxModal: React.FC<ImageLightboxModalProps> = ({ show, onHide, src, alt, title }) => {
   return (
     <Modal
-      animation={true}
-      centered={true}
-      dialogClassName={'text-dark lightbox'}
-      show={show && !!src}
-      onHide={onHide}
-      size={'xl'}>
-      <Modal.Header closeButton={true}>
-        <Modal.Title className={'h6'}>
-          <ForkAwesomeIcon icon={'picture-o'}/>
+      animation={ true }
+      centered={ true }
+      dialogClassName={ 'text-dark lightbox' }
+      show={ show && !!src }
+      onHide={ onHide }
+      size={ 'xl' }>
+      <Modal.Header closeButton={ true }>
+        <Modal.Title className={ 'h6' }>
+          <ForkAwesomeIcon icon={ 'picture-o' }/>
           &nbsp;
-          <span>{alt ?? title ?? ''}</span>
+          <span>{ alt ?? title ?? '' }</span>
         </Modal.Title>
       </Modal.Header>
-      <ProxyImageFrame alt={alt} src={src} title={title} className={'w-100 cursor-zoom-out'} onClick={onHide}/>
+      <ProxyImageFrame alt={ alt } src={ src } title={ title } className={ 'w-100 cursor-zoom-out' }
+                       onClick={ onHide }/>
     </Modal>
   )
 }
diff --git a/src/components/markdown-renderer/replace-components/image/image-replacer.tsx b/src/components/markdown-renderer/replace-components/image/image-replacer.tsx
index bf12a6644..b6efd8be3 100644
--- a/src/components/markdown-renderer/replace-components/image/image-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/image/image-replacer.tsx
@@ -14,22 +14,22 @@ export type ImageClickHandler = (event: React.MouseEvent<HTMLImageElement, Mouse
 export class ImageReplacer extends ComponentReplacer {
   private readonly clickHandler?: ImageClickHandler
 
-  constructor (clickHandler?: ImageClickHandler) {
+  constructor(clickHandler?: ImageClickHandler) {
     super()
     this.clickHandler = clickHandler
   }
 
-  public getReplacement (node: DomElement): React.ReactElement | undefined {
+  public getReplacement(node: DomElement): React.ReactElement | undefined {
     if (node.name === 'img' && node.attribs) {
       return <ProxyImageFrame
-        id={node.attribs.id}
-        className={`${node.attribs.class} cursor-zoom-in`}
-        src={node.attribs.src}
-        alt={node.attribs.alt}
-        title={node.attribs.title}
-        width={node.attribs.width}
-        height={node.attribs.height}
-        onClick={this.clickHandler}
+        id={ node.attribs.id }
+        className={ `${ node.attribs.class } cursor-zoom-in` }
+        src={ node.attribs.src }
+        alt={ node.attribs.alt }
+        title={ node.attribs.title }
+        width={ node.attribs.width }
+        height={ node.attribs.height }
+        onClick={ this.clickHandler }
       />
     }
   }
diff --git a/src/components/markdown-renderer/replace-components/image/proxy-image-frame.tsx b/src/components/markdown-renderer/replace-components/image/proxy-image-frame.tsx
index 924f1e307..cf6da6660 100644
--- a/src/components/markdown-renderer/replace-components/image/proxy-image-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/image/proxy-image-frame.tsx
@@ -28,6 +28,6 @@ export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>
       .catch(err => console.error(err))
   }, [imageProxyEnabled, src])
 
-  return <img src={imageProxyEnabled ? imageUrl : (src ?? '')} title={title ?? alt ?? ''} alt={alt} {...props}/>
+  return <img src={ imageProxyEnabled ? imageUrl : (src ?? '') } title={ title ?? alt ?? '' } alt={ alt } { ...props }/>
 }
 
diff --git a/src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx b/src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx
index d93af5493..ed7651586 100644
--- a/src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import MarkdownIt from 'markdown-it'
@@ -27,15 +27,6 @@ const getNodeIfInlineKatex = (node: DomElement): (DomElement | undefined) => {
 const KaTeX = React.lazy(() => import(/* webpackChunkName: "katex" */ '@matejmazur/react-katex'))
 
 export class KatexReplacer extends ComponentReplacer {
-  public getReplacement (node: DomElement): React.ReactElement | undefined {
-    const katex = getNodeIfKatexBlock(node) || getNodeIfInlineKatex(node)
-    if (katex?.children && katex.children[0]) {
-      const mathJaxContent = katex.children[0]?.data as string
-      const isInline = (katex.attribs?.inline) !== undefined
-      return <KaTeX block={!isInline} math={mathJaxContent} errorColor={'#cc0000'}/>
-    }
-  }
-
   public static readonly markdownItPlugin: MarkdownIt.PluginSimple = mathJax({
     beforeMath: '<app-katex>',
     afterMath: '</app-katex>',
@@ -44,4 +35,13 @@ export class KatexReplacer extends ComponentReplacer {
     beforeDisplayMath: '<app-katex>',
     afterDisplayMath: '</app-katex>'
   })
+
+  public getReplacement(node: DomElement): React.ReactElement | undefined {
+    const katex = getNodeIfKatexBlock(node) || getNodeIfInlineKatex(node)
+    if (katex?.children && katex.children[0]) {
+      const mathJaxContent = katex.children[0]?.data as string
+      const isInline = (katex.attribs?.inline) !== undefined
+      return <KaTeX block={ !isInline } math={ mathJaxContent } errorColor={ '#cc0000' }/>
+    }
+  }
 }
diff --git a/src/components/markdown-renderer/replace-components/linemarker/line-number-marker.ts b/src/components/markdown-renderer/replace-components/linemarker/line-number-marker.ts
index 416da6576..99415e2f7 100644
--- a/src/components/markdown-renderer/replace-components/linemarker/line-number-marker.ts
+++ b/src/components/markdown-renderer/replace-components/linemarker/line-number-marker.ts
@@ -38,14 +38,14 @@ export const lineNumberMarker: MarkdownIt.PluginWithOptions<LineNumberMarkerOpti
       return ''
     }
     // noinspection CheckTagEmptyBody
-    return `<app-linemarker data-start-line='${startLineNumber}' data-end-line='${endLineNumber}'></app-linemarker>`
+    return `<app-linemarker data-start-line='${ startLineNumber }' data-end-line='${ endLineNumber }'></app-linemarker>`
   }
 
   const insertNewLineMarker = (startLineNumber: number, endLineNumber: number, tokenPosition: number, level: number, tokens: Token[]) => {
     const startToken = new Token('app_linemarker', 'app-linemarker', 0)
     startToken.level = level
-    startToken.attrPush(['data-start-line', `${startLineNumber}`])
-    startToken.attrPush(['data-end-line', `${endLineNumber}`])
+    startToken.attrPush(['data-start-line', `${ startLineNumber }`])
+    startToken.attrPush(['data-end-line', `${ endLineNumber }`])
     tokens.splice(tokenPosition, 0, startToken)
   }
 
diff --git a/src/components/markdown-renderer/replace-components/linemarker/linemarker-replacer.tsx b/src/components/markdown-renderer/replace-components/linemarker/linemarker-replacer.tsx
index a07ce9b47..594ce952b 100644
--- a/src/components/markdown-renderer/replace-components/linemarker/linemarker-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/linemarker/linemarker-replacer.tsx
@@ -1,14 +1,14 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import { ComponentReplacer } from '../ComponentReplacer'
 
 export class LinemarkerReplacer extends ComponentReplacer {
-  public getReplacement (codeNode: DomElement): null | undefined {
+  public getReplacement(codeNode: DomElement): null | undefined {
     return codeNode.name === 'app-linemarker' ? null : undefined
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/link-replacer/link-replacer.tsx b/src/components/markdown-renderer/replace-components/link-replacer/link-replacer.tsx
index 108e4d50e..c3b5e4b80 100644
--- a/src/components/markdown-renderer/replace-components/link-replacer/link-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/link-replacer/link-replacer.tsx
@@ -9,17 +9,18 @@ import { ComponentReplacer, NativeRenderer, SubNodeTransform } from '../Componen
 
 export const createJumpToMarkClickEventHandler = (id: string) => {
   return (event: React.MouseEvent<HTMLElement, MouseEvent>): void => {
-    document.getElementById(id)?.scrollIntoView()
+    document.getElementById(id)
+            ?.scrollIntoView()
     event.preventDefault()
   }
 }
 
 export class LinkReplacer extends ComponentReplacer {
-  constructor (private baseUrl?: string) {
+  constructor(private baseUrl?: string) {
     super()
   }
 
-  public getReplacement (node: DomElement, subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): (ReactElement | null | undefined) {
+  public getReplacement(node: DomElement, subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): (ReactElement | null | undefined) {
     if (node.name !== 'a' || !node.attribs || !node.attribs.href) {
       return undefined
     }
@@ -36,12 +37,12 @@ export class LinkReplacer extends ComponentReplacer {
     }
 
     if (isJumpMark) {
-      return <span onClick={createJumpToMarkClickEventHandler(id)}>
-        {nativeRenderer()}
+      return <span onClick={ createJumpToMarkClickEventHandler(id) }>
+        { nativeRenderer() }
       </span>
     } else {
-      node.attribs.rel = "noreferer noopener"
-      node.attribs.target = "_blank"
+      node.attribs.rel = 'noreferer noopener'
+      node.attribs.target = '_blank'
       return nativeRenderer()
     }
   }
diff --git a/src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx b/src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx
index 53713e4b8..d22c18738 100644
--- a/src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -49,23 +49,25 @@ export const MarkmapFrame: React.FC<MarkmapFrameProps> = ({ code }) => {
       try {
         const svg: SVGSVGElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
         svg.setAttribute('width', '100%')
-        actualContainer.querySelectorAll('svg').forEach(child => child.remove())
+        actualContainer.querySelectorAll('svg')
+                       .forEach(child => child.remove())
         actualContainer.appendChild(svg)
         markmapLoader(svg, code)
-      } catch(error) {
+      } catch (error) {
         console.error(error)
       }
-    }).catch(() => {
-      console.error('error while loading markmap')
     })
+                              .catch(() => {
+                                console.error('error while loading markmap')
+                              })
   }, [code])
 
   return (
     <Fragment>
-      <div className={'text-center'} ref={diagramContainer}/>
-      <div className={'text-right button-inside'}>
-        <LockButton locked={disablePanAndZoom} onLockedChanged={(newState => setDisablePanAndZoom(newState))}
-                    title={disablePanAndZoom ? t('renderer.markmap.locked') : t('renderer.markmap.unlocked')}/>
+      <div className={ 'text-center' } ref={ diagramContainer }/>
+      <div className={ 'text-right button-inside' }>
+        <LockButton locked={ disablePanAndZoom } onLockedChanged={ (newState => setDisablePanAndZoom(newState)) }
+                    title={ disablePanAndZoom ? t('renderer.markmap.locked') : t('renderer.markmap.unlocked') }/>
       </div>
     </Fragment>
   )
diff --git a/src/components/markdown-renderer/replace-components/markmap/markmap-loader.ts b/src/components/markdown-renderer/replace-components/markmap/markmap-loader.ts
index 6c69a08aa..282e9ae98 100644
--- a/src/components/markdown-renderer/replace-components/markmap/markmap-loader.ts
+++ b/src/components/markdown-renderer/replace-components/markmap/markmap-loader.ts
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { loadCSS, loadJS } from 'markmap-common'
 import { Transformer } from 'markmap-lib'
@@ -18,7 +18,8 @@ export const markmapLoader = (svg: SVGSVGElement, code: string): void => {
     loadCSS(styles)
   }
   if (scripts) {
-    loadJS(scripts).catch(console.log)
+    loadJS(scripts)
+      .catch(console.log)
   }
 
   Markmap.create(svg, {}, root)
diff --git a/src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx b/src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx
index 7f17d6ad7..3059a6305 100644
--- a/src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
@@ -10,13 +10,13 @@ import { ComponentReplacer } from '../ComponentReplacer'
 import { MarkmapFrame } from './markmap-frame'
 
 export class MarkmapReplacer implements ComponentReplacer {
-  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'markmap' || !codeNode.children || !codeNode.children[0]) {
       return
     }
 
     const code = codeNode.children[0].data as string
 
-    return <MarkmapFrame code={code}/>
+    return <MarkmapFrame code={ code }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/mermaid/mermaid-chart.tsx b/src/components/markdown-renderer/replace-components/mermaid/mermaid-chart.tsx
index b8d3aff97..4c53cf7ce 100644
--- a/src/components/markdown-renderer/replace-components/mermaid/mermaid-chart.tsx
+++ b/src/components/markdown-renderer/replace-components/mermaid/mermaid-chart.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
@@ -30,7 +30,10 @@ export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
       import('mermaid').then((mermaid) => {
         mermaid.default.initialize({ startOnLoad: false })
         mermaidInitialized = true
-      }).catch(() => { console.error('error while loading mermaid') })
+      })
+                       .catch(() => {
+                         console.error('error while loading mermaid')
+                       })
     }
   }, [])
 
@@ -40,7 +43,8 @@ export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
     if (!diagramContainer.current) {
       return
     }
-    diagramContainer.current.querySelectorAll('svg').forEach(child => child.remove())
+    diagramContainer.current.querySelectorAll('svg')
+                    .forEach(child => child.remove())
   }, [setError])
 
   useEffect(() => {
@@ -49,25 +53,26 @@ export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
     }
     import('mermaid').then((mermaid) => {
       try {
-          if (!diagramContainer.current) {
-            return
-          }
-          mermaid.default.parse(code)
-          delete diagramContainer.current.dataset.processed
-          diagramContainer.current.textContent = code
-          mermaid.default.init(diagramContainer.current)
-          setError(undefined)
+        if (!diagramContainer.current) {
+          return
+        }
+        mermaid.default.parse(code)
+        delete diagramContainer.current.dataset.processed
+        diagramContainer.current.textContent = code
+        mermaid.default.init(diagramContainer.current)
+        setError(undefined)
       } catch (error) {
         const message = (error as MermaidParseError).str
         showError(message || t('renderer.mermaid.unknownError'))
       }
-    }).catch(() => showError('Error while loading mermaid'))
+    })
+                     .catch(() => showError('Error while loading mermaid'))
   }, [code, showError, t])
 
   return <Fragment>
-    <ShowIf condition={!!error}>
-      <Alert variant={'warning'}>{error}</Alert>
+    <ShowIf condition={ !!error }>
+      <Alert variant={ 'warning' }>{ error }</Alert>
     </ShowIf>
-    <div className={'text-center mermaid text-black'} ref={diagramContainer}/>
+    <div className={ 'text-center mermaid text-black' } ref={ diagramContainer }/>
   </Fragment>
 }
diff --git a/src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx b/src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx
index 42a1071b9..1ef6dcee6 100644
--- a/src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
@@ -10,13 +10,13 @@ import { ComponentReplacer } from '../ComponentReplacer'
 import { MermaidChart } from './mermaid-chart'
 
 export class MermaidReplacer implements ComponentReplacer {
-  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'mermaid' || !codeNode.children || !codeNode.children[0]) {
       return
     }
 
     const code = codeNode.children[0].data as string
 
-    return <MermaidChart code={code}/>
+    return <MermaidChart code={ code }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/mermaid/mermaid.scss b/src/components/markdown-renderer/replace-components/mermaid/mermaid.scss
index e3138f1c5..5fa41b32e 100644
--- a/src/components/markdown-renderer/replace-components/mermaid/mermaid.scss
+++ b/src/components/markdown-renderer/replace-components/mermaid/mermaid.scss
@@ -4,6 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-.mermaid>svg {
+.mermaid > svg {
   background-color: #f8f9fa;
 }
diff --git a/src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx b/src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
index eb5dd5332..05aa3a25f 100644
--- a/src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
+++ b/src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
@@ -36,29 +36,32 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContain
     if (!onImageFetch) {
       return
     }
-    onImageFetch().then((imageLink) => {
-      setPreviewImageUrl(imageLink)
-    }).catch((message) => {
-      console.error(message)
-    })
+    onImageFetch()
+      .then((imageLink) => {
+        setPreviewImageUrl(imageLink)
+      })
+      .catch((message) => {
+        console.error(message)
+      })
   }, [onImageFetch])
 
   return (
     <span className={ containerClassName }>
-      <ShowIf condition={showFrame}>
-        {children}
+      <ShowIf condition={ showFrame }>
+        { children }
       </ShowIf>
-      <ShowIf condition={!showFrame}>
-        <span className={`one-click-embedding ${previewContainerClassName || ''}`} onClick={showChildren}>
-          <ShowIf condition={!!previewImageUrl}>
-            <img className={'one-click-embedding-preview'} src={previewImageUrl} alt={tooltip || ''} title={tooltip || ''}/>
+      <ShowIf condition={ !showFrame }>
+        <span className={ `one-click-embedding ${ previewContainerClassName || '' }` } onClick={ showChildren }>
+          <ShowIf condition={ !!previewImageUrl }>
+            <img className={ 'one-click-embedding-preview' } src={ previewImageUrl } alt={ tooltip || '' }
+                 title={ tooltip || '' }/>
           </ShowIf>
-          <ShowIf condition={!!hoverIcon}>
+          <ShowIf condition={ !!hoverIcon }>
             <span className='one-click-embedding-icon text-center'>
-              <i className={`fa fa-${hoverIcon as string} fa-5x mb-2`} />
-              <ShowIf condition={!!hoverTextI18nKey}>
-                <br />
-                <Trans i18nKey={hoverTextI18nKey} />
+              <i className={ `fa fa-${ hoverIcon as string } fa-5x mb-2` }/>
+              <ShowIf condition={ !!hoverTextI18nKey }>
+                <br/>
+                <Trans i18nKey={ hoverTextI18nKey }/>
               </ShowIf>
             </span>
           </ShowIf>
diff --git a/src/components/markdown-renderer/replace-components/quote-options/quote-options-replacer.tsx b/src/components/markdown-renderer/replace-components/quote-options/quote-options-replacer.tsx
index 63c5a9ea8..c9cfe4cab 100644
--- a/src/components/markdown-renderer/replace-components/quote-options/quote-options-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/quote-options/quote-options-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import { ReactElement } from 'react'
@@ -25,7 +25,7 @@ const findQuoteOptionsParent = (nodes: DomElement[]): DomElement | undefined =>
 }
 
 export class QuoteOptionsReplacer extends ComponentReplacer {
-  public getReplacement (node: DomElement):ReactElement|undefined {
+  public getReplacement(node: DomElement): ReactElement | undefined {
     if (node.name !== 'blockquote' || !node.children || node.children.length < 1) {
       return
     }
@@ -43,6 +43,6 @@ export class QuoteOptionsReplacer extends ComponentReplacer {
     if (!attributes || !attributes['data-color']) {
       return
     }
-    node.attribs = Object.assign(node.attribs || {}, { style: `border-left-color: ${attributes['data-color']};` })
+    node.attribs = Object.assign(node.attribs || {}, { style: `border-left-color: ${ attributes['data-color'] };` })
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx b/src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx
index 2384089ed..2d2f4025b 100644
--- a/src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx
+++ b/src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx
@@ -14,12 +14,12 @@ export const DeprecationWarning: React.FC = () => {
   useTranslation()
 
   return (
-    <Alert data-cy={'yaml'} className={'mt-2'} variant={'warning'}>
-      <span className={'text-wrap'}>
-        <Trans i18nKey={'renderer.sequence.deprecationWarning'}/>
+    <Alert data-cy={ 'yaml' } className={ 'mt-2' } variant={ 'warning' }>
+      <span className={ 'text-wrap' }>
+        <Trans i18nKey={ 'renderer.sequence.deprecationWarning' }/>
       </span>
       <br/>
-      <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} className={'text-primary'} href={links.faq}/>
+      <TranslatedExternalLink i18nKey={ 'common.readForMoreInfo' } className={ 'text-primary' } href={ links.faq }/>
     </Alert>
   )
 }
diff --git a/src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx b/src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx
index d2c0c1373..19dff5cc0 100644
--- a/src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React, { Fragment } from 'react'
@@ -11,7 +11,7 @@ import { MermaidChart } from '../mermaid/mermaid-chart'
 import { DeprecationWarning } from './deprecation-warning'
 
 export class SequenceDiagramReplacer implements ComponentReplacer {
-  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'sequence' || !codeNode.children || !codeNode.children[0]) {
       return
     }
@@ -20,7 +20,7 @@ export class SequenceDiagramReplacer implements ComponentReplacer {
 
     return <Fragment>
       <DeprecationWarning/>
-      <MermaidChart code={'sequenceDiagram\n' + code}/>
+      <MermaidChart code={ 'sequenceDiagram\n' + code }/>
     </Fragment>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx b/src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx
index c0e4c0f11..c6175f052 100644
--- a/src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React, { ReactElement } from 'react'
@@ -11,7 +11,7 @@ import { ComponentReplacer } from '../ComponentReplacer'
 export class TaskListReplacer extends ComponentReplacer {
   onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
 
-  constructor (onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void) {
+  constructor(onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void) {
     super()
     this.onTaskCheckedChange = onTaskCheckedChange
   }
@@ -23,19 +23,19 @@ export class TaskListReplacer extends ComponentReplacer {
     }
   }
 
-  public getReplacement (node: DomElement): (ReactElement | undefined) {
+  public getReplacement(node: DomElement): (ReactElement | undefined) {
     if (node.attribs?.class !== 'task-list-item-checkbox') {
       return
     }
     return (
       <input
-        disabled={this.onTaskCheckedChange === undefined}
+        disabled={ this.onTaskCheckedChange === undefined }
         className="task-list-item-checkbox"
         type="checkbox"
-        checked={node.attribs.checked !== undefined}
-        onChange={this.handleCheckboxChange}
-        id={node.attribs.id}
-        data-line={node.attribs['data-line']}
+        checked={ node.attribs.checked !== undefined }
+        onChange={ this.handleCheckboxChange }
+        id={ node.attribs.id }
+        data-line={ node.attribs['data-line'] }
       />
     )
   }
diff --git a/src/components/markdown-renderer/replace-components/utils.ts b/src/components/markdown-renderer/replace-components/utils.ts
index e324d5b62..276b9d5ca 100644
--- a/src/components/markdown-renderer/replace-components/utils.ts
+++ b/src/components/markdown-renderer/replace-components/utils.ts
@@ -6,8 +6,8 @@
 
 import { DomElement } from 'domhandler'
 
-export const getAttributesFromHedgeDocTag = (node: DomElement, tagName: string): ({ [s: string]: string; }|undefined) => {
-  if (node.name !== `app-${tagName}` || !node.attribs) {
+export const getAttributesFromHedgeDocTag = (node: DomElement, tagName: string): ({ [s: string]: string; } | undefined) => {
+  if (node.name !== `app-${ tagName }` || !node.attribs) {
     return
   }
   return node.attribs
diff --git a/src/components/markdown-renderer/replace-components/vega-lite/vega-chart.tsx b/src/components/markdown-renderer/replace-components/vega-lite/vega-chart.tsx
index b06c8ffb1..1192513e5 100644
--- a/src/components/markdown-renderer/replace-components/vega-lite/vega-chart.tsx
+++ b/src/components/markdown-renderer/replace-components/vega-lite/vega-chart.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
@@ -50,20 +50,23 @@ export const VegaChart: React.FC<VegaChartProps> = ({ code }) => {
             SVG_ACTION: t('renderer.vega-lite.svg')
           }
         })
-          .then(() => setError(undefined))
-          .catch(err => showError(err))
+             .then(() => setError(undefined))
+             .catch(err => showError(err))
       } catch (err) {
         showError(t('renderer.vega-lite.errorJson'))
       }
-    }).catch(() => { console.error('error while loading vega-light') })
+    })
+                                                       .catch(() => {
+                                                         console.error('error while loading vega-light')
+                                                       })
   }, [code, showError, t])
 
   return <Fragment>
-    <ShowIf condition={!!error}>
-      <Alert variant={'danger'}>{error}</Alert>
+    <ShowIf condition={ !!error }>
+      <Alert variant={ 'danger' }>{ error }</Alert>
     </ShowIf>
-    <div className={'text-center'}>
-      <div ref={diagramContainer}/>
+    <div className={ 'text-center' }>
+      <div ref={ diagramContainer }/>
     </div>
   </Fragment>
 }
diff --git a/src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx b/src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx
index 83a1958a1..56a47ca42 100644
--- a/src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
@@ -10,13 +10,13 @@ import { ComponentReplacer } from '../ComponentReplacer'
 import { VegaChart } from './vega-chart'
 
 export class VegaReplacer implements ComponentReplacer {
-  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+  getReplacement(codeNode: DomElement): React.ReactElement | undefined {
     if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'vega-lite' || !codeNode.children || !codeNode.children[0]) {
       return
     }
 
     const code = codeNode.children[0].data as string
 
-    return <VegaChart code={code}/>
+    return <VegaChart code={ code }/>
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/vimeo/replace-legacy-vimeo-short-code.ts b/src/components/markdown-renderer/replace-components/vimeo/replace-legacy-vimeo-short-code.ts
index bb049f70a..482262275 100644
--- a/src/components/markdown-renderer/replace-components/vimeo/replace-legacy-vimeo-short-code.ts
+++ b/src/components/markdown-renderer/replace-components/vimeo/replace-legacy-vimeo-short-code.ts
@@ -12,6 +12,6 @@ export const replaceLegacyVimeoShortCode: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<app-vimeo id="${match}"></app-vimeo>`
+    return `<app-vimeo id="${ match }"></app-vimeo>`
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/vimeo/replace-vimeo-link.ts b/src/components/markdown-renderer/replace-components/vimeo/replace-vimeo-link.ts
index 43ea22d05..5cfaff959 100644
--- a/src/components/markdown-renderer/replace-components/vimeo/replace-vimeo-link.ts
+++ b/src/components/markdown-renderer/replace-components/vimeo/replace-vimeo-link.ts
@@ -19,6 +19,6 @@ export const replaceVimeoLink: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<app-vimeo id="${match}"></app-vimeo>`
+    return `<app-vimeo id="${ match }"></app-vimeo>`
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/vimeo/vimeo-frame.tsx b/src/components/markdown-renderer/replace-components/vimeo/vimeo-frame.tsx
index 3645fcf0f..f862f1694 100644
--- a/src/components/markdown-renderer/replace-components/vimeo/vimeo-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/vimeo/vimeo-frame.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useCallback } from 'react'
 import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
@@ -19,7 +19,7 @@ export interface VimeoFrameProps {
 
 export const VimeoFrame: React.FC<VimeoFrameProps> = ({ id }) => {
   const getPreviewImageLink = useCallback(async () => {
-    const response = await fetch(`https://vimeo.com/api/v2/video/${id}.json`, {
+    const response = await fetch(`https://vimeo.com/api/v2/video/${ id }.json`, {
       credentials: 'omit',
       referrerPolicy: 'no-referrer'
     })
@@ -36,11 +36,13 @@ export const VimeoFrame: React.FC<VimeoFrameProps> = ({ id }) => {
   }, [id])
 
   return (
-    <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-16by9'} previewContainerClassName={'embed-responsive-item'} loadingImageUrl={'https://i.vimeocdn.com/video/'} hoverIcon={'vimeo-square'}
-      onImageFetch={getPreviewImageLink}>
-      <iframe className='embed-responsive-item' title={`vimeo video of ${id}`}
-        src={`https://player.vimeo.com/video/${id}?autoplay=1`}
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"/>
+    <OneClickEmbedding containerClassName={ 'embed-responsive embed-responsive-16by9' }
+                       previewContainerClassName={ 'embed-responsive-item' }
+                       loadingImageUrl={ 'https://i.vimeocdn.com/video/' } hoverIcon={ 'vimeo-square' }
+                       onImageFetch={ getPreviewImageLink }>
+      <iframe className='embed-responsive-item' title={ `vimeo video of ${ id }` }
+              src={ `https://player.vimeo.com/video/${ id }?autoplay=1` }
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"/>
     </OneClickEmbedding>
   )
 }
diff --git a/src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx b/src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx
index 88d8b08d0..1d923ae26 100644
--- a/src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import MarkdownIt from 'markdown-it'
@@ -17,18 +17,18 @@ import { VimeoFrame } from './vimeo-frame'
 export class VimeoReplacer extends ComponentReplacer {
   private counterMap: Map<string, number> = new Map<string, number>()
 
-  public getReplacement (node: DomElement): React.ReactElement | undefined {
+  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
+    markdownItRegex(markdownIt, replaceVimeoLink)
+    markdownItRegex(markdownIt, replaceLegacyVimeoShortCode)
+  }
+
+  public getReplacement(node: DomElement): React.ReactElement | undefined {
     const attributes = getAttributesFromHedgeDocTag(node, 'vimeo')
     if (attributes && attributes.id) {
       const videoId = attributes.id
       const count = (this.counterMap.get(videoId) || 0) + 1
       this.counterMap.set(videoId, count)
-      return <VimeoFrame id={videoId}/>
+      return <VimeoFrame id={ videoId }/>
     }
   }
-
-  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
-    markdownItRegex(markdownIt, replaceVimeoLink)
-    markdownItRegex(markdownIt, replaceLegacyVimeoShortCode)
-  }
 }
diff --git a/src/components/markdown-renderer/replace-components/youtube/replace-legacy-youtube-short-code.ts b/src/components/markdown-renderer/replace-components/youtube/replace-legacy-youtube-short-code.ts
index c59986298..442f3690e 100644
--- a/src/components/markdown-renderer/replace-components/youtube/replace-legacy-youtube-short-code.ts
+++ b/src/components/markdown-renderer/replace-components/youtube/replace-legacy-youtube-short-code.ts
@@ -12,6 +12,6 @@ export const replaceLegacyYoutubeShortCode: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<app-youtube id="${match}"></app-youtube>`
+    return `<app-youtube id="${ match }"></app-youtube>`
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/youtube/replace-youtube-link.ts b/src/components/markdown-renderer/replace-components/youtube/replace-youtube-link.ts
index 86b16e264..fdba7f2e7 100644
--- a/src/components/markdown-renderer/replace-components/youtube/replace-youtube-link.ts
+++ b/src/components/markdown-renderer/replace-components/youtube/replace-youtube-link.ts
@@ -20,6 +20,6 @@ export const replaceYouTubeLink: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<app-youtube id="${match}"></app-youtube>`
+    return `<app-youtube id="${ match }"></app-youtube>`
   }
 }
diff --git a/src/components/markdown-renderer/replace-components/youtube/youtube-frame.tsx b/src/components/markdown-renderer/replace-components/youtube/youtube-frame.tsx
index 7a8377540..a566ba666 100644
--- a/src/components/markdown-renderer/replace-components/youtube/youtube-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/youtube/youtube-frame.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
@@ -13,12 +13,12 @@ export interface YouTubeFrameProps {
 
 export const YouTubeFrame: React.FC<YouTubeFrameProps> = ({ id }) => {
   return (
-    <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-16by9'}
-      previewContainerClassName={'embed-responsive-item'} hoverIcon={'youtube-play'}
-      loadingImageUrl={`//i.ytimg.com/vi/${id}/maxresdefault.jpg`}>
-      <iframe className='embed-responsive-item' title={`youtube video of ${id}`}
-        src={`//www.youtube-nocookie.com/embed/${id}?autoplay=1`}
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"/>
+    <OneClickEmbedding containerClassName={ 'embed-responsive embed-responsive-16by9' }
+                       previewContainerClassName={ 'embed-responsive-item' } hoverIcon={ 'youtube-play' }
+                       loadingImageUrl={ `//i.ytimg.com/vi/${ id }/maxresdefault.jpg` }>
+      <iframe className='embed-responsive-item' title={ `youtube video of ${ id }` }
+              src={ `//www.youtube-nocookie.com/embed/${ id }?autoplay=1` }
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"/>
     </OneClickEmbedding>
   )
 }
diff --git a/src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx b/src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx
index 71d56ed83..74726d878 100644
--- a/src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import MarkdownIt from 'markdown-it'
@@ -17,18 +17,18 @@ import { YouTubeFrame } from './youtube-frame'
 export class YoutubeReplacer extends ComponentReplacer {
   private counterMap: Map<string, number> = new Map<string, number>()
 
-  public getReplacement (node: DomElement): React.ReactElement | undefined {
+  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
+    markdownItRegex(markdownIt, replaceYouTubeLink)
+    markdownItRegex(markdownIt, replaceLegacyYoutubeShortCode)
+  }
+
+  public getReplacement(node: DomElement): React.ReactElement | undefined {
     const attributes = getAttributesFromHedgeDocTag(node, 'youtube')
     if (attributes && attributes.id) {
       const videoId = attributes.id
       const count = (this.counterMap.get(videoId) || 0) + 1
       this.counterMap.set(videoId, count)
-      return <YouTubeFrame id={videoId}/>
+      return <YouTubeFrame id={ videoId }/>
     }
   }
-
-  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
-    markdownItRegex(markdownIt, replaceYouTubeLink)
-    markdownItRegex(markdownIt, replaceLegacyYoutubeShortCode)
-  }
 }
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 d49b8d19a..7b8102a30 100644
--- a/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts
+++ b/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts
@@ -13,36 +13,37 @@ import { LineMarkers } from '../replace-components/linemarker/line-number-marker
 export const calculateLineMarkerPositions = (documentElement: HTMLDivElement, currentLineMarkers: LineMarkers[], offset?: number): LineMarkerPosition[] => {
   const lineMarkers = currentLineMarkers
   const children: HTMLCollection = documentElement.children
-  const lineMarkerPositions:LineMarkerPosition[] = []
+  const lineMarkerPositions: LineMarkerPosition[] = []
 
-  Array.from(children).forEach((child, childIndex) => {
-    const htmlChild = (child as HTMLElement)
-    if (htmlChild.offsetTop === undefined) {
-      return
-    }
-    const currentLineMarker = lineMarkers[childIndex]
-    if (currentLineMarker === undefined) {
-      return
-    }
+  Array.from(children)
+       .forEach((child, childIndex) => {
+         const htmlChild = (child as HTMLElement)
+         if (htmlChild.offsetTop === undefined) {
+           return
+         }
+         const currentLineMarker = lineMarkers[childIndex]
+         if (currentLineMarker === undefined) {
+           return
+         }
 
-    const lastPosition = lineMarkerPositions[lineMarkerPositions.length - 1]
-    if (!lastPosition || lastPosition.line !== currentLineMarker.startLine) {
-      lineMarkerPositions.push({
-        line: currentLineMarker.startLine,
-        position: htmlChild.offsetTop + (offset ?? 0)
-      })
-    }
+         const lastPosition = lineMarkerPositions[lineMarkerPositions.length - 1]
+         if (!lastPosition || lastPosition.line !== currentLineMarker.startLine) {
+           lineMarkerPositions.push({
+             line: currentLineMarker.startLine,
+             position: htmlChild.offsetTop + (offset ?? 0)
+           })
+         }
 
-    lineMarkerPositions.push({
-      line: currentLineMarker.endLine,
-      position: htmlChild.offsetTop + htmlChild.offsetHeight + (offset ?? 0)
-    })
-  })
+         lineMarkerPositions.push({
+           line: currentLineMarker.endLine,
+           position: htmlChild.offsetTop + htmlChild.offsetHeight + (offset ?? 0)
+         })
+       })
 
   return lineMarkerPositions
 }
 
-export const useCalculateLineMarkerPosition = (documentElement: RefObject<HTMLDivElement>, lineMarkers?: LineMarkers[], onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void, offset?: number) : void => {
+export const useCalculateLineMarkerPosition = (documentElement: RefObject<HTMLDivElement>, lineMarkers?: LineMarkers[], onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void, offset?: number): void => {
   const lastLineMarkerPositions = useRef<LineMarkerPosition[]>()
 
   const calculateNewLineMarkerPositions = useCallback(() => {
diff --git a/src/components/markdown-renderer/utils/html-react-transformer.tsx b/src/components/markdown-renderer/utils/html-react-transformer.tsx
index c655e4c97..460fbb28b 100644
--- a/src/components/markdown-renderer/utils/html-react-transformer.tsx
+++ b/src/components/markdown-renderer/utils/html-react-transformer.tsx
@@ -42,7 +42,7 @@ export const calculateKeyFromLineMarker = (node: DomElement, lineKeys?: LineKeys
     return
   }
 
-  return `${lineKeys[startLine].id}_${lineKeys[endLine].id}`
+  return `${ lineKeys[startLine].id }_${ lineKeys[endLine].id }`
 }
 
 export const findNodeReplacement = (node: DomElement, key: string, allReplacers: ComponentReplacer[], subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): ReactElement | null | undefined => {
@@ -72,8 +72,8 @@ export const buildTransformer = (lineKeys: (LineKeys[] | undefined), allReplacer
     } else if (tryReplacement === undefined) {
       return nativeRenderer()
     } else {
-      return <Suspense key={key} fallback={<span>Loading...</span>}>
-        {tryReplacement}
+      return <Suspense key={ key } fallback={ <span>Loading...</span> }>
+        { tryReplacement }
       </Suspense>
     }
   }
diff --git a/src/components/markdown-renderer/utils/line-number-mapping.ts b/src/components/markdown-renderer/utils/line-number-mapping.ts
index 9f1e78391..0aba7b00d 100644
--- a/src/components/markdown-renderer/utils/line-number-mapping.ts
+++ b/src/components/markdown-renderer/utils/line-number-mapping.ts
@@ -10,7 +10,7 @@ import { LineKeys } from '../types'
 
 export const calculateNewLineNumberMapping = (newMarkdownLines: string[], oldLineKeys: LineKeys[], lastUsedLineId: number): TextDifferenceResult => {
   const lineDifferences = diffArrays<string, LineKeys>(newMarkdownLines, oldLineKeys, {
-    comparator: (left:string|LineKeys, right:string|LineKeys) => {
+    comparator: (left: string | LineKeys, right: string | LineKeys) => {
       const leftLine = (left as LineKeys).line ?? (left as string)
       const rightLine = (right as LineKeys).line ?? (right as string)
       return leftLine === rightLine
diff --git a/src/components/profile-page/access-tokens/profile-access-tokens.tsx b/src/components/profile-page/access-tokens/profile-access-tokens.tsx
index d0738d178..2b3c26175 100644
--- a/src/components/profile-page/access-tokens/profile-access-tokens.tsx
+++ b/src/components/profile-page/access-tokens/profile-access-tokens.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DateTime } from 'luxon'
 import React, { ChangeEvent, FormEvent, Fragment, useCallback, useEffect, useMemo, useState } from 'react'
@@ -86,30 +86,31 @@ export const ProfileAccessTokens: React.FC = () => {
           <p className='text-start'><Trans i18nKey='profile.accessTokens.info'/></p>
           <p className='text-start small'><Trans i18nKey='profile.accessTokens.infoDev'/></p>
           <hr/>
-          <ShowIf condition={accessTokens.length === 0 && !error}>
+          <ShowIf condition={ accessTokens.length === 0 && !error }>
             <Trans i18nKey='profile.accessTokens.noTokens'/>
           </ShowIf>
-          <ShowIf condition={error}>
+          <ShowIf condition={ error }>
             <Trans i18nKey='common.errorOccurred'/>
           </ShowIf>
           <ListGroup>
             {
               accessTokens.map((token) => {
                 return (
-                  <ListGroup.Item className='bg-dark' key={token.created}>
+                  <ListGroup.Item className='bg-dark' key={ token.created }>
                     <Row>
                       <Col className='text-start'>
                         { token.label }
                       </Col>
                       <Col className='text-start text-white-50'>
-                        <Trans i18nKey='profile.accessTokens.created' values={{
-                          time: DateTime.fromSeconds(token.created).toRelative({
-                            style: 'short'
-                          })
-                        }}/>
+                        <Trans i18nKey='profile.accessTokens.created' values={ {
+                          time: DateTime.fromSeconds(token.created)
+                                        .toRelative({
+                                          style: 'short'
+                                        })
+                        } }/>
                       </Col>
                       <Col xs='auto'>
-                        <IconButton icon='trash-o' variant='danger' onClick={() => selectForDeletion(token.created)}/>
+                        <IconButton icon='trash-o' variant='danger' onClick={ () => selectForDeletion(token.created) }/>
                       </Col>
                     </Row>
                   </ListGroup.Item>
@@ -118,26 +119,26 @@ export const ProfileAccessTokens: React.FC = () => {
             }
           </ListGroup>
           <hr/>
-          <Form onSubmit={addToken} className='text-left'>
+          <Form onSubmit={ addToken } className='text-left'>
             <Form.Row>
               <Col>
                 <Form.Control
                   type='text'
                   size='sm'
-                  placeholder={t('profile.accessTokens.label')}
-                  value={newTokenLabel}
+                  placeholder={ t('profile.accessTokens.label') }
+                  value={ newTokenLabel }
                   className='bg-dark text-light'
-                  onChange={(event: ChangeEvent<HTMLInputElement>) => setNewTokenLabel(event.target.value)}
-                  isValid={newTokenSubmittable}
+                  onChange={ (event: ChangeEvent<HTMLInputElement>) => setNewTokenLabel(event.target.value) }
+                  isValid={ newTokenSubmittable }
                   required
                 />
               </Col>
-              <Col xs={'auto'}>
+              <Col xs={ 'auto' }>
                 <Button
                   type='submit'
                   variant='primary'
                   size='sm'
-                  disabled={!newTokenSubmittable}>
+                  disabled={ !newTokenSubmittable }>
                   <Trans i18nKey='profile.accessTokens.createToken'/>
                 </Button>
               </Col>
@@ -146,25 +147,26 @@ export const ProfileAccessTokens: React.FC = () => {
         </Card.Body>
       </Card>
 
-      <CommonModal show={showAddedModal} onHide={() => setShowAddedModal(false)} titleI18nKey='profile.modal.addedAccessToken.title'>
+      <CommonModal show={ showAddedModal } onHide={ () => setShowAddedModal(false) }
+                   titleI18nKey='profile.modal.addedAccessToken.title'>
         <Modal.Body>
           <Trans i18nKey='profile.modal.addedAccessToken.message'/>
           <br/>
-          <CopyableField content={newTokenSecret}/>
+          <CopyableField content={ newTokenSecret }/>
         </Modal.Body>
         <Modal.Footer>
-          <Button variant='primary' onClick={() => setShowAddedModal(false)}>
+          <Button variant='primary' onClick={ () => setShowAddedModal(false) }>
             <Trans i18nKey='common.close'/>
           </Button>
         </Modal.Footer>
       </CommonModal>
 
       <DeletionModal
-        onConfirm={deleteToken}
-        deletionButtonI18nKey={'common.delete'}
-        show={showDeleteModal}
-        onHide={() => setShowDeleteModal(false)}
-        titleI18nKey={'profile.modal.deleteAccessToken.title'}>
+        onConfirm={ deleteToken }
+        deletionButtonI18nKey={ 'common.delete' }
+        show={ showDeleteModal }
+        onHide={ () => setShowDeleteModal(false) }
+        titleI18nKey={ 'profile.modal.deleteAccessToken.title' }>
         <Trans i18nKey='profile.modal.deleteAccessToken.message'/>
       </DeletionModal>
     </Fragment>
diff --git a/src/components/profile-page/profile-page.tsx b/src/components/profile-page/profile-page.tsx
index 50a869c32..fa86b19cf 100644
--- a/src/components/profile-page/profile-page.tsx
+++ b/src/components/profile-page/profile-page.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment } from 'react'
 import { Col, Row } from 'react-bootstrap'
@@ -21,16 +21,16 @@ export const ProfilePage: React.FC = () => {
 
   if (!userProvider) {
     return (
-      <Redirect to={'/login'}/>
+      <Redirect to={ '/login' }/>
     )
   }
 
   return <Fragment>
     <div className="my-3">
       <Row className="h-100 flex justify-content-center">
-        <Col lg={6}>
+        <Col lg={ 6 }>
           <ProfileDisplayName/>
-          <ShowIf condition={userProvider === LoginProvider.INTERNAL}>
+          <ShowIf condition={ userProvider === LoginProvider.INTERNAL }>
             <ProfileChangePassword/>
           </ShowIf>
           <ProfileAccessTokens/>
diff --git a/src/components/profile-page/settings/profile-account-management.tsx b/src/components/profile-page/settings/profile-account-management.tsx
index 487c7aa99..5f9045486 100644
--- a/src/components/profile-page/settings/profile-account-management.tsx
+++ b/src/components/profile-page/settings/profile-account-management.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { Fragment, useEffect, useRef, useState } from 'react'
 import { Button, Card, Modal } from 'react-bootstrap'
@@ -19,13 +19,13 @@ export const ProfileAccountManagement: React.FC = () => {
   const [countdown, setCountdown] = useState(0)
   const interval = useRef<NodeJS.Timeout>()
 
-  const stopCountdown = ():void => {
+  const stopCountdown = (): void => {
     if (interval.current) {
       clearTimeout(interval.current)
     }
   }
 
-  const startCountdown = ():void => {
+  const startCountdown = (): void => {
     interval.current = setInterval(() => {
       setCountdown((oldValue) => oldValue - 1)
     }, 1000)
@@ -63,28 +63,28 @@ export const ProfileAccountManagement: React.FC = () => {
       <Card className="bg-dark mb-4">
         <Card.Body>
           <Card.Title><Trans i18nKey="profile.accountManagement"/></Card.Title>
-          <Button variant="secondary" block href={getApiUrl() + '/me/export'} className="mb-2">
-            <ForkAwesomeIcon icon="cloud-download" fixedWidth={true} className="mx-2"/>
+          <Button variant="secondary" block href={ getApiUrl() + '/me/export' } className="mb-2">
+            <ForkAwesomeIcon icon="cloud-download" fixedWidth={ true } className="mx-2"/>
             <Trans i18nKey="profile.exportUserData"/>
           </Button>
-          <Button variant="danger" block onClick={handleModalOpen}>
-            <ForkAwesomeIcon icon="trash" fixedWidth={true} className="mx-2"/>
+          <Button variant="danger" block onClick={ handleModalOpen }>
+            <ForkAwesomeIcon icon="trash" fixedWidth={ true } className="mx-2"/>
             <Trans i18nKey="profile.deleteUser"/>
           </Button>
         </Card.Body>
       </Card>
 
-      <Modal show={showDeleteModal} onHide={handleModalClose} animation={true}>
+      <Modal show={ showDeleteModal } onHide={ handleModalClose } animation={ true }>
         <Modal.Body className="text-dark">
           <h3 dir="auto"><Trans i18nKey="profile.modal.deleteUser.message"/></h3>
           <Trans i18nKey="profile.modal.deleteUser.subMessage"/>
         </Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" onClick={handleModalClose}>
+          <Button variant="secondary" onClick={ handleModalClose }>
             <Trans i18nKey="common.close"/>
           </Button>
-          <Button variant="danger" onClick={deleteUserAccount} disabled={!deletionButtonActive}>
-            {deletionButtonActive ? <Trans i18nKey={'profile.modal.deleteUser.title'}/> : countdown}
+          <Button variant="danger" onClick={ deleteUserAccount } disabled={ !deletionButtonActive }>
+            { deletionButtonActive ? <Trans i18nKey={ 'profile.modal.deleteUser.title' }/> : countdown }
           </Button>
         </Modal.Footer>
       </Modal>
diff --git a/src/components/profile-page/settings/profile-change-password.tsx b/src/components/profile-page/settings/profile-change-password.tsx
index b65c7046c..6d5a85680 100644
--- a/src/components/profile-page/settings/profile-change-password.tsx
+++ b/src/components/profile-page/settings/profile-change-password.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { ChangeEvent, FormEvent, useState } from 'react'
 import { Button, Card, Form } from 'react-bootstrap'
@@ -39,7 +39,7 @@ export const ProfileChangePassword: React.FC = () => {
     <Card className="bg-dark mb-4">
       <Card.Body>
         <Card.Title><Trans i18nKey="profile.changePassword.title"/></Card.Title>
-        <Form onSubmit={updatePasswordSubmit} className="text-left">
+        <Form onSubmit={ updatePasswordSubmit } className="text-left">
           <Form.Group controlId="oldPassword">
             <Form.Label><Trans i18nKey="profile.changePassword.old"/></Form.Label>
             <Form.Control
@@ -47,7 +47,7 @@ export const ProfileChangePassword: React.FC = () => {
               size="sm"
               className="bg-dark text-light"
               required
-              onChange={(event) => setOldPassword(event.target.value)}
+              onChange={ (event) => setOldPassword(event.target.value) }
             />
           </Form.Group>
           <Form.Group controlId="newPassword">
@@ -57,8 +57,8 @@ export const ProfileChangePassword: React.FC = () => {
               size="sm"
               className="bg-dark text-light"
               required
-              onChange={onChangeNewPassword}
-              isValid={newPasswordValid}
+              onChange={ onChangeNewPassword }
+              isValid={ newPasswordValid }
             />
             <Form.Text><Trans i18nKey="profile.changePassword.info"/></Form.Text>
           </Form.Group>
@@ -69,16 +69,16 @@ export const ProfileChangePassword: React.FC = () => {
               size="sm"
               className="bg-dark text-light"
               required
-              onChange={onChangeNewPasswordAgain}
-              isValid={newPasswordAgainValid}
-              isInvalid={newPasswordAgain !== '' && !newPasswordAgainValid}
+              onChange={ onChangeNewPasswordAgain }
+              isValid={ newPasswordAgainValid }
+              isInvalid={ newPasswordAgain !== '' && !newPasswordAgainValid }
             />
           </Form.Group>
 
           <Button
             type="submit"
             variant="primary"
-            disabled={!newPasswordValid || !newPasswordAgainValid}>
+            disabled={ !newPasswordValid || !newPasswordAgainValid }>
             <Trans i18nKey="common.save"/>
           </Button>
         </Form>
diff --git a/src/components/profile-page/settings/profile-display-name.tsx b/src/components/profile-page/settings/profile-display-name.tsx
index 436b2b14b..012b0e9e1 100644
--- a/src/components/profile-page/settings/profile-display-name.tsx
+++ b/src/components/profile-page/settings/profile-display-name.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react'
 import { Alert, Button, Card, Form } from 'react-bootstrap'
@@ -27,7 +27,7 @@ export const ProfileDisplayName: React.FC = () => {
   }, [userName])
 
   if (!userName) {
-    return <Alert variant={'danger'}>User not logged in</Alert>
+    return <Alert variant={ 'danger' }>User not logged in</Alert>
   }
 
   const changeNameField = (event: ChangeEvent<HTMLInputElement>) => {
@@ -41,7 +41,8 @@ export const ProfileDisplayName: React.FC = () => {
   }
 
   const changeNameSubmit = (event: FormEvent) => {
-    doAsyncChange().catch(() => setError(true))
+    doAsyncChange()
+      .catch(() => setError(true))
     event.preventDefault()
   }
 
@@ -51,18 +52,18 @@ export const ProfileDisplayName: React.FC = () => {
         <Card.Title>
           <Trans i18nKey="profile.userProfile"/>
         </Card.Title>
-        <Form onSubmit={changeNameSubmit} className="text-left">
+        <Form onSubmit={ changeNameSubmit } className="text-left">
           <Form.Group controlId="displayName">
             <Form.Label><Trans i18nKey="profile.displayName"/></Form.Label>
             <Form.Control
               type="text"
               size="sm"
-              placeholder={t('profile.displayName')}
-              value={displayName}
+              placeholder={ t('profile.displayName') }
+              value={ displayName }
               className="bg-dark text-light"
-              onChange={changeNameField}
-              isValid={submittable}
-              isInvalid={error}
+              onChange={ changeNameField }
+              isValid={ submittable }
+              isInvalid={ error }
               required
             />
             <Form.Text><Trans i18nKey="profile.displayNameInfo"/></Form.Text>
@@ -71,7 +72,7 @@ export const ProfileDisplayName: React.FC = () => {
           <Button
             type="submit"
             variant="primary"
-            disabled={!submittable}>
+            disabled={ !submittable }>
             <Trans i18nKey="common.save"/>
           </Button>
         </Form>
diff --git a/src/components/register-page/register-page.tsx b/src/components/register-page/register-page.tsx
index 25ef9ceac..6e0ea5860 100644
--- a/src/components/register-page/register-page.tsx
+++ b/src/components/register-page/register-page.tsx
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { FormEvent, Fragment, useCallback, useEffect, useState } from 'react'
 import { Alert, Button, Card, Col, Form, Row } from 'react-bootstrap'
@@ -49,13 +49,13 @@ export const RegisterPage: React.FC = () => {
 
   if (!allowRegister) {
     return (
-      <Redirect to={'/login'}/>
+      <Redirect to={ '/login' }/>
     )
   }
 
   if (userExists) {
     return (
-      <Redirect to={'/intro'}/>
+      <Redirect to={ '/intro' }/>
     )
   }
 
@@ -63,22 +63,22 @@ export const RegisterPage: React.FC = () => {
     <div className='my-3'>
       <h1 className='mb-4'><Trans i18nKey='login.register.title'/></h1>
       <Row className='h-100 d-flex justify-content-center'>
-        <Col lg={6}>
+        <Col lg={ 6 }>
           <Card className='bg-dark mb-4 text-start'>
             <Card.Body>
-              <Form onSubmit={doRegisterSubmit}>
+              <Form onSubmit={ doRegisterSubmit }>
                 <Form.Group controlId='username'>
                   <Form.Label><Trans i18nKey='login.auth.username'/></Form.Label>
                   <Form.Control
                     type='text'
                     size='sm'
-                    value={username}
-                    isValid={username !== ''}
-                    onChange={(event) => setUsername(event.target.value)}
-                    placeholder={t('login.auth.username')}
+                    value={ username }
+                    isValid={ username !== '' }
+                    onChange={ (event) => setUsername(event.target.value) }
+                    placeholder={ t('login.auth.username') }
                     className='bg-dark text-light'
                     autoComplete='username'
-                    autoFocus={true}
+                    autoFocus={ true }
                     required
                   />
                   <Form.Text><Trans i18nKey='login.register.usernameInfo'/></Form.Text>
@@ -88,11 +88,11 @@ export const RegisterPage: React.FC = () => {
                   <Form.Control
                     type='password'
                     size='sm'
-                    isValid={password !== '' && password.length >= 8}
-                    onChange={(event) => setPassword(event.target.value)}
-                    placeholder={t('login.auth.password')}
+                    isValid={ password !== '' && password.length >= 8 }
+                    onChange={ (event) => setPassword(event.target.value) }
+                    placeholder={ t('login.auth.password') }
                     className='bg-dark text-light'
-                    minLength={8}
+                    minLength={ 8 }
                     autoComplete='new-password'
                     required
                   />
@@ -103,26 +103,26 @@ export const RegisterPage: React.FC = () => {
                   <Form.Control
                     type='password'
                     size='sm'
-                    isInvalid={passwordAgain !== '' && password !== passwordAgain}
-                    isValid={passwordAgain !== '' && password === passwordAgain}
-                    onChange={(event) => setPasswordAgain(event.target.value)}
-                    placeholder={t('login.register.passwordAgain')}
+                    isInvalid={ passwordAgain !== '' && password !== passwordAgain }
+                    isValid={ passwordAgain !== '' && password === passwordAgain }
+                    onChange={ (event) => setPasswordAgain(event.target.value) }
+                    placeholder={ t('login.register.passwordAgain') }
                     className='bg-dark text-light'
                     autoComplete='new-password'
                     required
                   />
                 </Form.Group>
-                <ShowIf condition={!!specialLinks?.termsOfUse || !!specialLinks?.privacy}>
+                <ShowIf condition={ !!specialLinks?.termsOfUse || !!specialLinks?.privacy }>
                   <Trans i18nKey='login.register.infoTermsPrivacy'/>
                   <ul>
-                    <ShowIf condition={!!specialLinks?.termsOfUse}>
+                    <ShowIf condition={ !!specialLinks?.termsOfUse }>
                       <li>
-                        <TranslatedExternalLink i18nKey='landing.footer.termsOfUse' href={specialLinks.termsOfUse}/>
+                        <TranslatedExternalLink i18nKey='landing.footer.termsOfUse' href={ specialLinks.termsOfUse }/>
                       </li>
                     </ShowIf>
-                    <ShowIf condition={!!specialLinks?.privacy}>
+                    <ShowIf condition={ !!specialLinks?.privacy }>
                       <li>
-                        <TranslatedExternalLink i18nKey='landing.footer.privacy' href={specialLinks.privacy}/>
+                        <TranslatedExternalLink i18nKey='landing.footer.privacy' href={ specialLinks.privacy }/>
                       </li>
                     </ShowIf>
                   </ul>
@@ -130,14 +130,14 @@ export const RegisterPage: React.FC = () => {
                 <Button
                   variant='primary'
                   type='submit'
-                  block={true}
-                  disabled={!ready}>
+                  block={ true }
+                  disabled={ !ready }>
                   <Trans i18nKey='login.register.title'/>
                 </Button>
               </Form>
               <br/>
-              <Alert show={error !== RegisterError.NONE} variant='danger'>
-                <Trans i18nKey={`login.register.error.${error}`}/>
+              <Alert show={ error !== RegisterError.NONE } variant='danger'>
+                <Trans i18nKey={ `login.register.error.${ error }` }/>
               </Alert>
             </Card.Body>
           </Card>
diff --git a/src/components/render-page/iframe-communicator.ts b/src/components/render-page/iframe-communicator.ts
index f9b4db49f..9d26c7615 100644
--- a/src/components/render-page/iframe-communicator.ts
+++ b/src/components/render-page/iframe-communicator.ts
@@ -8,36 +8,36 @@ export abstract class IframeCommunicator<SEND, RECEIVE> {
   protected otherSide?: Window
   protected otherOrigin?: string
 
-  constructor () {
-    window.addEventListener("message", this.handleEvent.bind(this))
+  constructor() {
+    window.addEventListener('message', this.handleEvent.bind(this))
   }
 
-  public unregisterEventListener (): void {
-    window.removeEventListener("message", this.handleEvent.bind(this))
+  public unregisterEventListener(): void {
+    window.removeEventListener('message', this.handleEvent.bind(this))
   }
 
-  public setOtherSide (otherSide: Window, otherOrigin: string): void {
+  public setOtherSide(otherSide: Window, otherOrigin: string): void {
     this.otherSide = otherSide
     this.otherOrigin = otherOrigin
   }
 
-  public unsetOtherSide (): void {
+  public unsetOtherSide(): void {
     this.otherSide = undefined
     this.otherOrigin = undefined
   }
 
-  public getOtherSide (): Window | undefined {
+  public getOtherSide(): Window | undefined {
     return this.otherSide
   }
 
-  protected sendMessageToOtherSide (message: SEND): void {
+  protected sendMessageToOtherSide(message: SEND): void {
     if (this.otherSide === undefined || this.otherOrigin === undefined) {
-      console.error("Can't send message because otherSide is null", message)
+      console.error('Can\'t send message because otherSide is null', message)
       return
     }
     this.otherSide.postMessage(message, this.otherOrigin)
   }
 
-  protected abstract handleEvent (event: MessageEvent<RECEIVE>): void;
+  protected abstract handleEvent(event: MessageEvent<RECEIVE>): void;
 }
 
diff --git a/src/components/render-page/iframe-editor-to-renderer-communicator.ts b/src/components/render-page/iframe-editor-to-renderer-communicator.ts
index 0db06e2d4..3ee6881e8 100644
--- a/src/components/render-page/iframe-editor-to-renderer-communicator.ts
+++ b/src/components/render-page/iframe-editor-to-renderer-communicator.ts
@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { NoteFrontmatter } from "../editor-page/note-frontmatter/note-frontmatter"
-import { ScrollState } from "../editor-page/synced-scroll/scroll-props"
-import { IframeCommunicator } from "./iframe-communicator"
+import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
+import { ScrollState } from '../editor-page/synced-scroll/scroll-props'
+import { IframeCommunicator } from './iframe-communicator'
 import {
   EditorToRendererIframeMessage,
   ImageDetails,
   RendererToEditorIframeMessage,
   RenderIframeMessageType
-} from "./rendering-message"
+} from './rendering-message'
 
 export class IframeEditorToRendererCommunicator extends IframeCommunicator<EditorToRendererIframeMessage, RendererToEditorIframeMessage> {
   private onSetScrollSourceToRendererHandler?: () => void
@@ -23,31 +23,66 @@ export class IframeEditorToRendererCommunicator extends IframeCommunicator<Edito
   private onRendererReadyHandler?: () => void
   private onImageClickedHandler?: (details: ImageDetails) => void
 
-  public onFrontmatterChange (handler?: (frontmatter?: NoteFrontmatter) => void): void {
+  public onFrontmatterChange(handler?: (frontmatter?: NoteFrontmatter) => void): void {
     this.onFrontmatterChangeHandler = handler
   }
 
-  public onImageClicked (handler?: (details: ImageDetails) => void): void {
+  public onImageClicked(handler?: (details: ImageDetails) => void): void {
     this.onImageClickedHandler = handler
   }
 
-  public onRendererReady (handler?: () => void): void {
+  public onRendererReady(handler?: () => void): void {
     this.onRendererReadyHandler = handler
   }
 
-  public onSetScrollSourceToRenderer (handler?: () => void): void {
+  public onSetScrollSourceToRenderer(handler?: () => void): void {
     this.onSetScrollSourceToRendererHandler = handler
   }
 
-  public onTaskCheckboxChange (handler?: (lineInMarkdown: number, checked: boolean) => void): void {
+  public onTaskCheckboxChange(handler?: (lineInMarkdown: number, checked: boolean) => void): void {
     this.onTaskCheckboxChangeHandler = handler
   }
 
-  public onFirstHeadingChange (handler?: (heading?: string) => void): void {
+  public onFirstHeadingChange(handler?: (heading?: string) => void): void {
     this.onFirstHeadingChangeHandler = handler
   }
 
-  protected handleEvent (event: MessageEvent<RendererToEditorIframeMessage>): boolean | undefined {
+  public onSetScrollState(handler?: (scrollState: ScrollState) => void): void {
+    this.onSetScrollStateHandler = handler
+  }
+
+  public sendSetBaseUrl(baseUrl: string): void {
+    this.sendMessageToOtherSide({
+      type: RenderIframeMessageType.SET_BASE_URL,
+      baseUrl
+    })
+  }
+
+  public sendSetMarkdownContent(markdownContent: string): void {
+    this.sendMessageToOtherSide({
+      type: RenderIframeMessageType.SET_MARKDOWN_CONTENT,
+      content: markdownContent
+    })
+  }
+
+  public sendSetDarkmode(darkModeActivated: boolean): void {
+    this.sendMessageToOtherSide({
+      type: RenderIframeMessageType.SET_DARKMODE,
+      activated: darkModeActivated
+    })
+  }
+
+  public sendScrollState(scrollState?: ScrollState): void {
+    if (!scrollState) {
+      return
+    }
+    this.sendMessageToOtherSide({
+      type: RenderIframeMessageType.SET_SCROLL_STATE,
+      scrollState
+    })
+  }
+
+  protected handleEvent(event: MessageEvent<RendererToEditorIframeMessage>): boolean | undefined {
     const renderMessage = event.data
     switch (renderMessage.type) {
       case RenderIframeMessageType.RENDERER_READY:
@@ -73,39 +108,4 @@ export class IframeEditorToRendererCommunicator extends IframeCommunicator<Edito
         return false
     }
   }
-
-  public onSetScrollState (handler?: (scrollState: ScrollState) => void): void {
-    this.onSetScrollStateHandler = handler
-  }
-
-  public sendSetBaseUrl (baseUrl: string): void {
-    this.sendMessageToOtherSide({
-      type: RenderIframeMessageType.SET_BASE_URL,
-      baseUrl
-    })
-  }
-
-  public sendSetMarkdownContent (markdownContent: string): void {
-    this.sendMessageToOtherSide({
-      type: RenderIframeMessageType.SET_MARKDOWN_CONTENT,
-      content: markdownContent
-    })
-  }
-
-  public sendSetDarkmode (darkModeActivated: boolean): void {
-    this.sendMessageToOtherSide({
-      type: RenderIframeMessageType.SET_DARKMODE,
-      activated: darkModeActivated
-    })
-  }
-
-  public sendScrollState (scrollState?: ScrollState): void {
-    if (!scrollState) {
-      return
-    }
-    this.sendMessageToOtherSide({
-      type: RenderIframeMessageType.SET_SCROLL_STATE,
-      scrollState
-    })
-  }
 }
diff --git a/src/components/render-page/iframe-renderer-to-editor-communicator.ts b/src/components/render-page/iframe-renderer-to-editor-communicator.ts
index 23a9c1fe5..57a1cdc74 100644
--- a/src/components/render-page/iframe-renderer-to-editor-communicator.ts
+++ b/src/components/render-page/iframe-renderer-to-editor-communicator.ts
@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { NoteFrontmatter } from "../editor-page/note-frontmatter/note-frontmatter"
-import { ScrollState } from "../editor-page/synced-scroll/scroll-props"
-import { IframeCommunicator } from "./iframe-communicator"
+import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
+import { ScrollState } from '../editor-page/synced-scroll/scroll-props'
+import { IframeCommunicator } from './iframe-communicator'
 import {
   EditorToRendererIframeMessage,
   ImageDetails,
   RendererToEditorIframeMessage,
   RenderIframeMessageType
-} from "./rendering-message"
+} from './rendering-message'
 
 export class IframeRendererToEditorCommunicator extends IframeCommunicator<RendererToEditorIframeMessage, EditorToRendererIframeMessage> {
   private onSetMarkdownContentHandler?: ((markdownContent: string) => void)
@@ -20,29 +20,29 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator<Rende
   private onSetScrollStateHandler?: ((scrollState: ScrollState) => void)
   private onSetBaseUrlHandler?: ((baseUrl: string) => void)
 
-  public onSetBaseUrl (handler?: (baseUrl: string) => void): void {
+  public onSetBaseUrl(handler?: (baseUrl: string) => void): void {
     this.onSetBaseUrlHandler = handler
   }
 
-  public onSetMarkdownContent (handler?: (markdownContent: string) => void): void {
+  public onSetMarkdownContent(handler?: (markdownContent: string) => void): void {
     this.onSetMarkdownContentHandler = handler
   }
 
-  public onSetDarkMode (handler?: (darkModeActivated: boolean) => void): void {
+  public onSetDarkMode(handler?: (darkModeActivated: boolean) => void): void {
     this.onSetDarkModeHandler = handler
   }
 
-  public onSetScrollState (handler?: (scrollState: ScrollState) => void): void {
+  public onSetScrollState(handler?: (scrollState: ScrollState) => void): void {
     this.onSetScrollStateHandler = handler
   }
 
-  public sendRendererReady (): void {
+  public sendRendererReady(): void {
     this.sendMessageToOtherSide({
       type: RenderIframeMessageType.RENDERER_READY
     })
   }
 
-  public sendTaskCheckBoxChange (lineInMarkdown: number, checked: boolean): void {
+  public sendTaskCheckBoxChange(lineInMarkdown: number, checked: boolean): void {
     this.sendMessageToOtherSide({
       type: RenderIframeMessageType.ON_TASK_CHECKBOX_CHANGE,
       checked,
@@ -50,34 +50,41 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator<Rende
     })
   }
 
-  public sendFirstHeadingChanged (firstHeading: string | undefined): void {
+  public sendFirstHeadingChanged(firstHeading: string | undefined): void {
     this.sendMessageToOtherSide({
       type: RenderIframeMessageType.ON_FIRST_HEADING_CHANGE,
       firstHeading
     })
   }
 
-  public sendSetScrollSourceToRenderer (): void {
+  public sendSetScrollSourceToRenderer(): void {
     this.sendMessageToOtherSide({
       type: RenderIframeMessageType.SET_SCROLL_SOURCE_TO_RENDERER
     })
   }
 
-  public sendSetFrontmatter (frontmatter: NoteFrontmatter | undefined): void {
+  public sendSetFrontmatter(frontmatter: NoteFrontmatter | undefined): void {
     this.sendMessageToOtherSide({
       type: RenderIframeMessageType.ON_SET_FRONTMATTER,
       frontmatter: frontmatter
     })
   }
 
-  public sendSetScrollState (scrollState: ScrollState): void {
+  public sendSetScrollState(scrollState: ScrollState): void {
     this.sendMessageToOtherSide({
       type: RenderIframeMessageType.SET_SCROLL_STATE,
       scrollState
     })
   }
 
-  protected handleEvent (event: MessageEvent<EditorToRendererIframeMessage>): boolean | undefined {
+  public sendClickedImageUrl(details: ImageDetails): void {
+    this.sendMessageToOtherSide({
+      type: RenderIframeMessageType.IMAGE_CLICKED,
+      details: details
+    })
+  }
+
+  protected handleEvent(event: MessageEvent<EditorToRendererIframeMessage>): boolean | undefined {
     const renderMessage = event.data
     switch (renderMessage.type) {
       case RenderIframeMessageType.SET_MARKDOWN_CONTENT:
@@ -94,11 +101,4 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator<Rende
         return false
     }
   }
-
-  public sendClickedImageUrl (details: ImageDetails): void {
-    this.sendMessageToOtherSide({
-      type: RenderIframeMessageType.IMAGE_CLICKED,
-      details: details
-    })
-  }
 }
diff --git a/src/components/render-page/markdown-document.tsx b/src/components/render-page/markdown-document.tsx
index b158644f4..15f790225 100644
--- a/src/components/render-page/markdown-document.tsx
+++ b/src/components/render-page/markdown-document.tsx
@@ -52,39 +52,39 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
   const [onLineMarkerPositionChanged, onUserScroll] = useSyncedScrolling(internalDocumentRenderPaneRef, rendererRef, contentLineCount, scrollState, onScroll)
 
   return (
-    <div className={`markdown-document ${extraClasses ?? ''}`}
-         ref={internalDocumentRenderPaneRef} onScroll={onUserScroll} onMouseEnter={onMakeScrollSource}>
-      <div className={'markdown-document-side'}/>
-      <div className={'bg-light markdown-document-content'}>
+    <div className={ `markdown-document ${ extraClasses ?? '' }` }
+         ref={ internalDocumentRenderPaneRef } onScroll={ onUserScroll } onMouseEnter={ onMakeScrollSource }>
+      <div className={ 'markdown-document-side' }/>
+      <div className={ 'bg-light markdown-document-content' }>
         <YamlArrayDeprecationAlert/>
         <FullMarkdownRenderer
-            rendererRef={rendererRef}
-            className={'flex-fill pt-4 mb-3'}
-            content={markdownContent}
-            onFirstHeadingChange={onFirstHeadingChange}
-            onLineMarkerPositionChanged={onLineMarkerPositionChanged}
-            onFrontmatterChange={onFrontmatterChange}
-            onTaskCheckedChange={onTaskCheckedChange}
-            onTocChange={(tocAst) => setTocAst(tocAst)}
-            baseUrl={baseUrl}
-            onImageClick={onImageClick}/>
+          rendererRef={ rendererRef }
+          className={ 'flex-fill pt-4 mb-3' }
+          content={ markdownContent }
+          onFirstHeadingChange={ onFirstHeadingChange }
+          onLineMarkerPositionChanged={ onLineMarkerPositionChanged }
+          onFrontmatterChange={ onFrontmatterChange }
+          onTaskCheckedChange={ onTaskCheckedChange }
+          onTocChange={ (tocAst) => setTocAst(tocAst) }
+          baseUrl={ baseUrl }
+          onImageClick={ onImageClick }/>
 
       </div>
 
-      <div className={'markdown-document-side pt-4'}>
-        <ShowIf condition={!!tocAst}>
-          <ShowIf condition={width >= 1100}>
-            <TableOfContents ast={tocAst as TocAst} className={'sticky'} baseUrl={baseUrl}/>
+      <div className={ 'markdown-document-side pt-4' }>
+        <ShowIf condition={ !!tocAst }>
+          <ShowIf condition={ width >= 1100 }>
+            <TableOfContents ast={ tocAst as TocAst } className={ 'sticky' } baseUrl={ baseUrl }/>
           </ShowIf>
-          <ShowIf condition={width < 1100}>
-            <div className={'markdown-toc-sidebar-button'}>
-              <Dropdown drop={'up'}>
-                <Dropdown.Toggle id="toc-overlay-button" variant={'secondary'} className={'no-arrow'}>
-                  <ForkAwesomeIcon icon={'list-ol'}/>
+          <ShowIf condition={ width < 1100 }>
+            <div className={ 'markdown-toc-sidebar-button' }>
+              <Dropdown drop={ 'up' }>
+                <Dropdown.Toggle id="toc-overlay-button" variant={ 'secondary' } className={ 'no-arrow' }>
+                  <ForkAwesomeIcon icon={ 'list-ol' }/>
                 </Dropdown.Toggle>
                 <Dropdown.Menu>
-                  <div className={'p-2'}>
-                    <TableOfContents ast={tocAst as TocAst} baseUrl={baseUrl}/>
+                  <div className={ 'p-2' }>
+                    <TableOfContents ast={ tocAst as TocAst } baseUrl={ baseUrl }/>
                   </div>
                 </Dropdown.Menu>
               </Dropdown>
diff --git a/src/components/render-page/render-page.tsx b/src/components/render-page/render-page.tsx
index 73fc83436..5ba1b3844 100644
--- a/src/components/render-page/render-page.tsx
+++ b/src/components/render-page/render-page.tsx
@@ -78,18 +78,18 @@ export const RenderPage: React.FC = () => {
   }
 
   return (
-    <div className={"vh-100 w-100"}>
+    <div className={ 'vh-100 w-100' }>
       <MarkdownDocument
-        extraClasses={'bg-light'}
-        markdownContent={markdownContent}
-        onTaskCheckedChange={onTaskCheckedChange}
-        onFirstHeadingChange={onFirstHeadingChange}
-        onMakeScrollSource={onMakeScrollSource}
-        onFrontmatterChange={onFrontmatterChange}
-        scrollState={scrollState}
-        onScroll={onScroll}
-        baseUrl={baseUrl}
-        onImageClick={onImageClick}/>
+        extraClasses={ 'bg-light' }
+        markdownContent={ markdownContent }
+        onTaskCheckedChange={ onTaskCheckedChange }
+        onFirstHeadingChange={ onFirstHeadingChange }
+        onMakeScrollSource={ onMakeScrollSource }
+        onFrontmatterChange={ onFrontmatterChange }
+        scrollState={ scrollState }
+        onScroll={ onScroll }
+        baseUrl={ baseUrl }
+        onImageClick={ onImageClick }/>
     </div>
   )
 }
diff --git a/src/external-types/abcjs/abcjs.d.ts b/src/external-types/abcjs/abcjs.d.ts
index 90efa9fd0..02b0372bb 100644
--- a/src/external-types/abcjs/abcjs.d.ts
+++ b/src/external-types/abcjs/abcjs.d.ts
@@ -5,5 +5,5 @@
  */
 
 declare module 'abcjs' {
-  export function renderAbc(target: string|HTMLElement, code: string)
+  export function renderAbc(target: string | HTMLElement, code: string)
 }
diff --git a/src/external-types/highlight.js/core.d.ts b/src/external-types/highlight.js/core.d.ts
index 328e3aeab..0a8dfff4e 100644
--- a/src/external-types/highlight.js/core.d.ts
+++ b/src/external-types/highlight.js/core.d.ts
@@ -1,12 +1,12 @@
 /*
-SPDX-FileCopyrightText: Copyright (c) 2006, Ivan Sagalaev
+ SPDX-FileCopyrightText: Copyright (c) 2006, Ivan Sagalaev
 
-SPDX-License-Identifier: BSD-3-Clause
-*/
+ SPDX-License-Identifier: BSD-3-Clause
+ */
 declare module 'highlight.js/lib/core' {
   export = hljs;
 }
 
 declare module 'highlight.js/lib/languages/*' {
-  export default function(hljs?: hljs): LanguageDetail;
+  export default function (hljs?: hljs): LanguageDetail;
 }
diff --git a/src/hooks/common/use-document-title.ts b/src/hooks/common/use-document-title.ts
index 989f4f8ed..ec5db3f02 100644
--- a/src/hooks/common/use-document-title.ts
+++ b/src/hooks/common/use-document-title.ts
@@ -8,10 +8,10 @@ import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../redux'
 
-export const useDocumentTitle = (title?: string):void => {
+export const useDocumentTitle = (title?: string): void => {
   const brandingName = useSelector((state: ApplicationState) => state.config.branding.name)
 
   useEffect(() => {
-    document.title = `${title ? title + ' - ' : ''}HedgeDoc ${brandingName ? ` @ ${brandingName}` : ''}`
+    document.title = `${ title ? title + ' - ' : '' }HedgeDoc ${ brandingName ? ` @ ${ brandingName }` : '' }`
   }, [brandingName, title])
 }
diff --git a/src/hooks/common/use-frontend-base-url.ts b/src/hooks/common/use-frontend-base-url.ts
index 2f5fbcba1..030e6f7cb 100644
--- a/src/hooks/common/use-frontend-base-url.ts
+++ b/src/hooks/common/use-frontend-base-url.ts
@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { useLocation } from 'react-router'
 
@@ -11,5 +11,5 @@ export const useFrontendBaseUrl = (): string => {
   const location = window.location
   const cleanedPathName = location.pathname.replace(pathname, '')
 
-  return `${location.protocol}//${location.host}${cleanedPathName}`
+  return `${ location.protocol }//${ location.host }${ cleanedPathName }`
 }
diff --git a/src/index.tsx b/src/index.tsx
index 637a8baf8..2ba249ad2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -29,7 +29,7 @@ const EditorPage = React.lazy(() => import(/* webpackPrefetch: true */ './compon
 const RenderPage = React.lazy(() => import (/* webpackPrefetch: true */ './components/render-page/render-page'))
 
 ReactDOM.render(
-  <Provider store={store}>
+  <Provider store={ store }>
     <Router>
       <ApplicationLoader>
         <ErrorBoundary>
@@ -86,7 +86,7 @@ ReactDOM.render(
 )
 
 if (isTestMode()) {
-  console.log("This build runs in test mode. This means:\n - no sandboxed iframe")
+  console.log('This build runs in test mode. This means:\n - no sandboxed iframe')
 }
 
 // If you want your app to work offline and load faster, you can change
diff --git a/src/links.json b/src/links.json
index 8f16d10ee..669cec985 100644
--- a/src/links.json
+++ b/src/links.json
@@ -1,9 +1,9 @@
 {
-    "chat": "https://matrix.to/#/#hedgedoc:matrix.org",
-    "community": "https://community.hedgedoc.org",
-    "faq": "https://hedgedoc.org/faq/",
-    "githubOrg": "https://github.com/hedgedoc/",
-    "mastodon": "https://social.hedgedoc.org",
-    "translate": "https://translate.hedgedoc.org",
-    "webpage": "https://hedgedoc.org"
+  "chat": "https://matrix.to/#/#hedgedoc:matrix.org",
+  "community": "https://community.hedgedoc.org",
+  "faq": "https://hedgedoc.org/faq/",
+  "githubOrg": "https://github.com/hedgedoc/",
+  "mastodon": "https://social.hedgedoc.org",
+  "translate": "https://translate.hedgedoc.org",
+  "webpage": "https://hedgedoc.org"
 }
diff --git a/src/redux/editor/methods.ts b/src/redux/editor/methods.ts
index 995a9800c..9c64d2742 100644
--- a/src/redux/editor/methods.ts
+++ b/src/redux/editor/methods.ts
@@ -58,7 +58,7 @@ export const setEditorLigatures = (ligatures: boolean): void => {
     type: EditorConfigActionType.SET_LIGATURES,
     ligatures: ligatures
   }
-  store.dispatch(action);
+  store.dispatch(action)
 }
 
 export const mergeEditorPreferences = (preferences: EditorConfiguration): void => {
diff --git a/src/redux/note-details/reducers.ts b/src/redux/note-details/reducers.ts
index f00af6d4d..a2a6a0aab 100644
--- a/src/redux/note-details/reducers.ts
+++ b/src/redux/note-details/reducers.ts
@@ -91,7 +91,7 @@ const setCheckboxInMarkdownContent = (markdownContent: string, lineInMarkdown: n
   if (results) {
     const before = results[1]
     const after = results[3]
-    lines[lineInMarkdown] = `${before}[${checked ? 'x' : ' '}]${after}`
+    lines[lineInMarkdown] = `${ before }[${ checked ? 'x' : ' ' }]${ after }`
     return lines.join('\n')
   }
   return markdownContent
diff --git a/src/service-worker-registration.ts b/src/service-worker-registration.ts
index 6a9540344..d1e7b4324 100644
--- a/src/service-worker-registration.ts
+++ b/src/service-worker-registration.ts
@@ -31,7 +31,7 @@ type Config = {
   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 };
 
-export function register (config?: Config): void {
+export function register(config?: Config): void {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
@@ -43,7 +43,7 @@ export function register (config?: Config): void {
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+      const swUrl = `${ process.env.PUBLIC_URL }/service-worker.js`
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.
@@ -56,7 +56,8 @@ export function register (config?: Config): void {
             'This web app is being served cache-first by a service ' +
             'worker. To learn more, visit https://cra.link/PWA'
           )
-        }).catch((error: Error) => console.error(error))
+        })
+                 .catch((error: Error) => console.error(error))
       } else {
         // Is not localhost. Just register service worker
         registerValidSW(swUrl, config)
@@ -65,70 +66,73 @@ export function register (config?: Config): void {
   }
 }
 
-function registerValidSW (swUrl: string, config?: Config) {
+function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
-    .register(swUrl)
-    .then((registration) => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing
-        if (installingWorker == null) {
-          return
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-            // At this point, the updated precached content has been fetched,
-            // but the previous service worker will still serve the older
-            // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-              'tabs for this page are closed. See https://cra.link/PWA.'
-              )
+           .register(swUrl)
+           .then((registration) => {
+             registration.onupdatefound = () => {
+               const installingWorker = registration.installing
+               if (installingWorker == null) {
+                 return
+               }
+               installingWorker.onstatechange = () => {
+                 if (installingWorker.state === 'installed') {
+                   if (navigator.serviceWorker.controller) {
+                     // At this point, the updated precached content has been fetched,
+                     // but the previous service worker will still serve the older
+                     // content until all client tabs are closed.
+                     console.log(
+                       'New content is available and will be used when all ' +
+                       'tabs for this page are closed. See https://cra.link/PWA.'
+                     )
 
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration)
-              }
-            } else {
-            // At this point, everything has been precached.
-            // It's the perfect time to display a
-            // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.')
+                     // Execute callback
+                     if (config && config.onUpdate) {
+                       config.onUpdate(registration)
+                     }
+                   } else {
+                     // At this point, everything has been precached.
+                     // It's the perfect time to display a
+                     // "Content is cached for offline use." message.
+                     console.log('Content is cached for offline use.')
 
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration)
-              }
-            }
-          }
-        }
-      }
-    })
-    .catch((error) => {
-      console.error('Error during service worker registration:', error)
-    })
+                     // Execute callback
+                     if (config && config.onSuccess) {
+                       config.onSuccess(registration)
+                     }
+                   }
+                 }
+               }
+             }
+           })
+           .catch((error) => {
+             console.error('Error during service worker registration:', error)
+           })
 }
 
-function checkValidServiceWorker (swUrl: string, config?: Config) {
+function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
     headers: { 'Service-Worker': 'script' }
   })
     .then((response) => {
-    // Ensure service worker exists, and that we really are getting a JS file.
+      // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type')
       if (
         response.status === 404 ||
-      (contentType != null && contentType.indexOf('javascript') === -1)
+        (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
-      // No service worker found. Probably a different app. Reload the page.
+        // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then((registration) => {
-          registration.unregister().then(() => {
-            window.location.reload()
-          }).catch((error: Error) => console.error(error))
-        }).catch((error: Error) => console.error(error))
+          registration.unregister()
+                      .then(() => {
+                        window.location.reload()
+                      })
+                      .catch((error: Error) => console.error(error))
+        })
+                 .catch((error: Error) => console.error(error))
       } else {
-      // Service worker found. Proceed as normal.
+        // Service worker found. Proceed as normal.
         registerValidSW(swUrl, config)
       }
     })
@@ -137,14 +141,15 @@ function checkValidServiceWorker (swUrl: string, config?: Config) {
     })
 }
 
-export function unregister (): void {
+export function unregister(): void {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready
-      .then((registration) => {
-        registration.unregister().catch((error: Error) => console.error(error))
-      })
-      .catch((error:Error) => {
-        console.error(error.message)
-      })
+             .then((registration) => {
+               registration.unregister()
+                           .catch((error: Error) => console.error(error))
+             })
+             .catch((error: Error) => {
+               console.error(error.message)
+             })
   }
 }
diff --git a/src/service-worker.ts b/src/service-worker.ts
index b50655f24..ab619f585 100644
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -16,7 +16,7 @@
 
 import { clientsClaim } from 'workbox-core'
 import { ExpirationPlugin } from 'workbox-expiration'
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'
+import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { registerRoute } from 'workbox-routing'
 import { StaleWhileRevalidate } from 'workbox-strategies'
 
@@ -80,7 +80,8 @@ registerRoute(
 self.addEventListener('message', (event) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting().catch((e) => console.error(e))
+    self.skipWaiting()
+        .catch((e) => console.error(e))
   }
 })
 
diff --git a/src/style/bootstrap-color-theme/_buttons.scss b/src/style/bootstrap-color-theme/_buttons.scss
index 6a032b4bb..d0843cffb 100644
--- a/src/style/bootstrap-color-theme/_buttons.scss
+++ b/src/style/bootstrap-color-theme/_buttons.scss
@@ -67,5 +67,6 @@
   &.disabled {
     color: $btn-link-disabled-color;
   }
+
   // No need for an active state here
 }
diff --git a/src/style/bootstrap-color-theme/_card.scss b/src/style/bootstrap-color-theme/_card.scss
index ce7fc8323..6e2292dd9 100644
--- a/src/style/bootstrap-color-theme/_card.scss
+++ b/src/style/bootstrap-color-theme/_card.scss
@@ -23,7 +23,7 @@
 //
 
 .card-header {
-   color: $card-cap-color;
+  color: $card-cap-color;
   background-color: $card-cap-bg;
   border-bottom-color: $card-border-color;
 }
diff --git a/src/style/bootstrap-color-theme/_code.scss b/src/style/bootstrap-color-theme/_code.scss
index 9335b0f66..02de9dfb2 100644
--- a/src/style/bootstrap-color-theme/_code.scss
+++ b/src/style/bootstrap-color-theme/_code.scss
@@ -18,6 +18,7 @@ kbd {
 // Blocks of code
 pre {
   color: $pre-color;
+
   code {
     color: inherit;
   }
diff --git a/src/style/bootstrap-color-theme/_navbar.scss b/src/style/bootstrap-color-theme/_navbar.scss
index 032a4c8f7..2a814e16b 100644
--- a/src/style/bootstrap-color-theme/_navbar.scss
+++ b/src/style/bootstrap-color-theme/_navbar.scss
@@ -51,6 +51,7 @@
 
   .navbar-text {
     color: $navbar-light-color;
+
     a {
       color: $navbar-light-active-color;
 
@@ -99,6 +100,7 @@
 
   .navbar-text {
     color: $navbar-dark-color;
+
     a {
       color: $navbar-dark-active-color;
 
diff --git a/src/style/bootstrap-color-theme/_popover.scss b/src/style/bootstrap-color-theme/_popover.scss
index 1515eb87c..189111ed3 100644
--- a/src/style/bootstrap-color-theme/_popover.scss
+++ b/src/style/bootstrap-color-theme/_popover.scss
@@ -62,12 +62,15 @@
   &[x-placement^="top"] {
     @extend .bs-popover-top;
   }
+
   &[x-placement^="right"] {
     @extend .bs-popover-right;
   }
+
   &[x-placement^="bottom"] {
     @extend .bs-popover-bottom;
   }
+
   &[x-placement^="left"] {
     @extend .bs-popover-left;
   }
diff --git a/src/style/bootstrap-color-theme/_tables.scss b/src/style/bootstrap-color-theme/_tables.scss
index ef2fac135..afe396099 100644
--- a/src/style/bootstrap-color-theme/_tables.scss
+++ b/src/style/bootstrap-color-theme/_tables.scss
@@ -27,7 +27,6 @@
 }
 
 
-
 // Border versions
 //
 // Add or remove borders all around the table and between all the columns.
diff --git a/src/style/bootstrap-color-theme/_tooltip.scss b/src/style/bootstrap-color-theme/_tooltip.scss
index ed39afe45..df3620079 100644
--- a/src/style/bootstrap-color-theme/_tooltip.scss
+++ b/src/style/bootstrap-color-theme/_tooltip.scss
@@ -40,12 +40,15 @@
   &[x-placement^="top"] {
     @extend .bs-tooltip-top;
   }
+
   &[x-placement^="right"] {
     @extend .bs-tooltip-right;
   }
+
   &[x-placement^="bottom"] {
     @extend .bs-tooltip-bottom;
   }
+
   &[x-placement^="left"] {
     @extend .bs-tooltip-left;
   }
diff --git a/src/style/bootstrap-color-theme/utilities/_borders.scss b/src/style/bootstrap-color-theme/utilities/_borders.scss
index 8272607c1..7b860ad31 100644
--- a/src/style/bootstrap-color-theme/utilities/_borders.scss
+++ b/src/style/bootstrap-color-theme/utilities/_borders.scss
@@ -10,11 +10,25 @@
 // Border
 //
 
-.border         { border-color: $border-color !important; }
-.border-top     { border-top-color: $border-color !important; }
-.border-right   { border-right-color: $border-color !important; }
-.border-bottom  { border-bottom-color: $border-color !important; }
-.border-left    { border-left-color: $border-color !important; }
+.border {
+  border-color: $border-color !important;
+}
+
+.border-top {
+  border-top-color: $border-color !important;
+}
+
+.border-right {
+  border-right-color: $border-color !important;
+}
+
+.border-bottom {
+  border-bottom-color: $border-color !important;
+}
+
+.border-left {
+  border-left-color: $border-color !important;
+}
 
 @each $color, $value in $theme-colors {
   .border-#{$color} {
diff --git a/src/style/bootstrap-color-theme/utilities/_text.scss b/src/style/bootstrap-color-theme/utilities/_text.scss
index 7548898c0..be6cc6aac 100644
--- a/src/style/bootstrap-color-theme/utilities/_text.scss
+++ b/src/style/bootstrap-color-theme/utilities/_text.scss
@@ -6,14 +6,26 @@
 
 // Contextual colors
 
-.text-white { color: $white !important; }
+.text-white {
+  color: $white !important;
+}
 
 @each $color, $value in $theme-colors {
   @include text-emphasis-variant(".text-#{$color}", $value, true);
 }
 
-.text-body { color: $body-color !important; }
-.text-muted { color: $text-muted !important; }
+.text-body {
+  color: $body-color !important;
+}
 
-.text-black-50 { color: rgba($black, .5) !important; }
-.text-white-50 { color: rgba($white, .5) !important; }
+.text-muted {
+  color: $text-muted !important;
+}
+
+.text-black-50 {
+  color: rgba($black, .5) !important;
+}
+
+.text-white-50 {
+  color: rgba($white, .5) !important;
+}
diff --git a/src/style/variables.light.scss b/src/style/variables.light.scss
index 9f6ae3299..a89033239 100644
--- a/src/style/variables.light.scss
+++ b/src/style/variables.light.scss
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-$blue:    #337ab7 !default;
-$cyan:    #5EB7E0 !default;
+$blue: #337ab7 !default;
+$cyan: #5EB7E0 !default;
 
 @import "../../node_modules/bootstrap/scss/functions";
 @import "../../node_modules/bootstrap/scss/mixins";