From ab2a472bb1c2e28aca6ad55223db522dd5f7e8bf Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Sun, 5 Jul 2026 14:33:40 +0200
Subject: [PATCH 1/7] feat(Editor): support external editor instances

---
 docs/content/docs/2.components/editor.md     |  63 +++++++
 src/runtime/components/Editor.vue            | 173 ++++++++++++++-----
 src/runtime/composables/useComponentProps.ts |  14 ++
 test/components/Editor.spec.ts               |  85 ++++++++-
 4 files changed, 291 insertions(+), 44 deletions(-)

diff --git a/docs/content/docs/2.components/editor.md b/docs/content/docs/2.components/editor.md
index 75a26f7beb..713765b01d 100644
--- a/docs/content/docs/2.components/editor.md
+++ b/docs/content/docs/2.components/editor.md
@@ -155,6 +155,69 @@ const value = ref('<h1>Hello World</h1>\n')
 Check out the image upload example for creating custom TipTap extensions.
 ::
 
+### External editor
+
+When you need full control over the editor — a custom schema, a different `StarterKit`, or a bespoke content lifecycle — you can create the TipTap editor yourself and pass it through the `editor` prop. The Editor then acts as a **shell**: it renders and styles the editor and wires it to the child components ([EditorToolbar](/docs/components/editor-toolbar), menus, …), but leaves the editor's extensions, content and lifecycle entirely to you.
+
+```vue
+<script setup lang="ts">
+import { useEditor } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+
+const editor = useEditor({
+  content: '<h1>Hello World</h1>',
+  extensions: [StarterKit]
+})
+</script>
+
+<template>
+  <UEditor :editor="editor">
+    <UEditorToolbar :editor="editor" :items="items" />
+  </UEditor>
+</template>
+```
+
+::note
+In this mode, the engine props (`starter-kit`, `image`, `mention`, `placeholder`, `markdown`, `content-type`, `model-value`, `extensions`) are **ignored** — the external editor owns its content and schema. You must keep full v-model control on your own editor instance, not UEditor component.
+::
+
+This is what enables editors backed by an extended starter kit, such as [comark-tiptap](https://github.com/sandros94/comark-tiptap), which provides a lossless markdown ↔ AST ↔ ProseMirror round-trip:
+
+```vue
+<script setup lang="ts">
+import Mention from '@tiptap/extension-mention'
+import { useComarkEditor } from 'comark-tiptap/vue'
+
+const { editor } = useComarkEditor({
+  content: '# Hello World',
+  contentType: 'markdown',
+  // Your editor owns the schema, so register the extensions the feature
+  // components rely on here — e.g. `Mention` for `UEditorMentionMenu`.
+  extensions: [Mention]
+})
+</script>
+
+<template>
+  <UEditor :editor="editor">
+    <UEditorToolbar :editor="editor" :items="items" />
+
+    <template #fallback>
+      Loading editor…
+    </template>
+  </UEditor>
+</template>
+```
+
+The [EditorToolbar](/docs/components/editor-toolbar) and handlers adapt to your editor's schema, but the mention, emoji and suggestion menus — and `placeholder` — only work once their extensions are registered on your editor (like `Mention` above).
+
+::note
+Nuxt UI automatically injects its `editorProps` (including the theme's base classes) into your editor so it inherits the default styling. Set `:editor-props="false"` to opt out and manage the editor's `editorProps` yourself.
+::
+
+::tip
+Use the `#fallback` slot to render content while an editor that is created asynchronously is not yet available.
+::
+
 ### Placeholder
 
 Use the `placeholder` prop to set a placeholder text that shows in empty paragraphs.
diff --git a/src/runtime/components/Editor.vue b/src/runtime/components/Editor.vue
index 8a5c86c981..40b231f381 100644
--- a/src/runtime/components/Editor.vue
+++ b/src/runtime/components/Editor.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { VNode } from 'vue'
+import type { ShallowRef, VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import type { Editor as TiptapEditor, EditorOptions, Content } from '@tiptap/vue-3'
 import type { StarterKitOptions } from '@tiptap/starter-kit'
@@ -15,12 +15,21 @@ type Editor = ComponentConfig<typeof theme, AppConfig, 'editor'>
 
 export type EditorContentType = 'json' | 'html' | 'markdown'
 
-export interface EditorProps<T extends Content = Content, H extends EditorCustomHandlers = EditorCustomHandlers> extends Omit<Partial<EditorOptions>, 'content' | 'element'> {
+export interface EditorProps<T extends Content = Content, H extends EditorCustomHandlers = EditorCustomHandlers> extends Omit<Partial<EditorOptions>, 'content' | 'element' | 'editorProps'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * Provide an externally created TipTap editor instance to use instead of the built-in one.
+   * When set, the component acts as a shell: it renders, styles and wires the editor to child
+   * components (toolbar, menus, …), but does not manage extensions nor `v-model`. The external
+   * editor owns its content, schema and lifecycle, so the engine props (`starterKit`, `image`,
+   * `mention`, `placeholder`, `markdown`, `contentType`, `modelValue`, `extensions`) are ignored.
+   * @see https://tiptap.dev/docs/editor/getting-started/install/vue3
+   */
+  editor?: TiptapEditor | ShallowRef<TiptapEditor | undefined>
   modelValue?: T
   /**
    * The content type the content is provided as.
@@ -66,6 +75,12 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
    * @see https://tiptap.dev/docs/editor/extensions/nodes/mention
    */
   mention?: boolean | Partial<Omit<MentionOptions, 'suggestion' | 'suggestions'>>
+  /**
+   * The TipTap [`editorProps`](https://tiptap.dev/docs/editor/api/editor#editorprops) (e.g. `attributes`, `handleDOMEvents`).
+   * When using an external `editor`, set to `false` to opt out of Nuxt UI automatically injecting
+   * its `editorProps` (including the theme's base classes) into your editor instance.
+   */
+  editorProps?: EditorOptions['editorProps'] | false
   /**
    * Custom item handlers to override or extend the default handlers.
    * These handlers are provided to all child components (toolbar, suggestion menu, etc.).
@@ -80,12 +95,17 @@ export interface EditorEmits<T extends Content = Content> {
 }
 
 export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandlers> {
-  default?(props: { editor: TiptapEditor, handlers: EditorHandlers<H> }): VNode[]
+  default?(props: { editor: TiptapEditor, handlers: EditorHandlers<H>, ui: Editor['ui'] }): VNode[]
+  /**
+   * Rendered while an external `editor` is not yet available (e.g. created asynchronously).
+   * Never rendered in the built-in mode, where the editor is ready synchronously.
+   */
+  fallback?(props: Record<string, never>): VNode[]
 }
 </script>
 
 <script setup lang="ts" generic="T extends Content, H extends EditorCustomHandlers">
-import { computed, provide, useAttrs, watch } from 'vue'
+import { computed, provide, unref, useAttrs, watch, watchEffect } from 'vue'
 import { defu } from 'defu'
 import { Primitive } from 'reka-ui'
 import { mergeAttributes } from '@tiptap/core'
@@ -99,7 +119,7 @@ import StarterKit from '@tiptap/starter-kit'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useComponentProps } from '../composables/useComponentProps'
+import { isPropBound, useComponentProps } from '../composables/useComponentProps'
 import { useForwardProps } from '../composables/useForwardProps'
 import { createHandlers } from '../utils/editor'
 import { tv } from '../utils/tv'
@@ -125,17 +145,21 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.editor || {}) })
   placeholderMode: typeof props.placeholder === 'object' ? props.placeholder.mode : undefined
 }))
 
-const rootProps = useForwardProps(reactiveOmit(props, 'starterKit', 'extensions', 'editorProps', 'contentType', 'class', 'placeholder', 'markdown', 'image', 'mention', 'handlers'))
+const rootProps = useForwardProps(reactiveOmit(props, 'editor', 'starterKit', 'extensions', 'editorProps', 'contentType', 'class', 'placeholder', 'markdown', 'image', 'mention', 'handlers'))
 
-const editorProps = computed(() => defu(props.editorProps, {
-  attributes: {
-    autocomplete: 'off',
-    autocorrect: 'off',
-    autocapitalize: 'off',
-    ...attrs,
-    class: ui.value.base({ class: props.ui?.base })
-  }
-} as EditorOptions['editorProps']))
+function baseEditorProps(originalClass?: unknown) {
+  return {
+    attributes: {
+      autocomplete: 'off',
+      autocorrect: 'off',
+      autocapitalize: 'off',
+      ...attrs,
+      class: ui.value.base({ class: [originalClass, props.ui?.base] })
+    }
+  } as EditorOptions['editorProps']
+}
+// eslint-disable-next-line vue/no-dupe-keys
+const editorProps = computed(() => defu(props.editorProps === false ? undefined : props.editorProps, baseEditorProps()))
 // eslint-disable-next-line vue/no-dupe-keys
 const contentType = computed(() => props.contentType || (typeof props.modelValue === 'string' ? 'html' : 'json'))
 // eslint-disable-next-line vue/no-dupe-keys
@@ -206,38 +230,99 @@ const extensions = computed(() => [
   ...(props.extensions || [])
 ].filter(extension => !!extension))
 
