### Example Component Setup with CodeBlockLowlight

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/lowlight.md

Integrate `TiptapCodeBlockLowlight` into your editor by disabling the default `codeBlock` from StarterKit and configuring the new extension with a lowlight instance. This setup enables syntax highlighting for code blocks.

```vue
<template>
  <div>
    <div v-if="editor">
      <button
        :disabled="!editor.can().chain().focus().toggleBold().run()"
        :class="{ 'is-active': editor.isActive('bold') }"
        @click="editor.chain().focus().toggleBold().run()">
        bold
      </button>
      <button
        :disabled="!editor.can().chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editor.isActive('italic') }"
        @click="editor.chain().focus().toggleItalic().run()">
        italic
      </button>
      <button
        :class="{ 'is-active': editor.isActive('codeBlock') }"
        @click="editor.chain().focus().toggleCodeBlock().run()">
        code block
      </button>
      <button
        :disabled="!editor.can().chain().focus().undo().run()"
        @click="editor.chain().focus().undo().run()">
        undo
      </button>
      <button
        :disabled="!editor.can().chain().focus().redo().run()"
        @click="editor.chain().focus().redo().run()">
        redo
      </button>
    </div>
    <TiptapEditorContent :editor="editor" />
  </div>
</template>

<script setup>
const lowlight = createLowlight(commonLanguages);

const editor = useEditor({
  content: '<p>I\'m running Tiptap with Vue.js. 🎉</p>',
  extensions: [
    TiptapStarterKit.configure({
      codeBlock: false,
    }),
    TiptapCodeBlockLowlight.configure({ lowlight }),
  ],
});
</script>
```

--------------------------------

### Install Placeholder Extension (npm)

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/extensions.mdx

Install the Tiptap Placeholder extension as a development dependency using npm.

```sh
npm install --save-dev @tiptap/extension-placeholder
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/development.md

Installs all project dependencies using pnpm. This is the first step before running any other development commands.

```bash
pnpm install
```

--------------------------------

### Install Placeholder Extension (yarn)

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/extensions.mdx

Install the Tiptap Placeholder extension as a development dependency using yarn.

```sh
yarn add -D @tiptap/extension-placeholder
```

--------------------------------

### Install nuxt-tiptap-editor Manually

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/quick-setup.mdx

Install the package manually using your preferred package manager.

```bash
pnpm add nuxt-tiptap-editor
```

```bash
npm install nuxt-tiptap-editor
```

```bash
yarn add nuxt-tiptap-editor
```

--------------------------------

### Run Local Development Server

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/development.md

Starts the development server with the playground, which serves as a manual test harness. This command should be run after `pnpm dev:prepare`.

```bash
pnpm dev
```

--------------------------------

### Install Placeholder Extension (pnpm)

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/extensions.mdx

Install the Tiptap Placeholder extension as a development dependency using pnpm.

```sh
pnpm add -D @tiptap/extension-placeholder
```

--------------------------------

### Install nuxt-tiptap-editor via Nuxt CLI

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/quick-setup.mdx

Use the Nuxt CLI to install the package and automatically add it to your nuxt.config.

```bash
npx nuxi@latest module add tiptap
```

--------------------------------

### Nuxt Configuration for Tiptap Editor

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/basic.md

Configure the nuxt-tiptap-editor module in your Nuxt configuration file. This example sets a custom prefix for Tiptap components.

```javascript
export default defineNuxtConfig({
  modules: ['nuxt-tiptap-editor'],
  tiptap: {
    prefix: 'Tiptap', //prefix for Tiptap components
  },
});
```

--------------------------------

### Bubble Menu Example

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/menus.md

Demonstrates how to implement a bubble menu for inline formatting options like bold, italic, and strike. The menu appears above text selections and requires the editor instance.

```vue
<template>
  <div>
    <TiptapBubbleMenu v-if="editor" :editor="editor">
      <div class="bubble-menu">
        <button
          :class="{ 'is-active': editor.isActive('bold') }"
          @click="editor.chain().focus().toggleBold().run()">
          bold
        </button>
        <button
          :class="{ 'is-active': editor.isActive('italic') }"
          @click="editor.chain().focus().toggleItalic().run()">
          italic
        </button>
        <button
          :class="{ 'is-active': editor.isActive('strike') }"
          @click="editor.chain().focus().toggleStrike().run()">
          strike
        </button>
      </div>
    </TiptapBubbleMenu>

    <TiptapEditorContent :editor="editor" />
  </div>
