diff --git a/docs/content/docs/2.components/editor.md b/docs/content/docs/2.components/editor.md
index 75a26f7beb..9d170c2b97 100644
--- a/docs/content/docs/2.components/editor.md
+++ b/docs/content/docs/2.components/editor.md
@@ -155,6 +155,96 @@ 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`, `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:
+
+```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) 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:
+
+```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
+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 8a5c86c981..9ab6c94daf 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 { 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'
@@ -21,6 +21,16 @@ export interface EditorProps<T extends Content = Content, H extends EditorCustom
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * 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?: MaybeRef<TiptapEditor | undefined> | ComputedRef<TiptapEditor | undefined>
   modelValue?: T
   /**
    * The content type the content is provided as.
@@ -66,6 +76,14 @@ 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'>>
+  /**
+   * 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
   /**
    * Custom item handlers to override or extend the default handlers.
    * These handlers are provided to all child components (toolbar, suggestion menu, etc.).
@@ -80,12 +98,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 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, useAttrs, watch } from 'vue'
+import { computed, provide, unref, useAttrs, watch } from 'vue'
 import { defu } from 'defu'
 import { Primitive } from 'reka-ui'
 import { mergeAttributes } from '@tiptap/core'
@@ -99,7 +122,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'
@@ -120,12 +143,19 @@ 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 || {}) })({
+  // 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
 }))
 
-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', 'prose', 'handlers'))
 
 const editorProps = computed(() => defu(props.editorProps, {
   attributes: {
@@ -206,68 +236,98 @@ 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)
+const externalEditor = computed(() => unref(props.editor) as TiptapEditor | undefined)
+
+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.`)
     }
-  },
-  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()
+  } 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()
+      }
+    })
+  }
+}
+
+// No `useEditor` in external mode: it creates its own instance and destroys it on unmount.
+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)
+
+// `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
     }
 
-    emits('update:modelValue', value as T)
-  }
-})
+    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()
 
-watch(() => props.modelValue, (newVal) => {
-  if (!editor.value || newVal == null) {
-    return
-  }
+    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
 
-  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)
+      // 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(() => ({
@@ -285,14 +345,17 @@ 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"
         :editor="editor"
         data-slot="content"
         :class="ui.content({ class: props.ui?.content })"
+        v-bind="isExternalEditor ? $attrs : undefined"
       />
     </template>
+
+    <slot v-else name="fallback" />
   </Primitive>
 </template>
diff --git a/src/runtime/composables/useComponentProps.ts b/src/runtime/composables/useComponentProps.ts
index 39bae8e0c4..a2f6390d00 100644
--- a/src/runtime/composables/useComponentProps.ts
+++ b/src/runtime/composables/useComponentProps.ts
@@ -44,6 +44,18 @@ 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,
+ * 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 {
+  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/src/theme/editor.ts b/src/theme/editor.ts
index 65987bc7d0..2b81c1c856 100644
--- a/src/theme/editor.ts
+++ b/src/theme/editor.ts
@@ -1,65 +1,112 @@
 import type { ModuleOptions } from '../module'
 
-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'
-    ]
-  },
-  variants: {
-    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'
+// 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
+        }
+      }
+    },
+    // 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: {
-        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'
+      {
+        prose: true,
+        placeholderMode: 'everyLine',
+        class: {
+          content: prose(placeholder.everyLine)
+        }
       }
+    ],
+    defaultVariants: {
+      prose: true,
+      placeholderMode: 'everyLine'
     }
-  },
-  defaultVariants: {
-    placeholderMode: 'everyLine'
   }
-})
+}
diff --git a/test/components/Editor.spec.ts b/test/components/Editor.spec.ts
index 34c8da2fee..b111ac4955 100644
--- a/test/components/Editor.spec.ts
+++ b/test/components/Editor.spec.ts
@@ -1,6 +1,10 @@
-import { describe, it, expect } from 'vitest'
+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'
+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 +30,142 @@ describe('Editor', () => {
 
     wrapper.unmount()
   })
+
+  it('styles the built-in editor via the editable element, not the content wrapper', async () => {
+    const wrapper = await mountSuspended(Editor, { props })
+
+    // 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()
+  })
+
+  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('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 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()
+    })
+
+    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('applies fallthrough attributes on the content wrapper', async () => {
+      const editor = createEditor()
+      const wrapper = await mountSuspended(Editor, {
+        props: { editor },
+        attrs: { 'aria-label': 'Notes' }
+      })
+
+      expect(wrapper.find('[data-slot="content"]').attributes('aria-label')).toBe('Notes')
+
+      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('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 },
+        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()
+    })
+  })
 })
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>