-const editor = useEditor({
-  ...rootProps.value,
-  content: props.modelValue,
-  contentType: contentType.value,
-  extensions: extensions.value,
-  editorProps: editorProps.value,
-  onCreate: ({ editor }) => {
-    // Force placeholder decorations to render immediately without needing focus
-    if (props.placeholder) {
-      editor.view.dispatch(editor.state.tr)
-    }
-  },
-  onUpdate: ({ editor }) => {
-    let value
-    try {
-      if (contentType.value === 'html') {
-        value = editor.getHTML()
-      } else if (contentType.value === 'json') {
-        value = editor.getJSON()
-      } else if (contentType.value === 'markdown') {
-        value = editor.getMarkdown()
+/**
+ * Detect external-editor mode from the *presence* of the `editor` prop (not its
+ * value), so the component behaves consistently even when the external editor is
+ * created asynchronously and starts out `undefined`.
+ */
+const isExternalEditor = isPropBound('editor')
+const externalEditor = computed(() => unref(props.editor) as TiptapEditor | undefined)
+
+if (import.meta.dev && isExternalEditor) {
+  const inertProps = (['modelValue', 'contentType', 'starterKit', 'image', 'mention', 'placeholder', 'markdown', 'extensions'] as const)
+    .filter(name => isPropBound(name))
+  if (inertProps.length) {
+    console.warn(`[@nuxt/ui] <UEditor> ignores [${inertProps.join(', ')}] when the \`editor\` prop is provided; the external editor owns its content, schema and lifecycle.`)
+  }
+}
+
+/**
+ * Built-in mode owns the editor instance and its `v-model` sync. External mode
+ * skips all of it — no `useEditor` (so no auto-destroy of an editor we don't own).
+ */
+const internalEditor = isExternalEditor
+  ? undefined
+  : useEditor({
+      ...rootProps.value,
+      content: props.modelValue,
+      contentType: contentType.value,
+      extensions: extensions.value,
+      editorProps: editorProps.value,
+      onCreate: ({ editor }) => {
+        // Force placeholder decorations to render immediately without needing focus
+        if (props.placeholder) {
+          editor.view.dispatch(editor.state.tr)
+        }
+      },
+      onUpdate: ({ editor }) => {
+        let value
+        try {
+          if (contentType.value === 'html') {
+            value = editor.getHTML()
+          } else if (contentType.value === 'json') {
+            value = editor.getJSON()
+          } else if (contentType.value === 'markdown') {
+            value = editor.getMarkdown()
+          }
+        } catch (error) {
+          value = editor.getText()
+        }
+
+        emits('update:modelValue', value as T)
       }
-    } catch (error) {
-      value = editor.getText()
+    })
+
+// eslint-disable-next-line vue/no-dupe-keys
+const editor = computed(() => isExternalEditor ? externalEditor.value : internalEditor?.value)
+
+/**
+ * In external mode, inject the component's `editorProps` (including the theme's
+ * base classes) into the user-owned editor so it inherits Nuxt UI's styling,
+ * unless the consumer opted out with `:editor-props="false"`.
+ *
+ * Two writers touch `editorProps` here: this component and the editor's owner.
+ * To coexist, we capture each editor's *pristine* `editorProps` once (WeakMap)
+ * and always merge our injection on top of that snapshot — never on top of a
+ * previous injection. That keeps re-runs idempotent and avoids reverting
+ * `editorProps` the owner sets after creation.
+ */
+if (isExternalEditor) {
+  const originalProps = new WeakMap<TiptapEditor, EditorOptions['editorProps']>()
+
+  watchEffect(() => {
+    const instance = externalEditor.value
+    if (!instance || props.editorProps === false) {
+      return
     }
 
-    emits('update:modelValue', value as T)
-  }
-})
+    if (!originalProps.has(instance)) {
+      originalProps.set(instance, instance.options.editorProps)
+    }
+    const original = originalProps.get(instance)
+
+    instance.setOptions({
+      editorProps: defu(
+        typeof props.editorProps === 'object' ? props.editorProps : undefined,
+        baseEditorProps((original as { attributes?: { class?: unknown } } | undefined)?.attributes?.class),
+        original || {}
+      ) as EditorOptions['editorProps']
+    })
+  })
+}
 
 watch(() => props.modelValue, (newVal) => {
-  if (!editor.value || newVal == null) {
+  // The external editor owns its content, so `v-model` is inert in that mode.
+  if (isExternalEditor || !editor.value || newVal == null) {
     return
   }
 
@@ -285,7 +370,7 @@ defineExpose({
 <template>
   <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <template v-if="editor">
-      <slot :editor="editor" :handlers="handlers" />
+      <slot :editor="editor" :handlers="handlers" :ui="ui" />
 
       <EditorContent
         role="presentation"
@@ -294,5 +379,7 @@ defineExpose({
         :class="ui.content({ class: props.ui?.content })"
       />
     </template>
+
+    <slot v-else name="fallback" />
   </Primitive>
 </template>
diff --git a/src/runtime/composables/useComponentProps.ts b/src/runtime/composables/useComponentProps.ts
index 39bae8e0c4..694099413b 100644
--- a/src/runtime/composables/useComponentProps.ts
+++ b/src/runtime/composables/useComponentProps.ts
@@ -44,6 +44,20 @@ function propIsDefined(vnode: VNode | null | undefined, prop: string): boolean {
     || vnode.props[kebabCase(prop)] !== undefined
 }
 
+/**
+ * Detect, from within a component's `setup`, whether a prop was *bound* by the
+ * parent — i.e. the attribute is present on the vnode — regardless of its value.
+ * Unlike `propIsDefined`, this stays `true` when the bound value is `undefined`
+ * (e.g. an external editor ref populated asynchronously, whose value is `undefined`
+ * on first render), which is what lets a component switch modes on prop presence.
+ * Checks both camelCase and kebab-case names to cover both template conventions.
+ */
+export function isPropBound(name: string): boolean {
+  const vnode = getCurrentInstance()?.vnode
+  if (!vnode || !vnode.props) return false
+  return camelCase(name) in vnode.props || kebabCase(name) in vnode.props
+}
+
 /**
  * Resolve a component's props with the priority chain:
  *   explicit prop > nearest UTheme > withDefaults
diff --git a/test/components/Editor.spec.ts b/test/components/Editor.spec.ts
index 34c8da2fee..8721d46ebe 100644
--- a/test/components/Editor.spec.ts
+++ b/test/components/Editor.spec.ts
@@ -1,6 +1,9 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { Editor as TiptapEditor } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
 import { renderEach } from '../component-render'
 import Editor from '../../src/runtime/components/Editor.vue'
 
@@ -26,4 +29,84 @@ describe('Editor', () => {
 
     wrapper.unmount()
   })
+
+  describe('with an external editor', () => {
+    const editors: TiptapEditor[] = []
+    const createEditor = (content = '<p>External content</p>', options = {}) => {
+      const editor = new TiptapEditor({ extensions: [StarterKit], content, ...options })
+      editors.push(editor)
+      return editor
+    }
+
+    afterEach(() => {
+      editors.splice(0).forEach(editor => editor.destroy())
+    })
+
+    it('renders the provided editor as a shell', async () => {
+      const editor = createEditor()
+      const wrapper = await mountSuspended(Editor, { props: { editor } })
+
+      expect(wrapper.find('.ProseMirror').exists()).toBe(true)
+      expect(wrapper.text()).toContain('External content')
+
+      wrapper.unmount()
+    })
+
+    it('injects the theme base classes into the external editor', async () => {
+      const editor = createEditor()
+      const wrapper = await mountSuspended(Editor, { props: { editor } })
+
+      const injected = (editor.options.editorProps?.attributes as Record<string, string> | undefined)?.class
+      expect(injected).toContain('outline-none')
+
+      wrapper.unmount()
+    })
+
+    it('does not inject editorProps when opted out with `editor-props` false', async () => {
+      const editor = createEditor('<p>External content</p>', {
+        editorProps: { attributes: { class: 'custom-class' } }
+      })
+      const wrapper = await mountSuspended(Editor, { props: { editor, editorProps: false } })
+
+      const injected = (editor.options.editorProps?.attributes as Record<string, string> | undefined)?.class
+      expect(injected).toBe('custom-class')
+      expect(injected).not.toContain('outline-none')
+
+      wrapper.unmount()
+    })
+
+    it('ignores engine props (content owned by the external editor)', async () => {
+      // Silence the dev-only warning about inert props.
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      const editor = createEditor('<p>External content</p>')
+      const wrapper = await mountSuspended(Editor, {
+        props: { editor, modelValue: 'ignored value', contentType: 'html' as const }
+      })
+
+      // The external editor's content is used; engine props are inert.
+      expect(wrapper.text()).toContain('External content')
+      expect(wrapper.text()).not.toContain('ignored value')
+
+      warn.mockRestore()
+      wrapper.unmount()
+    })
+
+    it('renders the fallback slot until the external editor is ready', async () => {
+      const wrapper = await mountSuspended(Editor, {
+        props: { editor: undefined },
+        slots: { fallback: () => 'Loading editor…' }
+      })
+
+      expect(wrapper.text()).toContain('Loading editor…')
+      expect(wrapper.find('.ProseMirror').exists()).toBe(false)
+
+      await wrapper.setProps({ editor: createEditor('<p>Now ready</p>') })
+      await flushPromises()
+
+      expect(wrapper.find('.ProseMirror').exists()).toBe(true)
+      expect(wrapper.text()).toContain('Now ready')
+
+      wrapper.unmount()
+    })
+  })
 })

From 27618a70bfbb7eb44e596091a95fdbcb614e7c0f Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Sun, 5 Jul 2026 19:24:14 +0200
Subject: [PATCH 2/7] docs(Editor): clarify v-model management for external
 editor instances

---
 docs/content/docs/2.components/editor.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/docs/2.components/editor.md b/docs/content/docs/2.components/editor.md
index 713765b01d..431a11f7b7 100644
--- a/docs/content/docs/2.components/editor.md
+++ b/docs/content/docs/2.components/editor.md
@@ -178,7 +178,7 @@ const editor = useEditor({
 ```
 
 ::note
-In this mode, the engine props (`starter-kit`, `image`, `mention`, `placeholder`, `markdown`, `content-type`, `model-value`, `extensions`) are **ignored** — the external editor owns its content and schema. You must keep full v-model control on your own editor instance, not UEditor component.
+In this mode, the engine props (`starter-kit`, `image`, `mention`, `placeholder`, `markdown`, `content-type`, `model-value`, `extensions`) are **ignored** — the external editor owns its content and schema. Manage `v-model` on your own editor instance instead of on the `UEditor` component.
 ::
 
 This is what enables editors backed by an extended starter kit, such as [comark-tiptap](https://github.com/sandros94/comark-tiptap), which provides a lossless markdown ↔ AST ↔ ProseMirror round-trip:

From 2067be35e7bd7671880302102fef93472002dd05 Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Mon, 6 Jul 2026 13:52:04 +0200
Subject: [PATCH 3/7] feat(Editor): add `prose` prop and stop mutating external
 editor instances

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/content/docs/2.components/editor.md      |  35 +++-
 src/runtime/components/Editor.vue             | 184 ++++++++----------
 src/runtime/composables/useComponentProps.ts  |   8 +-
 src/theme/editor.ts                           | 110 ++++++-----
 test/components/Editor.spec.ts                |  72 ++++++-
 .../__snapshots__/Editor-vue.spec.ts.snap     |  20 +-
 .../__snapshots__/Editor.spec.ts.snap         |  20 +-
 7 files changed, 258 insertions(+), 191 deletions(-)

diff --git a/docs/content/docs/2.components/editor.md b/docs/content/docs/2.components/editor.md
index 431a11f7b7..9d170c2b97 100644
--- a/docs/content/docs/2.components/editor.md
+++ b/docs/content/docs/2.components/editor.md
@@ -178,7 +178,7 @@ const editor = useEditor({
 ```
 
 ::note
-In this mode, the engine props (`starter-kit`, `image`, `mention`, `placeholder`, `markdown`, `content-type`, `model-value`, `extensions`) are **ignored** — the external editor owns its content and schema. Manage `v-model` on your own editor instance instead of on the `UEditor` component.
+In this mode, the engine props (`starter-kit`, `image`, `mention`, `placeholder`, `markdown`, `content-type`, `model-value`, `extensions`, `editor-props`, …) are **ignored** — the external editor owns its content, schema and options. Manage `v-model` on your own editor instance instead of on the `UEditor` component.
 ::
 
 This is what enables editors backed by an extended starter kit, such as [comark-tiptap](https://github.com/sandros94/comark-tiptap), which provides a lossless markdown ↔ AST ↔ ProseMirror round-trip:
@@ -208,16 +208,43 @@ const { editor } = useComarkEditor({
 </template>
 ```
 
-The [EditorToolbar](/docs/components/editor-toolbar) and handlers adapt to your editor's schema, but the mention, emoji and suggestion menus — and `placeholder` — only work once their extensions are registered on your editor (like `Mention` above).
+The [EditorToolbar](/docs/components/editor-toolbar) items and handlers call your editor's commands directly, so only include items whose extensions are registered on your editor — same for the mention, emoji and suggestion menus (like `Mention` above). The theme's placeholder styling applies automatically once your editor registers the Placeholder extension.
 
 ::note
-Nuxt UI automatically injects its `editorProps` (including the theme's base classes) into your editor so it inherits the default styling. Set `:editor-props="false"` to opt out and manage the editor's `editorProps` yourself.
+The editor instance is never modified: the theme's [prose classes](#prose) style your content from a wrapper element, so an external editor inherits the default typography automatically. Attributes of the editable element itself remain yours — for parity with the built-in editor, set the theme's `base` slot classes at creation:
+
+```ts
+const editor = useEditor({
+  // ...
+  editorProps: {
+    attributes: {
+      autocomplete: 'off',
+      autocorrect: 'off',
+      autocapitalize: 'off',
+      class: 'w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20'
+    }
+  }
+})
+```
+
 ::
 
 ::tip
-Use the `#fallback` slot to render content while an editor that is created asynchronously is not yet available.
+The `#fallback` slot renders while the editor is not yet available — during SSR and before mount, or while an asynchronously created external editor is still `undefined`.
 ::
 
+### Prose
+
+The editor content is styled with the theme's prose (typography) classes. Their targets are wrapped in `:where()` so each rule keeps the specificity of a single class: your own classes and any higher-specificity styling from extensions or stylesheets can always override them. Set the `prose` prop to `false` to disable them entirely, for example when the editor brings its own content styling:
+
+```vue
+<template>
+  <UEditor :editor="editor" :prose="false">
+    <UEditorToolbar :editor="editor" :items="items" />
+  </UEditor>
+</template>
+```
+
 ### Placeholder
 
 Use the `placeholder` prop to set a placeholder text that shows in empty paragraphs.
diff --git a/src/runtime/components/Editor.vue b/src/runtime/components/Editor.vue
index 40b231f381..cd8e2878fc 100644
--- a/src/runtime/components/Editor.vue
+++ b/src/runtime/components/Editor.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { ShallowRef, VNode } from 'vue'
+import type { ComputedRef, MaybeRef, VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import type { Editor as TiptapEditor, EditorOptions, Content } from '@tiptap/vue-3'
 import type { StarterKitOptions } from '@tiptap/starter-kit'
@@ -15,21 +15,22 @@ type Editor = ComponentConfig<typeof theme, AppConfig, 'editor'>
 
 export type EditorContentType = 'json' | 'html' | 'markdown'
 
-export interface EditorProps<T extends Content = Content, H extends EditorCustomHandlers = EditorCustomHandlers> extends Omit<Partial<EditorOptions>, 'content' | 'element' | 'editorProps'> {
+export interface EditorProps<T extends Content = Content, H extends EditorCustomHandlers = EditorCustomHandlers> extends Omit<Partial<EditorOptions>, 'content' | 'element'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
    */
   as?: any
   /**
-   * Provide an externally created TipTap editor instance to use instead of the built-in one.
-   * When set, the component acts as a shell: it renders, styles and wires the editor to child
-   * components (toolbar, menus, …), but does not manage extensions nor `v-model`. The external
-   * editor owns its content, schema and lifecycle, so the engine props (`starterKit`, `image`,
-   * `mention`, `placeholder`, `markdown`, `contentType`, `modelValue`, `extensions`) are ignored.
+   * An external TipTap editor instance to use instead of the built-in one.
+   * The component renders and styles it and wires it to the child components (toolbar, menus, …),
+   * while the instance keeps ownership of its content, schema and lifecycle: `v-model` and the
+   * TipTap options props (`starterKit`, `extensions`, `editorProps`, …) are ignored.
+   * Bind the prop from the first render (even while still `undefined`, e.g. an editor created
+   * asynchronously) — it is detected by presence, not value.
    * @see https://tiptap.dev/docs/editor/getting-started/install/vue3
    */
-  editor?: TiptapEditor | ShallowRef<TiptapEditor | undefined>
+  editor?: MaybeRef<TiptapEditor | undefined> | ComputedRef<TiptapEditor | undefined>
   modelValue?: T
   /**
    * The content type the content is provided as.
@@ -76,11 +77,12 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
    */
   mention?: boolean | Partial<Omit<MentionOptions, 'suggestion' | 'suggestions'>>
   /**
-   * The TipTap [`editorProps`](https://tiptap.dev/docs/editor/api/editor#editorprops) (e.g. `attributes`, `handleDOMEvents`).
-   * When using an external `editor`, set to `false` to opt out of Nuxt UI automatically injecting
-   * its `editorProps` (including the theme's base classes) into your editor instance.
+   * Apply the theme's prose (typography) classes to the editor content.
+   * They use `:where()` selectors, so your own styling takes precedence over them.
+   * Set to `false` when the editor brings its own content styling.
+   * @defaultValue true
    */
-  editorProps?: EditorOptions['editorProps'] | false
+  prose?: boolean
   /**
    * Custom item handlers to override or extend the default handlers.
    * These handlers are provided to all child components (toolbar, suggestion menu, etc.).
@@ -97,15 +99,15 @@ export interface EditorEmits<T extends Content = Content> {
 export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandlers> {
   default?(props: { editor: TiptapEditor, handlers: EditorHandlers<H>, ui: Editor['ui'] }): VNode[]
   /**
-   * Rendered while an external `editor` is not yet available (e.g. created asynchronously).
-   * Never rendered in the built-in mode, where the editor is ready synchronously.
+   * Rendered while the editor is not yet available: during SSR and before mount,
+   * or while an asynchronously created external `editor` is still `undefined`.
    */
   fallback?(props: Record<string, never>): VNode[]
 }
 </script>
 
 <script setup lang="ts" generic="T extends Content, H extends EditorCustomHandlers">
-import { computed, provide, unref, useAttrs, watch, watchEffect } from 'vue'
+import { computed, provide, unref, useAttrs, watch } from 'vue'
 import { defu } from 'defu'
 import { Primitive } from 'reka-ui'
 import { mergeAttributes } from '@tiptap/core'
@@ -142,24 +144,21 @@ const appConfig = useAppConfig() as Editor['AppConfig']
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.editor || {}) })({
+  prose: props.prose,
   placeholderMode: typeof props.placeholder === 'object' ? props.placeholder.mode : undefined
 }))
 
-const rootProps = useForwardProps(reactiveOmit(props, 'editor', 'starterKit', 'extensions', 'editorProps', 'contentType', 'class', 'placeholder', 'markdown', 'image', 'mention', 'handlers'))
+const rootProps = useForwardProps(reactiveOmit(props, 'editor', 'starterKit', 'extensions', 'editorProps', 'contentType', 'class', 'placeholder', 'markdown', 'image', 'mention', 'prose', 'handlers'))
 
-function baseEditorProps(originalClass?: unknown) {
-  return {
-    attributes: {
-      autocomplete: 'off',
-      autocorrect: 'off',
-      autocapitalize: 'off',
-      ...attrs,
-      class: ui.value.base({ class: [originalClass, props.ui?.base] })
-    }
-  } as EditorOptions['editorProps']
-}
-// eslint-disable-next-line vue/no-dupe-keys
-const editorProps = computed(() => defu(props.editorProps === false ? undefined : props.editorProps, baseEditorProps()))
+const editorProps = computed(() => defu(props.editorProps, {
+  attributes: {
+    autocomplete: 'off',
+    autocorrect: 'off',
+    autocapitalize: 'off',
+    ...attrs,
+    class: ui.value.base({ class: props.ui?.base })
+  }
+} as EditorOptions['editorProps']))
 // eslint-disable-next-line vue/no-dupe-keys
 const contentType = computed(() => props.contentType || (typeof props.modelValue === 'string' ? 'html' : 'json'))
 // eslint-disable-next-line vue/no-dupe-keys
@@ -230,26 +229,31 @@ const extensions = computed(() => [
   ...(props.extensions || [])
 ].filter(extension => !!extension))
 
-/**
- * Detect external-editor mode from the *presence* of the `editor` prop (not its
- * value), so the component behaves consistently even when the external editor is
- * created asynchronously and starts out `undefined`.
- */
+// External mode is detected from the presence of the `editor` prop, not its value,
+// so an editor created asynchronously (`undefined` on first render) is still recognized.
 const isExternalEditor = isPropBound('editor')
 const externalEditor = computed(() => unref(props.editor) as TiptapEditor | undefined)
 
-if (import.meta.dev && isExternalEditor) {
-  const inertProps = (['modelValue', 'contentType', 'starterKit', 'image', 'mention', 'placeholder', 'markdown', 'extensions'] as const)
-    .filter(name => isPropBound(name))
-  if (inertProps.length) {
-    console.warn(`[@nuxt/ui] <UEditor> ignores [${inertProps.join(', ')}] when the \`editor\` prop is provided; the external editor owns its content, schema and lifecycle.`)
+if (import.meta.dev) {
+  if (isExternalEditor) {
+    // Every prop not listed here only configures the built-in editor.
+    const shellProps = ['editor', 'as', 'class', 'ui', 'handlers', 'prose']
+    const inertProps = Object.keys(_props).filter(name => !shellProps.includes(name) && isPropBound(name))
+    if (inertProps.length) {
+      console.warn(`[@nuxt/ui] <UEditor> ignores [${inertProps.join(', ')}] when the \`editor\` prop is provided; the external editor owns its content, schema and lifecycle.`)
+    }
+  } else {
+    // The mode is fixed at setup, so an `editor` bound after the first render is inert.
+    const stop = watch(() => unref(props.editor), (value) => {
+      if (value) {
+        console.warn('[@nuxt/ui] <UEditor> received an `editor` after its first render and will keep using the built-in editor; bind the `editor` prop from the start (even while `undefined`) to use an external editor.')
+        stop()
+      }
+    })
   }
 }
 
-/**
- * Built-in mode owns the editor instance and its `v-model` sync. External mode
- * skips all of it — no `useEditor` (so no auto-destroy of an editor we don't own).
- */
+// No `useEditor` in external mode: it creates its own instance and destroys it on unmount.
 const internalEditor = isExternalEditor
   ? undefined
   : useEditor({
@@ -285,75 +289,42 @@ const internalEditor = isExternalEditor
 // eslint-disable-next-line vue/no-dupe-keys
 const editor = computed(() => isExternalEditor ? externalEditor.value : internalEditor?.value)
 
-/**
- * In external mode, inject the component's `editorProps` (including the theme's
- * base classes) into the user-owned editor so it inherits Nuxt UI's styling,
- * unless the consumer opted out with `:editor-props="false"`.
- *
- * Two writers touch `editorProps` here: this component and the editor's owner.
- * To coexist, we capture each editor's *pristine* `editorProps` once (WeakMap)
- * and always merge our injection on top of that snapshot — never on top of a
- * previous injection. That keeps re-runs idempotent and avoids reverting
- * `editorProps` the owner sets after creation.
- */
-if (isExternalEditor) {
-  const originalProps = new WeakMap<TiptapEditor, EditorOptions['editorProps']>()
-
-  watchEffect(() => {
-    const instance = externalEditor.value
-    if (!instance || props.editorProps === false) {
+// `v-model` only syncs the built-in editor; an external editor owns its content.
+if (!isExternalEditor) {
+  watch(() => props.modelValue, (newVal) => {
+    if (!editor.value || newVal == null) {
       return
     }
 
-    if (!originalProps.has(instance)) {
-      originalProps.set(instance, instance.options.editorProps)
+    const currentContent = contentType.value === 'html'
+      ? editor.value.getHTML()
+      : contentType.value === 'json'
+        ? JSON.stringify(editor.value.getJSON())
+        : contentType.value === 'markdown'
+          ? editor.value.getMarkdown()
+          : editor.value.getText()
+
+    const newContent = contentType.value === 'json' && typeof newVal === 'object'
+      ? JSON.stringify(newVal)
+      : String(newVal)
+
+    if (currentContent !== newContent) {
+      // Store current cursor position
+      const currentSelection = editor.value.state.selection
+      const currentPos = currentSelection.from
+
+      // Set the new content
+      editor.value.commands.setContent(newVal, { contentType: contentType.value })
+
+      // Restore cursor position if the position is still valid in the new content
+      const newDoc = editor.value.state.doc
+      if (currentPos <= newDoc.content.size) {
+        editor.value.commands.setTextSelection(currentPos)
+      }
     }
-    const original = originalProps.get(instance)
-
-    instance.setOptions({
-      editorProps: defu(
-        typeof props.editorProps === 'object' ? props.editorProps : undefined,
-        baseEditorProps((original as { attributes?: { class?: unknown } } | undefined)?.attributes?.class),
-        original || {}
-      ) as EditorOptions['editorProps']
-    })
   })
 }
 
-watch(() => props.modelValue, (newVal) => {
-  // The external editor owns its content, so `v-model` is inert in that mode.
-  if (isExternalEditor || !editor.value || newVal == null) {
-    return
-  }
-
-  const currentContent = contentType.value === 'html'
-    ? editor.value.getHTML()
-    : contentType.value === 'json'
-      ? JSON.stringify(editor.value.getJSON())
-      : contentType.value === 'markdown'
-        ? editor.value.getMarkdown()
-        : editor.value.getText()
-
-  const newContent = contentType.value === 'json' && typeof newVal === 'object'
-    ? JSON.stringify(newVal)
-    : String(newVal)
-
-  if (currentContent !== newContent) {
-    // Store current cursor position
-    const currentSelection = editor.value.state.selection
-    const currentPos = currentSelection.from
-
-    // Set the new content
-    editor.value.commands.setContent(newVal, { contentType: contentType.value })
-
-    // Restore cursor position if the position is still valid in the new content
-    const newDoc = editor.value.state.doc
-    if (currentPos <= newDoc.content.size) {
-      editor.value.commands.setTextSelection(currentPos)
-    }
-  }
-})
-
 // eslint-disable-next-line vue/no-dupe-keys
 const handlers = computed(() => ({
   ...createHandlers(),
@@ -376,7 +347,8 @@ defineExpose({
         role="presentation"
         :editor="editor"
         data-slot="content"
-        :class="ui.content({ class: props.ui?.content })"
+        :class="[ui.content({ class: props.ui?.content }), ui.prose({ class: props.ui?.prose })]"
+        v-bind="isExternalEditor ? $attrs : undefined"
       />
     </template>
 
diff --git a/src/runtime/composables/useComponentProps.ts b/src/runtime/composables/useComponentProps.ts
index 694099413b..a2f6390d00 100644
--- a/src/runtime/composables/useComponentProps.ts
+++ b/src/runtime/composables/useComponentProps.ts
@@ -45,11 +45,9 @@ function propIsDefined(vnode: VNode | null | undefined, prop: string): boolean {
 }
 
 /**
- * Detect, from within a component's `setup`, whether a prop was *bound* by the
- * parent — i.e. the attribute is present on the vnode — regardless of its value.
- * Unlike `propIsDefined`, this stays `true` when the bound value is `undefined`
- * (e.g. an external editor ref populated asynchronously, whose value is `undefined`
- * on first render), which is what lets a component switch modes on prop presence.
+ * Detect, from within a component's `setup`, whether a prop was bound by the parent,
+ * regardless of its value. Unlike `propIsDefined`, this stays `true` when the bound
+ * value is `undefined` (e.g. a binding that only resolves after the first render).
  * Checks both camelCase and kebab-case names to cover both template conventions.
  */
 export function isPropBound(name: string): boolean {
diff --git a/src/theme/editor.ts b/src/theme/editor.ts
index 65987bc7d0..f8b8e32597 100644
--- a/src/theme/editor.ts
+++ b/src/theme/editor.ts
@@ -4,62 +4,80 @@ export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: '',
     content: 'relative size-full flex-1',
-    base: [
-      'w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20',
-      // Paragraph
-      '[&_p]:leading-7',
-      // Links
-      '[&_a]:text-primary [&_a]:border-b [&_a]:border-transparent [&_a]:hover:border-primary [&_a]:font-medium',
-      options.theme?.transitions && '[&_a]:transition-colors',
-      // Code inside links
-      '[&_a>code]:border-dashed [&_a:hover>code]:border-primary [&_a:hover>code]:text-primary',
-      options.theme?.transitions && '[&_a>code]:transition-colors',
-      // Mentions
-      '[&_.mention]:text-primary [&_.mention]:font-medium',
-      // Headings - shared styles
-      '[&_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&_:is(h1,h2,h3,h4,h5,h6)]:font-bold',
-      // Headings - unique styles
-      '[&_h1]:text-3xl',
-      '[&_h2]:text-2xl',
-      '[&_h3]:text-xl',
-      '[&_h4]:text-lg',
-      '[&_h5]:text-base',
-      '[&_h6]:text-base',
-      // Code inside headings
-      '[&_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold',
-      '[&_h2>code]:text-xl/6',
-      '[&_h3>code]:text-lg/5',
-      // Blockquote & HR
-      '[&_blockquote]:border-s-4 [&_blockquote]:border-accented [&_blockquote]:ps-4 [&_blockquote]:italic',
-      '[&_[data-type=horizontalRule]]:my-8 [&_[data-type=horizontalRule]]:py-2',
-      '[&_hr]:border-t [&_hr]:border-default',
-      // Code blocks
-      '[&_pre]:text-sm/6 [&_pre]:border [&_pre]:border-muted [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:px-4 [&_pre]:py-3 [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:overflow-x-auto',
-      '[&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:font-inherit [&_pre_code]:rounded-none [&_pre_code]:inline [&_pre_code]:border-0 [&_pre_code]:bg-transparent',
-      // Inline code
-      '[&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono [&_code]:font-medium [&_code]:rounded-md [&_code]:inline-block [&_code]:border [&_code]:border-muted [&_code]:text-highlighted [&_code]:bg-muted',
-      // Lists
-      '[&_:is(ul,ol)]:ps-6',
-      '[&_ul]:list-disc [&_ul]:marker:text-(--ui-border-accented)',
-      '[&_ol]:list-decimal [&_ol]:marker:text-muted',
-      '[&_li]:my-1.5 [&_li]:ps-1.5',
-      // Images
-      '[&_img]:rounded-md [&_img]:block [&_img]:max-w-full [&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-primary',
-      // Selected nodes
-      '[&_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20'
-    ]
+    // Classes of the editable element itself, injected via `editorProps` (built-in editor only).
+    base: 'w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20',
+    prose: ''
   },
   variants: {
+    prose: {
+      true: {
+        /**
+         * Typography for the editor content, applied on the content wrapper so it also
+         * covers external editors. Targets are scoped to `.ProseMirror` (menus appended
+         * to the wrapper must stay unaffected) and `:where()`-wrapped so user or
+         * extension styling can always override them.
+         */
+        prose: [
+          // Paragraph
+          '[&_:where(.ProseMirror_p)]:leading-7',
+          // Links
+          '[&_:where(.ProseMirror_a)]:text-primary [&_:where(.ProseMirror_a)]:border-b [&_:where(.ProseMirror_a)]:border-transparent [&_:where(.ProseMirror_a:hover)]:border-primary [&_:where(.ProseMirror_a)]:font-medium',
+          options.theme?.transitions && '[&_:where(.ProseMirror_a)]:transition-colors',
+          // Code inside links
+          '[&_:where(.ProseMirror_a>code)]:border-dashed [&_:where(.ProseMirror_a:hover>code)]:border-primary [&_:where(.ProseMirror_a:hover>code)]:text-primary',
+          options.theme?.transitions && '[&_:where(.ProseMirror_a>code)]:transition-colors',
+          // Mentions
+          '[&_:where(.ProseMirror_.mention)]:text-primary [&_:where(.ProseMirror_.mention)]:font-medium',
+          // Headings - shared styles
+          '[&_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold',
+          // Headings - unique styles
+          '[&_:where(.ProseMirror_h1)]:text-3xl',
+          '[&_:where(.ProseMirror_h2)]:text-2xl',
+          '[&_:where(.ProseMirror_h3)]:text-xl',
+          '[&_:where(.ProseMirror_h4)]:text-lg',
+          '[&_:where(.ProseMirror_h5)]:text-base',
+          '[&_:where(.ProseMirror_h6)]:text-base',
+          // Code inside headings
+          '[&_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold',
+          '[&_:where(.ProseMirror_h2>code)]:text-xl/6',
+          '[&_:where(.ProseMirror_h3>code)]:text-lg/5',
+          // Blockquote & HR
+          '[&_:where(.ProseMirror_blockquote)]:border-s-4 [&_:where(.ProseMirror_blockquote)]:border-accented [&_:where(.ProseMirror_blockquote)]:ps-4 [&_:where(.ProseMirror_blockquote)]:italic',
+          '[&_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&_:where(.ProseMirror_[data-type=horizontalRule])]:py-2',
+          '[&_:where(.ProseMirror_hr)]:border-t [&_:where(.ProseMirror_hr)]:border-default',
+          // Code blocks
+          '[&_:where(.ProseMirror_pre)]:text-sm/6 [&_:where(.ProseMirror_pre)]:border [&_:where(.ProseMirror_pre)]:border-muted [&_:where(.ProseMirror_pre)]:bg-muted [&_:where(.ProseMirror_pre)]:rounded-md [&_:where(.ProseMirror_pre)]:px-4 [&_:where(.ProseMirror_pre)]:py-3 [&_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&_:where(.ProseMirror_pre)]:break-words [&_:where(.ProseMirror_pre)]:overflow-x-auto',
+          '[&_:where(.ProseMirror_pre_code)]:p-0 [&_:where(.ProseMirror_pre_code)]:text-inherit [&_:where(.ProseMirror_pre_code)]:rounded-none [&_:where(.ProseMirror_pre_code)]:inline [&_:where(.ProseMirror_pre_code)]:border-0 [&_:where(.ProseMirror_pre_code)]:bg-transparent',
+          // Inline code
+          '[&_:where(.ProseMirror_code)]:px-1.5 [&_:where(.ProseMirror_code)]:py-0.5 [&_:where(.ProseMirror_code)]:text-sm [&_:where(.ProseMirror_code)]:font-mono [&_:where(.ProseMirror_code)]:font-medium [&_:where(.ProseMirror_code)]:rounded-md [&_:where(.ProseMirror_code)]:inline-block [&_:where(.ProseMirror_code)]:border [&_:where(.ProseMirror_code)]:border-muted [&_:where(.ProseMirror_code)]:text-highlighted [&_:where(.ProseMirror_code)]:bg-muted',
+          // Lists
+          '[&_:where(.ProseMirror_:is(ul,ol))]:ps-6',
+          '[&_:where(.ProseMirror_ul)]:list-disc [&_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented)',
+          '[&_:where(.ProseMirror_ol)]:list-decimal [&_:where(.ProseMirror_ol)]:marker:text-muted',
+          '[&_:where(.ProseMirror_li)]:my-1.5 [&_:where(.ProseMirror_li)]:ps-1.5',
+          // Images
+          '[&_:where(.ProseMirror_img)]:rounded-md [&_:where(.ProseMirror_img)]:block [&_:where(.ProseMirror_img)]:max-w-full [&_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary',
+          // Selected nodes
+          '[&_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20'
+        ]
+      }
+    },
+    /**
+     * Applied on the content wrapper (scoped like `prose`) so placeholders also render for
+     * external editors; the `.is-empty`/`data-placeholder` decorations come from the
+     * Placeholder extension.
+     */
     placeholderMode: {
       firstLine: {
-        base: '[&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:text-dimmed [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:float-start [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:h-0 [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:pointer-events-none'
+        content: '[&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:content-[attr(data-placeholder)] [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:text-dimmed [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:float-start [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:h-0 [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:pointer-events-none'
       },
       everyLine: {
-        base: '[&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none'
+        content: '[&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none'
       }
     }
   },
   defaultVariants: {
+    prose: true,
     placeholderMode: 'everyLine'
   }
 })
diff --git a/test/components/Editor.spec.ts b/test/components/Editor.spec.ts
index 8721d46ebe..c661a9aa18 100644
--- a/test/components/Editor.spec.ts
+++ b/test/components/Editor.spec.ts
@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
+import { shallowRef } from 'vue'
 import { flushPromises } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
@@ -30,6 +31,15 @@ describe('Editor', () => {
     wrapper.unmount()
   })
 
+  it('applies the prose classes on the content wrapper', async () => {
+    const wrapper = await mountSuspended(Editor, { props })
+
+    const content = wrapper.find('[data-slot="content"]')
+    expect(content.classes()).toContain('[&_:where(.ProseMirror_p)]:leading-7')
+
+    wrapper.unmount()
+  })
+
   describe('with an external editor', () => {
     const editors: TiptapEditor[] = []
     const createEditor = (content = '<p>External content</p>', options = {}) => {
@@ -52,25 +62,48 @@ describe('Editor', () => {
       wrapper.unmount()
     })
 
-    it('injects the theme base classes into the external editor', async () => {
+    it('never mutates the external editor options', async () => {
+      const editorProps = { attributes: { class: 'custom-class' } }
+      const editor = createEditor('<p>External content</p>', { editorProps })
+      // `options.element` is set by `EditorContent` when mounting the editor.
+      const { element: _, ...originalOptions } = { ...editor.options }
+      const wrapper = await mountSuspended(Editor, { props: { editor } })
+
+      expect(editor.options.editorProps).toBe(editorProps)
+      const { element: __, ...currentOptions } = { ...editor.options }
+      expect(currentOptions).toEqual(originalOptions)
+
+      wrapper.unmount()
+    })
+
+    it('applies the prose classes on the content wrapper', async () => {
       const editor = createEditor()
       const wrapper = await mountSuspended(Editor, { props: { editor } })
 
-      const injected = (editor.options.editorProps?.attributes as Record<string, string> | undefined)?.class
-      expect(injected).toContain('outline-none')
+      const content = wrapper.find('[data-slot="content"]')
+      expect(content.classes()).toContain('[&_:where(.ProseMirror_p)]:leading-7')
+
+      wrapper.unmount()
+    })
+
+    it('does not apply the prose classes with `prose` false', async () => {
+      const editor = createEditor()
+      const wrapper = await mountSuspended(Editor, { props: { editor, prose: false } })
+
+      const content = wrapper.find('[data-slot="content"]')
+      expect(content.classes()).not.toContain('[&_:where(.ProseMirror_p)]:leading-7')
 
       wrapper.unmount()
     })
 
-    it('does not inject editorProps when opted out with `editor-props` false', async () => {
-      const editor = createEditor('<p>External content</p>', {
-        editorProps: { attributes: { class: 'custom-class' } }
+    it('applies fallthrough attributes on the content wrapper', async () => {
+      const editor = createEditor()
+      const wrapper = await mountSuspended(Editor, {
+        props: { editor },
+        attrs: { 'aria-label': 'Notes' }
       })
-      const wrapper = await mountSuspended(Editor, { props: { editor, editorProps: false } })
 
-      const injected = (editor.options.editorProps?.attributes as Record<string, string> | undefined)?.class
-      expect(injected).toBe('custom-class')
-      expect(injected).not.toContain('outline-none')
+      expect(wrapper.find('[data-slot="content"]').attributes('aria-label')).toBe('Notes')
 
       wrapper.unmount()
     })
@@ -91,6 +124,25 @@ describe('Editor', () => {
       wrapper.unmount()
     })
 
+    it('does not destroy the external editor on unmount', async () => {
+      const editor = createEditor()
+      const wrapper = await mountSuspended(Editor, { props: { editor } })
+
+      wrapper.unmount()
+
+      expect(editor.isDestroyed).toBe(false)
+    })
+
+    it('accepts the editor as a ref', async () => {
+      const editor = createEditor()
+      const wrapper = await mountSuspended(Editor, { props: { editor: shallowRef(editor) } })
+
+      expect(wrapper.find('.ProseMirror').exists()).toBe(true)
+      expect(wrapper.text()).toContain('External content')
+
+      wrapper.unmount()
+    })
+
     it('renders the fallback slot until the external editor is ready', async () => {
       const wrapper = await mountSuspended(Editor, {
         props: { editor: undefined },
diff --git a/test/components/__snapshots__/Editor-vue.spec.ts.snap b/test/components/__snapshots__/Editor-vue.spec.ts.snap
index e9e1396a14..0c454e1921 100644
--- a/test/components/__snapshots__/Editor-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Editor-vue.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`Editor > renders with as correctly 1`] = `
 "<section data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -12,8 +12,8 @@ exports[`Editor > renders with as correctly 1`] = `
 
 exports[`Editor > renders with class correctly 1`] = `
 "<div data-slot="root" class="min-h-80">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -21,8 +21,8 @@ exports[`Editor > renders with class correctly 1`] = `
 `;
 
 exports[`Editor > renders with default slot correctly 1`] = `
-"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
+"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -31,8 +31,8 @@ exports[`Editor > renders with default slot correctly 1`] = `
 
 exports[`Editor > renders with placeholder correctly 1`] = `
 "<div data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
       <p data-placeholder="Write something..." class="is-empty is-editor-empty"><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -41,8 +41,8 @@ exports[`Editor > renders with placeholder correctly 1`] = `
 
 exports[`Editor > renders with ui correctly 1`] = `
 "<div data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none sm:px-14" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 sm:px-14" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
diff --git a/test/components/__snapshots__/Editor.spec.ts.snap b/test/components/__snapshots__/Editor.spec.ts.snap
index e9e1396a14..0c454e1921 100644
--- a/test/components/__snapshots__/Editor.spec.ts.snap
+++ b/test/components/__snapshots__/Editor.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`Editor > renders with as correctly 1`] = `
 "<section data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -12,8 +12,8 @@ exports[`Editor > renders with as correctly 1`] = `
 
 exports[`Editor > renders with class correctly 1`] = `
 "<div data-slot="root" class="min-h-80">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -21,8 +21,8 @@ exports[`Editor > renders with class correctly 1`] = `
 `;
 
 exports[`Editor > renders with default slot correctly 1`] = `
-"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
+"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -31,8 +31,8 @@ exports[`Editor > renders with default slot correctly 1`] = `
 
 exports[`Editor > renders with placeholder correctly 1`] = `
 "<div data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
       <p data-placeholder="Write something..." class="is-empty is-editor-empty"><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -41,8 +41,8 @@ exports[`Editor > renders with placeholder correctly 1`] = `
 
 exports[`Editor > renders with ui correctly 1`] = `
 "<div data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none sm:px-14" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 sm:px-14" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>

From d09668d75ec964d6e2be96a5a8bcf3aa925d9b2e Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Fri, 10 Jul 2026 19:46:08 +0200
Subject: [PATCH 4/7] refactor(Editor): scope prose classes to external editors
 only

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/runtime/components/Editor.vue             |  18 +-
 src/theme/editor.ts                           | 179 ++++++++++--------
 test/components/Editor.spec.ts                |  15 +-
 .../__snapshots__/Editor.spec.ts.snap         |  20 +-
 4 files changed, 136 insertions(+), 96 deletions(-)

diff --git a/src/runtime/components/Editor.vue b/src/runtime/components/Editor.vue
index cd8e2878fc..9ab6c94daf 100644
--- a/src/runtime/components/Editor.vue
+++ b/src/runtime/components/Editor.vue
@@ -77,9 +77,10 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
    */
   mention?: boolean | Partial<Omit<MentionOptions, 'suggestion' | 'suggestions'>>
   /**
-   * Apply the theme's prose (typography) classes to the editor content.
-   * They use `:where()` selectors, so your own styling takes precedence over them.
+   * Apply the theme's typography to the editor content wrapper, so external editors are styled too.
+   * Uses `:where()` selectors, so your own (or an extension's) styling always takes precedence.
    * Set to `false` when the editor brings its own content styling.
+   * The built-in editor is always styled through the `base` slot (override `ui.base` to change it).
    * @defaultValue true
    */
   prose?: boolean
@@ -142,9 +143,15 @@ const attrs = useAttrs()
 
 const appConfig = useAppConfig() as Editor['AppConfig']
 
+// External mode is detected from the presence of the `editor` prop, not its value,
+// so an editor created asynchronously (`undefined` on first render) is still recognized.
+const isExternalEditor = isPropBound('editor')
+
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.editor || {}) })({
-  prose: props.prose,
+  // Built-in editors are styled via `editorProps` on the editable element; only external editors
+  // need the content-wrapper copy, so the variant is disabled otherwise.
+  prose: isExternalEditor ? props.prose : false,
   placeholderMode: typeof props.placeholder === 'object' ? props.placeholder.mode : undefined
 }))
 
@@ -229,9 +236,6 @@ const extensions = computed(() => [
   ...(props.extensions || [])
 ].filter(extension => !!extension))
 
-// External mode is detected from the presence of the `editor` prop, not its value,
-// so an editor created asynchronously (`undefined` on first render) is still recognized.
-const isExternalEditor = isPropBound('editor')
 const externalEditor = computed(() => unref(props.editor) as TiptapEditor | undefined)
 
 if (import.meta.dev) {
@@ -347,7 +351,7 @@ defineExpose({
         role="presentation"
         :editor="editor"
         data-slot="content"
-        :class="[ui.content({ class: props.ui?.content }), ui.prose({ class: props.ui?.prose })]"
+        :class="ui.content({ class: props.ui?.content })"
         v-bind="isExternalEditor ? $attrs : undefined"
       />
     </template>
diff --git a/src/theme/editor.ts b/src/theme/editor.ts
index f8b8e32597..2b81c1c856 100644
--- a/src/theme/editor.ts
+++ b/src/theme/editor.ts
@@ -1,83 +1,112 @@
 import type { ModuleOptions } from '../module'
 
-export default (options: Required<ModuleOptions>) => ({
-  slots: {
-    root: '',
-    content: 'relative size-full flex-1',
-    // Classes of the editable element itself, injected via `editorProps` (built-in editor only).
-    base: 'w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20',
-    prose: ''
-  },
-  variants: {
-    prose: {
-      true: {
-        /**
-         * Typography for the editor content, applied on the content wrapper so it also
-         * covers external editors. Targets are scoped to `.ProseMirror` (menus appended
-         * to the wrapper must stay unaffected) and `:where()`-wrapped so user or
-         * extension styling can always override them.
-         */
-        prose: [
-          // Paragraph
-          '[&_:where(.ProseMirror_p)]:leading-7',
-          // Links
-          '[&_:where(.ProseMirror_a)]:text-primary [&_:where(.ProseMirror_a)]:border-b [&_:where(.ProseMirror_a)]:border-transparent [&_:where(.ProseMirror_a:hover)]:border-primary [&_:where(.ProseMirror_a)]:font-medium',
-          options.theme?.transitions && '[&_:where(.ProseMirror_a)]:transition-colors',
-          // Code inside links
-          '[&_:where(.ProseMirror_a>code)]:border-dashed [&_:where(.ProseMirror_a:hover>code)]:border-primary [&_:where(.ProseMirror_a:hover>code)]:text-primary',
-          options.theme?.transitions && '[&_:where(.ProseMirror_a>code)]:transition-colors',
-          // Mentions
-          '[&_:where(.ProseMirror_.mention)]:text-primary [&_:where(.ProseMirror_.mention)]:font-medium',
-          // Headings - shared styles
-          '[&_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold',
-          // Headings - unique styles
-          '[&_:where(.ProseMirror_h1)]:text-3xl',
-          '[&_:where(.ProseMirror_h2)]:text-2xl',
-          '[&_:where(.ProseMirror_h3)]:text-xl',
-          '[&_:where(.ProseMirror_h4)]:text-lg',
-          '[&_:where(.ProseMirror_h5)]:text-base',
-          '[&_:where(.ProseMirror_h6)]:text-base',
-          // Code inside headings
-          '[&_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold',
-          '[&_:where(.ProseMirror_h2>code)]:text-xl/6',
-          '[&_:where(.ProseMirror_h3>code)]:text-lg/5',
-          // Blockquote & HR
-          '[&_:where(.ProseMirror_blockquote)]:border-s-4 [&_:where(.ProseMirror_blockquote)]:border-accented [&_:where(.ProseMirror_blockquote)]:ps-4 [&_:where(.ProseMirror_blockquote)]:italic',
-          '[&_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&_:where(.ProseMirror_[data-type=horizontalRule])]:py-2',
-          '[&_:where(.ProseMirror_hr)]:border-t [&_:where(.ProseMirror_hr)]:border-default',
-          // Code blocks
-          '[&_:where(.ProseMirror_pre)]:text-sm/6 [&_:where(.ProseMirror_pre)]:border [&_:where(.ProseMirror_pre)]:border-muted [&_:where(.ProseMirror_pre)]:bg-muted [&_:where(.ProseMirror_pre)]:rounded-md [&_:where(.ProseMirror_pre)]:px-4 [&_:where(.ProseMirror_pre)]:py-3 [&_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&_:where(.ProseMirror_pre)]:break-words [&_:where(.ProseMirror_pre)]:overflow-x-auto',
-          '[&_:where(.ProseMirror_pre_code)]:p-0 [&_:where(.ProseMirror_pre_code)]:text-inherit [&_:where(.ProseMirror_pre_code)]:rounded-none [&_:where(.ProseMirror_pre_code)]:inline [&_:where(.ProseMirror_pre_code)]:border-0 [&_:where(.ProseMirror_pre_code)]:bg-transparent',
-          // Inline code
-          '[&_:where(.ProseMirror_code)]:px-1.5 [&_:where(.ProseMirror_code)]:py-0.5 [&_:where(.ProseMirror_code)]:text-sm [&_:where(.ProseMirror_code)]:font-mono [&_:where(.ProseMirror_code)]:font-medium [&_:where(.ProseMirror_code)]:rounded-md [&_:where(.ProseMirror_code)]:inline-block [&_:where(.ProseMirror_code)]:border [&_:where(.ProseMirror_code)]:border-muted [&_:where(.ProseMirror_code)]:text-highlighted [&_:where(.ProseMirror_code)]:bg-muted',
-          // Lists
-          '[&_:where(.ProseMirror_:is(ul,ol))]:ps-6',
-          '[&_:where(.ProseMirror_ul)]:list-disc [&_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented)',
-          '[&_:where(.ProseMirror_ol)]:list-decimal [&_:where(.ProseMirror_ol)]:marker:text-muted',
-          '[&_:where(.ProseMirror_li)]:my-1.5 [&_:where(.ProseMirror_li)]:ps-1.5',
-          // Images
-          '[&_:where(.ProseMirror_img)]:rounded-md [&_:where(.ProseMirror_img)]:block [&_:where(.ProseMirror_img)]:max-w-full [&_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary',
-          // Selected nodes
-          '[&_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20'
-        ]
+// Re-scope each `[&_…]` descendant selector to `[&_:where(.ProseMirror_…)]`; other tokens (and
+// falsy entries) pass through. The `(?=:)` lookahead matches the arbitrary-variant's closing `]`
+// only, so `[…]` inside a utility value (e.g. `content-[attr()]`) is left untouched.
+const prose = (...classes: Array<string | false | undefined>) => classes.map(cls => cls && cls.replace(/\[&_(.+?)\](?=:)/g, '[&_:where(.ProseMirror_$1)]'))
+
+export default (options: Required<ModuleOptions>) => {
+  // Typography descendant utilities; used verbatim on `base` and re-scoped onto `content` via `prose()`.
+  const typography = [
+    // Paragraph
+    '[&_p]:leading-7',
+    // Links
+    '[&_a]:text-primary [&_a]:border-b [&_a]:border-transparent [&_a]:hover:border-primary [&_a]:font-medium',
+    options.theme?.transitions && '[&_a]:transition-colors',
+    // Code inside links
+    '[&_a>code]:border-dashed [&_a:hover>code]:border-primary [&_a:hover>code]:text-primary',
+    options.theme?.transitions && '[&_a>code]:transition-colors',
+    // Mentions
+    '[&_.mention]:text-primary [&_.mention]:font-medium',
+    // Headings - shared styles
+    '[&_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&_:is(h1,h2,h3,h4,h5,h6)]:font-bold',
+    // Headings - unique styles
+    '[&_h1]:text-3xl',
+    '[&_h2]:text-2xl',
+    '[&_h3]:text-xl',
+    '[&_h4]:text-lg',
+    '[&_h5]:text-base',
+    '[&_h6]:text-base',
+    // Code inside headings
+    '[&_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold',
+    '[&_h2>code]:text-xl/6',
+    '[&_h3>code]:text-lg/5',
+    // Blockquote & HR
+    '[&_blockquote]:border-s-4 [&_blockquote]:border-accented [&_blockquote]:ps-4 [&_blockquote]:italic',
+    '[&_[data-type=horizontalRule]]:my-8 [&_[data-type=horizontalRule]]:py-2',
+    '[&_hr]:border-t [&_hr]:border-default',
+    // Code blocks
+    '[&_pre]:text-sm/6 [&_pre]:border [&_pre]:border-muted [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:px-4 [&_pre]:py-3 [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:overflow-x-auto',
+    '[&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:font-inherit [&_pre_code]:rounded-none [&_pre_code]:inline [&_pre_code]:border-0 [&_pre_code]:bg-transparent',
+    // Inline code
+    '[&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono [&_code]:font-medium [&_code]:rounded-md [&_code]:inline-block [&_code]:border [&_code]:border-muted [&_code]:text-highlighted [&_code]:bg-muted',
+    // Lists
+    '[&_:is(ul,ol)]:ps-6',
+    '[&_ul]:list-disc [&_ul]:marker:text-(--ui-border-accented)',
+    '[&_ol]:list-decimal [&_ol]:marker:text-muted',
+    '[&_li]:my-1.5 [&_li]:ps-1.5',
+    // Images
+    '[&_img]:rounded-md [&_img]:block [&_img]:max-w-full [&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-primary',
+    // Selected nodes
+    '[&_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20'
+  ]
+
+  // Placeholder decorations; the `.is-editor-empty` / `.is-empty` / `data-placeholder` hooks come from
+  // the Placeholder extension. Used verbatim on `base` and re-scoped onto `content` via `prose()`.
+  const placeholder = {
+    firstLine: '[&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:text-dimmed [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:float-start [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:h-0 [&_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child]:before:pointer-events-none',
+    everyLine: '[&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none'
+  }
+
+  return {
+    slots: {
+      root: '',
+      // Classes of the editable element itself, injected via `editorProps` (built-in editor only).
+      base: [
+        'w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20',
+        ...typography
+      ],
+      content: 'relative size-full flex-1'
+    },
+    variants: {
+      // `content`-wrapper copy of the typography — scoped to `.ProseMirror` (excludes the appended
+      // menus), `:where()`-wrapped (zero specificity). Enabled by the component for external editors
+      // only; the built-in editor keeps the un-scoped copy on `base`.
+      prose: {
+        true: {
+          content: prose(...typography)
+        }
+      },
+      placeholderMode: {
+        firstLine: {
+          base: placeholder.firstLine
+        },
+        everyLine: {
+          base: placeholder.everyLine
+        }
       }
     },
-    /**
-     * Applied on the content wrapper (scoped like `prose`) so placeholders also render for
-     * external editors; the `.is-empty`/`data-placeholder` decorations come from the
-     * Placeholder extension.
-     */
-    placeholderMode: {
-      firstLine: {
-        content: '[&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:content-[attr(data-placeholder)] [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:text-dimmed [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:float-start [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:h-0 [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-editor-empty:first-child)]:before:pointer-events-none'
+    // Placeholder re-scoped onto the content wrapper for external editors (which don't get `base` via
+    // `editorProps`); gated on `prose` so it follows the same opt-out.
+    compoundVariants: [
+      {
+        prose: true,
+        placeholderMode: 'firstLine',
+        class: {
+          content: prose(placeholder.firstLine)
+        }
       },
-      everyLine: {
-        content: '[&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none'
+      {
+        prose: true,
+        placeholderMode: 'everyLine',
+        class: {
+          content: prose(placeholder.everyLine)
+        }
       }
+    ],
+    defaultVariants: {
+      prose: true,
+      placeholderMode: 'everyLine'
     }
-  },
-  defaultVariants: {
-    prose: true,
-    placeholderMode: 'everyLine'
   }
-})
+}
diff --git a/test/components/Editor.spec.ts b/test/components/Editor.spec.ts
index c661a9aa18..b111ac4955 100644
--- a/test/components/Editor.spec.ts
+++ b/test/components/Editor.spec.ts
@@ -31,11 +31,15 @@ describe('Editor', () => {
     wrapper.unmount()
   })
 
-  it('applies the prose classes on the content wrapper', async () => {
+  it('styles the built-in editor via the editable element, not the content wrapper', async () => {
     const wrapper = await mountSuspended(Editor, { props })
 
-    const content = wrapper.find('[data-slot="content"]')
-    expect(content.classes()).toContain('[&_:where(.ProseMirror_p)]:leading-7')
+    // Typography is injected on the editable element via `editorProps`; the content wrapper
+    // stays free of the re-scoped copies (they would be redundant on the built-in editor).
+    expect(wrapper.find('.ProseMirror').classes()).toContain('[&_p]:leading-7')
+
+    const scopedOnWrapper = wrapper.find('[data-slot="content"]').classes().some(c => c.includes(':where(.ProseMirror'))
+    expect(scopedOnWrapper).toBe(false)
 
     wrapper.unmount()
   })
@@ -76,13 +80,16 @@ describe('Editor', () => {
       wrapper.unmount()
     })
 
-    it('applies the prose classes on the content wrapper', async () => {
+    it('applies the prose and placeholder classes on the content wrapper', async () => {
       const editor = createEditor()
       const wrapper = await mountSuspended(Editor, { props: { editor } })
 
       const content = wrapper.find('[data-slot="content"]')
       expect(content.classes()).toContain('[&_:where(.ProseMirror_p)]:leading-7')
 
+      const hasScopedPlaceholder = content.classes().some(c => c.includes(':where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)'))
+      expect(hasScopedPlaceholder).toBe(true)
+
       wrapper.unmount()
     })
 
diff --git a/test/components/__snapshots__/Editor.spec.ts.snap b/test/components/__snapshots__/Editor.spec.ts.snap
index 0c454e1921..e9e1396a14 100644
--- a/test/components/__snapshots__/Editor.spec.ts.snap
+++ b/test/components/__snapshots__/Editor.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`Editor > renders with as correctly 1`] = `
 "<section data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -12,8 +12,8 @@ exports[`Editor > renders with as correctly 1`] = `
 
 exports[`Editor > renders with class correctly 1`] = `
 "<div data-slot="root" class="min-h-80">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -21,8 +21,8 @@ exports[`Editor > renders with class correctly 1`] = `
 `;
 
 exports[`Editor > renders with default slot correctly 1`] = `
-"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
+"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -31,8 +31,8 @@ exports[`Editor > renders with default slot correctly 1`] = `
 
 exports[`Editor > renders with placeholder correctly 1`] = `
 "<div data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
       <p data-placeholder="Write something..." class="is-empty is-editor-empty"><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -41,8 +41,8 @@ exports[`Editor > renders with placeholder correctly 1`] = `
 
 exports[`Editor > renders with ui correctly 1`] = `
 "<div data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 sm:px-14" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none sm:px-14" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>

From bb5d3199905576a97b68528847f3e1eb064d1723 Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Thu, 6 Aug 2026 00:02:43 +0200
Subject: [PATCH 5/7] test(Editor): regenerate stale vue snapshots

`d09668d75` only refreshed the nuxt snapshots, leaving the vue ones
frozen at the intermediate state where prose classes lived on `content`.
Now byte-identical to `v4`, confirming default rendering is unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../__snapshots__/Editor-vue.spec.ts.snap     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/test/components/__snapshots__/Editor-vue.spec.ts.snap b/test/components/__snapshots__/Editor-vue.spec.ts.snap
index 0c454e1921..e9e1396a14 100644
--- a/test/components/__snapshots__/Editor-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Editor-vue.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`Editor > renders with as correctly 1`] = `
 "<section data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -12,8 +12,8 @@ exports[`Editor > renders with as correctly 1`] = `
 
 exports[`Editor > renders with class correctly 1`] = `
 "<div data-slot="root" class="min-h-80">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -21,8 +21,8 @@ exports[`Editor > renders with class correctly 1`] = `
 `;
 
 exports[`Editor > renders with default slot correctly 1`] = `
-"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
+"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -31,8 +31,8 @@ exports[`Editor > renders with default slot correctly 1`] = `
 
 exports[`Editor > renders with placeholder correctly 1`] = `
 "<div data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none" tabindex="0">
       <p data-placeholder="Write something..." class="is-empty is-editor-empty"><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>
@@ -41,8 +41,8 @@ exports[`Editor > renders with placeholder correctly 1`] = `
 
 exports[`Editor > renders with ui correctly 1`] = `
 "<div data-slot="root" class="">
-  <div role="presentation" data-slot="content" class="relative size-full flex-1 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:content-[attr(data-placeholder)] [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:text-dimmed [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:float-start [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:h-0 [&amp;_:where(.ProseMirror_:is(p,h1,h2,h3,h4,h5,h6).is-empty)]:before:pointer-events-none [&amp;_:where(.ProseMirror_p)]:leading-7 [&amp;_:where(.ProseMirror_a)]:text-primary [&amp;_:where(.ProseMirror_a)]:border-b [&amp;_:where(.ProseMirror_a)]:border-transparent [&amp;_:where(.ProseMirror_a:hover)]:border-primary [&amp;_:where(.ProseMirror_a)]:font-medium [&amp;_:where(.ProseMirror_a)]:transition-colors [&amp;_:where(.ProseMirror_a>code)]:border-dashed [&amp;_:where(.ProseMirror_a:hover>code)]:border-primary [&amp;_:where(.ProseMirror_a:hover>code)]:text-primary [&amp;_:where(.ProseMirror_a>code)]:transition-colors [&amp;_:where(.ProseMirror_.mention)]:text-primary [&amp;_:where(.ProseMirror_.mention)]:font-medium [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:text-highlighted [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6))]:font-bold [&amp;_:where(.ProseMirror_h1)]:text-3xl [&amp;_:where(.ProseMirror_h2)]:text-2xl [&amp;_:where(.ProseMirror_h3)]:text-xl [&amp;_:where(.ProseMirror_h4)]:text-lg [&amp;_:where(.ProseMirror_h5)]:text-base [&amp;_:where(.ProseMirror_h6)]:text-base [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:border-dashed [&amp;_:where(.ProseMirror_:is(h1,h2,h3,h4,h5,h6)>code)]:font-bold [&amp;_:where(.ProseMirror_h2>code)]:text-xl/6 [&amp;_:where(.ProseMirror_h3>code)]:text-lg/5 [&amp;_:where(.ProseMirror_blockquote)]:border-s-4 [&amp;_:where(.ProseMirror_blockquote)]:border-accented [&amp;_:where(.ProseMirror_blockquote)]:ps-4 [&amp;_:where(.ProseMirror_blockquote)]:italic [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:my-8 [&amp;_:where(.ProseMirror_[data-type=horizontalRule])]:py-2 [&amp;_:where(.ProseMirror_hr)]:border-t [&amp;_:where(.ProseMirror_hr)]:border-default [&amp;_:where(.ProseMirror_pre)]:text-sm/6 [&amp;_:where(.ProseMirror_pre)]:border [&amp;_:where(.ProseMirror_pre)]:border-muted [&amp;_:where(.ProseMirror_pre)]:bg-muted [&amp;_:where(.ProseMirror_pre)]:rounded-md [&amp;_:where(.ProseMirror_pre)]:px-4 [&amp;_:where(.ProseMirror_pre)]:py-3 [&amp;_:where(.ProseMirror_pre)]:whitespace-pre-wrap [&amp;_:where(.ProseMirror_pre)]:break-words [&amp;_:where(.ProseMirror_pre)]:overflow-x-auto [&amp;_:where(.ProseMirror_pre_code)]:p-0 [&amp;_:where(.ProseMirror_pre_code)]:text-inherit [&amp;_:where(.ProseMirror_pre_code)]:rounded-none [&amp;_:where(.ProseMirror_pre_code)]:inline [&amp;_:where(.ProseMirror_pre_code)]:border-0 [&amp;_:where(.ProseMirror_pre_code)]:bg-transparent [&amp;_:where(.ProseMirror_code)]:px-1.5 [&amp;_:where(.ProseMirror_code)]:py-0.5 [&amp;_:where(.ProseMirror_code)]:text-sm [&amp;_:where(.ProseMirror_code)]:font-mono [&amp;_:where(.ProseMirror_code)]:font-medium [&amp;_:where(.ProseMirror_code)]:rounded-md [&amp;_:where(.ProseMirror_code)]:inline-block [&amp;_:where(.ProseMirror_code)]:border [&amp;_:where(.ProseMirror_code)]:border-muted [&amp;_:where(.ProseMirror_code)]:text-highlighted [&amp;_:where(.ProseMirror_code)]:bg-muted [&amp;_:where(.ProseMirror_:is(ul,ol))]:ps-6 [&amp;_:where(.ProseMirror_ul)]:list-disc [&amp;_:where(.ProseMirror_ul)]:marker:text-(--ui-border-accented) [&amp;_:where(.ProseMirror_ol)]:list-decimal [&amp;_:where(.ProseMirror_ol)]:marker:text-muted [&amp;_:where(.ProseMirror_li)]:my-1.5 [&amp;_:where(.ProseMirror_li)]:ps-1.5 [&amp;_:where(.ProseMirror_img)]:rounded-md [&amp;_:where(.ProseMirror_img)]:block [&amp;_:where(.ProseMirror_img)]:max-w-full [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-2 [&amp;_:where(.ProseMirror_img.ProseMirror-selectednode)]:outline-primary [&amp;_:where(.ProseMirror_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper]))]:bg-primary/20">
-    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 sm:px-14" tabindex="0">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_a>code]:border-dashed [&amp;_a:hover>code]:border-primary [&amp;_a:hover>code]:text-primary [&amp;_a>code]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4,h5,h6)]:text-highlighted [&amp;_:is(h1,h2,h3,h4,h5,h6)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_h5]:text-base [&amp;_h6]:text-base [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4,h5,h6)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:float-start [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4,h5,h6).is-empty]:before:pointer-events-none sm:px-14" tabindex="0">
       <p><br class="ProseMirror-trailingBreak"></p>
     </div>
   </div>

From 87b90b608ea948f59bc21292fe33d876bf56a8e7 Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Thu, 6 Aug 2026 00:28:06 +0200
Subject: [PATCH 6/7] fix(Editor): keep fallthrough `data-slot` off the content
 wrapper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`v-bind="$attrs"` in external mode let a caller-supplied `data-slot`
clobber `data-slot="content"` (Vue 3 merge order). Omit it to match the
built-in path, which already strips it before injecting `editorProps`
attributes — a fallthrough `data-slot` only renames the root.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/runtime/components/Editor.vue |  2 +-
 test/components/Editor.spec.ts    | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/Editor.vue b/src/runtime/components/Editor.vue
index 3da68132a3..60b9eb48ad 100644
--- a/src/runtime/components/Editor.vue
+++ b/src/runtime/components/Editor.vue
@@ -382,7 +382,7 @@ defineExpose({
         :editor="editor"
         data-slot="content"
         :class="ui.content({ class: props.ui?.content })"
-        v-bind="isExternalEditor ? $attrs : undefined"
+        v-bind="isExternalEditor ? omit($attrs, ['data-slot']) : undefined"
       />
     </template>
 
diff --git a/test/components/Editor.spec.ts b/test/components/Editor.spec.ts
index b111ac4955..ccd1586db1 100644
--- a/test/components/Editor.spec.ts
+++ b/test/components/Editor.spec.ts
@@ -115,6 +115,19 @@ describe('Editor', () => {
       wrapper.unmount()
     })
 
+    it('keeps a fallthrough `data-slot` on the root, not the content wrapper', async () => {
+      const editor = createEditor()
+      const wrapper = await mountSuspended(Editor, {
+        props: { editor },
+        attrs: { 'data-slot': 'custom' }
+      })
+
+      expect(wrapper.find('div').attributes('data-slot')).toBe('custom')
+      expect(wrapper.find('[data-slot="content"]').exists()).toBe(true)
+
+      wrapper.unmount()
+    })
+
     it('ignores engine props (content owned by the external editor)', async () => {
       // Silence the dev-only warning about inert props.
       const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})

From dd2cfd0472266ffe52f327c9c45571b7a2021fbd Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Thu, 6 Aug 2026 00:28:12 +0200
Subject: [PATCH 7/7] docs(Editor): qualify "never modified" with
 `options.element` on mount

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 docs/content/docs/2.components/editor.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/docs/2.components/editor.md b/docs/content/docs/2.components/editor.md
index 365b9fb20c..0414080cc4 100644
--- a/docs/content/docs/2.components/editor.md
+++ b/docs/content/docs/2.components/editor.md
@@ -211,7 +211,7 @@ const { editor } = useComarkEditor({
 The [EditorToolbar](/docs/components/editor-toolbar) items and handlers call your editor's commands directly, so only include items whose extensions are registered on your editor — same for the mention, emoji and suggestion menus (like `Mention` above). The theme's placeholder styling applies automatically once your editor registers the Placeholder extension.
 
 ::note
-The editor instance is never modified: the theme's [prose classes](#prose) style your content from a wrapper element, so an external editor inherits the default typography automatically. Attributes of the editable element itself remain yours — for parity with the built-in editor, set the theme's `base` slot classes at creation:
+The editor instance is never modified — only TipTap's own `EditorContent` sets `options.element` when mounting. The theme's [prose classes](#prose) style your content from a wrapper element, so an external editor inherits the default typography automatically. Attributes of the editable element itself remain yours — for parity with the built-in editor, set the theme's `base` slot classes at creation:
 
 ```ts
 const editor = useEditor({