</template>

<script setup>
const editor = useEditor({
  content: '<p>Select some of this text to see the bubble menu. 🫧</p>',
  extensions: [TiptapStarterKit],
})
</script>
```

--------------------------------

### Prepare Development Environment

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/development.md

Generates type stubs. This command must be run after installing dependencies and whenever there are structural changes in the src/ directory. It is required before running `pnpm dev` or `pnpm test`.

```bash
pnpm dev:prepare
```

--------------------------------

### Floating Menu Example

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/menus.md

Shows how to implement a floating menu for block-level content insertion, such as headings, bullet lists, and code blocks. This menu appears on empty lines and also requires the editor instance.

```vue
<template>
  <div>
    <TiptapFloatingMenu v-if="editor" :editor="editor">
      <div class="floating-menu">
        <button
          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()">
          h1
        </button>
        <button
          :class="{ 'is-active': editor.isActive('bulletList') }"
          @click="editor.chain().focus().toggleBulletList().run()">
          bullet list
        </button>
        <button
          :class="{ 'is-active': editor.isActive('codeBlock') }"
          @click="editor.chain().focus().toggleCodeBlock().run()">
          code block
        </button>
      </div>
    </TiptapFloatingMenu>

    <TiptapEditorContent :editor="editor" />
  </div>
</template>

<script setup>
const editor = useEditor({
  content: '<p></p>',
  extensions: [TiptapStarterKit],
})
</script>
```

--------------------------------

### Re-export Custom Tiptap Extensions

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/extensions.mdx

Re-export custom Tiptap extensions from a composables file to make them available app-wide via Nuxt auto-imports. This example includes Image, Youtube, Underline, TextAlign, Placeholder, and CharacterCount.

```js
export { Image as TiptapImage } from '@tiptap/extension-image'
export { Youtube as TiptapYoutube } from '@tiptap/extension-youtube'
export { Underline as TiptapUnderline } from '@tiptap/extension-underline'
export { TextAlign as TiptapTextAlign } from '@tiptap/extension-text-align'
export { Placeholder as TiptapPlaceholder } from '@tiptap/extension-placeholder'
export { CharacterCount as TiptapCharacterCount } from '@tiptap/extension-character-count'
```

--------------------------------

### Run Vitest in Watch Mode

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/README.md

Starts Vitest in watch mode, automatically re-running tests when file changes are detected. Useful for continuous testing during development.

```bash
pnpm test:watch
```

--------------------------------

### Access Editor Instance on Client - Vue 3

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/important.md

Access the editor instance within the `onMounted` hook to ensure it's available on the client side. Attempting to access it during setup will result in `undefined`.

```javascript
onMounted(() => {
  if (unref(editor)) {
    // ✅ runs on the client, so the instance exists
    unref(editor).commands.setContent("<p>I'm running Tiptap with Vue.js. 🎉</p>")
  }
})
```

--------------------------------

### Tiptap Editor with Placeholder Extension

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/placeholder.md

This Vue component integrates the Tiptap editor with the Placeholder extension. It includes a toolbar for common text formatting and editing actions, and configures the placeholder to display 'Write your post content here' when the editor is empty. Ensure the Placeholder extension is installed and imported.

```vue
<template>
  <div>
    <div v-if="editor">
      <button
        @click="editor.chain().focus().toggleBold().run()"
        :disabled="!editor.can().chain().focus().toggleBold().run()"
        :class="{ 'is-active': editor.isActive('bold') }"
      >
        bold
      </button>
      <button
        @click="editor.chain().focus().toggleItalic().run()"
        :disabled="!editor.can().chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editor.isActive('italic') }"
      >
        italic
      </button>
      <button
        @click="editor.chain().focus().toggleStrike().run()"
        :disabled="!editor.can().chain().focus().toggleStrike().run()"
        :class="{ 'is-active': editor.isActive('strike') }"
      >
        strike
      </button>
      <button
        @click="editor.chain().focus().toggleCode().run()"
        :disabled="!editor.can().chain().focus().toggleCode().run()"
        :class="{ 'is-active': editor.isActive('code') }"
      >
        code
      </button>
      <button @click="editor.chain().focus().unsetAllMarks().run()">
        clear marks
      </button>
      <button @click="editor.chain().focus().clearNodes().run()">
        clear nodes
      </button>
      <button
        @click="editor.chain().focus().setParagraph().run()"
        :class="{ 'is-active': editor.isActive('paragraph') }"
      >
        paragraph
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
      >
        h1
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
      >
        h2
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
      >
        h3
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
      >
        h4
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
      >
        h5
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
      >
        h6
      </button>
      <button
        @click="editor.chain().focus().toggleBulletList().run()"
        :class="{ 'is-active': editor.isActive('bulletList') }"
      >
        bullet list
      </button>
      <button
        @click="editor.chain().focus().toggleOrderedList().run()"
        :class="{ 'is-active': editor.isActive('orderedList') }"
      >
        ordered list
      </button>
      <button
        @click="editor.chain().focus().toggleCodeBlock().run()"
        :class="{ 'is-active': editor.isActive('codeBlock') }"
      >
        code block
      </button>
      <button
        @click="editor.chain().focus().toggleBlockquote().run()"
        :class="{ 'is-active': editor.isActive('blockquote') }"
      >
        blockquote
      </button>
      <button @click="editor.chain().focus().setHorizontalRule().run()">
        horizontal rule
      </button>
      <button @click="editor.chain().focus().setHardBreak().run()">
        hard break
      </button>
      <button
        @click="editor.chain().focus().undo().run()"
        :disabled="!editor.can().chain().focus().undo().run()"
      >
        undo
      </button>
      <button
        @click="editor.chain().focus().redo().run()"
        :disabled="!editor.can().chain().focus().redo().run()"
      >
        redo
      </button>
    </div>
    <TiptapEditorContent :editor="editor" />
  </div>
