diff --git a/.changeset/heavy-falcons-act.md b/.changeset/heavy-falcons-act.md
new file mode 100644
index 000000000..c1b9d01ff
--- /dev/null
+++ b/.changeset/heavy-falcons-act.md
@@ -0,0 +1,7 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Removed locale control from mt-theme-provider.
+
+Controlling the local will still happen via vue-i18n
diff --git a/.changeset/neat-pumpkins-juggle.md b/.changeset/neat-pumpkins-juggle.md
new file mode 100644
index 000000000..21c5a3dcd
--- /dev/null
+++ b/.changeset/neat-pumpkins-juggle.md
@@ -0,0 +1,6 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Fixes a issue in the mt-modal that the toggling does not work when it is triggered outside the modal.
+Fixes a issue in the mt-modal that it does not work inside transformed elements. This was fixed by moving the modal to the body element using the native Teleport feature of Vue 3.
diff --git a/.changeset/wise-melons-smash.md b/.changeset/wise-melons-smash.md
new file mode 100644
index 000000000..a7400e456
--- /dev/null
+++ b/.changeset/wise-melons-smash.md
@@ -0,0 +1,11 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+# Add new Text Editor component
+
+This change introduces a new Text Editor component to the Meteor Component Library.
+
+# Updated i18n configuration
+
+We change the 'legacy' mode of i18n to 'false' in the Meteor Component Library configuration to use the new i18n composable.
\ No newline at end of file
diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json
index e5634f9bb..6b064c160 100644
--- a/examples/nuxt-app/package.json
+++ b/examples/nuxt-app/package.json
@@ -16,7 +16,8 @@
     "@shopware-ag/meteor-component-library": "workspace:*",
     "nuxt": "^3.10.3",
     "vue": "^3.5.0",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vue-i18n": "^9.9.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.45.0",
diff --git a/examples/nuxt-app/plugins/i18n.ts b/examples/nuxt-app/plugins/i18n.ts
new file mode 100644
index 000000000..4f139f473
--- /dev/null
+++ b/examples/nuxt-app/plugins/i18n.ts
@@ -0,0 +1,11 @@
+import { createI18n } from "vue-i18n";
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  const i18n = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: "en",
+  });
+
+  vueApp.use(i18n);
+});
diff --git a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png
index 3a346250f..dcad20f7e 100644
Binary files a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png and b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png differ
diff --git a/packages/component-library/.storybook/preview.ts b/packages/component-library/.storybook/preview.ts
index 65203d77a..0457e4741 100644
--- a/packages/component-library/.storybook/preview.ts
+++ b/packages/component-library/.storybook/preview.ts
@@ -18,6 +18,7 @@ import "@shopware-ag/meteor-tokens/administration/dark.css";
 
 const i18n = createI18n({
   // something vue-i18n options here ...
+  legacy: false,
   globalInjection: true,
   locale: "en",
   fallbackLocale: "en",
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-open-colorpicker-with-apply-mode-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-open-colorpicker-with-apply-mode-snap.png
new file mode 100644
index 000000000..78ed6fa6b
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-open-colorpicker-with-apply-mode-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-correct-multi-selection-wrapping-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-correct-multi-selection-wrapping-snap.png
index 4dbc6481c..fdfc67652 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-correct-multi-selection-wrapping-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-correct-multi-selection-wrapping-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-code-view-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-code-view-snap.png
new file mode 100644
index 000000000..05258a583
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-code-view-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-disabled-editor-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-disabled-editor-snap.png
new file mode 100644
index 000000000..902e0868c
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-disabled-editor-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-inline-mode-selected-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-inline-mode-selected-snap.png
new file mode 100644
index 000000000..0a71126af
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-inline-mode-selected-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-inline-mode-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-inline-mode-snap.png
new file mode 100644
index 000000000..b6357bba1
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-inline-mode-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-snap.png
new file mode 100644
index 000000000..a5a93624b
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-editor-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-error-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-error-snap.png
new file mode 100644
index 000000000..d79911605
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-error-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-placeholder-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-placeholder-snap.png
new file mode 100644
index 000000000..9cfbcc989
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-render-placeholder-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-show-contextual-buttons-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-show-contextual-buttons-snap.png
new file mode 100644
index 000000000..14d4b199b
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-text-editor--visual-test-show-contextual-buttons-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-snap.png
index c74ccbdec..5ae81c977 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-opened-context-actions-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-opened-context-actions-snap.png
index 3191900c5..1bf1d9a3d 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-opened-context-actions-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-opened-context-actions-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-avatar-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-avatar-snap.png
index b28baf010..e726c2105 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-avatar-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-avatar-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-context-actions-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-context-actions-snap.png
index 082dc4681..5aed4785c 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-context-actions-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-context-actions-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-footer-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-footer-snap.png
index 2eabb6352..a9bdf47af 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-footer-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-footer-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-header-right-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-header-right-snap.png
index 225cfe6ef..d3c426f1a 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-header-right-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-header-right-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-tabs-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-tabs-snap.png
index e225ca888..9fa277e01 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-tabs-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-tabs-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-toolbar-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-toolbar-snap.png
index 15b575d81..4ad9a760f 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-toolbar-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-toolbar-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-snap.png
index 962d4ca49..c26d6c6a2 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-custom-footer-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-custom-footer-snap.png
index c43f844e7..05a236a53 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-custom-footer-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-custom-footer-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-linked-inheritance-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-linked-inheritance-snap.png
index 4cb2db133..a287f6e20 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-linked-inheritance-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-linked-inheritance-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-unlinked-inheritance-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-unlinked-inheritance-snap.png
index 13dbf8c94..7d3576202 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-unlinked-inheritance-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-unlinked-inheritance-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-empty-state--visual-test-extended-page-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-empty-state--visual-test-extended-page-snap.png
index b04364c10..dc5c0c279 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-empty-state--visual-test-extended-page-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-empty-state--visual-test-extended-page-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-navigation-mt-tabs--visual-test-render-tabs-with-context-menu-badge-snap.png b/packages/component-library/__snapshots__/interaction-tests-navigation-mt-tabs--visual-test-render-tabs-with-context-menu-badge-snap.png
index 66fe8a042..224edc400 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-navigation-mt-tabs--visual-test-render-tabs-with-context-menu-badge-snap.png and b/packages/component-library/__snapshots__/interaction-tests-navigation-mt-tabs--visual-test-render-tabs-with-context-menu-badge-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-modal--visual-test-teleport-feature-snap.png b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-modal--visual-test-teleport-feature-snap.png
new file mode 100644
index 000000000..af23db7cc
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-modal--visual-test-teleport-feature-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-popover-snap.png b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-popover-snap.png
index 45f38644a..b796948bf 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-popover-snap.png and b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-popover-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-without-float-snap.png b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-without-float-snap.png
index 847f229f0..f99e2ca03 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-without-float-snap.png and b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-without-float-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-filter-menu-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-filter-menu-snap.png
index 9cc004e78..446ab5e73 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-filter-menu-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-filter-menu-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-icon-button-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-icon-button-snap.png
index 1095b6370..6d74d9898 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-icon-button-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-icon-button-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-filter-menu-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-filter-menu-snap.png
index fb0a8818f..5f05dc2cc 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-filter-menu-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-filter-menu-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-an-image-in-cell-table-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-an-image-in-cell-table-snap.png
index 85807b62a..6526d86bd 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-an-image-in-cell-table-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-an-image-in-cell-table-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-should-hide-the-last-column-with-via-disable-context-menu-and-settings-table-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-should-hide-the-last-column-with-via-disable-context-menu-and-settings-table-snap.png
index 5ab04d884..b80e1457b 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-should-hide-the-last-column-with-via-disable-context-menu-and-settings-table-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-should-hide-the-last-column-with-via-disable-context-menu-and-settings-table-snap.png differ
diff --git a/packages/component-library/package.json b/packages/component-library/package.json
index a10abd081..cb1644561 100644
--- a/packages/component-library/package.json
+++ b/packages/component-library/package.json
@@ -39,6 +39,7 @@
     "test:storybook": "test-storybook"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
     "@floating-ui/dom": "^1.4.3",
     "@floating-ui/vue": "^1.1.5",
     "@shopware-ag/meteor-icon-kit": "workspace:*",
@@ -46,15 +47,38 @@
     "@storybook/addon-a11y": "^8.4.5",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/vue": "^8.1.0",
+    "@tiptap/extension-bubble-menu": "^2.10.0",
+    "@tiptap/extension-bullet-list": "^2.10.0",
+    "@tiptap/extension-character-count": "^2.10.0",
+    "@tiptap/extension-color": "^2.9.1",
+    "@tiptap/extension-highlight": "^2.10.3",
+    "@tiptap/extension-link": "^2.10.0",
+    "@tiptap/extension-list-item": "^2.10.0",
+    "@tiptap/extension-ordered-list": "^2.10.0",
+    "@tiptap/extension-placeholder": "^2.10.4",
+    "@tiptap/extension-subscript": "^2.9.1",
+    "@tiptap/extension-superscript": "^2.9.1",
+    "@tiptap/extension-table": "^2.10.3",
+    "@tiptap/extension-table-cell": "^2.10.3",
+    "@tiptap/extension-table-header": "^2.10.3",
+    "@tiptap/extension-table-row": "^2.10.3",
+    "@tiptap/extension-text-align": "^2.9.1",
+    "@tiptap/extension-text-style": "^2.9.1",
+    "@tiptap/extension-underline": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
+    "@tiptap/starter-kit": "^2.9.1",
+    "@tiptap/vue-3": "^2.9.1",
     "@vuepic/vue-datepicker": "^10.0.0",
     "@vueuse/components": "^10.7.2",
     "@vueuse/core": "^10.7.2",
+    "codemirror": "^6.0.1",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "focus-trap": "^7.5.4",
     "inter-ui": "^3.19.3",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.7",
+    "vue-codemirror6": "^1.3.8",
     "vue-i18n": "^9.9.1",
     "vue-smooth-reflow": "^0.1.12"
   },
@@ -109,8 +133,5 @@
     "vite-plugin-svgstring": "^1.0.0",
     "vitest": "^1.1.3",
     "vue-tsc": "^2.0.21"
-  },
-  "peerDependencies": {
-    "vue": ">= 3.5.0"
   }
 }
diff --git a/packages/component-library/src/components/_internal/mt-label.vue b/packages/component-library/src/components/_internal/mt-label.vue
index ebcf25e56..e4f594a80 100644
--- a/packages/component-library/src/components/_internal/mt-label.vue
+++ b/packages/component-library/src/components/_internal/mt-label.vue
@@ -24,7 +24,7 @@
 import { computed, useAttrs } from "vue";
 import MtIcon from "../icons-media/mt-icon/mt-icon.vue";
 import MtColorBadge from "../feedback-indicator/mt-color-badge/mt-color-badge.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
