refactor: organize app extensions

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

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

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { allAppExtensions } from '../../../../extensions/extra-integrations/all-app-extensions'
+import { allAppExtensions } from '../../../../extensions/all-app-extensions'
 import type { CheatsheetEntry, CheatsheetExtension } from '../../cheatsheet/cheatsheet-extension'
 import { isCheatsheetGroup } from '../../cheatsheet/cheatsheet-extension'
 import { CategoryAccordion } from './category-accordion'
@@ -25,10 +25,7 @@ export const CheatsheetContent: React.FC = () => {
     setSelectedEntry(isCheatsheetGroup(value) ? value.entries[0] : value)
   }, [])
 
-  const extensions = useMemo(
+  const extensions = useMemo(() => allAppExtensions.flatMap((extension) => extension.buildCheatsheetExtensions()), [])
-    () => allAppExtensions.flatMap((extension) => extension.buildCheatsheetExtensions()),
-    []
-  )
 
   return (
     <Row className={`mt-2`}>

frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-entry-pane.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import HighlightedCode from '../../../../extensions/extra-integrations/highlighted-code-fence/highlighted-code'
+import HighlightedCode from '../../../common/highlighted-code/highlighted-code'
 import { HtmlToReact } from '../../../common/html-to-react/html-to-react'
 import { ExtensionEventEmitterProvider } from '../../../markdown-renderer/hooks/use-extension-event-emitter'
 import { RendererType } from '../../../render-page/window-post-message-communicator/rendering-message'

frontend/src/components/editor-page/app-bar/cheatsheet/use-components-from-app-extensions.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { allAppExtensions } from '../../../../extensions/extra-integrations/all-app-extensions'
+import { allAppExtensions } from '../../../../extensions/all-app-extensions'
 import type { CheatsheetExtensionComponentProps } from '../../cheatsheet/cheatsheet-extension'
 import { isCheatsheetGroup } from '../../cheatsheet/cheatsheet-extension'
 import type { ReactElement } from 'react'

frontend/src/components/editor-page/editor-pane/editor-pane.tsx

@@ -8,7 +8,7 @@ import { ORIGIN, useBaseUrl } from '../../../hooks/common/use-base-url'
 import { useDarkModeState } from '../../../hooks/common/use-dark-mode-state'
 import { useMayEdit } from '../../../hooks/common/use-may-edit'
 import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
-import { findLanguageByCodeBlockName } from '../../markdown-renderer/extensions/base/code-block-markdown-extension/find-language-by-code-block-name'
+import { findLanguageByCodeBlockName } from '../../markdown-renderer/extensions/_base-classes/code-block-markdown-extension/find-language-by-code-block-name'
 import type { ScrollProps } from '../synced-scroll/scroll-props'
 import styles from './extended-codemirror/codemirror.module.scss'
 import { useCodeMirrorAutocompletionsExtension } from './hooks/codemirror-extensions/use-code-mirror-autocompletions-extension'

frontend/src/components/editor-page/editor-pane/hooks/codemirror-extensions/use-code-mirror-autocompletions-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { allAppExtensions } from '../../../../../extensions/extra-integrations/all-app-extensions'
+import { allAppExtensions } from '../../../../../extensions/all-app-extensions'
 import { autocompletion } from '@codemirror/autocomplete'
 import type { Extension } from '@codemirror/state'
 import { useMemo } from 'react'

frontend/src/components/editor-page/editor-pane/hooks/use-components-from-app-extensions.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { allAppExtensions } from '../../../../extensions/extra-integrations/all-app-extensions'
+import { allAppExtensions } from '../../../../extensions/all-app-extensions'
 import type { ReactElement } from 'react'
 import React, { Fragment, useMemo } from 'react'
 

frontend/src/components/editor-page/editor-pane/linter/linter.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { allAppExtensions } from '../../../../extensions/extra-integrations/all-app-extensions'
+import { allAppExtensions } from '../../../../extensions/all-app-extensions'
 import { useDarkModeState } from '../../../../hooks/common/use-dark-mode-state'
 import { FrontmatterLinter } from './frontmatter-linter'
 import type { Diagnostic } from '@codemirror/lint'

frontend/src/components/markdown-renderer/extensions/debugger-markdown-extension.ts

@@ -5,7 +5,7 @@
  */
 import { Logger } from '../../../utils/logger'
 import { isDevMode } from '../../../utils/test-modes'
-import { MarkdownRendererExtension } from './base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from './_base-classes/markdown-renderer-extension'
 import type MarkdownIt from 'markdown-it'
 
 const log = new Logger('DebuggerMarkdownExtension')

frontend/src/components/markdown-renderer/extensions/image/proxy-image-markdown-extension.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { ComponentReplacer } from '../../replace-components/component-replacer'
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../_base-classes/markdown-renderer-extension'
 import { ProxyImageReplacer } from './proxy-image-replacer'
 
 /**

frontend/src/components/markdown-renderer/extensions/linemarker/linemarker-markdown-extension.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { ComponentReplacer } from '../../replace-components/component-replacer'
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../_base-classes/markdown-renderer-extension'
 import type { LineMarkers } from './add-line-marker-markdown-it-plugin'
 import { addLineMarkerMarkdownItPlugin } from './add-line-marker-markdown-it-plugin'
 import { LinemarkerReplacer } from './linemarker-replacer'

frontend/src/components/markdown-renderer/extensions/link-replacer/link-adjustment-markdown-extension.ts

@@ -5,7 +5,7 @@
  */
 import type { NodeProcessor } from '../../node-preprocessors/node-processor'
 import type { ComponentReplacer } from '../../replace-components/component-replacer'
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../_base-classes/markdown-renderer-extension'
 import { AnchorNodePreprocessor } from './anchor-node-preprocessor'
 import { JumpAnchorReplacer } from './jump-anchor-replacer'
 

frontend/src/components/markdown-renderer/extensions/linkify-fix/linkify-fix-markdown-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../_base-classes/markdown-renderer-extension'
 import type MarkdownIt from 'markdown-it'
 import linkify from 'markdown-it/lib/rules_core/linkify'
 import tlds from 'tlds'

frontend/src/components/markdown-renderer/extensions/reveal/reveal-markdown-extension.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { NodeProcessor } from '../../node-preprocessors/node-processor'
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../_base-classes/markdown-renderer-extension'
 import { RevealCommentCommandNodePreprocessor } from './process-reveal-comment-nodes'
 import { addSlideSectionsMarkdownItPlugin } from './reveal-sections'
 import type MarkdownIt from 'markdown-it'

frontend/src/components/markdown-renderer/extensions/upload-indicating-image-frame/upload-indicating-frame.tsx

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { usePlaceholderSizeStyle } from '../../../../extensions/essential-app-extensions/image-placeholder/hooks/use-placeholder-size-style'
 import { UiIcon } from '../../../common/icons/ui-icon'
-import { usePlaceholderSizeStyle } from '../image-placeholder/hooks/use-placeholder-size-style'
 import React from 'react'
 import { GearFill as IconGearFill } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'

frontend/src/components/markdown-renderer/extensions/upload-indicating-image-frame/upload-indicating-image-frame-markdown-extension.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { ComponentReplacer } from '../../replace-components/component-replacer'
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../_base-classes/markdown-renderer-extension'
 import { UploadIndicatingImageFrameReplacer } from './upload-indicating-image-frame-replacer'
 
 /**

frontend/src/components/markdown-renderer/hooks/use-markdown-extensions.ts

@@ -3,10 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { allAppExtensions } from '../../../extensions/extra-integrations/all-app-extensions'
+import { allAppExtensions } from '../../../extensions/all-app-extensions'
 import { useFrontendConfig } from '../../common/frontend-config-context/use-frontend-config'
 import type { RendererType } from '../../render-page/window-post-message-communicator/rendering-message'
-import type { MarkdownRendererExtension } from '../extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../extensions/_base-classes/markdown-renderer-extension'
 import { DebuggerMarkdownExtension } from '../extensions/debugger-markdown-extension'
 import { ProxyImageMarkdownExtension } from '../extensions/image/proxy-image-markdown-extension'
 import { LinkAdjustmentMarkdownExtension } from '../extensions/link-replacer/link-adjustment-markdown-extension'

frontend/src/components/markdown-renderer/markdown-to-react/hooks/use-combined-node-preprocessor.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { MarkdownRendererExtension } from '../../extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../../extensions/_base-classes/markdown-renderer-extension'
 import type { Document } from 'domhandler'
 import { useMemo } from 'react'
 

frontend/src/components/markdown-renderer/markdown-to-react/hooks/use-configured-markdown-it.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { MarkdownRendererExtension } from '../../extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../../extensions/_base-classes/markdown-renderer-extension'
 import MarkdownIt from 'markdown-it/lib'
 import { useMemo } from 'react'
 

frontend/src/components/markdown-renderer/markdown-to-react/markdown-to-react.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { HtmlToReact } from '../../common/html-to-react/html-to-react'
-import type { MarkdownRendererExtension } from '../extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../extensions/_base-classes/markdown-renderer-extension'
 import { useCombinedNodePreprocessor } from './hooks/use-combined-node-preprocessor'
 import { useConfiguredMarkdownIt } from './hooks/use-configured-markdown-it'
 import { LineContentToLineIdMapper } from './utils/line-content-to-line-id-mapper'

frontend/src/components/markdown-renderer/markdown-to-react/test-utils/test-markdown-renderer-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MarkdownRendererExtension } from '../../extensions/base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../../extensions/_base-classes/markdown-renderer-extension'
 import type { NodeProcessor } from '../../node-preprocessors/node-processor'
 import type { ComponentReplacer } from '../../replace-components/component-replacer'
 import { TestNodeProcessor } from './test-node-processor'

frontend/src/components/markdown-renderer/test-utils/test-markdown-renderer.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { StoreProvider } from '../../../redux/store-provider'
-import type { MarkdownRendererExtension } from '../extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../extensions/_base-classes/markdown-renderer-extension'
 import { MarkdownToReact } from '../markdown-to-react/markdown-to-react'
 import React, { useMemo } from 'react'
 

frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx

@@ -5,7 +5,6 @@
  */
 import { cypressId } from '../../../../utils/cypress-attribute'
 import type { ScrollProps } from '../../../editor-page/synced-scroll/scroll-props'
-import { HeadlineAnchorsMarkdownExtension } from '../../../markdown-renderer/extensions/headline-anchors-markdown-extension'
 import type { LineMarkers } from '../../../markdown-renderer/extensions/linemarker/add-line-marker-markdown-it-plugin'
 import { LinemarkerMarkdownExtension } from '../../../markdown-renderer/extensions/linemarker/linemarker-markdown-extension'
 import { useCalculateLineMarkerPosition } from '../../../markdown-renderer/hooks/use-calculate-line-marker-positions'
@@ -69,13 +68,7 @@ export const DocumentMarkdownRenderer: React.FC<DocumentMarkdownRendererProps> =
   const extensions = useMarkdownExtensions(
     baseUrl,
     RendererType.DOCUMENT,
-    useMemo(
+    useMemo(() => [new LinemarkerMarkdownExtension((values) => (currentLineMarkers.current = values))], [])
-      () => [
-        new HeadlineAnchorsMarkdownExtension(),
-        new LinemarkerMarkdownExtension((values) => (currentLineMarkers.current = values))
-      ],
-      []
-    )
   )
   useCalculateLineMarkerPosition(markdownBodyRef, currentLineMarkers.current, recalculateLineMarkers)
 

frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { TableOfContentsMarkdownExtension } from '../../../markdown-renderer/extensions/table-of-contents/table-of-contents-markdown-extension'
+import { TableOfContentsMarkdownExtension } from '../../../../extensions/essential-app-extensions/table-of-contents/table-of-contents-markdown-extension'
 import { useExtensionEventEmitterHandler } from '../../../markdown-renderer/hooks/use-extension-event-emitter'
 import styles from './markdown-document.module.scss'
 import { WidthBasedTableOfContents } from './width-based-table-of-contents'

frontend/src/extensions/_base-classes/app-extension.ts

@@ -6,7 +6,7 @@
 import type { FrontendConfig } from '../../api/config/types'
 import type { CheatsheetExtension } from '../../components/editor-page/cheatsheet/cheatsheet-extension'
 import type { Linter } from '../../components/editor-page/editor-pane/linter/linter'
-import type { MarkdownRendererExtension } from '../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
 import type { RendererType } from '../../components/render-page/window-post-message-communicator/rendering-message'
 import type { CompletionSource } from '@codemirror/autocomplete'
 import type { EventEmitter2 } from 'eventemitter2'

frontend/src/extensions/all-app-extensions.ts

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { AppExtension } from './_base-classes/app-extension'
+import { essentialAppExtensions } from './essential-app-extensions/essential-app-extensions'
+import { externalLibAppExtensions } from './external-lib-app-extensions/external-lib-app-extensions'
+
+export const allAppExtensions: AppExtension[] = [...essentialAppExtensions, ...externalLibAppExtensions]

frontend/src/extensions/essential-app-extensions/alert/alert-app-extension.ts

@@ -5,8 +5,8 @@
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
 import { basicCompletion } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
-import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import { AppExtension } from '../../base/app-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { AlertMarkdownExtension } from './alert-markdown-extension'
 import type { CompletionSource } from '@codemirror/autocomplete'
 import { t } from 'i18next'

frontend/src/extensions/essential-app-extensions/alert/alert-markdown-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
 import type MarkdownIt from 'markdown-it'
 import markdownItContainer from 'markdown-it-container'
 import type Renderer from 'markdown-it/lib/renderer'

frontend/src/extensions/essential-app-extensions/basic-markdown-syntax/basic-markdown-syntax-app-extension.ts

@@ -3,10 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { AppExtension } from '../../../../extensions/base/app-extension'
+import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
-import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
+import { basicCompletion } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
-import { basicCompletion } from '../../../editor-page/editor-pane/autocompletions/basic-completion'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { BasicMarkdownSyntaxMarkdownExtension } from './basic-markdown-syntax-markdown-extension'
 import type { CompletionSource } from '@codemirror/autocomplete'
 import { t } from 'i18next'

frontend/src/extensions/essential-app-extensions/basic-markdown-syntax/basic-markdown-syntax-markdown-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
 import { imageSize } from '@hedgedoc/markdown-it-plugins'
 import type MarkdownIt from 'markdown-it'
 import abbreviation from 'markdown-it-abbr'

frontend/src/extensions/essential-app-extensions/blockquote/blockquote-app-extension.ts

@@ -5,8 +5,8 @@
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
 import { basicCompletion } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
-import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import { AppExtension } from '../../base/app-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { BlockquoteExtraTagMarkdownExtension } from './blockquote-extra-tag-markdown-extension'
 import type { CompletionSource } from '@codemirror/autocomplete'
 import { t } from 'i18next'

frontend/src/extensions/essential-app-extensions/blockquote/blockquote-extra-tag-markdown-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
 import type { NodeProcessor } from '../../../components/markdown-renderer/node-preprocessors/node-processor'
 import type { ComponentReplacer } from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { BlockquoteBorderColorNodePreprocessor } from './blockquote-border-color-node-preprocessor'

frontend/src/extensions/essential-app-extensions/bootstrap-icons/bootstrap-icon-app-extension.ts

@@ -3,11 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { AppExtension } from '../../../../extensions/base/app-extension'
+import { BootstrapLazyIcons } from '../../../components/common/icons/bootstrap-icons'
-import { BootstrapLazyIcons } from '../../../common/icons/bootstrap-icons'
+import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
-import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
+import { regexCompletion } from '../../../components/editor-page/editor-pane/autocompletions/regex-completion'
-import { regexCompletion } from '../../../editor-page/editor-pane/autocompletions/regex-completion'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { BootstrapIconMarkdownExtension } from './bootstrap-icon-markdown-extension'
 import type { CompletionSource } from '@codemirror/autocomplete'
 import { t } from 'i18next'

frontend/src/extensions/essential-app-extensions/bootstrap-icons/bootstrap-icon-component-replacer.ts

@@ -3,10 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { isBootstrapIconName } from '../../../common/icons/bootstrap-icons'
+import { isBootstrapIconName } from '../../../components/common/icons/bootstrap-icons'
-import { LazyBootstrapIcon } from '../../../common/icons/lazy-bootstrap-icon'
+import { LazyBootstrapIcon } from '../../../components/common/icons/lazy-bootstrap-icon'
-import type { NodeReplacement } from '../../replace-components/component-replacer'
+import type { NodeReplacement } from '../../../components/markdown-renderer/replace-components/component-replacer'
-import { ComponentReplacer, DO_NOT_REPLACE } from '../../replace-components/component-replacer'
+import {
+  ComponentReplacer,
+  DO_NOT_REPLACE
+} from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { BootstrapIconMarkdownExtension } from './bootstrap-icon-markdown-extension'
 import type { Element } from 'domhandler'
 import React from 'react'

frontend/src/extensions/essential-app-extensions/bootstrap-icons/bootstrap-icon-markdown-extension.ts

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { ComponentReplacer } from '../../replace-components/component-replacer'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import type { ComponentReplacer } from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { BootstrapIconComponentReplacer } from './bootstrap-icon-component-replacer'
 import { replaceBootstrapIconsMarkdownItPlugin } from './replace-bootstrap-icons'
 import type MarkdownIt from 'markdown-it'

frontend/src/extensions/essential-app-extensions/bootstrap-icons/replace-bootstrap-icons.ts

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { RegexOptions } from '../../../../external-types/markdown-it-regex/interface'
+import { isBootstrapIconName } from '../../../components/common/icons/bootstrap-icons'
-import { isBootstrapIconName } from '../../../common/icons/bootstrap-icons'
+import type { RegexOptions } from '../../../external-types/markdown-it-regex/interface'
 import { BootstrapIconMarkdownExtension } from './bootstrap-icon-markdown-extension'
 import type MarkdownIt from 'markdown-it'
 import markdownItRegex from 'markdown-it-regex'

frontend/src/extensions/essential-app-extensions/csv/csv-table-app-extension.ts

@@ -8,8 +8,8 @@ import {
   basicCompletion,
   codeFenceRegex
 } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
-import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import { AppExtension } from '../../base/app-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { CsvTableMarkdownExtension } from './csv-table-markdown-extension'
 import type { CompletionSource } from '@codemirror/autocomplete'
 

frontend/src/extensions/essential-app-extensions/csv/csv-table-markdown-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
 import type { ComponentReplacer } from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { CsvReplacer } from './csv-replacer'
 

frontend/src/extensions/essential-app-extensions/emoji/emoji-app-extension.ts

@@ -3,18 +3,18 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { AppExtension } from '../../../../extensions/base/app-extension'
+import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
-import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
+import { regexCompletion } from '../../../components/editor-page/editor-pane/autocompletions/regex-completion'
-import { regexCompletion } from '../../../editor-page/editor-pane/autocompletions/regex-completion'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
-import { EmojiMarkdownExtension } from './emoji-markdown-extension'
+import { EmojiMarkdownRendererExtension } from './emoji-markdown-renderer-extension'
 import { emojiShortcodes } from './mapping'
 import type { CompletionSource } from '@codemirror/autocomplete'
 import { t } from 'i18next'
 
 export class EmojiAppExtension extends AppExtension {
   buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
-    return [new EmojiMarkdownExtension()]
+    return [new EmojiMarkdownRendererExtension()]
   }
 
   buildCheatsheetExtensions(): CheatsheetExtension[] {

frontend/src/extensions/essential-app-extensions/emoji/emoji-markdown-extension.spec.tsx

@@ -3,9 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { mockI18n } from '../../../../test-utils/mock-i18n'
+import { TestMarkdownRenderer } from '../../../components/markdown-renderer/test-utils/test-markdown-renderer'
-import { TestMarkdownRenderer } from '../../test-utils/test-markdown-renderer'
+import { mockI18n } from '../../../test-utils/mock-i18n'
-import { EmojiMarkdownExtension } from './emoji-markdown-extension'
+import { EmojiMarkdownRendererExtension } from './emoji-markdown-renderer-extension'
 import { render } from '@testing-library/react'
 import React from 'react'
 
@@ -20,12 +20,16 @@ describe('Emoji Markdown Extension', () => {
   })
 
   it('renders an emoji code', () => {
-    const view = render(<TestMarkdownRenderer extensions={[new EmojiMarkdownExtension()]} content={':smile:'} />)
+    const view = render(
+      <TestMarkdownRenderer extensions={[new EmojiMarkdownRendererExtension()]} content={':smile:'} />
+    )
     expect(view.container).toMatchSnapshot()
   })
 
   it('renders a skin tone code', () => {
-    const view = render(<TestMarkdownRenderer extensions={[new EmojiMarkdownExtension()]} content={':skin-tone-3:'} />)
+    const view = render(
+      <TestMarkdownRenderer extensions={[new EmojiMarkdownRendererExtension()]} content={':skin-tone-3:'} />
+    )
     expect(view.container).toMatchSnapshot()
   })
 })