</template>

<script setup>
const editor = useEditor({
  extensions: [
    TiptapStarterKit,
    TiptapPlaceholder.configure({
      emptyEditorClass: 'is-editor-empty',
      placeholder: 'Write your post content here',
    }),
  ],
});
</script>
```

--------------------------------

### Trigger Image Upload Programmatically

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/image-upload.md

Use the `uploadImage` command to trigger an image upload programmatically, for example, from a file input button. Pass the file object to the command.

```javascript
editor.commands.uploadImage({ file })
```

--------------------------------

### Build Distribution Bundle

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/development.md

Prepares the project for packaging and distribution by building the necessary bundles.

```bash
pnpm prepack
```

--------------------------------

### Create Lowlight Instance with Language Presets

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/lowlight.md

Instantiate the `createLowlight` composable with either `commonLanguages` for a curated set or `allLanguages` for every supported language. Note that these composables are not prefixed.

```javascript
const lowlight = createLowlight(commonLanguages); // common languages

// or

const lowlight = createLowlight(allLanguages); // all languages
```

--------------------------------

### Build Playground

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/README.md

This command builds the playground application, typically used for testing features or demonstrating the editor's capabilities.

```bash
pnpm build
```

--------------------------------

### Create a Basic Tiptap Editor Component

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/quick-setup.mdx

A Vue component demonstrating how to use the useEditor composable and render Tiptap editor content with basic formatting buttons.

```vue
<template>
  <div>
    <div v-if="editor">
      <button
        :disabled="!editor.can().chain().focus().toggleBold().run()"
        :class="{ 'is-active': editor.isActive('bold') }"
        @click="editor.chain().focus().toggleBold().run()">
        bold
      </button>
      <button
        :disabled="!editor.can().chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editor.isActive('italic') }"
        @click="editor.chain().focus().toggleItalic().run()">
        italic
      </button>
      <button
        :disabled="!editor.can().chain().focus().toggleStrike().run()"
        :class="{ 'is-active': editor.isActive('strike') }"
        @click="editor.chain().focus().toggleStrike().run()">
        strike
      </button>
      <button
        :disabled="!editor.can().chain().focus().toggleCode().run()"
        :class="{ 'is-active': editor.isActive('code') }"
        @click="editor.chain().focus().toggleCode().run()">
        code
      </button>
      <button @click="editor.chain().focus().setParagraph().run()">
        paragraph
      </button>
      <button
        :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
        @click="editor.chain().focus().toggleHeading({ level: 1 }).run()">
        h1
      </button>
      <button
        :class="{ 'is-active': editor.isActive('bulletList') }"
        @click="editor.chain().focus().toggleBulletList().run()">
        bullet list
      </button>
      <button
        :class="{ 'is-active': editor.isActive('codeBlock') }"
        @click="editor.chain().focus().toggleCodeBlock().run()">
        code block
      </button>
      <button
        :disabled="!editor.can().chain().focus().undo().run()"
        @click="editor.chain().focus().undo().run()">
        undo
      </button>
      <button
        :disabled="!editor.can().chain().focus().redo().run()"
        @click="editor.chain().focus().redo().run()">
        redo
      </button>
    </div>
    <TiptapEditorContent :editor="editor" />
  </div>
