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/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-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/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/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/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 55ec41309..13689e799 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 c247c0e87..ff09b1269 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"
@@ -101,7 +101,7 @@
                 class="mt-colorpicker__colorpicker-input is--hex"
                 aria-label="hex-value"
                 type="text"
-                spellcheck="false"
+                :spellcheck="false"
               />
               <mt-text
                 v-if="colorLabels"
@@ -197,6 +197,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>
@@ -215,14 +226,39 @@ import { debounce } from "lodash-es";
 import MtBaseField from "../_internal/mt-base-field/mt-base-field.vue";
 import MtFloatingUi from "../../_internal/mt-floating-ui/mt-floating-ui.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
+import MtButton from "@/components/form/mt-button/mt-button.vue";
+import mtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
+import { useI18n } from "@/composables/useI18n";
 
 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: {
@@ -360,6 +396,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(): {
@@ -636,10 +690,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;
     },
 
@@ -647,7 +711,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) {
         return;
       }
@@ -709,6 +780,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
@@ -758,6 +835,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;
@@ -1253,6 +1337,7 @@ export default defineComponent({
 <style lang="scss">
 .mt-colorpicker {
   position: relative;
+  transition: all 0.3s ease;
 
   &__previewWrapper {
     position: relative;
@@ -1554,6 +1639,48 @@ export default defineComponent({
   .is--disabled &__previewWrapper {
     cursor: default;
   }
+
+  &--compact {
+    display: inline-block;
+    width: auto;
+    margin-bottom: 0;
+
+    .mt-field__label,
+    .mt-field__hint-wrapper,
+    .mt-colorpicker__input {
+      display: none;
+    }
+
+    .mt-block-field__block {
+      width: fit-content;
+      border: none;
+    }
+
+    .mt-field__addition.is--prefix {
+      border-right: none;
+      padding: 0;
+      min-width: auto;
+    }
+
+    .mt-colorpicker__previewWrapper {
+      border: none;
+    }
+
+    .mt-colorpicker__colorpicker-position {
+      position: absolute;
+      // 10px padding, 20px pointer distance from left
+      left: calc(-1 * (10px + 20px) / 2);
+      top: calc(100% + 2px);
+    }
+  }
+
+  &--compact.is--disabled {
+    opacity: 0.5;
+  }
+}
+
+.is--disabled .mt-colorpicker__previewWrapper {
+  cursor: not-allowed;
 }
 
 .mt-field__addition {
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..469c26e44 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
@@ -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-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/overlay/mt-modal/mt-modal.interactive.stories.ts b/packages/component-library/src/components/overlay/mt-modal/mt-modal.interactive.stories.ts
index 0e30ed894..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
@@ -89,7 +89,7 @@ export const VisualTestTeleportFeature = defineStory({
 <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 />
 
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..dba968744 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";
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..1b1958957 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
@@ -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/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/pnpm-lock.yaml b/pnpm-lock.yaml
index 24b52478f..7df8bc6d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -248,7 +248,7 @@ importers:
         version: 14.1.1
       jest:
         specifier: ^27.5.1
-        version: 27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5))
+        version: 27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5))
       jest-fail-on-console:
         specifier: ^2.2.3
         version: 2.5.0
@@ -257,7 +257,7 @@ importers:
         version: 5.0.2
       ts-jest:
         specifier: ^27.1.3
-        version: 27.1.5(@babel/core@7.24.7)(@types/jest@27.5.2)(babel-jest@27.5.1(@babel/core@7.24.7))(jest@27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5)))(typescript@4.9.5)
+        version: 27.1.5(@babel/core@7.24.7)(@types/jest@27.5.2)(babel-jest@27.5.1(@babel/core@7.24.7))(jest@27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5)))(typescript@4.9.5)
       typescript:
         specifier: ^4.9.4
         version: 4.9.5
@@ -279,6 +279,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
@@ -296,10 +299,73 @@ importers:
         version: 8.4.6(storybook@8.4.6(prettier@3.2.5))
       '@testing-library/jest-dom':
         specifier: ^6.4.6
-        version: 6.4.6(@jest/globals@29.7.0)(jest@29.7.0(@types/node@18.19.36)(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@5.2.2)))(vitest@1.6.0)
+        version: 6.4.6(@jest/globals@29.7.0)(jest@29.7.0(@types/node@18.19.36)(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@5.2.2)))(vitest@1.6.0(@types/node@18.19.36)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1))
       '@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 +375,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 +396,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))
@@ -420,7 +489,7 @@ importers:
         version: 0.11.1(eslint@8.57.0)(typescript@5.2.2)
       eslint-plugin-vitest:
         specifier: ^0.3.20
-        version: 0.3.26(eslint@8.57.0)(typescript@5.2.2)(vitest@1.6.0)
+        version: 0.3.26(eslint@8.57.0)(typescript@5.2.2)(vitest@1.6.0(@types/node@18.19.36)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1))
       eslint-plugin-vitest-globals:
         specifier: ^1.4.0
         version: 1.5.0
@@ -603,7 +672,7 @@ importers:
         version: 8.57.0
       eslint-plugin-vitest:
         specifier: ^0.3.20
-        version: 0.3.26(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)(vitest@1.6.0)
+        version: 0.3.26(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)(vitest@1.6.0(@types/node@20.14.5)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1))
       msw:
         specifier: ^2.1.5
         version: 2.3.1(typescript@5.6.2)
@@ -1479,6 +1548,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 +2647,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 +2675,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 +2992,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 +3721,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 +4074,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 +5700,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 +5933,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 +8925,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 +9130,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 +9170,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 +9839,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 +10722,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 +10841,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==}
 