frontend/src/extensions/essential-app-extensions/emoji/emoji-markdown-renderer-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
 import { combinedEmojiData } from './mapping'
 import type MarkdownIt from 'markdown-it'
 import emoji from 'markdown-it-emoji/bare'
@@ -11,7 +11,7 @@ import emoji from 'markdown-it-emoji/bare'
 /**
  * Adds support for utf-8 emojis.
  */
-export class EmojiMarkdownExtension extends MarkdownRendererExtension {
+export class EmojiMarkdownRendererExtension extends MarkdownRendererExtension {
   public configureMarkdownIt(markdownIt: MarkdownIt): void {
     markdownIt.use(emoji, {
       defs: combinedEmojiData

frontend/src/extensions/essential-app-extensions/essential-app-extensions.ts

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { AlertAppExtension } from './alert/alert-app-extension'
+import { BasicMarkdownSyntaxAppExtension } from './basic-markdown-syntax/basic-markdown-syntax-app-extension'
+import { BlockquoteAppExtension } from './blockquote/blockquote-app-extension'
+import { BootstrapIconAppExtension } from './bootstrap-icons/bootstrap-icon-app-extension'
+import { CsvTableAppExtension } from './csv/csv-table-app-extension'
+import { EmojiAppExtension } from './emoji/emoji-app-extension'
+import { ExtractFirstHeadlineAppExtension } from './extract-first-headline/extract-first-headline-app-extension'
+import { ForkAwesomeHtmlTagAppExtension } from './fork-awesome-html-tag/fork-awesome-html-tag-app-extension'
+import { HeadlineAnchorsAppExtension } from './headline-anchors/headline-anchors-app-extension'
+import { HighlightedCodeFenceAppExtension } from './highlighted-code-fence/highlighted-code-fence-app-extension'
+import { IframeCapsuleAppExtension } from './iframe-capsule/iframe-capsule-app-extension'
+import { ImagePlaceholderAppExtension } from './image-placeholder/image-placeholder-app-extension'
+import { LegacyShortcodesAppExtension } from './legacy-short-codes/legacy-shortcodes-app-extension'
+import { SpoilerAppExtension } from './spoiler/spoiler-app-extension'
+import { TableOfContentsAppExtension } from './table-of-contents/table-of-contents-app-extension'
+import { TaskListCheckboxAppExtension } from './task-list/task-list-checkbox-app-extension'
+
+export const essentialAppExtensions = [
+  new AlertAppExtension(),
+  new BasicMarkdownSyntaxAppExtension(),
+  new BlockquoteAppExtension(),
+  new BootstrapIconAppExtension(),
+  new CsvTableAppExtension(),
+  new EmojiAppExtension(),
+  new ExtractFirstHeadlineAppExtension(),
+  new ForkAwesomeHtmlTagAppExtension(),
+  new HighlightedCodeFenceAppExtension(),
+  new IframeCapsuleAppExtension(),
+  new ImagePlaceholderAppExtension(),
+  new LegacyShortcodesAppExtension(),
+  new SpoilerAppExtension(),
+  new TableOfContentsAppExtension(),
+  new TaskListCheckboxAppExtension(),
+  new HeadlineAnchorsAppExtension()
+]

frontend/src/extensions/essential-app-extensions/extract-first-headline/extract-first-headline-app-extension.ts

@@ -3,10 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { MarkdownRendererExtensionOptions } from '../../../../extensions/base/app-extension'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import { AppExtension } from '../../../../extensions/base/app-extension'
+import { RendererType } from '../../../components/render-page/window-post-message-communicator/rendering-message'
-import { RendererType } from '../../../render-page/window-post-message-communicator/rendering-message'
+import type { MarkdownRendererExtensionOptions } from '../../_base-classes/app-extension'
-import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { ExtractFirstHeadlineEditorExtension } from './extract-first-headline-editor-extension'
 import { ExtractFirstHeadlineMarkdownExtension } from './extract-first-headline-markdown-extension'
 

frontend/src/extensions/essential-app-extensions/extract-first-headline/extract-first-headline-editor-extension.tsx

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { updateNoteTitleByFirstHeading } from '../../../../redux/note-details/methods'
+import { useExtensionEventEmitterHandler } from '../../../components/markdown-renderer/hooks/use-extension-event-emitter'
-import { useExtensionEventEmitterHandler } from '../../hooks/use-extension-event-emitter'
+import { updateNoteTitleByFirstHeading } from '../../../redux/note-details/methods'
 import { ExtractFirstHeadlineNodeProcessor } from './extract-first-headline-node-processor'
 import type React from 'react'
 

frontend/src/extensions/essential-app-extensions/extract-first-headline/extract-first-headline-markdown-extension.tsx

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { NodeProcessor } from '../../node-preprocessors/node-processor'
+import { EventMarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/event-markdown-renderer-extension'
-import { EventMarkdownRendererExtension } from '../base/event-markdown-renderer-extension'
+import type { NodeProcessor } from '../../../components/markdown-renderer/node-preprocessors/node-processor'
 import { ExtractFirstHeadlineNodeProcessor } from './extract-first-headline-node-processor'
 
 /**

frontend/src/extensions/essential-app-extensions/extract-first-headline/extract-first-headline-node-processor.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { NodeProcessor } from '../../node-preprocessors/node-processor'
+import { NodeProcessor } from '../../../components/markdown-renderer/node-preprocessors/node-processor'
 import { extractFirstHeading } from '@hedgedoc/commons'
 import { Optional } from '@mrdrogdrog/optional'
 import type { Document } from 'domhandler'

frontend/src/extensions/essential-app-extensions/fork-awesome-html-tag/fork-awesome-html-tag-app-extension.ts

@@ -5,7 +5,7 @@
  */
 import type { Linter } from '../../../components/editor-page/editor-pane/linter/linter'
 import { SingleLineRegexLinter } from '../../../components/editor-page/editor-pane/linter/single-line-regex-linter'
-import { AppExtension } from '../../base/app-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { t } from 'i18next'
 
 const forkAwesomeRegex = /<i class=["'][\w\s]*fa-[\w-]+[\w\s-]*["'][^>]*\/?>(?:<\/i>)?/

frontend/src/extensions/essential-app-extensions/headline-anchors/headline-anchors-app-extension.ts

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
+import { RendererType } from '../../../components/render-page/window-post-message-communicator/rendering-message'
+import type { MarkdownRendererExtensionOptions } from '../../_base-classes/app-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
+import { HeadlineAnchorsMarkdownRendererExtension } from './headline-anchors-markdown-renderer-extension'
+
+/**
+ * Provides anchor links for headlines
+ */
+export class HeadlineAnchorsAppExtension extends AppExtension {
+  buildMarkdownRendererExtensions(options: MarkdownRendererExtensionOptions): MarkdownRendererExtension[] {
+    return options.rendererType === RendererType.DOCUMENT ? [new HeadlineAnchorsMarkdownRendererExtension()] : []
+  }
+}

frontend/src/extensions/essential-app-extensions/headline-anchors/headline-anchors-markdown-renderer-extension.ts

@@ -1,16 +1,16 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MarkdownRendererExtension } from './base/markdown-renderer-extension'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
 import type MarkdownIt from 'markdown-it'
 import anchor from 'markdown-it-anchor'
 
 /**
  * Adds headline anchors to the markdown rendering.
  */
-export class HeadlineAnchorsMarkdownExtension extends MarkdownRendererExtension {
+export class HeadlineAnchorsMarkdownRendererExtension extends MarkdownRendererExtension {
   public configureMarkdownIt(markdownIt: MarkdownIt): void {
     anchor(markdownIt, {
       permalink: anchor.permalink.ariaHidden({

frontend/src/extensions/essential-app-extensions/highlighted-code-fence/highlighted-code-fence-app-extension.ts

@@ -5,8 +5,8 @@
  */
 import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
 import { codeFenceRegex } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
-import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import { AppExtension } from '../../base/app-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { HighlightedCodeMarkdownExtension } from './highlighted-code-markdown-extension'
 import type { CompletionSource } from '@codemirror/autocomplete'
 import type { CompletionContext, CompletionResult } from '@codemirror/autocomplete'

frontend/src/extensions/essential-app-extensions/highlighted-code-fence/highlighted-code-markdown-extension.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { CodeBlockMarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/code-block-markdown-extension/code-block-markdown-renderer-extension'
+import { CodeBlockMarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/code-block-markdown-extension/code-block-markdown-renderer-extension'
 import type { ComponentReplacer } from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { HighlightedCodeReplacer } from './highlighted-code-replacer'
 

frontend/src/extensions/essential-app-extensions/highlighted-code-fence/highlighted-code-replacer.tsx

@@ -3,12 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import HighlightedCode from '../../../components/common/highlighted-code/highlighted-code'
 import {
   ComponentReplacer,
   DO_NOT_REPLACE
 } from '../../../components/markdown-renderer/replace-components/component-replacer'
 import type { NodeReplacement } from '../../../components/markdown-renderer/replace-components/component-replacer'
-import { HighlightedCode } from './highlighted-code'
 import type { Element } from 'domhandler'
 import React from 'react'
 

frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-app-extension.ts

@@ -3,9 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { AppExtension } from '../../../../extensions/base/app-extension'
+import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
-import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { IframeCapsuleMarkdownExtension } from './iframe-capsule-markdown-extension'
 
 export class IframeCapsuleAppExtension extends AppExtension {

frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-markdown-extension.ts

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { ComponentReplacer } from '../../replace-components/component-replacer'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import type { ComponentReplacer } from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { IframeCapsuleReplacer } from './iframe-capsule-replacer'
 
 /**

frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-replacer.tsx

@@ -3,9 +3,16 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ClickShield } from '../../replace-components/click-shield/click-shield'
+import { ClickShield } from '../../../components/markdown-renderer/replace-components/click-shield/click-shield'
-import type { NativeRenderer, NodeReplacement, SubNodeTransform } from '../../replace-components/component-replacer'
+import type {
-import { ComponentReplacer, DO_NOT_REPLACE } from '../../replace-components/component-replacer'
+  NativeRenderer,
+  NodeReplacement,
+  SubNodeTransform
+} from '../../../components/markdown-renderer/replace-components/component-replacer'
+import {
+  ComponentReplacer,
+  DO_NOT_REPLACE
+} from '../../../components/markdown-renderer/replace-components/component-replacer'
 import type { Element } from 'domhandler'
 import React from 'react'
 import { Globe as IconGlobe } from 'react-bootstrap-icons'

frontend/src/extensions/essential-app-extensions/image-placeholder/hooks/use-on-image-upload.ts

@@ -3,10 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { Logger } from '../../../../../utils/logger'
+import { useRendererToEditorCommunicator } from '../../../../components/editor-page/render-context/renderer-to-editor-communicator-context-provider'
-import { FileContentFormat, readFile } from '../../../../../utils/read-file'
+import { CommunicationMessageType } from '../../../../components/render-page/window-post-message-communicator/rendering-message'
-import { useRendererToEditorCommunicator } from '../../../../editor-page/render-context/renderer-to-editor-communicator-context-provider'
+import { Logger } from '../../../../utils/logger'
-import { CommunicationMessageType } from '../../../../render-page/window-post-message-communicator/rendering-message'
+import { FileContentFormat, readFile } from '../../../../utils/read-file'
 import { useCallback } from 'react'
 
 const log = new Logger('useOnImageUpload')

frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder-app-extension.ts

@@ -3,10 +3,10 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { AppExtension } from '../../../../extensions/base/app-extension'
+import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
-import type { CheatsheetExtension } from '../../../editor-page/cheatsheet/cheatsheet-extension'
+import { basicCompletion } from '../../../components/editor-page/editor-pane/autocompletions/basic-completion'
-import { basicCompletion } from '../../../editor-page/editor-pane/autocompletions/basic-completion'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import type { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
 import { ImagePlaceholderMarkdownExtension } from './image-placeholder-markdown-extension'
 import type { CompletionSource } from '@codemirror/autocomplete'
 import { t } from 'i18next'

frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder-markdown-extension.ts

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { ComponentReplacer } from '../../replace-components/component-replacer'
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
-import { MarkdownRendererExtension } from '../base/markdown-renderer-extension'
+import type { ComponentReplacer } from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { addLineToPlaceholderImageTags } from './add-line-to-placeholder-image-tags'
 import { ImagePlaceholderReplacer } from './image-placeholder-replacer'
 import type MarkdownIt from 'markdown-it/lib'

frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder-replacer.tsx

@@ -3,8 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { NodeReplacement } from '../../replace-components/component-replacer'
+import type { NodeReplacement } from '../../../components/markdown-renderer/replace-components/component-replacer'
-import { ComponentReplacer, DO_NOT_REPLACE } from '../../replace-components/component-replacer'
+import {
+  ComponentReplacer,
+  DO_NOT_REPLACE
+} from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { ImagePlaceholder } from './image-placeholder'
 import { ImagePlaceholderMarkdownExtension } from './image-placeholder-markdown-extension'
 import type { Element } from 'domhandler'

frontend/src/extensions/essential-app-extensions/image-placeholder/image-placeholder.tsx

@@ -3,9 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { cypressId } from '../../../../utils/cypress-attribute'
+import { UiIcon } from '../../../components/common/icons/ui-icon'
-import { UiIcon } from '../../../common/icons/ui-icon'
+import { acceptedMimeTypes } from '../../../components/common/upload-image-mimetypes'
-import { acceptedMimeTypes } from '../../../common/upload-image-mimetypes'
+import { cypressId } from '../../../utils/cypress-attribute'
 import { useOnImageUpload } from './hooks/use-on-image-upload'
 import { usePlaceholderSizeStyle } from './hooks/use-placeholder-size-style'
 import styles from './image-placeholder.module.scss'