</template>

<script setup>
const editor = useEditor({
  content: '<p>I\'m running Tiptap with Vue.js. 🎉</p>',
  extensions: [TiptapStarterKit],
})
</script>
```

--------------------------------

### Run Test Suite

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/development.md

Executes the project's test suite, which includes Vitest for unit tests and vue-tsc for type checking. Both must pass for the command to succeed. `pnpm test:watch` runs tests in watch mode.

```bash
pnpm test
pnpm test:watch
```

--------------------------------

### Publish Release

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/RELEASE.md

This command is part of the release workflow. It runs linting, tests, builds the module, and pushes commits and tags to GitHub.

```bash
pnpm run release:publish
```

--------------------------------

### Initialize Editor with HTML Content

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/prefill-content.md

Use the 'content' field in the useEditor hook to set initial HTML content when the editor is first created. This is useful for loading existing data or default text.

```javascript
const editor = useEditor({
  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
  extensions: [TiptapStarterKit],
});
```

--------------------------------

### Run ESLint for Code Linting

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/README.md

Execute ESLint to check code for stylistic errors and potential issues. Ensures code quality and consistency.

```bash
pnpm lint
```

--------------------------------

### Run Vitest for Unit and Type Testing

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/README.md

This command runs the test suite using Vitest. It also implicitly runs 'vue-tsc --noEmit' to check TypeScript types.

```bash
pnpm test
```

--------------------------------

### Perform a Minor Release

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/RELEASE.md

Use this command for new features. It automatically updates the version in package.json, creates a git commit, and tags the release.

```bash
pnpm release:minor
```

--------------------------------

### Set Editor Content Dynamically with setContent

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/prefill-content.md

After the editor is initialized, use the 'setContent' command to update the editor's content at any point. This is commonly used within lifecycle hooks like 'onMounted' to load data or respond to user actions.

```javascript
const editor = useEditor({
  extensions: [TiptapStarterKit],
});

onMounted(() => {
  if (unref(editor)) {
    unref(editor).commands.setContent(
      "<p>I'm running Tiptap with Vue.js. 🎉</p>",
    );
  }
});
```

--------------------------------

### Lint Code with ESLint

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/development.md

Runs ESLint to check for code style and potential errors. `pnpm lint:fix` can be used to automatically fix some issues.

```bash
pnpm lint
pnpm lint:fix
```

--------------------------------

### Perform a Patch Release

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/RELEASE.md

Use this command for bug fixes. It automatically updates the version in package.json, creates a git commit, and tags the release.

```bash
pnpm release:patch
```

--------------------------------

### Basic Tiptap Editor Component with Toolbar

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/basic.md

A Vue component that implements a basic Tiptap editor with a toolbar for common text formatting. Ensure the component is placed within the 'components' directory.

```vue
<template>
  <div>
    <div v-if="editor">
      <button
        @click="editor.chain().focus().toggleBold().run()"
        :disabled="!editor.can().chain().focus().toggleBold().run()"
        :class="{ 'is-active': editor.isActive('bold') }"
      >
        bold
      </button>
      <button
        @click="editor.chain().focus().toggleItalic().run()"
        :disabled="!editor.can().chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editor.isActive('italic') }"
      >
        italic
      </button>
      <button
        @click="editor.chain().focus().toggleStrike().run()"
        :disabled="!editor.can().chain().focus().toggleStrike().run()"
        :class="{ 'is-active': editor.isActive('strike') }"
      >
        strike
      </button>
      <button
        @click="editor.chain().focus().toggleCode().run()"
        :disabled="!editor.can().chain().focus().toggleCode().run()"
        :class="{ 'is-active': editor.isActive('code') }"
      >
        code
      </button>
      <button @click="editor.chain().focus().unsetAllMarks().run()">
        clear marks
      </button>
      <button @click="editor.chain().focus().clearNodes().run()">
        clear nodes
      </button>
      <button
        @click="editor.chain().focus().setParagraph().run()"
        :class="{ 'is-active': editor.isActive('paragraph') }"
      >
        paragraph
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
      >
        h1
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
      >
        h2
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
      >
        h3
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
      >
        h4
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
      >
        h5
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
      >
        h6
      </button>
      <button
        @click="editor.chain().focus().toggleBulletList().run()"
        :class="{ 'is-active': editor.isActive('bulletList') }"
      >
        bullet list
      </button>
      <button
        @click="editor.chain().focus().toggleOrderedList().run()"
        :class="{ 'is-active': editor.isActive('orderedList') }"
      >
        ordered list
      </button>
      <button
        @click="editor.chain().focus().toggleCodeBlock().run()"
        :class="{ 'is-active': editor.isActive('codeBlock') }"
      >
        code block
      </button>
      <button
        @click="editor.chain().focus().toggleBlockquote().run()"
        :class="{ 'is-active': editor.isActive('blockquote') }"
      >
        blockquote
      </button>
      <button @click="editor.chain().focus().setHorizontalRule().run()">
        horizontal rule
      </button>
      <button @click="editor.chain().focus().setHardBreak().run()">
        hard break
      </button>
      <button
        @click="editor.chain().focus().undo().run()"
        :disabled="!editor.can().chain().focus().undo().run()"
      >
        undo
      </button>
      <button
        @click="editor.chain().focus().redo().run()"
        :disabled="!editor.can().chain().focus().redo().run()"
      >
        redo
      </button>
    </div>
    <TiptapEditorContent :editor="editor" />
  </div>