@@ -10435,7 +10859,7 @@ packages:
   puppeteer@12.0.1:
     resolution: {integrity: sha512-YQ3GRiyZW0ddxTW+iiQcv2/8TT5c3+FcRUCg7F8q2gHqxd5akZN400VRXr9cHQKLWGukmJLDiE72MrcLK9tFHQ==}
     engines: {node: '>=10.18.1'}
-    deprecated: < 22.8.2 is no longer supported
+    deprecated: < 22.6.4 is no longer supported
 
   pure-color@1.3.0:
     resolution: {integrity: sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==}
@@ -10878,6 +11302,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 +11839,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 +12128,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 +12437,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 +13015,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:
@@ -12593,6 +13035,17 @@ packages:
   vue-component-type-helpers@2.1.10:
     resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==}
 
+  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==}
     engines: {node: '>=12'}
@@ -12698,6 +13151,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 +14817,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
 
@@ -15417,7 +15950,7 @@ snapshots:
       jest-util: 29.7.0
       slash: 3.0.0
 
-  '@jest/core@27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5))':
+  '@jest/core@27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5))':
     dependencies:
       '@jest/console': 27.5.1
       '@jest/reporters': 27.5.1
@@ -15431,7 +15964,7 @@ snapshots:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 27.5.1
-      jest-config: 27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5))
+      jest-config: 27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5))
       jest-haste-map: 27.5.1
       jest-message-util: 27.5.1
       jest-regex-util: 27.5.1
@@ -15993,6 +16526,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 +16585,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 +17135,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 +17538,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
@@ -17395,7 +17962,7 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(jest@29.7.0(@types/node@18.19.36)(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@5.2.2)))(vitest@1.6.0)':
+  '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(jest@29.7.0(@types/node@18.19.36)(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@5.2.2)))(vitest@1.6.0(@types/node@18.19.36)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1))':
     dependencies:
       '@adobe/css-tools': 4.4.0
       '@babel/runtime': 7.24.7
@@ -17433,6 +18000,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 +18385,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 +19757,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 +20851,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 +21100,8 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  crelt@1.0.6: {}
+
   croner@8.0.2: {}
 
   cronstrue@2.50.0: {}
@@ -20663,10 +21461,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
@@ -21450,7 +22244,7 @@ snapshots:
 
   eslint-plugin-vitest-globals@1.5.0: {}
 
-  eslint-plugin-vitest@0.3.26(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)(vitest@1.6.0):
+  eslint-plugin-vitest@0.3.26(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)(vitest@1.6.0(@types/node@20.14.5)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1)):
     dependencies:
       '@typescript-eslint/utils': 7.13.1(eslint@8.57.0)(typescript@5.6.2)
       eslint: 8.57.0
@@ -21461,7 +22255,7 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-vitest@0.3.26(eslint@8.57.0)(typescript@5.2.2)(vitest@1.6.0):
+  eslint-plugin-vitest@0.3.26(eslint@8.57.0)(typescript@5.2.2)(vitest@1.6.0(@types/node@18.19.36)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1)):
     dependencies:
       '@typescript-eslint/utils': 7.13.1(eslint@8.57.0)(typescript@5.2.2)
       eslint: 8.57.0
@@ -23227,16 +24021,16 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5)):
+  jest-cli@27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5)):
     dependencies:
-      '@jest/core': 27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5))
+      '@jest/core': 27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5))
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5))
+      jest-config: 27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5))
       jest-util: 27.5.1
       jest-validate: 27.5.1
       prompts: 2.4.2
@@ -23267,7 +24061,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5)):
+  jest-config@27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5)):
     dependencies:
       '@babel/core': 7.24.7
       '@jest/test-sequencer': 27.5.1
@@ -23880,11 +24674,11 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5)):
+  jest@27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5)):
     dependencies:
-      '@jest/core': 27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5))
+      '@jest/core': 27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5))
       import-local: 3.1.0
-      jest-cli: 27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5))
+      jest-cli: 27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5))
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -24128,6 +24922,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 +25168,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 +25214,8 @@ snapshots:
 
   mdurl@1.0.1: {}
 
+  mdurl@2.0.0: {}
+
   media-typer@0.3.0: {}
 
   median-quickselect@1.0.1: {}
@@ -25363,6 +26174,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 +26467,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 +27146,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 +27338,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 +27915,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 +28544,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 +28946,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
@@ -28090,11 +29016,11 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@27.1.5(@babel/core@7.24.7)(@types/jest@27.5.2)(babel-jest@27.5.1(@babel/core@7.24.7))(jest@27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5)))(typescript@4.9.5):
+  ts-jest@27.1.5(@babel/core@7.24.7)(@types/jest@27.5.2)(babel-jest@27.5.1(@babel/core@7.24.7))(jest@27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5)))(typescript@4.9.5):
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
-      jest: 27.5.1(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@4.9.5))
+      jest: 27.5.1(ts-node@10.9.2(@types/node@18.19.36)(typescript@4.9.5))
       jest-util: 27.5.1
       json5: 2.2.3
       lodash.memoize: 4.1.2
@@ -28366,6 +29292,8 @@ snapshots:
 
   ua-parser-js@1.0.38: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.3: {}
 
   uglify-js@3.18.0:
@@ -29071,6 +29999,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
@@ -29084,6 +30027,14 @@ snapshots:
 
   vue-component-type-helpers@2.1.10: {}
 
+  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:
       vue: 3.5.13(typescript@5.2.2)
@@ -29255,6 +30206,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