index 666285f8d..c93121fc5 100644
--- a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
+++ b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
@@ -36,7 +36,7 @@ import { computed } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n({
   messages: {
diff --git a/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue b/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
index 3afc57f8f..4954149a3 100644
--- a/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
+++ b/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
@@ -262,6 +262,10 @@ $mt-field-transition:
     margin-bottom: var(--scale-size-12);
   }
 
+  &.is--disabled {
+    cursor: not-allowed;
+  }
+
   &__hint-wrapper {
     display: flex;
     justify-content: space-between;
diff --git a/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue b/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
index 9e09abb9a..3c3dd7113 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
@@ -22,7 +22,7 @@ import MtIcon from "../../../icons-media/mt-icon/mt-icon.vue";
 import MtTooltipDirective from "../../../../directives/tooltip.directive";
 import MtNotificationMixin from "../../../../mixins/notification.mixin";
 import { copyToClipboard as copyToClipboardUtil } from "../../../../utils/dom";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtFieldCopyable",
diff --git a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
index f15742730..303264d0b 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
@@ -16,7 +16,7 @@
 import { computed } from "vue";
 import MtIcon from "../../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
   error?: Record<string, any> | null;
@@ -25,8 +25,12 @@ const props = defineProps<{
 const errorMessage = computed(() => {
   if (!props.error) return "";
 
+  if (!props.error.code) {
+    return t(props.error.detail);
+  }
+
   const translation = t(props.error.code, props.error.parameters || {});
-  const noTranslationFound = translation === props.error.code;
+  const noTranslationFound = translation === props.error.code.toString();
 
   return noTranslationFound ? props.error.detail : translation;
 });
diff --git a/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue b/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue
index cfdf95880..e4cdf5335 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue
@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import MtIcon from "@/components/icons-media/mt-icon/mt-icon.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n({
   messages: {
diff --git a/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue b/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
index 4a16fffc5..74c7ff05e 100644
--- a/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
+++ b/packages/component-library/src/components/form/_internal/mt-inheritance-switch/mt-inheritance-switch.vue
@@ -45,7 +45,7 @@
 import { defineComponent } from "vue";
 import MtTooltipDirective from "../../../../directives/tooltip.directive";
 import MtIcon from "../../../icons-media/mt-icon/mt-icon.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtInheritanceSwitch",
diff --git a/packages/component-library/src/components/form/_internal/mt-select-base/_internal/mt-select-result-list.vue b/packages/component-library/src/components/form/_internal/mt-select-base/_internal/mt-select-result-list.vue
index 2abefe6ea..629587288 100644
--- a/packages/component-library/src/components/form/_internal/mt-select-base/_internal/mt-select-result-list.vue
+++ b/packages/component-library/src/components/form/_internal/mt-select-base/_internal/mt-select-result-list.vue
@@ -53,7 +53,7 @@ import {
   MtSelectResultRemoveItemSelectByKeyboardListener,
 } from "@/helper/provideInjectKeys";
 import { ref } from "vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtSelectResultList",
diff --git a/packages/component-library/src/components/form/mt-button/mt-button.vue b/packages/component-library/src/components/form/mt-button/mt-button.vue
index 40b5e20e8..387176b56 100644
--- a/packages/component-library/src/components/form/mt-button/mt-button.vue
+++ b/packages/component-library/src/components/form/mt-button/mt-button.vue
@@ -289,6 +289,7 @@ const isInsideTooltip = useIsInsideTooltip();
   width: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
 .mt-button--x-small {
diff --git a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts
index 1104eda51..c10986b19 100644
--- a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts
+++ b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts
@@ -2,6 +2,7 @@ import { within, userEvent, fireEvent } from "@storybook/test";
 import { expect } from "@storybook/test";
 
 import meta, { type MtColorpickerMeta, type MtColorpickerStory } from "./mt-colorpicker.stories";
+import { waitUntil } from "@/_internal/test-helper";
 
 export default {
   ...meta,
@@ -56,6 +57,188 @@ export const VisualTestOpenColorpicker: MtColorpickerStory = {
   },
 };
 
+export const VisualTestOpenColorpickerWithApplyMode: MtColorpickerStory = {
+  name: "Open colorpicker with apply mode",
+  args: {
+    modelValue: "rgba(72, 228, 37, 0.81)",
+    applyMode: true,
+    colorOutput: "rgb",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const pickerToggle = canvas.getByLabelText("colorpicker-toggle");
+
+    await userEvent.click(pickerToggle);
+
+    // Look inside the popover
+    const popover = within(
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
+    );
+
+    const colorRange = popover.getByLabelText("colorpicker-color-range") as HTMLInputElement;
+    const alphaRange = popover.getByLabelText("colorpicker-alpha-range") as HTMLInputElement;
+    const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
+    const redInput = popover.getByLabelText("red-value") as HTMLInputElement;
+    const greenInput = popover.getByLabelText("green-value") as HTMLInputElement;
+    const blueInput = popover.getByLabelText("blue-value") as HTMLInputElement;
+    const alphaInput = popover.getByLabelText("alpha-value") as HTMLInputElement;
+
+    expect(colorRange).toBeDefined();
+    expect(colorRange.value).toEqual("109");
+    expect(alphaRange).toBeDefined();
+    expect(alphaRange.value).toEqual("0.81");
+
+    expect(hexInput).toBeDefined();
+    expect(hexInput.value).toEqual("#48e425cf");
+    expect(redInput).toBeDefined();
+    expect(redInput.value).toEqual("72");
+    expect(greenInput).toBeDefined();
+    expect(greenInput.value).toEqual("228");
+    expect(blueInput).toBeDefined();
+    expect(blueInput.value).toEqual("37");
+    expect(alphaInput).toBeDefined();
+    expect(alphaInput.value).toEqual("81");
+
+    // Check for apply button
+    const applyButton = popover.getByLabelText("colorpicker-apply-color") as HTMLButtonElement;
+    expect(applyButton).toBeDefined();
+  },
+};
+
+export const TestOpenColorpickerWithApplyMode: MtColorpickerStory = {
+  name: "Use colorpicker with apply mode",
+  args: {
+    modelValue: "rgba(72, 228, 37, 0.81)",
+    applyMode: true,
+    colorOutput: "rgb",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const pickerToggle = canvas.getByLabelText("colorpicker-toggle");
+
+    await userEvent.click(pickerToggle);
+
+    // Look inside the popover
+    const popover = within(
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
+    );
+
+    const colorRange = popover.getByLabelText("colorpicker-color-range") as HTMLInputElement;
+    const alphaRange = popover.getByLabelText("colorpicker-alpha-range") as HTMLInputElement;
+    const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
+    const redInput = popover.getByLabelText("red-value") as HTMLInputElement;
+    const greenInput = popover.getByLabelText("green-value") as HTMLInputElement;
+    const blueInput = popover.getByLabelText("blue-value") as HTMLInputElement;
+    const alphaInput = popover.getByLabelText("alpha-value") as HTMLInputElement;
+
+    expect(colorRange).toBeDefined();
+    expect(colorRange.value).toEqual("109");
+    expect(alphaRange).toBeDefined();
+    expect(alphaRange.value).toEqual("0.81");
+
+    expect(hexInput).toBeDefined();
+    expect(hexInput.value).toEqual("#48e425cf");
+    expect(redInput).toBeDefined();
+    expect(redInput.value).toEqual("72");
+    expect(greenInput).toBeDefined();
+    expect(greenInput.value).toEqual("228");
+    expect(blueInput).toBeDefined();
+    expect(blueInput.value).toEqual("37");
+    expect(alphaInput).toBeDefined();
+    expect(alphaInput.value).toEqual("81");
+
+    // Check for apply button
+    const applyButton = popover.getByLabelText("colorpicker-apply-color") as HTMLButtonElement;
+    expect(applyButton).toBeDefined();
+
+    // Change colors
+    fireEvent.input(colorRange, { target: { value: 300 } });
+    fireEvent.input(alphaRange, { target: { value: 0.5 } });
+
+    // Apply changes
+    await userEvent.click(applyButton);
+
+    // Wait until the popover is closed
+    await waitUntil(() => {
+      return document.getElementsByClassName("mt-floating-ui__content").length === 0;
+    });
+
+    // Check if the color is applied
+    expect(args.updateModelValue).toHaveBeenCalledWith("rgba(228, 37, 228, 0.5)");
+  },
+};
+
+export const ResetsColorInApplyMode: MtColorpickerStory = {
+  name: "Resets color in apply mode when closed without applying",
+  args: {
+    modelValue: "rgba(72, 228, 37, 0.81)",
+    applyMode: true,
+    colorOutput: "rgb",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const pickerToggle = canvas.getByLabelText("colorpicker-toggle");
+
+    await userEvent.click(pickerToggle);
+
+    // Look inside the popover
+    const popover = within(
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
+    );
+
+    const colorRange = popover.getByLabelText("colorpicker-color-range") as HTMLInputElement;
+    const alphaRange = popover.getByLabelText("colorpicker-alpha-range") as HTMLInputElement;
+    const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
+    const redInput = popover.getByLabelText("red-value") as HTMLInputElement;
+    const greenInput = popover.getByLabelText("green-value") as HTMLInputElement;
+    const blueInput = popover.getByLabelText("blue-value") as HTMLInputElement;
+    const alphaInput = popover.getByLabelText("alpha-value") as HTMLInputElement;
+
+    expect(colorRange).toBeDefined();
+    expect(colorRange.value).toEqual("109");
+    expect(alphaRange).toBeDefined();
+    expect(alphaRange.value).toEqual("0.81");
+
+    expect(hexInput).toBeDefined();
+    expect(hexInput.value).toEqual("#48e425cf");
+    expect(redInput).toBeDefined();
+    expect(redInput.value).toEqual("72");
+    expect(greenInput).toBeDefined();
+    expect(greenInput.value).toEqual("228");
+    expect(blueInput).toBeDefined();
+    expect(blueInput.value).toEqual("37");
+    expect(alphaInput).toBeDefined();
+    expect(alphaInput.value).toEqual("81");
+
+    // Check for apply button
+    const applyButton = popover.getByLabelText("colorpicker-apply-color") as HTMLButtonElement;
+    expect(applyButton).toBeDefined();
+
+    // Change colors
+    fireEvent.input(colorRange, { target: { value: 300 } });
+    fireEvent.input(alphaRange, { target: { value: 0.5 } });
+
+    const colorpickerInputField = canvas.getByLabelText(
+      "colorpicker-color-value",
+    ) as HTMLInputElement;
+
+    // Close popover without applying
+    await userEvent.click(colorpickerInputField);
+
+    // Wait until the popover is closed
+    await waitUntil(() => {
+      return document.getElementsByClassName("mt-floating-ui__content").length === 0;
+    });
+
+    // Check if the color is resetted
+    expect(args.updateModelValue).not.toHaveBeenCalled();
+    expect(colorpickerInputField.value).toEqual("rgba(72, 228, 37, 0.81)");
+  },
+};
+
 export const VisualTestChangeColorpickerColor: MtColorpickerStory = {
   name: "Change colorpicker color",
   args: {
diff --git a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.stories.ts b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.stories.ts
index f9aaafdb1..4cee3c915 100644
--- a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.stories.ts
+++ b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.stories.ts
@@ -1,18 +1,32 @@
 import MtColorpicker from "./mt-colorpicker.vue";
 import type { StoryObj } from "@storybook/vue3";
 import type { SlottedMeta } from "@/_internal/story-helper";
+import { ref } from "vue";
+import { fn } from "@storybook/test";
 
-export type MtColorpickerMeta = SlottedMeta<typeof MtColorpicker, "default">;
+export type MtColorpickerMeta = SlottedMeta<typeof MtColorpicker, "default" | "updateModelValue">;
 
 export default {
   title: "Components/Form/mt-colorpicker",
   component: MtColorpicker,
   render: (args) => ({
     components: { MtColorpicker },
-    template: '<mt-colorpicker v-bind="args"></mt-colorpicker>',
+    template: `<mt-colorpicker 
+      v-bind="args"
+      :modelValue="currentModelValue"
+      @update:modelValue="onUpdateModelValue"
+    ></mt-colorpicker>`,
     setup: () => {
+      const currentModelValue = ref(args.modelValue);
+      const onUpdateModelValue = (value: string) => {
+        currentModelValue.value = value;
+        args.updateModelValue(value);
+      };
+
       return {
         args,
+        currentModelValue,
+        onUpdateModelValue,
       };
     },
   }),
@@ -30,6 +44,8 @@ export default {
     isInherited: false,
     isInheritanceField: false,
     disableInheritanceToggle: false,
+    compact: false,
+    updateModelValue: fn(),
   },
 } as MtColorpickerMeta;
 
diff --git a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue
index f10b1d494..e985d0406 100644
--- a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue
+++ b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue
@@ -1,6 +1,6 @@
 <template>
   <mt-base-field
-    class="mt-colorpicker"
+    :class="componentClasses"
     :disabled="disabled"
     :required="required"
     :is-inherited="isInherited"
@@ -36,7 +36,7 @@
         v-model="colorValue"
         aria-label="colorpicker-color-value"
         class="mt-colorpicker__input"
-        spellcheck="false"
+        :spellcheck="false"
         :disabled="disabled"
         :readonly="readonly"
         @click="onClickInput"
@@ -112,7 +112,7 @@
                 class="mt-colorpicker__colorpicker-input is--hex"
                 aria-label="hex-value"
                 type="text"
-                spellcheck="false"
+                :spellcheck="false"
               />
               <mt-text
                 v-if="colorLabels"
@@ -208,6 +208,17 @@
               </mt-text>
             </div>
           </div>
+
+          <div v-if="applyMode" class="mt-colorpicker__row mt-colorpicker__apply-row">
+            <mt-button
+              variant="primary"
+              block
+              aria-label="colorpicker-apply-color"
+              @click="applyColor"
+            >
+              {{ t("mt-colorpicker.apply") }}
+            </mt-button>
+          </div>
         </div>
       </mt-floating-ui>
     </template>
@@ -228,14 +239,39 @@ import MtFloatingUi from "../../_internal/mt-floating-ui/mt-floating-ui.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 import { createFocusTrap } from "focus-trap";
 import type { FocusTrap } from "focus-trap";
+import MtButton from "@/components/form/mt-button/mt-button.vue";
+import mtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtColorpicker",
 
+  setup() {
+    const { t } = useI18n({
+      messages: {
+        en: {
+          "mt-colorpicker": {
+            apply: "Apply",
+          },
+        },
+        de: {
+          "mt-colorpicker": {
+            apply: "Anwenden",
+          },
+        },
+      },
+    });
+    return {
+      t,
+    };
+  },
+
   components: {
     "mt-base-field": MtBaseField,
     "mt-text": MtText,
     "mt-floating-ui": MtFloatingUi,
+    "mt-button": MtButton,
+    "mt-field-error": mtFieldError,
   },
 
   props: {
@@ -373,6 +409,24 @@ export default defineComponent({
       required: false,
       default: null,
     },
+
+    /**
+     * Show the colorpicker in a compact mode
+     */
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    /**
+     * Use apply-mode to apply the color value on button click
+     */
+    applyMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data(): {
     localValue:
@@ -654,10 +708,20 @@ export default defineComponent({
         left: this.selectorPositionX,
       };
     },
+
+    componentClasses(): {
+      "mt-colorpicker": boolean;
+      "mt-colorpicker--compact": boolean;
+    } {
+      return {
+        "mt-colorpicker": true,
+        "mt-colorpicker--compact": this.compact,
+      };
+    },
   },
 
   watch: {
-    value() {
+    modelValue() {
       this.colorValue = this.modelValue;
     },
 
@@ -665,7 +729,14 @@ export default defineComponent({
       this.colorValue = this.convertedValue;
     },
 
-    visible(visibleStatus) {
+    visible(visibleStatus, visibleStatusBefore) {
+      if (this.applyMode) {
+        // When colorpicker is closed, reset the color value
+        if (!visibleStatus && visibleStatusBefore) {
+          this.colorValue = this.modelValue;
+        }
+      }
+
       if (!visibleStatus) {
         this.trap?.deactivate();
         return;
@@ -731,6 +802,12 @@ export default defineComponent({
 
   methods: {
     debounceEmitColorValue: debounce(function emitValue() {
+      // @ts-expect-error - this context is wrong detected
+      // Don't emit the value if applyMode is active
+      if (this.applyMode) {
+        return;
+      }
+
       /**
        * Emits the selected color value
        * @property {string} this.colorValue the new color value
@@ -798,6 +875,13 @@ export default defineComponent({
       this.removeOutsideClickEvent();
     },
 
+    applyColor() {
+      // Manually emit the color value
+      this.$emit("update:modelValue", this.colorValue);
+      // Close the colorpicker
+      this.visible = false;
+    },
+
     moveSelector(event: MouseEvent) {
       if (!this.isDragging) {
         return;
diff --git a/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue b/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue
index a57304085..5e2d04dcd 100644
--- a/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue
+++ b/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue
@@ -89,7 +89,7 @@ import type { PropType } from "vue";
 import { defineComponent } from "vue";
 import MtTextField from "../mt-text-field/mt-text-field.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtNumberField",
@@ -141,7 +141,7 @@ export default defineComponent({
     },
 
     /**
-     * The value of the field.
+     * The value of the number field.
      */
     modelValue: {
       type: Number as PropType<number | null>,
@@ -280,7 +280,7 @@ export default defineComponent({
     },
 
     increaseNumberByStep() {
-      this.computeValue((this.currentValue + this.realStep).toString());
+      this.computeValue((Number(this.currentValue) + this.realStep).toString());
 
       /** @deprecated tag: 5.0 - Will be removed use update:model-value instead */
       this.$emit("change", this.currentValue);
diff --git a/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue b/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
index 8fe10cbbb..ea1021dbe 100644
--- a/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
+++ b/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
@@ -71,7 +71,7 @@
 import { computed, defineComponent, ref } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtTextField from "../mt-text-field/mt-text-field.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtPasswordField",
diff --git a/packages/component-library/src/components/form/mt-select/mt-select.vue b/packages/component-library/src/components/form/mt-select/mt-select.vue
index 29af53285..60711c719 100644
--- a/packages/component-library/src/components/form/mt-select/mt-select.vue
+++ b/packages/component-library/src/components/form/mt-select/mt-select.vue
@@ -124,7 +124,7 @@ import MtSelectResultList from "../_internal/mt-select-base/_internal/mt-select-
 import MtSelectResult from "../_internal/mt-select-base/_internal/mt-select-result.vue";
 import MtSelectSelectionList from "../_internal/mt-select-base/_internal/mt-select-selection-list.vue";
 import MtHighlightText from "../../_internal/mt-highlight-text.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtSelect",
diff --git a/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-color.vue b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-color.vue
new file mode 100644
index 000000000..1a5c1799f
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-color.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="mt-text-editor-toolbar-button-color">
+    <mt-colorpicker
+      class="mt-text-editor-toolbar-button-color__colorpicker"
+      compact
+      :model-value="getTextColor()"
+      @update:modelValue="onUpdateModelValue"
+      :disabled="button.disabled ? button.disabled(props.editor, disabled) : disabled"
+      apply-mode
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import MtColorpicker from "../../mt-colorpicker/mt-colorpicker.vue";
+import type { Editor } from "@tiptap/vue-3";
+import type { CustomButton } from "./mt-text-editor-toolbar.vue";
+import { useI18n } from "vue-i18n";
+
+useI18n({
+  useScope: "global",
+  messages: {
+    en: {
+      "mt-text-editor-toolbar-button-color": {
+        label: "Text Color",
+      },
+    },
+    de: {
+      "mt-text-editor-toolbar-button-color": {
+        label: "Textfarbe",
+      },
+    },
+  },
+});
+
+const props = defineProps({
+  editor: {
+    type: Object as PropType<Editor>,
+    required: true,
+  },
+  button: {
+    type: Object as PropType<CustomButton>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const getTextColor = () => {
+  return props.editor.getAttributes("textStyle").color;
+};
+
+const onUpdateModelValue = (color: string) => {
+  props.editor.chain().focus().setColor(color).run();
+};
+</script>
+
+<script lang="ts">
+export const colorButton: CustomButton = {
+  name: "text-color",
+  label: "mt-text-editor-toolbar-button-color.label",
+  position: 2000,
+};
+</script>
+
+<style scoped>
+.mt-text-editor-toolbar-button-color {
+  display: flex;
+  justify-content: center;
+  width: var(--scale-size-32);
+
+  :deep(.mt-colorpicker__previewWrapper) {
+    width: var(--scale-size-14);
+    height: var(--scale-size-14);
+  }
+
+  :deep(.mt-colorpicker--compact .mt-colorpicker__colorpicker-position) {
+    left: calc(-1 * (14px + 24px) / 2);
+    top: calc(100% + var(--scale-size-14) + 4px);
+  }
+}
+</style>
diff --git a/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-link.vue b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-link.vue
new file mode 100644
index 000000000..ffbc6b1cb
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-link.vue
@@ -0,0 +1,142 @@
+<template>
+  <mt-text-editor-toolbar-button
+    :button="button"
+    :editor="props.editor"
+    :disabled="disabled"
+    @click="openLinkModal"
+  />
+
+  <!-- Link modal -->
+  <mt-modal-root :isOpen="showLinkModal" @change="($event) => (showLinkModal = $event)">
+    <mt-modal width="s" :title="t('mt-text-editor-toolbar-button-link.modalTitle')">
+      <template #default>
+        <div class="mt-text-editor__link-modal">
+          <mt-text-field
+            :label="t('mt-text-editor-toolbar-button-link.linkUrl')"
+            v-model="linkHref"
+            placeholder="https://example.com"
+            required
+          />
+          <mt-switch
+            :label="t('mt-text-editor-toolbar-button-link.openInNewTab')"
+            :checked="linkTarget === '_blank'"
+            @change="
+              (checked) => {
+                linkTarget = checked ? '_blank' : '';
+              }
+            "
+            :aria-label="t('mt-text-editor-toolbar-button-link.openInNewTab')"
+          />
+        </div>
+      </template>
+      <template #footer>
+        <div class="mt-text-editor__link-modal-footer">
+          <mt-modal-close :as="mtButton" variant="secondary">
+            {{ t("mt-text-editor-toolbar-button-link.cancel") }}
+          </mt-modal-close>
+
+          <mt-button
+            variant="primary"
+            @click="
+              () => {
+                editor
+                  .chain()
+                  .focus()
+                  .extendMarkRange('link')
+                  .setLink({ href: linkHref, target: linkTarget })
+                  .run();
+                showLinkModal = false;
+              }
+            "
+          >
+            {{ t("mt-text-editor-toolbar-button-link.applyLink") }}
+          </mt-button>
+        </div>
+      </template>
+    </mt-modal>
+  </mt-modal-root>
+</template>
+
+<script lang="ts" setup>
+import type { Editor } from "@tiptap/vue-3";
+import { ref, type PropType } from "vue";
+import type { CustomButton } from "./mt-text-editor-toolbar.vue";
+import mtModalRoot from "@/components/overlay/mt-modal/sub-components/mt-modal-root.vue";
+import mtModal from "@/components/overlay/mt-modal/mt-modal.vue";
+import mtButton from "@/components/form/mt-button/mt-button.vue";
+import mtTextField from "@/components/form/mt-text-field/mt-text-field.vue";
+import mtSwitch from "@/components/form/mt-switch/mt-switch.vue";
+import mtTextEditorToolbarButton from "./mt-text-editor-toolbar-button.vue";
+import mtModalClose from "@/components/overlay/mt-modal/sub-components/mt-modal-close.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({
+  useScope: "global",
+  messages: {
+    en: {
+      "mt-text-editor-toolbar-button-link": {
+        modalTitle: "Insert/Edit Link",
+        cancel: "Cancel",
+        applyLink: "Apply link",
+        openInNewTab: "Open in new tab",
+        linkUrl: "Link URL",
+        label: "Link",
+      },
+    },
+    de: {
+      "mt-text-editor-toolbar-button-link": {
+        modalTitle: "Link einfügen/bearbeiten",
+        cancel: "Abbrechen",
+        applyLink: "Link anwenden",
+        openInNewTab: "In neuem Tab öffnen",
+        linkUrl: "Link URL",
+        label: "Link",
+      },
+    },
+  },
+});
+
+const props = defineProps({
+  editor: {
+    type: Object as PropType<Editor>,
+    required: true,
+  },
+  button: {
+    type: Object as PropType<CustomButton>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const showLinkModal = ref(false);
+const linkHref = ref("");
+const linkTarget = ref("");
+
+const openLinkModal = () => {
+  // Get current link from selection
+  linkHref.value = props.editor.getAttributes("link").href ?? "";
+  linkTarget.value = props.editor.getAttributes("link").target ?? "";
+
+  showLinkModal.value = true;
+};
+</script>
+
+<script lang="ts">
+export const linkButton: CustomButton = {
+  name: "link",
+  label: "mt-text-editor-toolbar-button-link.label",
+  icon: "regular-link-xs",
+  position: 12000,
+};
+</script>
+
+<style scoped>
+.mt-text-editor__link-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--scale-size-8);
+}
+</style>
diff --git a/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-table.vue b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-table.vue
new file mode 100644
index 000000000..5254fb0a1
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button-table.vue
@@ -0,0 +1,229 @@
+<template>
+  <mt-text-editor-toolbar-button
+    :button="button"
+    :editor="props.editor"
+    :disabled="disabled"
+    @click="openTableModal"
+  />
+
+  <!-- Table modal -->
+  <mt-modal-root :isOpen="showTableModal" @change="($event) => (showTableModal = $event)">
+    <mt-modal :title="t('mt-text-editor-toolbar-button-table.modalTitle')" width="s">
+      <template #default>
+        <div class="mt-text-editor__table-modal">
+          <mt-number-field
+            :label="t('mt-text-editor-toolbar-button-table.columns')"
+            v-model="tableColumns"
+            type="number"
+            :min="1"
+            numberType="int"
+          />
+          <mt-number-field
+            :label="t('mt-text-editor-toolbar-button-table.rows')"
+            v-model="tableRows"
+            type="number"
+            :min="1"
+            numberType="int"
+          />
+          <mt-switch
+            :label="t('mt-text-editor-toolbar-button-table.showHeader')"
+            :checked="tableShowHeader"
+            @change="
+              (checked) => {
+                tableShowHeader = checked;
+              }
+            "
+          />
+        </div>
+      </template>
+      <template #footer>
+        <div class="mt-text-editor__table-modal-footer">
+          <mt-modal-close :as="mtButton" variant="secondary">
+            {{ t("mt-text-editor-toolbar-button-table.cancel") }}
+          </mt-modal-close>
+
+          <mt-button variant="primary" @click="insertTable">
+            {{ t("mt-text-editor-toolbar-button-table.insertTable") }}
+          </mt-button>
+        </div>
+      </template>
+    </mt-modal>
+  </mt-modal-root>
+</template>
+
+<script lang="ts" setup>
+import type { Editor } from "@tiptap/vue-3";
+import { ref, type PropType } from "vue";
+import type { CustomButton } from "./mt-text-editor-toolbar.vue";
+import mtModalRoot from "@/components/overlay/mt-modal/sub-components/mt-modal-root.vue";
+import mtModal from "@/components/overlay/mt-modal/mt-modal.vue";
+import mtButton from "@/components/form/mt-button/mt-button.vue";
+import mtSwitch from "@/components/form/mt-switch/mt-switch.vue";
+import mtTextEditorToolbarButton from "./mt-text-editor-toolbar-button.vue";
+import mtNumberField from "@/components/form/mt-number-field/mt-number-field.vue";
+import mtModalClose from "@/components/overlay/mt-modal/sub-components/mt-modal-close.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({
+  useScope: "global",
+  messages: {
+    en: {
+      "mt-text-editor-toolbar-button-table": {
+        label: "Table",
+        modalTitle: "Insert/Edit Table",
+        insertTable: "Insert table",
+        cancel: "Cancel",
+        columns: "Columns",
+        rows: "Rows",
+        showHeader: "Show header",
+        insertRowBefore: "Insert row before",
+        insertRowAfter: "Insert row after",
+        deleteRow: "Delete row",
+        insertColumnBefore: "Insert column before",
+        insertColumnAfter: "Insert column after",
+        deleteColumn: "Delete column",
+        removeTable: "Remove table",
+      },
+    },
+    de: {
+      "mt-text-editor-toolbar-button-table": {
+        label: "Tabelle",
+        modalTitle: "Tabelle einfügen/bearbeiten",
+        insertTable: "Tabelle einfügen",
+        cancel: "Abbrechen",
+        columns: "Spalten",
+        rows: "Zeilen",
+        showHeader: "Kopfzeile anzeigen",
+        insertRowBefore: "Zeile davor einfügen",
+        insertRowAfter: "Zeile danach einfügen",
+        deleteRow: "Zeile löschen",
+        insertColumnBefore: "Spalte davor einfügen",
+        insertColumnAfter: "Spalte danach einfügen",
+        deleteColumn: "Spalte löschen",
+        removeTable: "Tabelle entfernen",
+      },
+    },
+  },
+});
+
+const props = defineProps({
+  editor: {
+    type: Object as PropType<Editor>,
+    required: true,
+  },
+  button: {
+    type: Object as PropType<CustomButton>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const showTableModal = ref(false);
+const tableColumns = ref(3);
+const tableRows = ref(3);
+const tableShowHeader = ref(true);
+
+const openTableModal = () => {
+  // Don't open the modal if the table is already active
+  if (props.editor.isActive("table")) {
+    return;
+  }
+
+  tableColumns.value = 3;
+  tableRows.value = 3;
+  tableShowHeader.value = true;
+  showTableModal.value = true;
+};
+
+const insertTable = () => {
+  // Insert a new table
+  props.editor
+    .chain()
+    .focus()
+    .insertTable({
+      rows: tableRows.value,
+      cols: tableColumns.value,
+      withHeaderRow: tableShowHeader.value,
+    })
+    .run();
+
+  showTableModal.value = false;
+};
+</script>
+
+<script lang="ts">
+export const tableButton: CustomButton = {
+  name: "table",
+  label: "mt-text-editor-toolbar-button-table.label",
+  icon: "regular-table-xs",
+  disabled: (editor, globalDisabled) => {
+    if (globalDisabled) {
+      return true;
+    }
+
+    return editor.isActive("table");
+  },
+  position: 13000,
+  contextualButtons: (editor) => {
+    if (!editor.isActive("table")) {
+      return [];
+    }
+
+    return [
+      {
+        name: "table-insert-row-before",
+        label: "Insert row before",
+        icon: "regular-insert-row-before",
+        action: (editor) => editor.chain().focus().addRowBefore().run(),
+      },
+      {
+        name: "table-insert-row-after",
+        label: "Insert row after",
+        icon: "regular-insert-row-after",
+        action: (editor) => editor.chain().focus().addRowAfter().run(),
+      },
+      {
+        name: "table-delete-row",
+        label: "Delete row",
+        icon: "regular-delete-row",
+        action: (editor) => editor.chain().focus().deleteRow().run(),
+      },
+      {
+        name: "table-insert-column-before",
+        label: "Insert column before",
+        icon: "regular-insert-column-before",
+        action: (editor) => editor.chain().focus().addColumnBefore().run(),
+      },
+      {
+        name: "table-insert-column-after",
+        label: "Insert column after",
+        icon: "regular-insert-column-after",
+        action: (editor) => editor.chain().focus().addColumnAfter().run(),
+      },
+      {
+        name: "table-delete-column",
+        label: "Delete column",
+        icon: "regular-delete-column",
+        action: (editor) => editor.chain().focus().deleteColumn().run(),
+      },
+      {
+        name: "table-remove-table",
+        label: "Remove table",
+        icon: "regular-times-xs",
+        action: (editor) => editor.chain().focus().deleteTable().run(),
+      },
+    ];
+  },
+};
+</script>
+
+<style scoped>
+.mt-text-editor__table-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--scale-size-8);
+}
+</style>
diff --git a/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button.vue b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button.vue
new file mode 100644
index 000000000..e9c76008a
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button.vue
@@ -0,0 +1,91 @@
+<template>
+  <button
+    @click="handleButtonClick()"
+    :class="buttonClass(button)"
+    v-tooltip="{
+      disabled: !translatedLabel,
+      message: translatedLabel,
+      position: 'top',
+      hideDelay: 0,
+    }"
+    :aria-label="translatedLabel"
+    :disabled="button.disabled ? button.disabled(props.editor, disabled) : disabled"
+  >
+    <mt-icon v-if="button.icon" :name="button.icon" />
+    <span v-else>{{ translatedLabel }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from "vue";
+import type { CustomButton } from "./mt-text-editor-toolbar.vue";
+import type { Editor } from "@tiptap/vue-3";
+import mtIcon from "@/components/icons-media/mt-icon/mt-icon.vue";
+import vTooltip from "@/directives/tooltip.directive";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  editor: {
+    type: Object as PropType<Editor>,
+    required: true,
+  },
+  button: {
+    type: Object as PropType<CustomButton>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+const handleButtonClick = () => {
+  emit("click");
+};
+
+const buttonClass = (button: CustomButton) => {
+  return {
+    "mt-text-editor-toolbar-button": true,
+    "is-active": button.isActive && button.isActive(props.editor),
+  };
+};
+
+const translatedLabel = computed(() => {
+  return t(props.button.label);
+});
+</script>
+
+<style scoped>
+.mt-text-editor-toolbar-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--scale-size-32);
+  height: 100%;
+
+  .mt-icon {
+    transition: 0.1s all ease-in-out;
+    color: var(--color-text-secondary-default);
+  }
+
+  &:hover .mt-icon {
+    color: var(--color-interaction-primary-hover);
+  }
+
+  &.is-active .mt-icon {
+    color: var(--color-interaction-primary-pressed);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.mt-text-editor-toolbar-button:disabled .mt-icon {
+  color: var(--color-text-secondary-disabled);
+}
+</style>
diff --git a/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar.vue b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar.vue
new file mode 100644
index 000000000..ec01b3b37
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/_internal/mt-text-editor-toolbar.vue
@@ -0,0 +1,483 @@
+<template>
+  <div class="mt-text-editor-toolbar" role="menu" tabindex="0">
+    <div class="mt-text-editor-toolbar__buttons-left">
+      <template v-for="button in buttonsLeft" :key="button.name">
+        <slot
+          :name="'button_' + button.name"
+          :editor="props.editor"
+          :disabled="disabled"
+          :button="button"
+        >
+          <mt-popover v-if="button.children" :key="button.name">
+            <template #trigger="{ toggleFloatingUi }">
+              <mt-text-editor-toolbar-button
+                :button="button"
+                :editor="props.editor"
+                @click="toggleFloatingUi"
+                :disabled="disabled"
+              />
+            </template>
+
+            <template #popover-items__base="{ toggleFloatingUi }">
+              <mt-popover-item
+                v-for="child in button.children"
+                :key="child.name"
+                :label="t(child.label)"
+                :icon="child.icon"
+                :type="child.isActive && child.isActive(props.editor) ? 'active' : 'default'"
+                :onLabelClick="
+                  () => {
+                    handleButtonClick(child);
+                    toggleFloatingUi();
+                  }
+                "
+              />
+            </template>
+          </mt-popover>
+
+          <mt-text-editor-toolbar-button
+            v-else
+            :button="button"
+            :editor="props.editor"
+            :disabled="disabled"
+            @click="handleButtonClick(button)"
+          />
+        </slot>
+      </template>
+    </div>
+
+    <slot name="default" />
+
+    <div class="mt-text-editor-toolbar__buttons-right">
+      <template v-for="button in buttonsRight" :key="button.name">
+        <slot
+          :name="'button_' + button.name"
+          :editor="props.editor"
+          :disabled="disabled"
+          :button="button"
+        >
+          <mt-popover v-if="button.children" :key="button.name">
+            <template #trigger="{ toggleFloatingUi }">
+              <mt-text-editor-toolbar-button
+                :button="button"
+                :editor="props.editor"
+                @click="toggleFloatingUi"
+                :disabled="disabled"
+              />
+            </template>
+
+            <template #popover-items__base>
+              <mt-popover-item
+                v-for="child in button.children"
+                :key="child.name"
+                :label="t(child.label)"
+                :icon="child.icon"
+                :type="child.isActive && child.isActive(props.editor) ? 'active' : 'default'"
+                :onLabelClick="() => handleButtonClick(child)"
+              />
+            </template>
+          </mt-popover>
+
+          <mt-text-editor-toolbar-button
+            v-else
+            :button="button"
+            :editor="props.editor"
+            @click="handleButtonClick(button)"
+            :disabled="disabled"
+          />
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Editor } from "@tiptap/vue-3";
+import { computed, watch, type PropType } from "vue";
+import mtPopover from "@/components/overlay/mt-popover/mt-popover.vue";
+import mtPopoverItem from "@/components/overlay/mt-popover-item/mt-popover-item.vue";
+import mtTextEditorToolbarButton from "./mt-text-editor-toolbar-button.vue";
+import { useI18n } from "vue-i18n";
+
+export interface CustomButton {
+  name: string;
+  label: string;
+  icon?: string;
+  isActive?: (editor: Editor) => boolean;
+  action?: (editor: Editor) => void;
+  children?: CustomButton[];
+  alignment?: "left" | "right";
+  // For sorting the button order. Default using 1000s steps to provide space for custom buttons
+  position?: number;
+  disabled?: (editor: Editor, globalDisabled: boolean) => boolean;
+  contextualButtons?: (editor: Editor) => CustomButton[];
+}
+
+const { t } = useI18n({
+  useScope: "global",
+  messages: {
+    en: {
+      "mt-text-editor-toolbar": {
+        buttons: {
+          format: "Format",
+          p: "Paragraph",
+          h1: "Headline 1",
+          h2: "Headline 2",
+          h3: "Headline 3",
+          h4: "Headline 4",
+          h5: "Headline 5",
+          h6: "Headline 6",
+          bold: "Bold",
+          italic: "Italic",
+          underline: "Underline",
+          strikethrough: "Strikethrough",
+          superscript: "Superscript",
+          subscript: "Subscript",
+          "text-alignment": "Text Alignment",
+          "align-left": "Align left",
+          "align-center": "Align center",
+          "align-right": "Align right",
+          justify: "Justify",
+          "unordered-list": "Insert Unordered List",
+          "numbered-list": "Insert Ordered List",
+          undo: "Undo",
+          redo: "Redo",
+        },
+      },
+    },
+    de: {
+      "mt-text-editor-toolbar": {
+        buttons: {
+          format: "Format",
+          p: "Absatz",
+          h1: "Überschrift 1",
+          h2: "Überschrift 2",
+          h3: "Überschrift 3",
+          h4: "Überschrift 4",
+          h5: "Überschrift 5",
+          h6: "Überschrift 6",
+          bold: "Fett",
+          italic: "Kursiv",
+          underline: "Unterstrichen",
+          strikethrough: "Durchgestrichen",
+          superscript: "Hochgestellt",
+          subscript: "Tiefgestellt",
+          "text-alignment": "Textausrichtung",
+          "align-left": "Links ausrichten",
+          "align-center": "Zentriert ausrichten",
+          "align-right": "Rechts ausrichten",
+          justify: "Blocksatz",
+          "unordered-list": "Unsortierte Liste einfügen",
+          "numbered-list": "Sortierte Liste einfügen",
+          undo: "Rückgängig",
+          redo: "Wiederholen",
+        },
+      },
+    },
+  },
+});
+
+const props = defineProps({
+  editor: {
+    type: Object as PropType<Editor>,
+    required: true,
+  },
+  customButtons: {
+    type: Array as PropType<CustomButton[]>,
+    default: () => [],
+  },
+  excludedButtons: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["updateContextualButtons"]);
+
+const defaultButtons: CustomButton[] = [
+  {
+    name: "format",
+    label: "mt-text-editor-toolbar.buttons.format",
+    icon: "regular-style-xs",
+    position: 1000,
+    children: [
+      {
+        name: "p",
+        label: "mt-text-editor-toolbar.buttons.p",
+        action: () => props.editor.chain().focus().setParagraph().run(),
+        isActive: (editor) => editor.isActive("paragraph"),
+      },
+      {
+        name: "h1",
+        label: "mt-text-editor-toolbar.buttons.h1",
+        action: () => props.editor.chain().focus().setHeading({ level: 1 }).run(),
+        isActive: (editor) => editor.isActive("heading", { level: 1 }),
+      },
+      {
+        name: "h2",
+        label: "mt-text-editor-toolbar.buttons.h2",
+        action: () => props.editor.chain().focus().setHeading({ level: 2 }).run(),
+        isActive: (editor) => editor.isActive("heading", { level: 2 }),
+      },
+      {
+        name: "h3",
+        label: "mt-text-editor-toolbar.buttons.h3",
+        action: () => props.editor.chain().focus().setHeading({ level: 3 }).run(),
+        isActive: (editor) => editor.isActive("heading", { level: 3 }),
+      },
+      {
+        name: "h4",
+        label: "mt-text-editor-toolbar.buttons.h4",
+        action: () => props.editor.chain().focus().setHeading({ level: 4 }).run(),
+        isActive: (editor) => editor.isActive("heading", { level: 4 }),
+      },
+      {
+        name: "h5",
+        label: "mt-text-editor-toolbar.buttons.h5",
+        action: () => props.editor.chain().focus().setHeading({ level: 5 }).run(),
+        isActive: (editor) => editor.isActive("heading", { level: 5 }),
+      },
+      {
+        name: "h6",
+        label: "mt-text-editor-toolbar.buttons.h6",
+        action: () => props.editor.chain().focus().setHeading({ level: 6 }).run(),
+        isActive: (editor) => editor.isActive("heading", { level: 6 }),
+      },
+    ],
+  },
+  {
+    name: "bold",
+    label: "mt-text-editor-toolbar.buttons.bold",
+    icon: "regular-bold-xs",
+    action: () => props.editor.chain().focus().toggleBold().run(),
+    isActive: (editor) => editor.isActive("bold"),
+    position: 3000,
+  },
+  {
+    name: "italic",
+    label: "mt-text-editor-toolbar.buttons.italic",
+    icon: "regular-italic-xs",
+    action: () => props.editor.chain().focus().toggleItalic().run(),
+    isActive: (editor) => editor.isActive("italic"),
+    position: 4000,
+  },
+  {
+    name: "underline",
+    label: "mt-text-editor-toolbar.buttons.underline",
+    icon: "regular-underline-xs",
+    action: () => props.editor.chain().focus().toggleUnderline().run(),
+    isActive: (editor) => editor.isActive("underline"),
+    position: 5000,
+  },
+  {
+    name: "strikethrough",
+    label: "mt-text-editor-toolbar.buttons.strikethrough",
+    icon: "regular-strikethrough-xs",
+    action: () => props.editor.chain().focus().toggleStrike().run(),
+    isActive: (editor) => editor.isActive("strike"),
+    position: 6000,
+  },
+  {
+    name: "superscript",
+    label: "mt-text-editor-toolbar.buttons.superscript",
+    icon: "regular-superscript-xs",
+    action: () => props.editor.chain().focus().toggleSuperscript().run(),
+    isActive: (editor) => editor.isActive("superscript"),
+    position: 7000,
+  },
+  {
+    name: "subscript",
+    label: "mt-text-editor-toolbar.buttons.subscript",
+    icon: "regular-subscript-xs",
+    action: () => props.editor.chain().focus().toggleSubscript().run(),
+    isActive: (editor) => editor.isActive("subscript"),
+    position: 8000,
+  },
+  {
+    name: "text-alignment",
+    label: "mt-text-editor-toolbar.buttons.text-alignment",
+    icon: "regular-align-left-xs",
+    children: [
+      {
+        name: "align-left",
+        label: "mt-text-editor-toolbar.buttons.align-left",
+        action: () => props.editor.chain().focus().setTextAlign("left").run(),
+        isActive: (editor) => editor.isActive({ textAlign: "left" }),
+      },
+      {
+        name: "align-center",
+        label: "mt-text-editor-toolbar.buttons.align-center",
+        action: () => props.editor.chain().focus().setTextAlign("center").run(),
+        isActive: (editor) => editor.isActive({ textAlign: "center" }),
+      },
+      {
+        name: "align-right",
+        label: "mt-text-editor-toolbar.buttons.align-right",
+        action: () => props.editor.chain().focus().setTextAlign("right").run(),
+        isActive: (editor) => editor.isActive({ textAlign: "right" }),
+      },
+      {
+        name: "justify",
+        label: "mt-text-editor-toolbar.buttons.justify",
+        action: () => props.editor.chain().focus().setTextAlign("justify").run(),
+        isActive: (editor) => editor.isActive({ textAlign: "justify" }),
+      },
+    ],
+    position: 9000,
+  },
+  {
+    name: "unordered-list",
+    icon: "regular-list-unordered-xs",
+    label: "mt-text-editor-toolbar.buttons.unordered-list",
+    action: () => props.editor.chain().focus().toggleBulletList().run(),
+    isActive: (editor) => editor.isActive("bulletList"),
+    position: 10000,
+  },
+  {
+    name: "numbered-list",
+    icon: "regular-list-numbered-xs",
+    label: "mt-text-editor-toolbar.buttons.numbered-list",
+    action: () => props.editor.chain().focus().toggleOrderedList().run(),
+    isActive: (editor) => editor.isActive("orderedList"),
+    position: 11000,
+  },
+  {
+    name: "undo",
+    icon: "regular-undo-xs",
+    alignment: "right",
+    label: "mt-text-editor-toolbar.buttons.undo",
+    action: () => props.editor.chain().focus().undo().run(),
+    disabled: (editor) => {
+      if (props.disabled) {
+        return true;
+      }
+
+      return !editor.can().undo();
+    },
+    position: 1000,
+  },
+  {
+    name: "redo",
+    icon: "regular-redo-xs",
+    alignment: "right",
+    label: "mt-text-editor-toolbar.buttons.redo",
+    action: () => props.editor.chain().focus().redo().run(),
+    disabled: (editor) => {
+      if (props.disabled) {
+        return true;
+      }
+
+      return !editor.can().redo();
+    },
+    position: 2000,
+  },
+];
+
+const buttonsLeft = computed(() => {
+  return [...defaultButtons, ...props.customButtons]
+    .filter((button) => {
+      const isExcluded = props.excludedButtons.includes(button.name);
+      const isRight = button.alignment === "right";
+
+      return !isExcluded && !isRight;
+    })
+    .sort((a, b) => {
+      // Sort by position. If no position is set, move to the end
+      return (a.position ?? Number.MAX_SAFE_INTEGER) - (b.position ?? Number.MAX_SAFE_INTEGER);
+    });
+});
+
+const buttonsRight = computed(() => {
+  return [...defaultButtons, ...props.customButtons]
+    .filter((button) => {
+      const isExcluded = props.excludedButtons.includes(button.name);
+      const isRight = button.alignment === "right";
+
+      return !isExcluded && isRight;
+    })
+    .sort((a, b) => {
+      // Sort by position. If no position is set, move to the end
+      return (a.position ?? Number.MAX_SAFE_INTEGER) - (b.position ?? Number.MAX_SAFE_INTEGER);
+    });
+});
+
+const handleButtonClick = (button: CustomButton) => {
+  if (!button.action) {
+    return;
+  }
+
+  button.action(props.editor);
+};
+
+const contextualButtons = computed(() => {
+  return [...buttonsLeft.value, ...buttonsRight.value]
+    .filter((button) => {
+      return button.contextualButtons && button.contextualButtons(props.editor).length > 0;
+    })
+    .map((button) => {
+      return button.contextualButtons!(props.editor);
+    })
+    .flat();
+});
+
+watch(
+  contextualButtons,
+  (newValue, oldValue) => {
+    // Check if the buttons have changed
+    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) {
+      return;
+    }
+
+    // Emit contextual buttons
+    emit("updateContextualButtons", newValue);
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.mt-text-editor-toolbar {
+  padding: 0 var(--scale-size-6);
+  border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
+  height: var(--scale-size-36);
+  user-select: none;
+  width: 100%;
+  background: var(--color-background-primary-disabled);
+  border-bottom: 1px solid var(--color-icon-primary-disabled);
+  color: var(--color-text-secondary-default);
+  display: flex;
+}
+
+.mt-text-editor-toolbar__buttons-left,
+.mt-text-editor-toolbar__buttons-right {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.mt-text-editor-toolbar__buttons-right {
+  margin-left: auto;
+}
+
+.mt-text-editor-toolbar :deep(.mt-floating-ui) {
+  height: inherit;
+}
+
+.mt-text-editor-toolbar :deep(.mt-floating-ui__trigger) {
+  display: block;
+  height: inherit;
+}
+
+.mt-text-editor--inline-edit .mt-text-editor-toolbar {
+  border: none;
+  border-radius: var(--border-radius-xs);
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 8%),
+    0 2px 1px rgba(0, 0, 0, 6%),
+    0 1px 3px rgba(0, 0, 0, 10%);
+}
+</style>
diff --git a/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.interactive.stories.ts b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.interactive.stories.ts
new file mode 100644
index 000000000..a6428a658
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.interactive.stories.ts
@@ -0,0 +1,836 @@
+import { within, userEvent } from "@storybook/test";
+import { expect } from "@storybook/test";
+import { waitUntil } from "../../../_internal/test-helper";
+
+import meta, { type MtTextEditorMeta, type MtTextEditorStory } from "./mt-text-editor.stories";
+import { defineStory } from "@/_internal/story-helper";
+
+export default {
+  ...meta,
+  title: "Interaction Tests/Form/mt-text-editor",
+} as MtTextEditorMeta;
+
+/**
+ * Selects the text of an element. It is important to
+ * click on the element before calling this function
+ * to ensure that the element is focused. Because
+ * Storybook throws manual events, the element is not
+ * focused by default.
+ */
+function selectText(element: HTMLElement) {
+  const selection = window.getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+
+export const VisualTestRenderEditor: MtTextEditorStory = defineStory({
+  name: "Should render the text editor",
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("82 characters")).toBeDefined();
+  },
+});
+
+export const VisualTestRenderEditorInlineMode: MtTextEditorStory = defineStory({
+  name: "Should render the text editor in inline mode",
+  args: {
+    isInlineEdit: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("82 characters")).toBeDefined();
+  },
+});
+
+export const VisualTestRenderDisabledEditor: MtTextEditorStory = defineStory({
+  name: "Should render the disabled text editor",
+  args: {
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("82 characters")).toBeDefined();
+  },
+});
+
+export const VisualTestRenderPlaceholder: MtTextEditorStory = defineStory({
+  name: "Should render the placeholder inside text editor",
+  args: {
+    placeholder: "Type something...",
+    modelValue: "",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("0 characters")).toBeDefined();
+  },
+});
+
+export const VisualTestRenderError: MtTextEditorStory = defineStory({
+  name: "Should render a error in text editor",
+  args: {
+    error: {
+      code: 500,
+      detail: "Error while saving!",
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("82 characters")).toBeDefined();
+  },
+});
+
+export const VisualTestRenderEditorInlineModeSelected: MtTextEditorStory = defineStory({
+  name: "Should render the bubble menu in inline mode when text is selected",
+  args: {
+    isInlineEdit: true,
+    modelValue: `<table style="min-width: 75px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Hello World</p></th><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table><p></p>`,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Wait until the counter is rendered
+    await waitUntil(() => canvas.getByText("11 characters"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Wait until the bubble menu is rendered
+    await waitUntil(() => document.querySelector(".mt-text-editor-toolbar") !== null);
+
+    // Expect the bubble menu to be rendered
+    expect(canvas.getByLabelText("Format")).toBeDefined();
+    expect(canvas.getByLabelText("Bold")).toBeDefined();
+    expect(canvas.getByLabelText("Italic")).toBeDefined();
+
+    // Expect the contextual buttons to be rendered
+    expect(canvas.getByLabelText("Insert row before")).toBeDefined();
+    expect(canvas.getByLabelText("Insert row after")).toBeDefined();
+    expect(canvas.getByLabelText("Delete row")).toBeDefined();
+  },
+});
+
+export const SetParagraph: MtTextEditorStory = defineStory({
+  name: "Should set paragraph",
+  args: {
+    modelValue: `<h1>Hello World</h1>`,
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("11 characters")).toBeDefined();
+
+    // Click on button with aria-label "Format"
+    await userEvent.click(canvas.getByLabelText("Format"));
+
+    // Click on menuitem with text "Paragraph"
+    await userEvent.click(screen.getByText("Paragraph"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue.mock.calls.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith("<p>Hello World</p>");
+  },
+});
+
+export const SetHeadlineH1: MtTextEditorStory = defineStory({
+  name: "Should set h1 headline",
+  args: {
+    modelValue: `<p>Hello World</p>`,
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("11 characters")).toBeDefined();
+
+    // Click on button with aria-label "Format"
+    await userEvent.click(canvas.getByLabelText("Format"));
+
+    // Click on menuitem with text "Headline 1"
+    await userEvent.click(screen.getByText("Headline 1"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue.mock.calls.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith("<h1>Hello World</h1>");
+  },
+});
+
+export const SetHeadlineH2: MtTextEditorStory = defineStory({
+  name: "Should set h2 headline",
+  args: {
+    modelValue: "<p>Hello World</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("11 characters")).toBeDefined();
+
+    // Click on button with aria-label "Format"
+    await userEvent.click(canvas.getByLabelText("Format"));
+
+    // Click on menuitem with text "Headline 2"
+    await userEvent.click(screen.getByText("Headline 2"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue.mock.calls.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith("<h2>Hello World</h2>");
+  },
+});
+
+export const SetHeadlineH3: MtTextEditorStory = defineStory({
+  name: "Should set h3 headline",
+  args: {
+    modelValue: "<p>Hello World</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("11 characters")).toBeDefined();
+
+    // Click on button with aria-label "Format"
+    await userEvent.click(canvas.getByLabelText("Format"));
+
+    // Click on menuitem with text "Headline 3"
+    await userEvent.click(screen.getByText("Headline 3"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue.mock.calls.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith("<h3>Hello World</h3>");
+  },
+});
+
+export const SetHeadlineH4: MtTextEditorStory = defineStory({
+  name: "Should set h4 headline",
+  args: {
+    modelValue: "<p>Hello World</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("11 characters")).toBeDefined();
+
+    // Click on button with aria-label "Format"
+    await userEvent.click(canvas.getByLabelText("Format"));
+
+    // Click on menuitem with text "Headline 4"
+    await userEvent.click(screen.getByText("Headline 4"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue.mock.calls.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith("<h4>Hello World</h4>");
+  },
+});
+
+export const SetHeadlineH5: MtTextEditorStory = defineStory({
+  name: "Should set h5 headline",
+  args: {
+    modelValue: "<p>Hello World</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("11 characters")).toBeDefined();
+
+    // Click on button with aria-label "Format"
+    await userEvent.click(canvas.getByLabelText("Format"));
+
+    // Click on menuitem with text "Headline 5"
+    await userEvent.click(screen.getByText("Headline 5"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue.mock.calls.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith("<h5>Hello World</h5>");
+  },
+});
+
+export const SetHeadlineH6: MtTextEditorStory = defineStory({
+  name: "Should set h6 headline",
+  args: {
+    modelValue: "<p>Hello World</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("11 characters")).toBeDefined();
+
+    // Click on button with aria-label "Format"
+    await userEvent.click(canvas.getByLabelText("Format"));
+
+    // Click on menuitem with text "Headline 6"
+    await userEvent.click(screen.getByText("Headline 6"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue.mock.calls.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith("<h6>Hello World</h6>");
+  },
+});
+
+export const SetTextColor: MtTextEditorStory = defineStory({
+  name: "Should set text color",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "colorpicker-toggle"
+    await userEvent.click(canvas.getByLabelText("colorpicker-toggle"));
+
+    // Set new color value
+    await waitUntil(() => document.querySelector("[aria-label='colorpicker-apply-color']"));
+
+    const redInput = screen.getByLabelText("red-value") as HTMLInputElement;
+    const greenInput = screen.getByLabelText("green-value") as HTMLInputElement;
+    const blueInput = screen.getByLabelText("blue-value") as HTMLInputElement;
+
+    await userEvent.clear(redInput);
+    await userEvent.type(redInput, "255");
+
+    await userEvent.clear(greenInput);
+    await userEvent.type(greenInput, "0");
+
+    await userEvent.clear(blueInput);
+    await userEvent.type(blueInput, "0");
+
+    // Click on button with aria-label "Apply"
+    await userEvent.click(screen.getByLabelText("colorpicker-apply-color"));
+
+    // Expect the color to be applied
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      '<h1><span style="color: #ff0000">Hello World</span></h1><p>Some text</p>',
+    );
+  },
+});
+
+export const MakeFontBold: MtTextEditorStory = defineStory({
+  name: "Should make font bold",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "bold"
+    await userEvent.click(canvas.getByLabelText("Bold"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      "<h1><strong>Hello World</strong></h1><p>Some text</p>",
+    );
+  },
+});
+
+export const MakeFontItalic: MtTextEditorStory = defineStory({
+  name: "Should make font italic",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "italic"
+    await userEvent.click(canvas.getByLabelText("Italic"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      "<h1><em>Hello World</em></h1><p>Some text</p>",
+    );
+  },
+});
+
+export const MakeFontUnderline: MtTextEditorStory = defineStory({
+  name: "Should make font underline",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "underline"
+    await userEvent.click(canvas.getByLabelText("Underline"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      "<h1><u>Hello World</u></h1><p>Some text</p>",
+    );
+  },
+});
+
+export const MakeFontStrikeThrough: MtTextEditorStory = defineStory({
+  name: "Should make font strike through",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "strike-through"
+    await userEvent.click(canvas.getByLabelText("Strikethrough"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      "<h1><s>Hello World</s></h1><p>Some text</p>",
+    );
+  },
+});
+
+export const MakeFontSuperScript: MtTextEditorStory = defineStory({
+  name: "Should make font super script",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "superscript"
+    await userEvent.click(canvas.getByLabelText("Superscript"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      "<h1><sup>Hello World</sup></h1><p>Some text</p>",
+    );
+  },
+});
+
+export const MakeFontSubScript: MtTextEditorStory = defineStory({
+  name: "Should make font sub script",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "subscript"
+    await userEvent.click(canvas.getByLabelText("Subscript"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      "<h1><sub>Hello World</sub></h1><p>Some text</p>",
+    );
+  },
+});
+
+export const SetTextAlignmentLeft: MtTextEditorStory = defineStory({
+  name: "Should set text alignment left",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "Text Alignment"
+    await userEvent.click(canvas.getByLabelText("Text Alignment"));
+
+    // Click on menuitem with text "Align left"
+    await userEvent.click(screen.getByText("Align left"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content (no change expected because left is default)
+    expect(args.updateModelValue).toHaveBeenCalledWith("<h1>Hello World</h1><p>Some text</p>");
+  },
+});
+
+export const SetTextAlignmentCenter: MtTextEditorStory = defineStory({
+  name: "Should set text alignment center",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "Text Alignment"
+    await userEvent.click(canvas.getByLabelText("Text Alignment"));
+
+    // Click on menuitem with text "Align center"
+    await userEvent.click(screen.getByText("Align center"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      '<h1 style="text-align: center">Hello World</h1><p>Some text</p>',
+    );
+  },
+});
+
+export const SetTextAlignmentRight: MtTextEditorStory = defineStory({
+  name: "Should set text alignment right",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("20 characters")).toBeDefined();
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "Text Alignment"
+    await userEvent.click(canvas.getByLabelText("Text Alignment"));
+
+    // Click on menuitem with text "Align right"
+    await userEvent.click(screen.getByText("Align right"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      '<h1 style="text-align: right">Hello World</h1><p>Some text</p>',
+    );
+  },
+});
+
+export const SetTextAlignmentJustify: MtTextEditorStory = defineStory({
+  name: "Should set text alignment justify",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args, screen }) => {
+    const canvas = within(canvasElement);
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "Text Alignment"
+    await userEvent.click(canvas.getByLabelText("Text Alignment"));
+
+    // Click on menuitem with text "Align justify"
+    await userEvent.click(screen.getByText("Justify"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      '<h1 style="text-align: justify">Hello World</h1><p>Some text</p>',
+    );
+  },
+});
+
+export const SetUnorderedList: MtTextEditorStory = defineStory({
+  name: "Should set unordered list",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "Unordered list"
+    await userEvent.click(canvas.getByLabelText("Insert Unordered List"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      "<ul><li><p>Hello World</p></li></ul><p>Some text</p>",
+    );
+  },
+});
+
+export const SetOrderedList: MtTextEditorStory = defineStory({
+  name: "Should set ordered list",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "Ordered list"
+    await userEvent.click(canvas.getByLabelText("Insert Ordered List"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      "<ol><li><p>Hello World</p></li></ol><p>Some text</p>",
+    );
+  },
+});
+
+export const SetLink: MtTextEditorStory = defineStory({
+  name: "Should set link",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    // Click inside the editor
+    await userEvent.click(canvas.getByText("Hello World"));
+
+    // Select "Hello World" text
+    selectText(canvas.getByText("Hello World"));
+
+    // Click on button with aria-label "Link"
+    await userEvent.click(canvas.getByLabelText("Link"));
+
+    // Get body
+    const body = within(document.body);
+
+    // Set link url
+    const linkInput = body.getByLabelText("Link URL");
+    await userEvent.clear(linkInput);
+    await userEvent.type(linkInput, "https://www.shopware.com");
+
+    // Toggle link target
+    const targetCheckbox = document.querySelector(
+      "div[aria-label='Open in new tab'] input[type='checkbox'",
+    ) as HTMLInputElement;
+    await userEvent.click(targetCheckbox);
+
+    // Click on button with text "Apply link"
+    await userEvent.click(body.getByText("Apply link"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      '<h1><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.shopware.com">Hello World</a></h1><p>Some text</p>',
+    );
+  },
+});
+
+export const InsertTable: MtTextEditorStory = defineStory({
+  name: "Should insert table",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    // Click on button with aria-label "Table"
+    await userEvent.click(canvas.getByLabelText("Table"));
+
+    // Get body
+    const body = within(document.body);
+
+    // Set table columns
+    const columnsInput = body.getByLabelText("Columns");
+    await userEvent.type(columnsInput, "{selectall}{backspace}4");
+
+    // Set table rows
+    const rowsInput = body.getByLabelText("Rows");
+    await userEvent.type(rowsInput, "{selectall}{backspace}2");
+
+    // Click on button with text "Insert table"
+    await userEvent.click(body.getByText("Insert table"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Check if args was triggered with new content
+    expect(args.updateModelValue).toHaveBeenCalledWith(
+      '<table style="min-width: 100px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table><h1>Hello World</h1><p>Some text</p>',
+    );
+  },
+});
+
+export const VisualTestShowContextualButtons: MtTextEditorStory = defineStory({
+  name: "Should show contextual buttons when inside a table",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    // Click on button with aria-label "Table"
+    await userEvent.click(canvas.getByLabelText("Table"));
+
+    // Get body
+    const body = within(document.body);
+
+    // Wait until modal transition is finished
+    await waitUntil(() => document.body.querySelector("div[role='dialog']"));
+    await waitUntil(() => !document.body.querySelector(".modal-enter-active"));
+
+    // Set table columns
+    const columnsInput = body.getByLabelText("Columns");
+    await userEvent.type(columnsInput, "{selectall}{backspace}4");
+
+    // Set table rows
+    const rowsInput = body.getByLabelText("Rows");
+    await userEvent.type(rowsInput, "{selectall}{backspace}2");
+
+    // Click on button with text "Insert table"
+    await userEvent.click(body.getByText("Insert table"));
+
+    // Wait until modal is closed
+    await waitUntil(() => !document.body.querySelector("div[role='dialog']"));
+
+    // Wait until args was triggered with new content
+    await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
+
+    // Click inside a table cell
+    const tableCell = document.querySelector(
+      ".mt-text-editor__content-editor table td",
+    ) as HTMLElement;
+    await userEvent.click(tableCell);
+
+    // Expect the contextual buttons to be rendered
+    expect(canvas.getByLabelText("Insert row before")).toBeDefined();
+    expect(canvas.getByLabelText("Insert row after")).toBeDefined();
+    expect(canvas.getByLabelText("Delete row")).toBeDefined();
+    expect(canvas.getByLabelText("Insert column before")).toBeDefined();
+    expect(canvas.getByLabelText("Insert column after")).toBeDefined();
+    expect(canvas.getByLabelText("Delete column")).toBeDefined();
+    expect(canvas.getByLabelText("Remove table")).toBeDefined();
+  },
+});
+
+export const VisualTestRenderCodeView: MtTextEditorStory = defineStory({
+  name: "Should render the code view",
+  args: {
+    modelValue: "<h1>Hello World</h1><p>Some text</p>",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Click on button with aria-label "Toggle code"
+    await userEvent.click(canvas.getByLabelText("Toggle code"));
+
+    // Expect the code view to be rendered
+    const codeEditor = canvas.getByRole("textbox");
+    expect(codeEditor).toBeDefined();
+    expect(codeEditor.innerText).toBe("<h1>Hello World</h1><p>Some text</p>");
+  },
+});
diff --git a/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.mdx b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.mdx
new file mode 100644
index 000000000..48e8d06c5
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.mdx
@@ -0,0 +1,445 @@
+import { Canvas, Meta, Markdown } from "@storybook/blocks";
+
+import * as TextEditorStories from "./mt-text-editor.stories";
+
+<Meta of={TextEditorStories} />
+
+# Text Editor
+
+The `mt-text-editor` component is a powerful and flexible rich text editor built with [tiptap](https://tiptap.dev/). It is designed to handle a variety of use cases, such as adding rich text editing to your application. This component is highly customizable and can be extended with additional buttons, features, or configurations to suit your needs.
+
+## Features
+
+- **Rich Text Editing**: Includes common formatting options like bold, italic, underline, and more, with support for text alignment, bullet lists, ordered lists, and more.
+- **Customizable Toolbar**: Add or exclude toolbar buttons as per your requirements.
+- **Code Editor Mode**: Toggle between WYSIWYG editing and raw HTML editing with CodeMirror integration.
+- **Character Count**: Displays a live character count at the bottom.
+- **Inline Editing**: Option to enable inline editing with a floating toolbar.
+- **Contextual Buttons**: Provides custom buttons for the footer of the editor that change contextually based on the current cursor position.
+
+---
+
+## Usage
+
+To use the `mt-text-editor` component in your project, import it and provide the required props.
+
+### Minimal Example
+
+```html
+<template>
+  <mt-text-editor v-model="content" />
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const content = ref("<p>Your content here</p>");
+</script>
+```
+
+<Canvas of={TextEditorStories.DefaultStory} />
+
+### Inline Editing
+
+```html
+<template>
+  <mt-text-editor v-model="content" :isInlineEdit="true" />
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const content = ref("<p>Inline editing example</p>");
+</script>
+```
+
+<Canvas of={TextEditorStories.InlineEditStory} />
+
+### Custom Toolbar Buttons
+
+```html
+<template>
+  <mt-text-editor
+    v-model="content"
+    :custom-buttons="customButtons"
+    :tipTapConfig="customTipTapConfig"
+  />
+</template>
+
+<script setup>
+  import { ref } from "vue";
+  import Highlight from "@tiptap/extension-highlight";
+
+  const content = ref("<p>Your content here</p>");
+
+  const customTipTapConfig = {
+    extensions: [Highlight],
+  };
+  const customButtons = [
+    {
+      name: "highlight",
+      label: "Highlight",
+      icon: "regular-circle-xs",
+      action: (editor) => {
+        editor.chain().focus().toggleMark("highlight").run();
+      },
+    },
+  ];
+</script>
+```
+
+<Canvas of={TextEditorStories.CustomButtonsStory} />
+
+### Props
+
+<Markdown>
+  {`
+| Prop Name       | Type    | Default | Description                                                             |
+| --------------- | ------- | ------- | ----------------------------------------------------------------------- |
+| modelValue      | String  | ''      | The HTML content of the editor. Use 'v-model' to bind it to a variable. |
+| isInlineEdit    | Boolean | 'false' | Enables inline editing with a floating toolbar.                         |
+| tipTapConfig    | Object  | {}      | Custom configuration for the tiptap editor.                             |
+| customButtons   | Array   | []      | Array of custom buttons to add to the toolbar.                          |
+| excludedButtons | Array   | []      | Array of button names to exclude from the toolbar.                      |
+`}
+</Markdown>
+
+---
+
+## Slots
+
+The `mt-text-editor` component provides several slots for customization:
+
+### `button_<name>`
+
+Allows you to override or customize specific buttons in the toolbar. For example, to customize the `text-color` button:
+
+```html
+<template>
+  <mt-text-editor v-model="content">
+    <template #button_text-color="{ editor, disabled, button }">
+      <mt-text-editor-toolbar-button
+        :button="button"
+        :editor="props.editor"
+        :disabled="disabled"
+        @click="openColorPickerModal"
+      />
+
+      <ColorPickerModal
+        v-if="showColorPickerModal"
+        v-model="color"
+        @confirm="applyTextColor"
+        @cancel="closeColorPickerModal"
+      />
+    </template>
+  </mt-text-editor>
+</template>
+
+<script setup>
+  // TODO: Add logic for custom button
+</script>
+```
+
+### `contextual-buttons`
+
+Provides custom buttons for the footer of the editor. These buttons can change contextually based on the editor's state.
+
+### `footer-left` and `footer-right`
+
+Customize the left or right sections of the editor's footer.
+
+---
+
+## Toolbar Buttons
+
+The `mt-text-editor` includes the following built-in buttons by default:
+
+<Markdown>
+  {`
+| Button Name    | Description                                        | Alignment | Position |
+| -------------- | -------------------------------------------------- | --------- | -------- |
+| format         | Opens a popover with formatting options.           | 'left'    | 1000     |
+| text-color     | Allows the user to pick a text color.              | 'left'    | 2000     |
+| bold           | Toggles bold text.                                 | 'left'    | 3000     |
+| italic         | Toggles italic text.                               | 'left'    | 4000     |
+| underline      | Toggles underlined text.                           | 'left'    | 5000     |
+| strikethrough  | Toggles strikethrough text.                        | 'left'    | 6000     |
+| superscript    | Toggles superscript text.                          | 'left'    | 7000     |
+| subscript      | Toggles subscript text.                            | 'left'    | 8000     |
+| text-alignment | Opens a popover to set text alignment.             | 'left'    | 9000     |
+| unordered-list | Toggles an unordered list.                         | 'left'    | 10000    |
+| numbered-list  | Toggles an numbered list.                          | 'left'    | 11000    |
+| link           | Opens a modal to insert or edit links.             | 'left'    | 12000    |
+| table          | Opens a modal to insert or modify tables.          | 'left'    | 13000    |
+| undo           | Undoes the last action.                            | 'right'   | 1000     |
+| redo           | Redoes the last undone action.                     | 'right'   | 2000     |
+| toggle-code    | Toggles between WYSIWYG mode and raw HTML editing. | 'right'   | 3000     |
+`}
+</Markdown>
+
+You can exclude or add custom buttons using the `excludedButtons` and `customButtons` props.
+
+---
+
+## Customizing with TipTap Extensions
+
+The editor uses [tiptap extensions](https://tiptap.dev/guide/extensions) for its features.
+You can include custom extensions by passing them through the `tipTapConfig` prop except the hardcoded properties `content`, `editorProps` and `onUpdate`.
+For example:
+
+```html
+<script setup>
+  import { Underline } from "@tiptap/extension-underline";
+  import { TextEditor } from "@/components/mt-text-editor.vue";
+
+  const tipTapConfig = {
+    extensions: [Underline],
+  };
+</script>
+
+<template>
+  <mt-text-editor v-model="content" :tipTapConfig="tipTapConfig" />
+</template>
+```
+
+---
+
+## Customizing with Custom Buttons
+
+The `mt-text-editor` supports adding custom buttons to the toolbar by passing an array of `CustomButton` objects to the `customButtons` prop.
+
+### Key Properties of `CustomButton`
+
+- **`name`** (required): A unique identifier for the button.
+- **`label`** (required): The visible label for the button, can be the direct text or a translation key.
+- **`icon`**: An optional icon to display instead of the label. You can use an icon name from the Meteor icon set.
+- **`isActive`**: A function that determines whether the button is currently active (e.g., for toggling bold or italic formatting).
+- **`action`**: A function that executes when the button is clicked. This is where you can apply an editor command.
+- **`children`**: An array of child buttons to create a dropdown or multi-level menu.
+- **`alignment`**: Specifies whether the button should appear on the left or right side of the toolbar.
+- **`position`**: Defines the order of the button in the toolbar. Buttons with lower `position` values appear first. See the table with existing buttons to see their positions.
+- **`disabled`**: A function that determines whether the button should be disabled.
+- **`contextualButtons`**: A function that returns additional buttons to display in the footer based on the editor's state.
+
+---
+
+### Example: Adding a Simple Custom Button
+
+Here’s how you can add a simple custom button to toggle bold formatting:
+
+```html
+<template>
+  <mt-text-editor v-model="content" :custom-buttons="customButtons" />
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const content = ref("<p>Your content here</p>");
+
+  // Define a custom button
+  const customButtons = [
+    {
+      name: "custom-bold",
+      label: "Bold",
+      icon: "regular-bold-xs",
+      position: 3500,
+      action: (editor) => {
+        editor.chain().focus().toggleBold().run();
+      },
+      isActive: (editor) => editor.isActive("bold"),
+    },
+  ];
+</script>
+```
+
+### Example: Adding a Dropdown Menu
+
+You can create a dropdown menu by using the `children` property. Each child button is defined as another `CustomButton` object.
+
+```html
+<template>
+  <mt-text-editor v-model="content" :custom-buttons="customButtons" />
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const content = ref("<p>Your content here</p>");
+
+  // Define a dropdown menu with child buttons
+  const customButtons = [
+    {
+      name: "custom-format",
+      label: "Format",
+      icon: "regular-style-xs",
+      position: 1500,
+      children: [
+        {
+          name: "regular-bold-xs",
+          label: "Bold",
+          icon: "bold-icon",
+          action: (editor) => {
+            editor.chain().focus().toggleBold().run();
+          },
+          isActive: (editor) => editor.isActive("bold"),
+        },
+        {
+          name: "custom-italic",
+          label: "Italic",
+          icon: "regular-italic-xs",
+          action: (editor) => {
+            editor.chain().focus().toggleItalic().run();
+          },
+          isActive: (editor) => editor.isActive("italic"),
+        },
+      ],
+    },
+  ];
+</script>
+```
+
+---
+
+### Example: Adding Contextual Buttons in the Footer
+
+Contextual buttons are buttons that appear in the editor's footer and can change depending on the editor's current state. Use the `contextualButtons` property to define these.
+
+```html
+<template>
+  <mt-text-editor v-model="content" :custom-buttons="customButtons" />
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const content = ref("<p>Your content here</p>");
+
+  // Define a custom button with contextual footer buttons
+  const customButtons = [
+    {
+      name: "custom-link",
+      label: "Link",
+      icon: "regular-link-xs",
+      position: 12500,
+      action: (editor) => {
+        const url = prompt("Enter the URL");
+        if (url) {
+          editor.chain().focus().setLink({ href: url }).run();
+        }
+      },
+      contextualButtons: (editor) => {
+        if (!editor.isActive("link")) {
+          return [];
+        }
+
+        return [
+          {
+            name: "remove-link",
+            label: "Remove Link",
+            icon: "regular-times-xs",
+            action: (editor) => {
+              editor.chain().focus().unsetLink().run();
+            },
+          },
+        ];
+      },
+    },
+  ];
+</script>
+```
+
+---
+
+### Example: Disabling a Button Based on Editor State
+
+You can disable a button dynamically by providing a `disabled` function. For example, disabling the "Bold" button if the editor is empty:
+
+```html
+<template>
+  <mt-text-editor v-model="content" :custom-buttons="customButtons" />
+</template>
+
+<script setup>
+  import { ref } from "vue";
+
+  const content = ref("<p>Your content here</p>");
+
+  // Define a custom button with a disabled state
+  const customButtons = [
+    {
+      name: "custom-bold",
+      label: "Bold",
+      icon: "regular-bold-xs",
+      position: 100,
+      action: (editor) => {
+        editor.chain().focus().toggleBold().run();
+      },
+      isActive: (editor) => editor.isActive("bold"),
+      disabled: (editor) => editor.getText().length === 0,
+    },
+  ];
+</script>
+```
+
+---
+
+### Example: Using a complete custom button with the dynamic slot
+
+For each button a dynamic slot is rendered: `button_${name}`. You can use this slot to replace the automatic rendered button defined in the button object with your own component:
+
+```html
+<template>
+  <mt-text-editor v-model="content" :customButtons="customButtons">
+    <!-- Replaces the "text-color" button with custom component -->
+    <template #button_text-color="{ editor, disabled, button }">
+      <mt-text-editor-toolbar-button
+        :button="button"
+        :editor="props.editor"
+        :disabled="disabled"
+        @click="openColorPickerModal"
+      />
+
+      <ColorPickerModal
+        v-if="showColorPickerModal"
+        v-model="color"
+        @confirm="applyTextColor"
+        @cancel="closeColorPickerModal"
+      />
+    </template>
+  </mt-text-editor>
+</template>
+
+<script setup>
+  // TODO: Add logic for custom button
+</script>
+```
+
+---
+
+### Positioning Custom Buttons in the Toolbar
+
+By default, buttons are sorted in the toolbar based on their `position` value. Buttons with lower `position` values appear earlier. The default buttons have predefined positions in increments of `1000`, leaving space for you to insert custom buttons at specific positions.
+
+For example:
+
+- Default buttons (like `bold`, `italic`, etc.) have `position` values starting at `1000`.
+- You can insert your custom buttons between or after them by specifying values like `1500`, `3500`, or `8500`.
+
+```js
+const customButtons = [
+  {
+    name: "custom-highlight",
+    label: "Highlight",
+    icon: "circle-xs",
+    position: 3500, // Places this button between "Bold" (3000) and "Italic" (4000)
+    action: (editor) => editor.chain().focus().toggleHighlight().run(),
+  },
+];
+```
+
+---
+
+## Code Editor Mode
+
+The `mt-text-editor` includes a code editor mode for editing raw HTML. This mode is powered by [CodeMirror](https://codemirror.net/). Use the `toggle-code` button to switch between WYSIWYG mode and code mode.
diff --git a/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.stories.ts b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.stories.ts
new file mode 100644
index 000000000..0d3cb6e6e
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.stories.ts
@@ -0,0 +1,81 @@
+import type { StoryObj } from "@storybook/vue3";
+import MtTextEditor from "./mt-text-editor.vue";
+import type { SlottedMeta } from "@/_internal/story-helper";
+import MtTextEditorToolbarButtonColor from "./_internal/mt-text-editor-toolbar-button-color.vue";
+import { ref } from "vue";
+import Highlight from "@tiptap/extension-highlight";
+import { fn } from "@storybook/test";
+
+export type MtTextEditorMeta = SlottedMeta<
+  typeof MtTextEditor,
+  "default" | "click" | "updateModelValue"
+>;
+
+export default {
+  title: "Components/Form/mt-text-editor",
+  component: MtTextEditor,
+  args: {
+    modelValue: `<h1><span style="color: rgb(5, 220, 235)">Hello</span> <span style="color: rgb(43, 235, 5)">World</span></h1><p><strong>Some</strong> text</p><ol><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.shopware.com">Lorem</a></p></li><li><p>Ipsum</p></li></ol><table style="min-width: 75px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p><span>First</span></p></th><th colspan="1" rowspan="1"><p>Second</p></th><th colspan="1" rowspan="1"><p>Third</p></th></tr><tr><td colspan="1" rowspan="1"><p>Lorem</p></td><td colspan="1" rowspan="1"><p>Ipsum</p></td><td colspan="1" rowspan="1"><p>non</p></td></tr><tr><td colspan="1" rowspan="1"><p>dolor</p></td><td colspan="1" rowspan="1"><p>sit</p></td><td colspan="1" rowspan="1"><p>amet</p></td></tr></tbody></table><p>After table</p>`,
+    updateModelValue: fn(),
+    label: "My Text editor",
+  },
+  render: (args) => ({
+    components: { MtTextEditor, MtTextEditorToolbarButtonColor },
+    setup() {
+      const currentModelValue = ref(args.modelValue);
+      const onUpdateModelValue = (value: string) => {
+        currentModelValue.value = value;
+        args.updateModelValue(value);
+      };
+
+      return {
+        args,
+        currentModelValue,
+        onUpdateModelValue,
+      };
+    },
+    template: `
+<div class="wrapper">
+  <mt-text-editor
+      v-bind="args"
+      :modelValue="currentModelValue"
+      @update:modelValue="onUpdateModelValue"
+  >
+    <!-- Here we can add custom toolbar buttons -->
+  </mt-text-editor>
+</div>`,
+  }),
+} as MtTextEditorMeta;
+
+export type MtTextEditorStory = StoryObj<MtTextEditorMeta>;
+
+export const DefaultStory: MtTextEditorStory = {
+  name: "mt-text-editor",
+};
+
+export const InlineEditStory: MtTextEditorStory = {
+  name: "mt-text-editor (inline edit)",
+  args: {
+    isInlineEdit: true,
+  },
+};
+
+export const CustomButtonsStory: MtTextEditorStory = {
+  name: "mt-text-editor (custom buttons)",
+  args: {
+    modelValue: `<h1>Hello <mark>World</mark></h1><p>In the toolbar you see now a new highlight button.</p>`,
+    tipTapConfig: {
+      extensions: [Highlight],
+    },
+    customButtons: [
+      {
+        name: "highlight",
+        label: "Highlight",
+        icon: "regular-circle-xs",
+        action: (editor) => {
+          editor.chain().focus().toggleMark("highlight").run();
+        },
+      },
+    ],
+  },
+};
diff --git a/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.vue b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.vue
new file mode 100644
index 000000000..c20582b40
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.vue
@@ -0,0 +1,690 @@
+<template>
+  <div class="mt-text-editor" :class="componentClasses" v-if="editor">
+    <label v-if="label">
+      {{ label }}
+    </label>
+
+    <div class="mt-text-editor__box">
+      <component
+        :is="toolbarWrapperComponent"
+        :editor="editor"
+        :tippyOptions="{
+          maxWidth: 'none',
+          zIndex: 1000,
+        }"
+        :key="isInlineEdit"
+      >
+        <mt-text-editor-toolbar
+          :editor="editor"
+          :custom-buttons="mergedCustomButtons"
+          :disabled="globalToolbarButtonDisabled"
+          @updateContextualButtons="updateContextualButtons"
+          :excludedButtons="excludedButtons"
+        >
+          <!-- Special buttons -->
+          <template #button_text-color="{ editor, disabled, button }">
+            <mt-text-editor-toolbar-button-color
+              :editor="editor"
+              :disabled="disabled"
+              :button="button"
+            />
+          </template>
+
+          <template #button_link="{ editor, disabled, button }">
+            <mt-text-editor-toolbar-button-link
+              :editor="editor"
+              :disabled="disabled"
+              :button="button"
+            />
+          </template>
+
+          <template #button_table="{ editor, disabled, button }">
+            <mt-text-editor-toolbar-button-table
+              :editor="editor"
+              :disabled="disabled"
+              :button="button"
+            />
+          </template>
+
+          <!-- Dynamically pass all slots -->
+          <template #[name]="bindings" v-for="(_, name) in $slots">
+            <slot :name="name" v-bind="bindings"> </slot>
+          </template>
+        </mt-text-editor-toolbar>
+      </component>
+
+      <editor-content v-if="!showCodeEditor" :editor="editor" class="mt-text-editor__content" />
+      <code-mirror
+        v-else
+        :lang="lang"
+        :modelValue="modelValue"
+        @update:modelValue="emit('update:modelValue', $event)"
+        class="mt-text-editor__code-editor"
+        wrap
+        basic
+        :disabled="disabled"
+      />
+
+      <div class="mt-text-editor__footer">
+        <div class="mt-text-editor__footer-left">
+          <slot
+            v-if="!disabled"
+            name="contextual-buttons"
+            :editor="editor"
+            :buttons="contextualButtons"
+          >
+            <template v-for="button in contextualButtons" :key="button.name">
+              <mt-popover v-if="button.children">
+                <template #trigger="{ toggleFloatingUi }">
+                  <mt-text-editor-toolbar-button
+                    :button="button"
+                    :editor="editor"
+                    @click="toggleFloatingUi"
+                    :disabled="globalToolbarButtonDisabled"
+                  />
+                </template>
+
+                <template #popover-items__base="{ toggleFloatingUi }">
+                  <mt-popover-item
+                    v-for="child in button.children"
+                    :key="child.name"
+                    :label="child.label"
+                    :icon="child.icon"
+                    :type="child.isActive && child.isActive(editor) ? 'active' : 'default'"
+                    :onLabelClick="
+                      () => {
+                        button.action?.(editor!);
+                        toggleFloatingUi();
+                      }
+                    "
+                  />
+                </template>
+              </mt-popover>
+
+              <mt-text-editor-toolbar-button
+                v-else
+                :button="button"
+                :editor="editor"
+                :disabled="globalToolbarButtonDisabled"
+                @click="button.action?.(editor)"
+              />
+            </template>
+          </slot>
+          <slot name="footer-left" :editor="editor" />
+        </div>
+        <div class="mt-text-editor__footer-right">
+          <slot name="footer-right" :editor="editor">
+            {{
+              t("mt-text-editor.footer.characters", {
+                characters: editor?.storage.characterCount.characters(),
+              })
+            }}
+          </slot>
+        </div>
+      </div>
+    </div>
+
+    <mt-field-error v-if="error" :error="error" />
+  </div>
+</template>
+
+<script setup lang="ts">
+// BubbleMenu is used in <component :is> in the template
+import { EditorContent, BubbleMenu, useEditor } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import TextAlign from "@tiptap/extension-text-align";
+import { Color } from "@tiptap/extension-color";
+import TextStyle from "@tiptap/extension-text-style";
+import Link from "@tiptap/extension-link";
+import CharacterCount from "@tiptap/extension-character-count";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+import Placeholder from "@tiptap/extension-placeholder";
+import mtTextEditorToolbar, { type CustomButton } from "./_internal/mt-text-editor-toolbar.vue";
+import mtTextEditorToolbarButtonColor, {
+  colorButton,
+} from "./_internal/mt-text-editor-toolbar-button-color.vue";
+import mtTextEditorToolbarButtonLink, {
+  linkButton,
+} from "./_internal/mt-text-editor-toolbar-button-link.vue";
+import mtTextEditorToolbarButtonTable, {
+  tableButton,
+} from "./_internal/mt-text-editor-toolbar-button-table.vue";
+import mtTextEditorToolbarButton from "./_internal/mt-text-editor-toolbar-button.vue";
+import mtPopoverItem from "@/components/overlay/mt-popover-item/mt-popover-item.vue";
+import mtPopover from "@/components/overlay/mt-popover/mt-popover.vue";
+import mtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
+import CodeMirror from "vue-codemirror6";
+import { computed, h, reactive, ref, watch, type PropType } from "vue";
+import { html } from "@codemirror/lang-html";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({
+  useScope: "global",
+  messages: {
+    en: {
+      "mt-text-editor": {
+        buttons: {
+          "toggle-code": "Toggle code",
+        },
+        footer: {
+          characters: "{characters} characters",
+        },
+      },
+    },
+    de: {
+      "mt-text-editor": {
+        buttons: {
+          "toggle-code": "Codeansicht umschalten",
+        },
+        footer: {
+          characters: "{characters} Zeichen",
+        },
+      },
+    },
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  /**
+   * Enable inline edit mode
+   */
+  isInlineEdit: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Add custom configuration for the tip tap editor
+   */
+  tipTapConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * Custom buttons to be added to the toolbar
+   */
+  customButtons: {
+    type: Array as PropType<CustomButton[]>,
+    default: () => [],
+  },
+  /**
+   * Excluded buttons from the toolbar
+   */
+  excludedButtons: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  /**
+   * Add disabled state to the editor
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Add placeholder text to the editor
+   */
+  placeholder: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * An error in your business logic related to this field.
+   *
+   * @example {"code": 500, "detail": "Error while saving"}
+   */
+  error: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+
+  /**
+   * A label for your text field. Usually used to guide the user what value this field controls.
+   */
+  label: {
+    type: String,
+    required: false,
+    default: null,
+  },
+});
+
+const componentClasses = computed(() => {
+  return {
+    "mt-text-editor--inline-edit": props.isInlineEdit,
+    "mt-text-editor--disabled": props.disabled,
+    "mt-text-editor--error": !!props.error,
+  };
+});
+
+/**
+ * Editor
+ */
+const editor = useEditor({
+  ...props.tipTapConfig,
+  extensions: [
+    StarterKit,
+    Underline,
+    Subscript,
+    Superscript,
+    TextAlign.configure({
+      types: ["paragraph", "heading"],
+    }),
+    Color,
+    TextStyle,
+    Link.configure({
+      openOnClick: false,
+    }),
+    CharacterCount.configure({}),
+    Table.configure({
+      resizable: true,
+    }),
+    TableRow,
+    TableHeader,
+    TableCell,
+    Placeholder.configure({
+      placeholder: props.placeholder,
+      showOnlyWhenEditable: true,
+    }),
+    ...(props.tipTapConfig.extensions ?? []),
+  ],
+  content: props.modelValue,
+  editorProps: {
+    attributes: {
+      class: "mt-text-editor__content-editor",
+    },
+  },
+  onUpdate: ({ editor }) => {
+    emit("update:modelValue", editor.getHTML());
+  },
+  editable: !props.disabled,
+});
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (showCodeEditor.value) {
+      return;
+    }
+
+    const isSame = editor.value?.getHTML() === newValue;
+
+    if (isSame) {
+      return;
+    }
+
+    editor.value?.commands.setContent(newValue, false);
+  },
+);
+
+watch(
+  () => props.disabled,
+  (newValue) => {
+    editor.value?.setEditable(!newValue);
+  },
+);
+
+const globalToolbarButtonDisabled = computed(() => {
+  return props.disabled || showCodeEditor.value;
+});
+
+/**
+ * Custom buttons
+ */
+const mergedCustomButtons = computed<CustomButton[]>(() => {
+  const editorButtons: CustomButton[] = [
+    colorButton,
+    linkButton,
+    tableButton,
+    {
+      name: "toggle-code",
+      label: "mt-text-editor.buttons.toggle-code",
+      icon: "regular-code-xs",
+      action: () => (showCodeEditor.value = !showCodeEditor.value),
+      alignment: "right",
+      position: 3000,
+      disabled: () => false,
+    },
+  ];
+
+  return [...editorButtons, ...props.customButtons];
+});
+
+/**
+ * Contextual buttons for footer
+ */
+const contextualButtons = reactive<CustomButton[]>([]);
+const updateContextualButtons = (buttons: CustomButton[]) => {
+  contextualButtons.splice(0, contextualButtons.length, ...buttons);
+};
+
+/**
+ * Toolbar wrapper component
+ */
+const toolbarWrapperComponent = computed(() => {
+  return props.isInlineEdit ? h(BubbleMenu) : h("div");
+});
+
+/**
+ * Code Editor
+ */
+const showCodeEditor = ref(false);
+const lang = html();
+
+watch(
+  () => showCodeEditor.value,
+  (newValue, oldValue) => {
+    // When switching from code editor to WYSIWYG editor, update the content
+    if (!newValue && oldValue) {
+      editor.value?.commands.setContent(props.modelValue, false);
+    }
+  },
+);
+</script>
+
+<style scoped>
+.mt-text-editor {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-elevation-surface-default);
+}
+
+label {
+  display: block;
+  font-size: var(--font-size-xs);
+  line-height: 1rem;
+  color: var(--color-text-primary-default);
+  margin-bottom: var(--scale-size-8);
+}
+
+.mt-text-editor__box {
+  border: 1px solid var(--color-border-primary-default);
+  border-radius: var(--border-radius-xs);
+}
+
+.mt-text-editor__content,
+.mt-text-editor__code-editor {
+  height: 260px;
+  overflow: auto;
+}
+
+.mt-text-editor__code-editor :deep(.cm-editor) {
+  height: inherit;
+}
+
+:deep(.mt-text-editor__content-editor) {
+  width: 100%;
+  height: 100%;
+  padding: var(--scale-size-16);
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* WYSIWYG styles */
+  outline: 0 solid transparent;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary-default);
+    letter-spacing: 0;
+    margin-bottom: 0;
+  }
+
+  h1 {
+    font-size: 36px;
+    line-height: var(--font-line-height-3xl);
+    margin-top: var(--scale-size-36);
+  }
+
+  h2 {
+    font-size: var(--font-size-3xl);
+    line-height: var(--font-line-height-2xl);
+    margin-top: var(--scale-size-30);
+  }
+
+  h3 {
+    font-size: var(--font-size-xl);
+    line-height: var(--font-line-height-xl);
+    margin-top: var(--scale-size-28);
+  }
+
+  h4 {
+    font-size: var(--font-size-l);
+    line-height: var(--font-line-height-l);
+    margin-top: var(--scale-size-24);
+  }
+
+  h5 {
+    font-size: var(--font-size-s);
+    line-height: var(--font-line-height-m);
+    margin-top: var(--scale-size-22);
+  }
+
+  h6 {
+    font-size: var(--font-size-xs);
+    line-height: var(--font-line-height-s);
+    margin-top: var(--scale-size-22);
+  }
+
+  p,
+  div {
+    font-weight: normal;
+    font-size: var(--font-size-s);
+    line-height: var(--font-line-height-m);
+    color: var(--color-text-primary-default);
+    letter-spacing: 0;
+    margin-top: var(--scale-size-16);
+  }
+
+  blockquote {
+    font-size: var(--font-size-s);
+    font-style: italic;
+    line-height: var(--font-line-height-m);
+    color: var(--color-text-primary-default);
+    margin-left: var(--scale-size-20);
+    position: relative;
+    margin-top: var(--scale-size-16);
+  }
+
+  blockquote::before {
+    content: '"';
+    font-size: 40px;
+    line-height: 16px;
+    color: var(--color-text-tertiary-default);
+    position: absolute;
+    top: var(--scale-size-10);
+    left: -24px;
+  }
+
+  ul,
+  ol {
+    margin-left: var(--scale-size-20);
+    margin-top: var(--scale-size-16);
+
+    li {
+      font-weight: normal;
+      font-size: var(--font-size-s);
+      line-height: var(--font-line-height-m);
+      color: var(--color-text-primary-default);
+      margin-bottom: var(--scale-size-4);
+    }
+
+    li:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  hr {
+    max-width: 160px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--scale-size-16);
+    border: 2px solid var(--color-background-primary-disabled);
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  /* Table-specific styling */
+  table {
+    border-collapse: collapse;
+    margin: 0;
+    overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  table td,
+  table th {
+    border: 1px solid var(--color-border-primary-default);
+    box-sizing: border-box;
+    min-width: 1em;
+    padding: var(--scale-size-6) var(--scale-size-8);
+    position: relative;
+    vertical-align: top;
+
+    > * {
+      margin-bottom: 0;
+    }
+  }
+
+  table th {
+    background-color: var(--color-background-primary-default);
+    font-weight: bold;
+    text-align: left;
+  }
+
+  table p {
+    margin: 0;
+  }
+
+  table .selectedCell::after {
+    background: var(--color-background-primary-disabled);
+    content: "";
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: 2;
+  }
+
+  table .column-resize-handle {
+    background-color: var(--color-interaction-primary-default);
+    pointer-events: none;
+    position: absolute;
+    right: -2px;
+    top: calc(-1 * var(--font-line-height-m) / 2);
+    bottom: calc(-1 * var(--font-line-height-m) / 2);
+    width: var(--scale-size-4);
+    z-index: 10;
+  }
+
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
+
+  &.resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+}
+
+.mt-text-editor__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--scale-size-16);
+  height: var(--scale-size-36);
+  background-color: var(--color-background-primary-disabled);
+  border-top: 1px solid var(--color-border-primary-default);
+  border-radius: 0 0 var(--border-radius-xs) var(--border-radius-xs);
+  transition: transform 0.2s ease-in-out;
+}
+
+.mt-text-editor__footer-left {
+  display: flex;
+  align-items: center;
+}
+
+.mt-text-editor--inline-edit {
+  .mt-text-editor__content {
+    height: auto;
+  }
+
+  .mt-text-editor__box {
+    border: none;
+  }
+
+  .mt-text-editor__footer {
+    transform: scale(1, 0);
+    transform-origin: bottom;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+    pointer-events: none;
+  }
+}
+
+.mt-text-editor--inline-edit:focus-within .mt-text-editor__footer {
+  pointer-events: all;
+  transform: scale(1, 1);
+}
+
+.mt-text-editor--disabled .mt-text-editor__content {
+  background-color: var(--color-background-primary-disabled);
+}
+
+:deep(.mt-text-editor__content-editor p.is-editor-empty:first-child::before) {
+  color: var(--color-text-secondary-default);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.mt-text-editor--error .mt-text-editor__box {
+  border-color: var(--color-icon-critical-default);
+}
+
+.mt-text-editor--error .mt-text-editor__content {
+  background-color: var(--color-background-critical-dark);
+}
+
+.mt-text-editor--error label {
+  color: var(--color-text-critical-default);
+}
+</style>
diff --git a/packages/component-library/src/components/form/mt-text-field/mt-text-field.vue b/packages/component-library/src/components/form/mt-text-field/mt-text-field.vue
index 861293e9d..733e474cd 100644
--- a/packages/component-library/src/components/form/mt-text-field/mt-text-field.vue
+++ b/packages/component-library/src/components/form/mt-text-field/mt-text-field.vue
@@ -8,7 +8,7 @@
     :disable-inheritance-toggle="disableInheritanceToggle"
     :copyable="copyable"
     :copyable-tooltip="copyableTooltip"
-    :copyable-text="currentValue"
+    :copyable-text="String(currentValue)"
     :has-focus="hasFocus"
     :help-text="helpText"
     :name="name"
@@ -33,6 +33,7 @@
         :value="currentValue"
         :placeholder="placeholder"
         :maxlength="maxLength"
+        :aria-label="label"
         @input="onInput"
         @change.stop="onChange"
         @focus="setFocusClass"
@@ -53,13 +54,13 @@
     </template>
 
     <template v-if="maxLength" #field-hint-right>
-      {{ modelValue?.length ?? 0 }}/{{ maxLength }}
+      {{ String(modelValue)?.length ?? 0 }}/{{ maxLength }}
     </template>
   </mt-base-field>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 import MtBaseField from "../_internal/mt-base-field/mt-base-field.vue";
 import MtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
 
@@ -76,7 +77,7 @@ export default defineComponent({
      * The value of the text field.
      */
     modelValue: {
-      type: String,
+      type: String as PropType<string | number>,
       required: false,
       default: "",
     },
diff --git a/packages/component-library/src/components/layout/mt-card/mt-card.vue b/packages/component-library/src/components/layout/mt-card/mt-card.vue
index 8f25d1451..b33c8946b 100644
--- a/packages/component-library/src/components/layout/mt-card/mt-card.vue
+++ b/packages/component-library/src/components/layout/mt-card/mt-card.vue
@@ -100,7 +100,7 @@ import MtLoader from "../../feedback-indicator/mt-loader/mt-loader.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "../../content/mt-text/mt-text.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.vue b/packages/component-library/src/components/navigation/mt-search/mt-search.vue
index b88a425a6..04b77ad32 100644
--- a/packages/component-library/src/components/navigation/mt-search/mt-search.vue
+++ b/packages/component-library/src/components/navigation/mt-search/mt-search.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 
 withDefaults(
diff --git a/packages/component-library/src/components/overlay/mt-modal/mt-modal.interactive.stories.ts b/packages/component-library/src/components/overlay/mt-modal/mt-modal.interactive.stories.ts
index 8827dba11..f122c51c5 100644
--- a/packages/component-library/src/components/overlay/mt-modal/mt-modal.interactive.stories.ts
+++ b/packages/component-library/src/components/overlay/mt-modal/mt-modal.interactive.stories.ts
@@ -4,6 +4,9 @@ import MtModal from "./mt-modal.vue";
 import MtModalRoot from "./sub-components/mt-modal-root.vue";
 import MtModalTrigger from "./sub-components/mt-modal-trigger.vue";
 import MtButton from "@/components/form/mt-button/mt-button.vue";
+import { ref } from "vue";
+import { defineStory } from "@/_internal/story-helper";
+import { expect, within } from "@storybook/test";
 
 export default {
   ...meta,
@@ -71,6 +74,64 @@ export const VisualTestOverflowingContent = {
   }),
 };
 
+export const VisualTestTeleportFeature = defineStory({
+  name: "Render the modal with the teleport feature",
+  render: (args: unknown) => ({
+    components: { MtModal, MtModalRoot, MtButton, MtText },
+    setup() {
+      const isOpen = ref(false);
+      return {
+        args,
+        isOpen,
+      };
+    },
+    template: `
+<div style="width: 400px; height: 200px; background-color: lightblue; transform: translate3d(1px, 1px, 1px); padding: 20px;">
+  <p>
+    The modal should also working inside a container with a transform
+
+    <br />
+    <br />
+
+    <mt-button @click="isOpen = !isOpen" variant="primary">Toggle modal</mt-button>
+  </p>
+
+  <mt-modal-root :isOpen="isOpen" @change="($event) => isOpen = $event">
+      <mt-modal v-bind='args'>
+          <template #default>
+              <mt-text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </mt-text>
+              <mt-text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </mt-text>
+              <mt-text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </mt-text>
+              <mt-text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </mt-text>
+              <mt-text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </mt-text>
+          </template>
+
+          <template #footer>
+              <div style='width: 100%; display: flex; justify-content: flex-end;'>
+                  <mt-button variant='primary'>Continue</mt-button>
+              </div>
+          </template>
+      </mt-modal>
+  </mt-modal-root>
+</div>
+`,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const triggerButton = canvas.getByRole("button", { name: "Toggle modal" });
+    await triggerButton.click();
+
+    // Get body as a within element because the modal is rendered in a portal
+    const body = within(document.querySelector("body") as HTMLElement);
+
+    // Get the modal
+    const modal = body.getByRole("dialog");
+
+    // Check if the modal is visible
+    await expect(modal).toBeTruthy();
+  },
+});
+
 export const TestOpeningAnimation = {
   name: "Animates when modal opens",
   render: (args: unknown) => ({
diff --git a/packages/component-library/src/components/overlay/mt-modal/mt-modal.spec.ts b/packages/component-library/src/components/overlay/mt-modal/mt-modal.spec.ts
index 8b1a5b197..b18b1a5aa 100644
--- a/packages/component-library/src/components/overlay/mt-modal/mt-modal.spec.ts
+++ b/packages/component-library/src/components/overlay/mt-modal/mt-modal.spec.ts
@@ -3,6 +3,7 @@ import MtModalRoot from "./sub-components/mt-modal-root.vue";
 import MtModalTrigger from "./sub-components/mt-modal-trigger.vue";
 import MtModalAction from "./sub-components/mt-modal-action.vue";
 import { render, screen, fireEvent } from "@testing-library/vue";
+import { ref } from "vue";
 
 describe("mt-modal", () => {
   it("the modal is hidden by default", () => {
@@ -65,6 +66,34 @@ describe("mt-modal", () => {
     expect(onChange).toHaveBeenNthCalledWith(1, true);
   });
 
+  it("opens the modal when clicking the trigger when 'isOpen' gets changed", async () => {
+    // GIVEN
+    const onChange = vi.fn();
+
+    render({
+      components: { MtModal, MtModalRoot, MtModalTrigger },
+      setup() {
+        const isOpen = ref(false);
+        return { onChange, isOpen };
+      },
+      template: `
+      <button @click="isOpen = !isOpen">Toggle modal</button>
+<mt-modal-root @change="onChange" :isOpen="isOpen">
+  <mt-modal title='title'>mt-modal works!</mt-modal>
+</mt-modal-root>`,
+    });
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    // WHEN
+    await fireEvent.click(screen.getByRole("button"));
+
+    // THEN
+    const modal = screen.queryByRole("dialog");
+    expect(modal).toBeInTheDocument();
+    expect(onChange).toHaveBeenNthCalledWith(1, true);
+  });
+
   it("closes the modal", async () => {
     const onChange = vi.fn();
 
diff --git a/packages/component-library/src/components/overlay/mt-modal/mt-modal.vue b/packages/component-library/src/components/overlay/mt-modal/mt-modal.vue
index cd341c973..37486c27c 100644
--- a/packages/component-library/src/components/overlay/mt-modal/mt-modal.vue
+++ b/packages/component-library/src/components/overlay/mt-modal/mt-modal.vue
@@ -1,51 +1,56 @@
 <template>
   <transition name="modal">
-    <div
-      v-if="isOpen"
-      ref="modalRef"
-      :class="['mt-modal', `mt-modal--width-${width}`]"
-      role="dialog"
-      aria-modal="true"
-      :aria-labelledby="id"
-    >
-      <div class="mt-modal__header">
-        <div class="mt-modal__header-content">
-          <mt-text as="h2" class="mt-modal__title" size="m" weight="semibold" :id="id">
-            {{ title }}
-          </mt-text>
-
-          <slot name="title-after" />
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="modalRef"
+        :class="['mt-modal', `mt-modal--width-${width}`]"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="id"
+      >
+        <div class="mt-modal__header">
+          <div class="mt-modal__header-content">
+            <mt-text as="h2" class="mt-modal__title" size="m" weight="semibold" :id="id">
+              {{ title }}
+            </mt-text>
+
+            <slot name="title-after" />
+          </div>
+
+          <mt-modal-close class="mt-modal__close-button" aria-label="Close">
+            <mt-icon aria-hidden name="regular-times-xs" />
+          </mt-modal-close>
         </div>
 
-        <mt-modal-close class="mt-modal__close-button" aria-label="Close">
-          <mt-icon aria-hidden name="regular-times-xs" />
-        </mt-modal-close>
-      </div>
+        <div class="mt-modal__content" ref="modalContentRef">
+          <transition name="shadow-fade">
+            <div
+              v-if="['bottom', 'middle'].includes(showShadows)"
+              class="mt-modal__scroll-shadow mt-modal__scroll-shadow--top"
+            />
+          </transition>
 
-      <div class="mt-modal__content" ref="modalContentRef">
-        <transition name="shadow-fade">
           <div
-            v-if="['bottom', 'middle'].includes(showShadows)"
-            class="mt-modal__scroll-shadow mt-modal__scroll-shadow--top"
-          />
-        </transition>
-
-        <div
-          :class="{ 'mt-modal__content-inner': true, 'mt-modal__content-inner--no-padding': inset }"
-        >
-          <slot name="default" />
+            :class="{
+              'mt-modal__content-inner': true,
+              'mt-modal__content-inner--no-padding': inset,
+            }"
+          >
+            <slot name="default" />
+          </div>
+
+          <transition name="shadow-fade">
+            <div
+              v-if="['top', 'middle'].includes(showShadows)"
+              class="mt-modal__scroll-shadow mt-modal__scroll-shadow--bottom"
+            />
+          </transition>
         </div>
 
-        <transition name="shadow-fade">
-          <div
-            v-if="['top', 'middle'].includes(showShadows)"
-            class="mt-modal__scroll-shadow mt-modal__scroll-shadow--bottom"
-          />
-        </transition>
+        <div class="mt-modal__footer"><slot name="footer" /></div>
       </div>
-
-      <div class="mt-modal__footer"><slot name="footer" /></div>
-    </div>
+    </Teleport>
   </transition>
 </template>
 
diff --git a/packages/component-library/src/components/overlay/mt-modal/sub-components/mt-modal-root.vue b/packages/component-library/src/components/overlay/mt-modal/sub-components/mt-modal-root.vue
index 98c7bc3fb..cca160fff 100644
--- a/packages/component-library/src/components/overlay/mt-modal/sub-components/mt-modal-root.vue
+++ b/packages/component-library/src/components/overlay/mt-modal/sub-components/mt-modal-root.vue
@@ -2,13 +2,15 @@
   <slot />
 
   <transition name="fade">
-    <div
-      class="mt-modal-root__backdrop"
-      v-if="isOpen"
-      aria-hidden
-      data-testid="modal-backdrop"
-      @click="() => setIsOpen(false)"
-    />
+    <Teleport to="body">
+      <div
+        class="mt-modal-root__backdrop"
+        v-if="isOpen"
+        aria-hidden
+        data-testid="modal-backdrop"
+        @click="() => setIsOpen(false)"
+      />
+    </Teleport>
   </transition>
 </template>
 
@@ -26,6 +28,13 @@ watch(isOpen, () => {
   emit("change", isOpen.value);
 });
 
+watch(
+  () => props.isOpen,
+  (value) => {
+    isOpen.value = value;
+  },
+);
+
 function setIsOpen(state: boolean) {
   isOpen.value = state;
 }
diff --git a/packages/component-library/src/components/overlay/mt-popover-item/mt-popover-item.vue b/packages/component-library/src/components/overlay/mt-popover-item/mt-popover-item.vue
index e0f223f54..7ac1ffdd1 100644
--- a/packages/component-library/src/components/overlay/mt-popover-item/mt-popover-item.vue
+++ b/packages/component-library/src/components/overlay/mt-popover-item/mt-popover-item.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="mt-popover-item" :class="componentClasses">
-    <div class="mt-popover-item__top-row" @click="handleLableClick">
+  <div class="mt-popover-item" :class="componentClasses" @click="handleLableClick">
+    <div class="mt-popover-item__top-row">
       <mt-checkbox
         v-if="showCheckbox"
         class="mt-popover-item__checkbox"
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
index 31db85abb..0f5a74d98 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
@@ -553,16 +553,7 @@
 <script lang="ts">
 import useScrollPossibilitiesClasses from "./composables/useScrollPossibilitiesClasses";
 import type { PropType, Ref } from "vue";
-import {
-  defineComponent,
-  computed,
-  onBeforeUpdate,
-  onMounted,
-  onBeforeUnmount,
-  ref,
-  getCurrentInstance,
-  onBeforeMount,
-} from "vue";
+import { defineComponent, computed, onBeforeUpdate, onMounted, onBeforeUnmount, ref } from "vue";
 import MtCard from "../../layout/mt-card/mt-card.vue";
 import MtButton from "../../form/mt-button/mt-button.vue";
 import MtSelect from "../../form/mt-select/mt-select.vue";
@@ -601,7 +592,7 @@ import MtInset from "@/components/layout/mt-inset/mt-inset.vue";
 import { throttle } from "lodash-es";
 import { reactive } from "vue";
 import type { Filter } from "./mt-data-table.interfaces";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export interface BaseColumnDefinition {
   label: string; // the label for the column
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-filter/mt-data-table-filter.vue b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-filter/mt-data-table-filter.vue
index cb73267d4..f4828f762 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-filter/mt-data-table-filter.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-filter/mt-data-table-filter.vue
@@ -49,7 +49,7 @@ import MtPopover from "@/components/overlay/mt-popover/mt-popover.vue";
 import MtPopoverItem from "@/components/overlay/mt-popover-item/mt-popover-item.vue";
 import type { Filter, Option } from "../../mt-data-table.interfaces";
 import MtText from "@/components/content/mt-text/mt-text.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 defineEmits<{
   (e: "removeOption", filterId: string, optionId: string): void;
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue
index ae89be015..3592ecd89 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 defineProps<{
   numberOfAppliedFilters: number;
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
index 2bc7c6b12..c7b827b05 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
@@ -103,7 +103,7 @@ import MtPopoverItemResult from "../../../../overlay/mt-popover-item-result/mt-p
 import MtTooltipDirective from "../../../../../directives/tooltip.directive";
 import type { ColumnDefinition } from "../../mt-data-table.vue";
 import type { Option as ItemResultOption } from "../../../../overlay/mt-popover-item-result/mt-popover-item-result.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "MtDataTableSettings",
@@ -234,7 +234,7 @@ export default defineComponent({
         return {
           id: column.property,
           label: column.label,
-          parentGroup: column.visible ?? true ? "visible" : "hidden",
+          parentGroup: (column.visible ?? true) ? "visible" : "hidden",
           position: column.position,
           isVisible: column.visible ?? true,
           isHidable: isPrimaryColumn(column) ? false : true,
diff --git a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
index f33520855..8c4240df1 100644
--- a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
+++ b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
@@ -73,7 +73,7 @@
 <script setup lang="ts">
 import { computed, watch } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-import { useI18n } from "@/composables/useI18n";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
   currentPage: number;
diff --git a/packages/component-library/src/components/theme/mt-theme-provider.vue b/packages/component-library/src/components/theme/mt-theme-provider.vue
index 0aee951f9..2e338926d 100644
--- a/packages/component-library/src/components/theme/mt-theme-provider.vue
+++ b/packages/component-library/src/components/theme/mt-theme-provider.vue
@@ -3,14 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import { provideI18n } from "@/composables/useI18n";
 import { type FutureFlags, provideFutureFlags } from "../../composables/useFutureFlags";
 
 const props = defineProps<{
   future?: FutureFlags;
-  locale?: string;
 }>();
 
 provideFutureFlags(props.future);
-provideI18n(props.locale);
 </script>
diff --git a/packages/component-library/src/composables/useI18n.spec.ts b/packages/component-library/src/composables/useI18n.spec.ts
deleted file mode 100644
index cf97ea431..000000000
--- a/packages/component-library/src/composables/useI18n.spec.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { render, screen } from "@testing-library/vue";
-import { useI18n } from "./useI18n";
-
-describe("useI18n", () => {
-  it("returns the translation for the given path", () => {
-    render({
-      setup() {
-        const { t } = useI18n({
-          messages: { en: { greeting: "Hello!" } },
-        });
-
-        return { t };
-      },
-      template: "{{ t('greeting') }}",
-    });
-
-    expect(screen.getByText("Hello!")).toBeInTheDocument();
-  });
-
-  it("returns the path to the translation if no translation is found", () => {
-    render({
-      setup() {
-        const { t } = useI18n({
-          messages: { en: { greeting: "Hello!" } },
-        });
-
-        return { t };
-      },
-      template: "{{ t('path.to.translation') }}",
-    });
-
-    expect(screen.getByText("path.to.translation")).toBeInTheDocument();
-  });
-
-  it("translates the snippet with custom values", () => {
-    render({
-      setup() {
-        const { t } = useI18n({
-          messages: { en: { greeting: "Hello, {name}!" } },
-        });
-
-        return { t };
-      },
-      template: "{{ t('greeting', { name: 'World' }) }}",
-    });
-
-    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
-  });
-
-  it("keeps the custom value syntax when no custom value is provided", () => {
-    render({
-      setup() {
-        const { t } = useI18n({
-          messages: { en: { greeting: "Hello, {name}!" } },
-        });
-
-        return { t };
-      },
-      template: "{{ t('greeting') }}",
-    });
-
-    expect(screen.getByText("Hello, {name}!")).toBeInTheDocument();
-  });
-
-  it("translates the singular version", () => {
-    render({
-      setup() {
-        const { t } = useI18n({
-          messages: { en: { apple: "apple | apples" } },
-        });
-
-        return { t };
-      },
-      template: "{{ t('apple', { n: 1 }) }}",
-    });
-
-    expect(screen.getByText("apple")).toBeInTheDocument();
-  });
-
-  it("translates the pluralized version", () => {
-    render({
-      setup() {
-        const { t } = useI18n({
-          messages: { en: { apple: "apple | apples" } },
-        });
-
-        return { t };
-      },
-      template: "{{ t('apple', { n: 2 }) }}",
-    });
-
-    expect(screen.getByText("apples")).toBeInTheDocument;
-  });
-
-  it("translates the 'none' version", () => {
-    render({
-      setup() {
-        const { t } = useI18n({
-          messages: { en: { apple: "no apple | apple | apples" } },
-        });
-
-        return { t };
-      },
-      template: "{{ t('apple', { n: 0 }) }}",
-    });
-
-    expect(screen.getByText("no apple")).toBeInTheDocument();
-  });
-
-  it("translates the pluralized version with custom values", () => {
-    render({
-      setup() {
-        const { t } = useI18n({
-          messages: { en: { apple: "no apple | apple | {n} apples" } },
-        });
-
-        return { t };
-      },
-      template: "{{ t('apple', { n: 3 }) }}",
-    });
-
-    expect(screen.getByText("3 apples")).toBeInTheDocument();
-  });
-});
diff --git a/packages/component-library/src/composables/useI18n.ts b/packages/component-library/src/composables/useI18n.ts
deleted file mode 100644
index d94b57cfd..000000000
--- a/packages/component-library/src/composables/useI18n.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { provide, inject } from "vue";
-
-function get(obj: Record<string, unknown>, path: string): string | undefined {
-  if (typeof obj !== "object" || obj === null) return undefined;
-
-  const keys = path.split(".");
-  let result = obj;
-
-  for (const key of keys) {
-    if (result === undefined || result === null) return undefined;
-
-    // @ts-ignore
-    result = result[key];
-  }
-
-  // @ts-ignore
-  return result;
-}
-
-interface TranslationDictionary {
-  [key: string]: string | TranslationDictionary;
-}
-
-type Options = { messages: TranslationDictionary };
-
-const defaultI18nState = {
-  locale: "en",
-  defaultLocale: "en",
-};
-
-const i18nInjectionKey = Symbol("mt-i18n");
-
-function limit(value: number, max: number) {
-  return Math.min(value, max);
-}
-
-export function provideI18n(locale: string = "en") {
-  const state = {
-    ...defaultI18nState,
-    locale: locale,
-  };
-
-  provide(i18nInjectionKey, state);
-}
-
-const CUSTOM_VALUE_REGEX = /{([^}]*)}/g;
-
-export function useI18n({ messages }: Options) {
-  const i18n = inject(i18nInjectionKey, defaultI18nState);
-
-  function translate(path: string, customValues: Record<string, string | number> = {}): string {
-    function resolveCustomKeys(translation: string) {
-      return translation.replace(CUSTOM_VALUE_REGEX, (match: string, key: string) => {
-        return Object.prototype.hasOwnProperty.call(customValues, key)
-          ? customValues[key].toString()
-          : match;
-      });
-    }
-
-    const translation =
-      get(messages, `${i18n.locale}.${path}`) || get(messages, `${i18n.defaultLocale}.${path}`);
-
-    if (!translation) return path;
-
-    const canBePluralized = /\|/.test(translation);
-    if (canBePluralized) {
-      if (typeof customValues.n !== "number")
-        throw new Error('The "n" key is required for pluralization');
-
-      const versions = translation.split("|");
-
-      // "no apple | apple | apples"; The first version is the zero form
-      const includesZeroForm = versions.length === 3;
-
-      const index = limit(includesZeroForm ? customValues.n : customValues.n - 1, 2);
-      const resolvedTranslation = versions.at(index);
-      if (!resolvedTranslation) return path;
-
-      return resolveCustomKeys(resolvedTranslation);
-    }
-
-    return resolveCustomKeys(translation);
-  }
-
-  return { t: translate };
-}
diff --git a/packages/component-library/src/index.ts b/packages/component-library/src/index.ts
index 727ab29ec..aa8815c7e 100644
--- a/packages/component-library/src/index.ts
+++ b/packages/component-library/src/index.ts
@@ -37,6 +37,8 @@ import MtThemeProvider from "./components/theme/mt-theme-provider.vue";
 import TooltipDirective from "./directives/tooltip.directive";
 import DeviceHelperPlugin from "./plugin/device-helper.plugin";
 import MtTooltip from "./components/overlay/mt-tooltip/mt-tooltip.vue";
+import MtTextEditor from "./components/form/mt-text-editor/mt-text-editor.vue";
+import MtTextEditorToolbarButton from "./components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button.vue";
 
 // Import SCSS for styling
 import "./components/assets/scss/all.scss";
@@ -64,6 +66,8 @@ export {
   MtSwitch,
   MtTextField,
   MtTextarea,
+  MtTextEditor,
+  MtTextEditorToolbarButton,
   MtIcon,
   MtCard,
   MtEmptyState,
diff --git a/packages/component-library/vitest.setup.ts b/packages/component-library/vitest.setup.ts
index f149f27ae..fed514b02 100644
--- a/packages/component-library/vitest.setup.ts
+++ b/packages/component-library/vitest.setup.ts
@@ -1 +1,11 @@
 import "@testing-library/jest-dom/vitest";
+import { config } from "@vue/test-utils";
+import { createI18n } from "vue-i18n";
+
+const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+});
+
+// Install a plugin onto VueWrapper
+config.global.plugins = [...(config.global.plugins || []), i18n];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24b52478f..efdcdcd40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -184,6 +184,9 @@ importers:
       vue:
         specifier: ^3.5.0
         version: 3.5.0(typescript@5.6.2)
+      vue-i18n:
+        specifier: ^9.9.1
+        version: 9.13.1(vue@3.5.0(typescript@5.6.2))
       vue-router:
         specifier: ^4.3.0
         version: 4.3.3(vue@3.5.0(typescript@5.6.2))
@@ -279,6 +282,9 @@ importers:
 
   packages/component-library:
     dependencies:
+      '@codemirror/lang-html':
+        specifier: ^6.4.9
+        version: 6.4.9
       '@floating-ui/dom':
         specifier: ^1.4.3
         version: 1.6.5
@@ -300,6 +306,69 @@ importers:
       '@testing-library/vue':
         specifier: ^8.1.0
         version: 8.1.0(@vue/compiler-sfc@3.5.13)(vue@3.5.13(typescript@5.2.2))
+      '@tiptap/extension-bubble-menu':
+        specifier: ^2.10.0
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-bullet-list':
+        specifier: ^2.10.0
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-character-count':
+        specifier: ^2.10.0
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-color':
+        specifier: ^2.9.1
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/extension-text-style@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3)))
+      '@tiptap/extension-highlight':
+        specifier: ^2.10.3
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-link':
+        specifier: ^2.10.0
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-list-item':
+        specifier: ^2.10.0
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-ordered-list':
+        specifier: ^2.10.0
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-placeholder':
+        specifier: ^2.10.4
+        version: 2.10.4(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-subscript':
+        specifier: ^2.9.1
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-superscript':
+        specifier: ^2.9.1
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-table':
+        specifier: ^2.10.3
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-table-cell':
+        specifier: ^2.10.3
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-table-header':
+        specifier: ^2.10.3
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-table-row':
+        specifier: ^2.10.3
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-text-align':
+        specifier: ^2.9.1
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-text-style':
+        specifier: ^2.9.1
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-underline':
+        specifier: ^2.9.1
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/pm':
+        specifier: ^2.9.1
+        version: 2.10.3
+      '@tiptap/starter-kit':
+        specifier: ^2.9.1
+        version: 2.10.3
+      '@tiptap/vue-3':
+        specifier: ^2.9.1
+        version: 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)(vue@3.5.13(typescript@5.2.2))
       '@vuepic/vue-datepicker':
         specifier: ^10.0.0
         version: 10.0.0(vue@3.5.13(typescript@5.2.2))
@@ -309,6 +378,9 @@ importers:
       '@vueuse/core':
         specifier: ^10.7.2
         version: 10.11.0(vue@3.5.13(typescript@5.2.2))
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.3)
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
@@ -327,9 +399,9 @@ importers:
       nanoid:
         specifier: ^5.0.7
         version: 5.0.7
-      vue:
-        specifier: '>= 3.5.0'
-        version: 3.5.13(typescript@5.2.2)
+      vue-codemirror6:
+        specifier: ^1.3.8
+        version: 1.3.8(@lezer/common@1.2.3)(vue@3.5.13(typescript@5.2.2))
       vue-i18n:
         specifier: ^9.9.1
         version: 9.13.1(vue@3.5.13(typescript@5.2.2))
@@ -1479,6 +1551,41 @@ packages:
     resolution: {integrity: sha512-EeEjMobfuJrwoctj7FA1y1KEbM0+Q1xSjobIEyie9k4haVEBB7vkDvsasw1pM3rO39mL2akxIAzLMUAtrMHZhA==}
     engines: {node: '>=16.13'}
 
+  '@codemirror/autocomplete@6.18.3':
+    resolution: {integrity: sha512-1dNIOmiM0z4BIBwxmxEfA1yoxh1MF/6KPBbh20a5vphGV0ictKlgQsbJs6D6SkR6iJpGbpwRsa6PFMNlg9T9pQ==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+
+  '@codemirror/commands@6.7.1':
+    resolution: {integrity: sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-html@6.4.9':
+    resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
+
+  '@codemirror/lang-javascript@6.2.2':
+    resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
+
+  '@codemirror/language@6.10.6':
+    resolution: {integrity: sha512-KrsbdCnxEztLVbB5PycWXFxas4EOyk/fPAfruSOnDDppevQgid2XZ+KbJ9u+fDikP/e7MW7HPBTvTb8JlZK9vA==}
+
+  '@codemirror/lint@6.8.4':
+    resolution: {integrity: sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==}
+
+  '@codemirror/search@6.5.8':
+    resolution: {integrity: sha512-PoWtZvo7c1XFeZWmmyaOp2G0XVbOnm+fJzvghqGAktBW3cufwJUWvSCcNG0ppXiBEM05mZu6RhMtXPv2hpllig==}
+
+  '@codemirror/state@6.5.0':
+    resolution: {integrity: sha512-MwBHVK60IiIHDcoMet78lxt6iw5gJOGSbNbOIVBHWVXIH4/Nq1+GQgLLGgI1KlnN86WDXsPudVaqYHKBIx7Eyw==}
+
+  '@codemirror/view@6.35.3':
+    resolution: {integrity: sha512-ScY7L8+EGdPl4QtoBiOzE4FELp7JmNUsBvgBcCakXWM2uiv/K89VAzU3BMDscf0DsACLvTKePbd5+cFDTcei6g==}
+
   '@colors/colors@1.5.0':
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
@@ -2543,6 +2650,24 @@ packages:
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+
+  '@lezer/css@1.1.9':
+    resolution: {integrity: sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/html@1.3.10':
+    resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
+
+  '@lezer/javascript@1.4.21':
+    resolution: {integrity: sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -2553,6 +2678,9 @@ packages:
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
 
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@mdx-js/mdx@1.6.22':
     resolution: {integrity: sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA==}
 
@@ -2867,6 +2995,12 @@ packages:
   '@polka/url@1.0.0-next.25':
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
 
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
+  '@remirror/core-constants@3.0.0':
+    resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
+
   '@rollup/plugin-alias@5.1.0':
     resolution: {integrity: sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==}
     engines: {node: '>=14.0.0'}
@@ -3590,6 +3724,206 @@ packages:
       '@vue/compiler-sfc':
         optional: true
 
+  '@tiptap/core@2.10.3':
+    resolution: {integrity: sha512-wAG/0/UsLeZLmshWb6rtWNXKJftcmnned91/HLccHVQAuQZ1UWH+wXeQKu/mtodxEO7JcU2mVPR9mLGQkK0McQ==}
+    peerDependencies:
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-blockquote@2.10.3':
+    resolution: {integrity: sha512-u9Mq4r8KzoeGVT8ms6FQDIMN95dTh3TYcT7fZpwcVM96mIl2Oyt+Bk66mL8z4zuFptfRI57Cu9QdnHEeILd//w==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-bold@2.10.3':
+    resolution: {integrity: sha512-xnF1tS2BsORenr11qyybW120gHaeHKiKq+ZOP14cGA0MsriKvWDnaCSocXP/xMEYHy7+2uUhJ0MsKkHVj4bPzQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-bubble-menu@2.10.3':
+    resolution: {integrity: sha512-e9a4yMjQezuKy0rtyyzxbV2IAE1bm1PY3yoZEFrcaY0o47g1CMUn2Hwe+9As2HdntEjQpWR7NO1mZeKxHlBPYA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-bullet-list@2.10.3':
+    resolution: {integrity: sha512-PTkwJOVlHi4RR4Wrs044tKMceweXwNmWA6EoQ93hPUVtQcwQL990Es5Izp+i88twTPLuGD9dH+o9QDyH9SkWdA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-character-count@2.10.3':
+    resolution: {integrity: sha512-7L3VS9+SZqwK94/Yk4c+NEpI6kDUAYW3tYGuxCRiKHDlUy3fkXkVkPlxsoNUpAA4O05KGAwD0YW5rvAkNXdi8w==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-code-block@2.10.3':
+    resolution: {integrity: sha512-yiDVNg22fYkzsFk5kBlDSHcjwVJgajvO/M5fDXA+Hfxwo2oNcG6aJyyHXFe+UaXTVjdkPej0J6kcMKrTMCiFug==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-code@2.10.3':
+    resolution: {integrity: sha512-JyLbfyY3cPctq9sVdpcRWTcoUOoq3/MnGE1eP6eBNyMTHyBPcM9TPhOkgj+xkD1zW/884jfelB+wa70RT/AMxQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-color@2.10.3':
+    resolution: {integrity: sha512-FC2hPMSQ4w9UmO9kJCAdoU7gHpDbJ6MeJAmikB9EPp16dbGwFLrZm9TZ/4pv74fGfVm0lv720316ALOEgPEDjQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/extension-text-style': ^2.7.0
+
+  '@tiptap/extension-document@2.10.3':
+    resolution: {integrity: sha512-6i8+xbS2zB6t8iFzli1O/QB01MmwyI5Hqiiv4m5lOxqavmJwLss2sRhoMC2hB3CyFg5UmeODy/f/RnI6q5Vixg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-dropcursor@2.10.3':
+    resolution: {integrity: sha512-wzWf82ixWzZQr0hxcf/A0ul8NNxgy1N63O+c56st6OomoLuKUJWOXF+cs9O7V+/5rZKWdbdYYoRB5QLvnDBAlQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-floating-menu@2.10.3':
+    resolution: {integrity: sha512-Prg8rYLxeyzHxfzVu1mDkkUWMnD9ZN3y370O/1qy55e+XKVw9jFkTSuz0y0+OhMJG6bulYpDUMtb+N3+2xOWlQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-gapcursor@2.10.3':
+    resolution: {integrity: sha512-FskZi2DqDSTH1WkgLF2OLy0xU7qj3AgHsKhVsryeAtld4jAK5EsonneWgaipbz0e/MxuIvc1oyacfZKABpLaNg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-hard-break@2.10.3':
+    resolution: {integrity: sha512-2rFlimUKAgKDwT6nqAMtPBjkrknQY8S7oBNyIcDOUGyFkvbDUl3Jd0PiC929S5F3XStJRppnMqhpNDAlWmvBLA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-heading@2.10.3':
+    resolution: {integrity: sha512-AlxXXPCWIvw8hQUDFRskasj32iMNB8Sb19VgyFWqwvntGs2/UffNu8VdsVqxD2HpZ0g5rLYCYtSW4wigs9R3og==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-highlight@2.10.3':
+    resolution: {integrity: sha512-srMOdpUTcp1yPGmUqgKOkbmTpCYOF6Q/8CnquDkhrvK7Gyphj+n8TocrKiloaRYZKcoQWtmb+kcVPaHhHMzsWQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-history@2.10.3':
+    resolution: {integrity: sha512-HaSiMdx9Im9Pb9qGlVud7W8bweRDRMez33Uzs5a2x0n1RWkelfH7TwYs41Y3wus8Ujs7kw6qh7jyhvPpQBKaSA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-horizontal-rule@2.10.3':
+    resolution: {integrity: sha512-1a2IWhD00tgUNg/91RLnBvfENL7DLCui5L245+smcaLu+OXOOEpoBHawx59/M4hEpsjqvRRM79TzO9YXfopsPw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-italic@2.10.3':
+    resolution: {integrity: sha512-wAiO6ZxoHx2H90phnKttLWGPjPZXrfKxhOCsqYrK8BpRByhr48godOFRuGwYnKaiwoVjpxc63t+kDJDWvqmgMw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-link@2.10.3':
+    resolution: {integrity: sha512-8esKlkZBzEiNcpt7I8Cd6l1mWmCc/66pPbUq9LfnIniDXE3U+ahBf4m3TJltYFBGbiiTR/xqMtJyVHOpuLDtAw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-list-item@2.10.3':
+    resolution: {integrity: sha512-9sok81gvZfSta2K1Dwrq5/HSz1jk4zHBpFqCx0oydzodGslx6X1bNxdca+eXJpXZmQIWALK7zEr4X8kg3WZsgw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-ordered-list@2.10.3':
+    resolution: {integrity: sha512-/SFuEDnbJxy3jvi72LeyiPHWkV+uFc0LUHTUHSh20vwyy+tLrzncJfXohGbTIv5YxYhzExQYZDRD4VbSghKdlw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-paragraph@2.10.3':
+    resolution: {integrity: sha512-sNkTX/iN+YoleDiTJsrWSBw9D7c4vsYwnW5y/G5ydfuJMIRQMF78pWSIWZFDRNOMkgK5UHkhu9anrbCFYgBfaA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-placeholder@2.10.4':
+    resolution: {integrity: sha512-leWG4xP7cvddR6alGZS7yojOh9941bxehgAeQDLlEisaJcNa2Od5Vbap2zipjc5sXMxZakQVChL27oH1wWhHkQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-strike@2.10.3':
+    resolution: {integrity: sha512-jYoPy6F6njYp3txF3u23bgdRy/S5ATcWDO9LPZLHSeikwQfJ47nqb+EUNo5M8jIOgFBTn4MEbhuZ6OGyhnxopA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-subscript@2.10.3':
+    resolution: {integrity: sha512-GkOwXIruM7QksmlfqLTKTC6JBpWSBDN2eeoPwggxXuqetqYs4sIx1ul3LEGDQy0vglcFKGkbbO2IiHCO/0fSWA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-superscript@2.10.3':
+    resolution: {integrity: sha512-4bXDPyT10ByVCLXFR8A70TcpFJ0H3PicRsxKJcQ+KZIauNUo5BBUpkF2cK+IOUp4UZ1W5ZBeuMQG5HWMuV9T1A==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-table-cell@2.10.3':
+    resolution: {integrity: sha512-EYzBrnq7KUAcRhshIoTmC4ED8YoF4Ei5m8ZMPOctKX+QMAagKdcrw2UxuOf4tP2xgBYx+qDsKCautepZXQiL2g==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-table-header@2.10.3':
+    resolution: {integrity: sha512-zJqzivz+VITYIFXNH09leBbkwAPuvp504rCAFL2PMa1uaME6+oiiRqZvXQrOiRkjNpOWEXH4dqvVLwkSMZoWaw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-table-row@2.10.3':
+    resolution: {integrity: sha512-l6P6BAE4SuIFdPmsRd+zGP2Ks9AhLAua7nfDlHFMWDnfOeaJu7g/t4oG++9xTojDcVDHhcIe8TJYUXfhOt2anw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-table@2.10.3':
+    resolution: {integrity: sha512-XAvq0ptpHfuN7lQhTeew4Sqo8aKYHTqroa7cHL8I+gWJqYqKJSTGb4FAqdGIFEzHvnSsMCFbTL//kAHXvTdsHg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-text-align@2.10.3':
+    resolution: {integrity: sha512-g75sNl73gtgjP3XIcl06kvv1qw3c0rGEUD848rUU1bvlBpU3IxjkcQLgYvHmv3vpuUp9cKUkA2wa7Sv6R3fjvw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-text-style@2.10.3':
+    resolution: {integrity: sha512-TalYIdlF7vBA4afFhmido7AORdBbu3sV+HCByda0FiNbM6cjng3Nr9oxHOCVJy+ChqrcgF4m54zDfLmamdyu5Q==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-text@2.10.3':
+    resolution: {integrity: sha512-7p9XiRprsRZm8y9jvF/sS929FCELJ5N9FQnbzikOiyGNUx5mdI+exVZlfvBr9xOD5s7fBLg6jj9Vs0fXPNRkPg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-underline@2.10.3':
+    resolution: {integrity: sha512-VeGs0jeNiTnXddHHJEgOc/sKljZiyTEgSSuqMmsBACrr9aGFXbLTgKTvNjkZ9WzSnu7LwgJuBrwEhg8yYixUyQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/pm@2.10.3':
+    resolution: {integrity: sha512-771p53aU0KFvujvKpngvq2uAxThlEsjYaXcVVmwrhf0vxSSg+psKQEvqvWvHv/3BwkPVCGwmEKNVJZjaXFKu4g==}
+
+  '@tiptap/starter-kit@2.10.3':
+    resolution: {integrity: sha512-oq8xdVIMqohSs91ofHSr7i5dCp2F56Lb9aYIAI25lZmwNwQJL2geGOYjMSfL0IC4cQHPylIuSKYCg7vRFdZmAA==}
+
+  '@tiptap/vue-3@2.10.3':
+    resolution: {integrity: sha512-eJLUpuKq3Yei3+XHba25eFvjAH6q275r+Dkz/ulStOWGwchlN8OSbcn0kBWfhr14RG8yoNvL4rZncxXvqXzvhQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+      vue: ^3.0.0
+
   '@tokenizer/token@0.3.0':
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
 
@@ -3743,15 +4077,24 @@ packages:
   '@types/keyv@3.1.4':
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
 
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
   '@types/lodash@4.17.5':
     resolution: {integrity: sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==}
 
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
 
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/mdx@2.0.13':
     resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
 
@@ -5360,6 +5703,9 @@ packages:
   code-block-writer@12.0.0:
     resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
 
+  codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+
   collapse-white-space@1.0.6:
     resolution: {integrity: sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==}
 
@@ -5590,6 +5936,9 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   croner@8.0.2:
     resolution: {integrity: sha512-HgSdlSUX8mIgDTTiQpWUP4qY4IFRMsduPCYdca34Pelt8MVdxdaDOzreFtCscA6R+cRZd7UbD1CD3uyx6J3X1A==}
     engines: {node: '>=18.0'}
@@ -8579,6 +8928,12 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
+  linkifyjs@4.2.0:
+    resolution: {integrity: sha512-pCj3PrQyATaoTYKHrgWRF3SJwsm61udVh+vuls/Rl6SptiDhgE7ziUIudAedRY9QEfynmM7/RmLEfPUyw1HPCw==}
+
   listhen@1.7.2:
     resolution: {integrity: sha512-7/HamOm5YD9Wb7CFgAZkKgVPA96WwhcTQoqtm2VTZGVbVVn3IWKRBTgrU7cchA3Q8k9iCsG8Osoi9GX4JsGM9g==}
     hasBin: true
@@ -8778,6 +9133,10 @@ packages:
   markdown-escapes@1.0.4:
     resolution: {integrity: sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
@@ -8814,6 +9173,9 @@ packages:
   mdurl@1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -9480,6 +9842,9 @@ packages:
     resolution: {integrity: sha512-ANIvzobt1rls2BDny5fWZ3ZVKyD6nscLvfFRpQgfWsythlcsVUC9kL0zq6j2Z5z9wwp1kd7wpsD/T9qNPVLCaQ==}
     engines: {node: '>=18'}
 
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
   os-homedir@1.0.2:
     resolution: {integrity: sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==}
     engines: {node: '>=0.10.0'}
@@ -10360,6 +10725,64 @@ packages:
   property-information@5.6.0:
     resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
 
+  prosemirror-changeset@2.2.1:
+    resolution: {integrity: sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==}
+
+  prosemirror-collab@1.3.1:
+    resolution: {integrity: sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==}
+
+  prosemirror-commands@1.6.2:
+    resolution: {integrity: sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==}
+
+  prosemirror-dropcursor@1.8.1:
+    resolution: {integrity: sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==}
+
+  prosemirror-gapcursor@1.3.2:
+    resolution: {integrity: sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==}
+
+  prosemirror-history@1.4.1:
+    resolution: {integrity: sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==}
+
+  prosemirror-inputrules@1.4.0:
+    resolution: {integrity: sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==}
+
+  prosemirror-keymap@1.2.2:
+    resolution: {integrity: sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==}
+
+  prosemirror-markdown@1.13.1:
+    resolution: {integrity: sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==}
+
+  prosemirror-menu@1.2.4:
+    resolution: {integrity: sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==}
+
+  prosemirror-model@1.24.1:
+    resolution: {integrity: sha512-YM053N+vTThzlWJ/AtPtF1j0ebO36nvbmDy4U7qA2XQB8JVaQp1FmB9Jhrps8s+z+uxhhVTny4m20ptUvhk0Mg==}
+
+  prosemirror-schema-basic@1.2.3:
+    resolution: {integrity: sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==}
+
+  prosemirror-schema-list@1.5.0:
+    resolution: {integrity: sha512-gg1tAfH1sqpECdhIHOA/aLg2VH3ROKBWQ4m8Qp9mBKrOxQRW61zc+gMCI8nh22gnBzd1t2u1/NPLmO3nAa3ssg==}
+
+  prosemirror-state@1.4.3:
+    resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==}
+
+  prosemirror-tables@1.6.1:
+    resolution: {integrity: sha512-p8WRJNA96jaNQjhJolmbxTzd6M4huRE5xQ8OxjvMhQUP0Nzpo4zz6TztEiwk6aoqGBhz9lxRWR1yRZLlpQN98w==}
+
+  prosemirror-trailing-node@3.0.0:
+    resolution: {integrity: sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==}
+    peerDependencies:
+      prosemirror-model: ^1.22.1
+      prosemirror-state: ^1.4.2
+      prosemirror-view: ^1.33.8
+
+  prosemirror-transform@1.10.2:
+    resolution: {integrity: sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==}
+
+  prosemirror-view@1.37.0:
+    resolution: {integrity: sha512-z2nkKI1sJzyi7T47Ji/ewBPuIma1RNvQCCYVdV+MqWBV7o4Sa1n94UJCJJ1aQRF/xRkFfyqLGlGFWitIcCOtbg==}
+
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
@@ -10421,6 +10844,10 @@ packages:
   pump@3.0.0:
     resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@1.4.1:
     resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
 
@@ -10878,6 +11305,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
   rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
 
@@ -11412,6 +11842,9 @@ packages:
     engines: {node: '>=12.0.0'}
     hasBin: true
 
+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
   style-to-object@0.3.0:
     resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==}
 
@@ -11698,6 +12131,9 @@ packages:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
+  tippy.js@6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -12004,6 +12440,9 @@ packages:
   ua-parser-js@1.0.38:
     resolution: {integrity: sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==}
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.5.3:
     resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
 
@@ -12579,6 +13018,12 @@ packages:
   vue-bundle-renderer@2.1.0:
     resolution: {integrity: sha512-uZ+5ZJdZ/b43gMblWtcpikY6spJd0nERaM/1RtgioXNfWFbjKlUwrS8HlrddN6T2xtptmOouWclxLUkpgcVX3Q==}
 
+  vue-codemirror6@1.3.8:
+    resolution: {integrity: sha512-pCOzKzBBSFKi/SjUg+XGranV1vt+8S22z56BES/OeZtmyuj2M0CE0aczYS8qbTWNnKcuJcI5FRDHzVXy2v2Htg==}
+    engines: {pnpm: '>=9.14.2'}
+    peerDependencies:
+      vue: ^2.7.14 || ^3.4
+
   vue-component-meta@2.0.21:
     resolution: {integrity: sha512-K7B/wu1nrtYnrDkCkrqqllIe2bxbKNtQG/kc/cquMNw0PYt5xbnAItXZLhC2tHtiIlw6DPYFKpAhnFDi2NGqeA==}
     peerDependencies:
@@ -12590,8 +13035,19 @@ packages:
   vue-component-type-helpers@2.0.21:
     resolution: {integrity: sha512-3NaicyZ7N4B6cft4bfb7dOnPbE9CjLcx+6wZWAg5zwszfO4qXRh+U52dN5r5ZZfc6iMaxKCEcoH9CmxxoFZHLg==}
 
-  vue-component-type-helpers@2.1.10:
-    resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==}
+  vue-component-type-helpers@2.2.0:
+    resolution: {integrity: sha512-cYrAnv2me7bPDcg9kIcGwjJiSB6Qyi08+jLDo9yuvoFQjzHiPTzML7RnkJB1+3P6KMsX/KbCD4QE3Tv/knEllw==}
+
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
 
   vue-demi@0.14.8:
     resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
@@ -12698,6 +13154,9 @@ packages:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     deprecated: Use your platform's native performance.now() and performance.timeOrigin.
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   w3c-xmlserializer@2.0.0:
     resolution: {integrity: sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==}
     engines: {node: '>=10'}
@@ -14361,6 +14820,83 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
+  '@codemirror/autocomplete@6.18.3(@codemirror/language@6.10.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.3)':
+    dependencies:
+      '@codemirror/language': 6.10.6
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+      '@lezer/common': 1.2.3
+
+  '@codemirror/commands@6.7.1':
+    dependencies:
+      '@codemirror/language': 6.10.6
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+      '@lezer/common': 1.2.3
+
+  '@codemirror/lang-css@6.3.1(@codemirror/view@6.35.3)':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.3(@codemirror/language@6.10.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.3)
+      '@codemirror/language': 6.10.6
+      '@codemirror/state': 6.5.0
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.1.9
+    transitivePeerDependencies:
+      - '@codemirror/view'
+
+  '@codemirror/lang-html@6.4.9':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.3(@codemirror/language@6.10.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.3)
+      '@codemirror/lang-css': 6.3.1(@codemirror/view@6.35.3)
+      '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/language': 6.10.6
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.1.9
+      '@lezer/html': 1.3.10
+
+  '@codemirror/lang-javascript@6.2.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.3(@codemirror/language@6.10.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.3)
+      '@codemirror/language': 6.10.6
+      '@codemirror/lint': 6.8.4
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+      '@lezer/common': 1.2.3
+      '@lezer/javascript': 1.4.21
+
+  '@codemirror/language@6.10.6':
+    dependencies:
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+
+  '@codemirror/lint@6.8.4':
+    dependencies:
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.8':
+    dependencies:
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.0':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/view@6.35.3':
+    dependencies:
+      '@codemirror/state': 6.5.0
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
   '@colors/colors@1.5.0':
     optional: true
 
@@ -15993,6 +16529,34 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
+  '@lezer/common@1.2.3': {}
+
+  '@lezer/css@1.1.9':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/html@1.3.10':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/javascript@1.4.21':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/lr@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -16024,6 +16588,8 @@ snapshots:
       - encoding
       - supports-color
 
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@mdx-js/mdx@1.6.22':
     dependencies:
       '@babel/core': 7.12.9
@@ -16572,6 +17138,10 @@ snapshots:
 
   '@polka/url@1.0.0-next.25': {}
 
+  '@popperjs/core@2.11.8': {}
+
+  '@remirror/core-constants@3.0.0': {}
+
   '@rollup/plugin-alias@5.1.0(rollup@4.18.0)':
     dependencies:
       slash: 4.0.0
@@ -16971,7 +17541,7 @@ snapshots:
       node-fetch: 2.7.0(encoding@0.1.13)
       picomatch: 2.3.1
       pkg-dir: 5.0.0
-      prettier-fallback: prettier@3.2.5
+      prettier-fallback: prettier@3.3.3
       pretty-hrtime: 1.0.3
       resolve-from: 5.0.0
       semver: 7.6.2
@@ -17146,7 +17716,7 @@ snapshots:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.2.2)
-      vue-component-type-helpers: 2.1.10
+      vue-component-type-helpers: 2.2.0
 
   '@supercharge/promise-pool@2.4.0': {}
 
@@ -17433,6 +18003,214 @@ snapshots:
     optionalDependencies:
       '@vue/compiler-sfc': 3.5.13
 
+  '@tiptap/core@2.10.3(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-blockquote@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-bold@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-bubble-menu@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+      tippy.js: 6.3.7
+
+  '@tiptap/extension-bullet-list@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-character-count@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-code-block@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-code@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-color@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/extension-text-style@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3)))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/extension-text-style': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+
+  '@tiptap/extension-document@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-dropcursor@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-floating-menu@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+      tippy.js: 6.3.7
+
+  '@tiptap/extension-gapcursor@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-hard-break@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-heading@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-highlight@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-history@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-horizontal-rule@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-italic@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-link@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+      linkifyjs: 4.2.0
+
+  '@tiptap/extension-list-item@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-ordered-list@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-paragraph@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-placeholder@2.10.4(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-strike@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-subscript@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-superscript@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-table-cell@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-table-header@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-table-row@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-table@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/extension-text-align@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-text-style@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-text@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/extension-underline@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+
+  '@tiptap/pm@2.10.3':
+    dependencies:
+      prosemirror-changeset: 2.2.1
+      prosemirror-collab: 1.3.1
+      prosemirror-commands: 1.6.2
+      prosemirror-dropcursor: 1.8.1
+      prosemirror-gapcursor: 1.3.2
+      prosemirror-history: 1.4.1
+      prosemirror-inputrules: 1.4.0
+      prosemirror-keymap: 1.2.2
+      prosemirror-markdown: 1.13.1
+      prosemirror-menu: 1.2.4
+      prosemirror-model: 1.24.1
+      prosemirror-schema-basic: 1.2.3
+      prosemirror-schema-list: 1.5.0
+      prosemirror-state: 1.4.3
+      prosemirror-tables: 1.6.1
+      prosemirror-trailing-node: 3.0.0(prosemirror-model@1.24.1)(prosemirror-state@1.4.3)(prosemirror-view@1.37.0)
+      prosemirror-transform: 1.10.2
+      prosemirror-view: 1.37.0
+
+  '@tiptap/starter-kit@2.10.3':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/extension-blockquote': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-bold': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-bullet-list': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-code': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-code-block': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-document': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-dropcursor': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-gapcursor': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-hard-break': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-heading': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-history': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-horizontal-rule': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-italic': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-list-item': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-ordered-list': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-paragraph': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-strike': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-text': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/extension-text-style': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))
+      '@tiptap/pm': 2.10.3
+
+  '@tiptap/vue-3@2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)(vue@3.5.13(typescript@5.2.2))':
+    dependencies:
+      '@tiptap/core': 2.10.3(@tiptap/pm@2.10.3)
+      '@tiptap/extension-bubble-menu': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/extension-floating-menu': 2.10.3(@tiptap/core@2.10.3(@tiptap/pm@2.10.3))(@tiptap/pm@2.10.3)
+      '@tiptap/pm': 2.10.3
+      vue: 3.5.13(typescript@5.2.2)
+
   '@tokenizer/token@0.3.0': {}
 
   '@tootallnate/once@1.1.2': {}
@@ -17610,16 +18388,25 @@ snapshots:
     dependencies:
       '@types/node': 18.19.36
 
+  '@types/linkify-it@5.0.0': {}
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.5
 
   '@types/lodash@4.17.5': {}
 
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
   '@types/mdast@3.0.15':
     dependencies:
       '@types/unist': 2.0.10
 
+  '@types/mdurl@2.0.0': {}
+
   '@types/mdx@2.0.13': {}
 
   '@types/mime@1.3.5': {}
@@ -18973,7 +19760,7 @@ snapshots:
     dependencies:
       '@vueuse/core': 10.11.0(vue@3.5.13(typescript@5.6.2))
       '@vueuse/shared': 10.11.0(vue@3.5.13(typescript@5.6.2))
-      vue-demi: 0.14.8(vue@3.5.13(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.2))
     optionalDependencies:
       axios: 1.7.2
       change-case: 4.1.2
@@ -20067,6 +20854,18 @@ snapshots:
 
   code-block-writer@12.0.0: {}
 
+  codemirror@6.0.1(@lezer/common@1.2.3):
+    dependencies:
+      '@codemirror/autocomplete': 6.18.3(@codemirror/language@6.10.6)(@codemirror/state@6.5.0)(@codemirror/view@6.35.3)(@lezer/common@1.2.3)
+      '@codemirror/commands': 6.7.1
+      '@codemirror/language': 6.10.6
+      '@codemirror/lint': 6.8.4
+      '@codemirror/search': 6.5.8
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+    transitivePeerDependencies:
+      - '@lezer/common'
+
   collapse-white-space@1.0.6: {}
 
   collect-v8-coverage@1.0.2: {}
@@ -20304,6 +21103,8 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  crelt@1.0.6: {}
+
   croner@8.0.2: {}
 
   cronstrue@2.50.0: {}
@@ -20663,10 +21464,6 @@ snapshots:
     dependencies:
       ms: 2.0.0
 
-  debug@3.2.7:
-    dependencies:
-      ms: 2.1.3
-
   debug@3.2.7(supports-color@5.5.0):
     dependencies:
       ms: 2.1.3
@@ -24128,6 +24925,12 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
+  linkifyjs@4.2.0: {}
+
   listhen@1.7.2:
     dependencies:
       '@parcel/watcher': 2.4.1
@@ -24368,6 +25171,15 @@ snapshots:
 
   markdown-escapes@1.0.4: {}
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   mathml-tag-names@2.1.3: {}
 
   mdast-squeeze-paragraphs@4.0.0:
@@ -24405,6 +25217,8 @@ snapshots:
 
   mdurl@1.0.1: {}
 
+  mdurl@2.0.0: {}
+
   media-typer@0.3.0: {}
 
   median-quickselect@1.0.1: {}
@@ -25363,6 +26177,8 @@ snapshots:
       string-width: 7.1.0
       strip-ansi: 7.1.0
 
+  orderedmap@2.1.1: {}
+
   os-homedir@1.0.2: {}
 
   os-tmpdir@1.0.2: {}
@@ -25654,7 +26470,7 @@ snapshots:
   portfinder@1.0.32:
     dependencies:
       async: 2.6.4
-      debug: 3.2.7
+      debug: 3.2.7(supports-color@5.5.0)
       mkdirp: 0.5.6
     transitivePeerDependencies:
       - supports-color
@@ -26333,6 +27149,109 @@ snapshots:
     dependencies:
       xtend: 4.0.2
 
+  prosemirror-changeset@2.2.1:
+    dependencies:
+      prosemirror-transform: 1.10.2
+
+  prosemirror-collab@1.3.1:
+    dependencies:
+      prosemirror-state: 1.4.3
+
+  prosemirror-commands@1.6.2:
+    dependencies:
+      prosemirror-model: 1.24.1
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.2
+
+  prosemirror-dropcursor@1.8.1:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.2
+      prosemirror-view: 1.37.0
+
+  prosemirror-gapcursor@1.3.2:
+    dependencies:
+      prosemirror-keymap: 1.2.2
+      prosemirror-model: 1.24.1
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.37.0
+
+  prosemirror-history@1.4.1:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.2
+      prosemirror-view: 1.37.0
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.4.0:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.2
+
+  prosemirror-keymap@1.2.2:
+    dependencies:
+      prosemirror-state: 1.4.3
+      w3c-keyname: 2.2.8
+
+  prosemirror-markdown@1.13.1:
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.1.0
+      prosemirror-model: 1.24.1
+
+  prosemirror-menu@1.2.4:
+    dependencies:
+      crelt: 1.0.6
+      prosemirror-commands: 1.6.2
+      prosemirror-history: 1.4.1
+      prosemirror-state: 1.4.3
+
+  prosemirror-model@1.24.1:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-basic@1.2.3:
+    dependencies:
+      prosemirror-model: 1.24.1
+
+  prosemirror-schema-list@1.5.0:
+    dependencies:
+      prosemirror-model: 1.24.1
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.2
+
+  prosemirror-state@1.4.3:
+    dependencies:
+      prosemirror-model: 1.24.1
+      prosemirror-transform: 1.10.2
+      prosemirror-view: 1.37.0
+
+  prosemirror-tables@1.6.1:
+    dependencies:
+      prosemirror-keymap: 1.2.2
+      prosemirror-model: 1.24.1
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.2
+      prosemirror-view: 1.37.0
+
+  prosemirror-trailing-node@3.0.0(prosemirror-model@1.24.1)(prosemirror-state@1.4.3)(prosemirror-view@1.37.0):
+    dependencies:
+      '@remirror/core-constants': 3.0.0
+      escape-string-regexp: 4.0.0
+      prosemirror-model: 1.24.1
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.37.0
+
+  prosemirror-transform@1.10.2:
+    dependencies:
+      prosemirror-model: 1.24.1
+
+  prosemirror-view@1.37.0:
+    dependencies:
+      prosemirror-model: 1.24.1
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.2
+
   proto-list@1.2.4: {}
 
   protocols@2.0.1: {}
@@ -26422,6 +27341,8 @@ snapshots:
       end-of-stream: 1.4.4
       once: 1.4.0
 
+  punycode.js@2.3.1: {}
+
   punycode@1.4.1: {}
 
   punycode@2.3.1: {}
@@ -26997,6 +27918,8 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.18.0
       fsevents: 2.3.3
 
+  rope-sequence@1.3.4: {}
+
   rrweb-cssom@0.6.0: {}
 
   rtl-detect@1.1.2: {}
@@ -27624,6 +28547,8 @@ snapshots:
       lodash: 4.17.21
       tinycolor2: 1.6.0
 
+  style-mod@4.1.2: {}
+
   style-to-object@0.3.0:
     dependencies:
       inline-style-parser: 0.1.1
@@ -28024,6 +28949,10 @@ snapshots:
 
   tinyspy@3.0.2: {}
 
+  tippy.js@6.3.7:
+    dependencies:
+      '@popperjs/core': 2.11.8
+
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -28366,6 +29295,8 @@ snapshots:
 
   ua-parser-js@1.0.38: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.3: {}
 
   uglify-js@3.18.0:
@@ -29071,6 +30002,21 @@ snapshots:
     dependencies:
       ufo: 1.5.3
 
+  vue-codemirror6@1.3.8(@lezer/common@1.2.3)(vue@3.5.13(typescript@5.2.2)):
+    dependencies:
+      '@codemirror/commands': 6.7.1
+      '@codemirror/language': 6.10.6
+      '@codemirror/lint': 6.8.4
+      '@codemirror/state': 6.5.0
+      '@codemirror/view': 6.35.3
+      codemirror: 6.0.1(@lezer/common@1.2.3)
+      style-mod: 4.1.2
+      vue: 3.5.13(typescript@5.2.2)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.2.2))
+    transitivePeerDependencies:
+      - '@lezer/common'
+      - '@vue/composition-api'
+
   vue-component-meta@2.0.21(typescript@5.6.2):
     dependencies:
       '@volar/typescript': 2.3.0
@@ -29082,7 +30028,15 @@ snapshots:
 
   vue-component-type-helpers@2.0.21: {}
 
-  vue-component-type-helpers@2.1.10: {}
+  vue-component-type-helpers@2.2.0: {}
+
+  vue-demi@0.14.10(vue@3.5.13(typescript@5.2.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.2.2)
+
+  vue-demi@0.14.10(vue@3.5.13(typescript@5.6.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.6.2)
 
   vue-demi@0.14.8(vue@3.5.13(typescript@5.2.2)):
     dependencies:
@@ -29123,6 +30077,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vue-i18n@9.13.1(vue@3.5.0(typescript@5.6.2)):
+    dependencies:
+      '@intlify/core-base': 9.13.1
+      '@intlify/shared': 9.13.1
+      '@vue/devtools-api': 6.6.3
+      vue: 3.5.0(typescript@5.6.2)
+
   vue-i18n@9.13.1(vue@3.5.13(typescript@5.2.2)):
     dependencies:
       '@intlify/core-base': 9.13.1
@@ -29255,6 +30216,8 @@ snapshots:
     dependencies:
       browser-process-hrtime: 1.0.0
 
+  w3c-keyname@2.2.8: {}
+
   w3c-xmlserializer@2.0.0:
     dependencies:
       xml-name-validator: 3.0.0