</template>

<script setup>
const editor = useEditor({
  extensions: [TiptapStarterKit],
});
</script>
```

--------------------------------

### Image Upload Handler (Nitro)

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/image-upload.md

This handler accepts multipart form data, validates image MIME types and file size, sanitizes filenames, and saves files to the local filesystem. It's intended for development and requires significant modifications for production environments, such as adding authentication, streaming to object storage, and implementing security measures.

```typescript
// server/api/upload.post.ts
import path from 'node:path'
import fs from 'node:fs/promises'
import { existsSync } from 'node:fs'
import { randomUUID } from 'node:crypto'
import type { H3Event } from 'h3'

const UPLOAD_DIR = 'uploads'
const MAX_FILE_BYTES = 4 * 1024 * 1024 // 4 MB
const ALLOWED_MIMES = [
  'image/jpeg',
  'image/jpg',
  'image/png',
  'image/gif',
  'image/webp',
] as const

interface UploadFile {
  filename?: string
  type?: string
  data: Buffer
}

function sanitizeFilename(raw: string | undefined): string | null {
  if (!raw) return null
  // Strip any path components a malicious client tried to embed.
  const base = path.basename(raw)
  if (!base || base === '.' || base === '..') return null
  return base
}

export default defineEventHandler(async (event: H3Event) => {
  const fullUploadPath = path.join(process.cwd(), 'public', UPLOAD_DIR)

  if (!existsSync(fullUploadPath)) {
    await fs.mkdir(fullUploadPath, { recursive: true })
  }

  const files = (await readMultipartFormData(event)) as UploadFile[] | undefined
  if (!files?.length) {
    throw createError({ statusCode: 400, statusMessage: 'No files uploaded' })
  }

  const uploadedFilePaths: string[] = []

  for (const file of files) {
    if (!ALLOWED_MIMES.includes(file.type as typeof ALLOWED_MIMES[number])) {
      throw createError({
        statusCode: 415,
        statusMessage: `Unsupported media type: ${file.type ?? 'unknown'}`,
      })
    }

    if (file.data.byteLength > MAX_FILE_BYTES) {
      throw createError({
        statusCode: 413,
        statusMessage: `File too large (max ${MAX_FILE_BYTES} bytes)`,
      })
    }

    const safeName = sanitizeFilename(file.filename)
    if (!safeName) {
      throw createError({ statusCode: 400, statusMessage: 'Invalid filename' })
    }

    // Prefix with a UUID so concurrent uploads can't collide and a crafted
    // name can't overwrite an existing file.
    const finalName = `${randomUUID()}-${safeName}`
    const filePath = path.join(fullUploadPath, finalName)
    await fs.writeFile(filePath, file.data)

    const urlPath = path.join(UPLOAD_DIR, finalName).replaceAll('\\', '/')
    uploadedFilePaths.push(`/${urlPath}`)
  }

  return uploadedFilePaths
})
```

--------------------------------

### Manual Editor Destruction - Tiptap Editor

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/important.md

Manually destroy an editor instance created with `new Editor(...)` when the component unmounts. `useEditor` handles this automatically.

```javascript
const editor = new TiptapEditor({
  extensions: [TiptapStarterKit],
})

onBeforeUnmount(() => {
  editor.destroy()
})
```

--------------------------------

### Nuxt TipTap Editor with Basic Formatting Controls

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/README.md

This Vue component sets up the Nuxt TipTap Editor with a toolbar for common text formatting options like bold, italic, headings, lists, and more. It initializes the editor with starter content and extensions. TipTap 3 automatically handles editor cleanup on component unmount.

```vue
<template>
  <div>
    <div v-if="editor">
      <button
        @click="editor.chain().focus().toggleBold().run()"
        :disabled="!editor.can().chain().focus().toggleBold().run()"
        :class="{ 'is-active': editor.isActive('bold') }"
      >
        bold
      </button>
      <button
        @click="editor.chain().focus().toggleItalic().run()"
        :disabled="!editor.can().chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editor.isActive('italic') }"
      >
        italic
      </button>
      <button
        @click="editor.chain().focus().toggleStrike().run()"
        :disabled="!editor.can().chain().focus().toggleStrike().run()"
        :class="{ 'is-active': editor.isActive('strike') }"
      >
        strike
      </button>
      <button
        @click="editor.chain().focus().toggleCode().run()"
        :disabled="!editor.can().chain().focus().toggleCode().run()"
        :class="{ 'is-active': editor.isActive('code') }"
      >
        code
      </button>
      <button @click="editor.chain().focus().unsetAllMarks().run()">
        clear marks
      </button>
      <button @click="editor.chain().focus().clearNodes().run()">
        clear nodes
      </button>
      <button
        @click="editor.chain().focus().setParagraph().run()"
        :class="{ 'is-active': editor.isActive('paragraph') }"
      >
        paragraph
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
      >
        h1
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
      >
        h2
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
      >
        h3
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
      >
        h4
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
      >
        h5
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
      >
        h6
      </button>
      <button
        @click="editor.chain().focus().toggleBulletList().run()"
        :class="{ 'is-active': editor.isActive('bulletList') }"
      >
        bullet list
      </button>
      <button
        @click="editor.chain().focus().toggleOrderedList().run()"
        :class="{ 'is-active': editor.isActive('orderedList') }"
      >
        ordered list
      </button>
      <button
        @click="editor.chain().focus().toggleCodeBlock().run()"
        :class="{ 'is-active': editor.isActive('codeBlock') }"
      >
        code block
      </button>
      <button
        @click="editor.chain().focus().toggleBlockquote().run()"
        :class="{ 'is-active': editor.isActive('blockquote') }"
      >
        blockquote
      </button>
      <button @click="editor.chain().focus().setHorizontalRule().run()">
        horizontal rule
      </button>
      <button @click="editor.chain().focus().setHardBreak().run()">
        hard break
      </button>
      <button
        @click="editor.chain().focus().undo().run()"
        :disabled="!editor.can().chain().focus().undo().run()"
      >
        undo
      </button>
      <button
        @click="editor.chain().focus().redo().run()"
        :disabled="!editor.can().chain().focus().redo().run()"
      >
        redo
      </button>
    </div>
    <TiptapEditorContent :editor="editor" />
  </div>
</template>

<script setup>
const editor = useEditor({
  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
  extensions: [TiptapStarterKit],
});
// TipTap 3 cleans up automatically when the component unmounts;
// no manual editor.destroy() call is needed.
</script>
```

--------------------------------

### Register nuxt-tiptap-editor in nuxt.config.ts

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/quick-setup.mdx

Add the module to the 'modules' array and configure the Tiptap prefix in your nuxt.config.ts file.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-tiptap-editor'],
  tiptap: {
    prefix: 'Tiptap', // prefix for Tiptap imports; composables are not prefixed
  },
})
```

--------------------------------

### Perform a Major Release

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/RELEASE.md

Use this command for breaking changes. It automatically updates the version in package.json, creates a git commit, and tags the release.

```bash
pnpm release:major
```

--------------------------------

### Configure Tiptap Prefix in Nuxt

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/auto-imports.md

Customize the auto-import prefix for Tiptap modules in your `nuxt.config.ts` file. This affects how components, nodes, marks, and extensions are imported.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-tiptap-editor'],
  tiptap: {
    prefix: 'Tiptap',
  },
})
```

--------------------------------

### Declare Editor Instance - Vue 3

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/important.md

Declare an editor instance using the `useEditor` composable. This instance is only available on the client side.

```javascript
const editor = useEditor({
  extensions: [TiptapStarterKit],
})
```

--------------------------------

### Configure Lowlight in nuxt.config.ts

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/lowlight.md

Enable the lowlight feature and configure its theme and highlight.js version in your nuxt.config.ts file. The module defaults to `lowlight: false`, so explicitly set this option to enable the feature.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-tiptap-editor'],
  tiptap: {
    prefix: 'Tiptap',
    lowlight: {
      theme: 'github-dark', // default
      highlightJSVersion: '11.10.0', // default
      // integrity: 'sha384-...', // optional Subresource Integrity hash
    },
  },
})
```

--------------------------------

### Reset Local Changes After Failed Release

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/RELEASE.md

If a release fails locally, use this command to reset the last commit and remove the tag. Replace '{version}' with the actual version number.

```bash
git reset --hard HEAD~1 && git tag -d v{version}
```

--------------------------------

### Configure Vite Deduplication for ProseMirror

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/important.md

If encountering ProseMirror duplication errors, configure Vite's resolve deduplication in `nuxt.config` to prevent multiple copies of ProseMirror packages from being loaded.

```typescript
export default defineNuxtConfig({
  vite: {
    resolve: {
      dedupe: ['prosemirror-state', 'prosemirror-view', 'prosemirror-model'],
    },
  },
})
```

--------------------------------

### Image Upload Component with Tiptap Editor

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/image-upload.md

This Vue component integrates TiptapEditorContent and configures TiptapImageUpload with a custom upload handler. It also includes basic editor controls.

```vue
<template>
  <div>
    <div v-if="editor">
      <button
        :disabled="!editor.can().chain().focus().toggleBold().run()"
        :class="{ 'is-active': editor.isActive('bold') }"
        @click="editor.chain().focus().toggleBold().run()"
      >
        bold
      </button>
      <button
        :disabled="!editor.can().chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editor.isActive('italic') }"
        @click="editor.chain().focus().toggleItalic().run()"
      >
        italic
      </button>
      <button
        :class="{ 'is-active': editor.isActive('codeBlock') }"
        @click="editor.chain().focus().toggleCodeBlock().run()"
      >
        code block
      </button>
      <button
        :disabled="!editor.can().chain().focus().undo().run()"
        @click="editor.chain().focus().undo().run()"
      >
        undo
      </button>
      <button
        :disabled="!editor.can().chain().focus().redo().run()"
        @click="editor.chain().focus().redo().run()"
      >
        redo
      </button>
    </div>
    <TiptapEditorContent :editor="editor" />
  </div>
</template>

<script setup>
async function uploadImage(file, id) {
  try {
    const formData = new FormData()
    formData.append(id, file)

    const urls = await $fetch('/api/upload', {
      method: 'POST',
      body: formData,
    })

    return urls[0]
  }
  catch (e) {
    // Replace this with your own toast/notification system.
    console.error('Image upload failed:', e)
  }
}

const editor = useEditor({
  content: '<p>I\'m running Tiptap with Vue.js. 🎉</p>',
  extensions: [
    TiptapStarterKit,
    TiptapImage,
    TiptapImageUpload.configure({
      acceptMimes: ['image/jpeg', 'image/gif', 'image/png', 'image/jpg'],
      upload: uploadImage,
    }),
    TiptapImagePlaceholder.configure({
      inline: false,
    }),
  ],
})
</script>
```

--------------------------------

### Read In-Flight File Cache

Source: https://github.com/modbender/nuxt-tiptap-editor/blob/main/docs/examples/image-upload.md

Access the cached file for an in-flight upload using its ID. Prefer the `editor.storage.imageUploadExtension.getFileCache(id)` method for current projects.

```javascript
const file = editor.storage.imageUploadExtension.getFileCache(id)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.