### Install Umo Editor Package

Source: https://context7.com/umodoc/editor/llms.txt

Install the Umo Editor package using npm. This is the first step to integrating the editor into your Vue 3 application.

```bash
npm install @umoteam/editor
```

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

### Get Content Excerpt with `getContentExcerpt`

Source: https://context7.com/umodoc/editor/llms.txt

Get a plain-text excerpt of the document, useful for previews and search indexes. Supports custom length and suffix.

```js
// Default: first 100 characters followed by ' ...'
const excerpt = editorRef.value.getContentExcerpt()

// Custom length and suffix
const shortExcerpt = editorRef.value.getContentExcerpt(50, '…')
// → "Lorem ipsum dolor sit amet, consectetur adipisc…"
```

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

### Get Editor Content with `getContent`

Source: https://context7.com/umodoc/editor/llms.txt

Retrieve the current document content in HTML, plain text, or JSON format.

```js
// HTML string
const html = editorRef.value.getHTML()
// Equivalent: editorRef.value.getContent('html')

// Plain text (strips all markup)
const text = editorRef.value.getText()
// Equivalent: editorRef.value.getContent('text')

// Tiptap/ProseMirror JSON document object
const json = editorRef.value.getJSON()
// Equivalent: editorRef.value.getContent('json')

// Serialized HTML suitable for standalone rendering (no editor CSS required)
const vanillaHtml = await editorRef.value.getVanillaHTML()
```

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

### Start, Stop, and Get Typewriter State

Source: https://context7.com/umodoc/editor/llms.txt

Control the typewriter animation for AI-generated content. Use `startTypewriter` to begin, `stopTypewriter` to halt, and `getTypewriterState` to check the current animation status.

```javascript
// Start typewriting a Tiptap JSON document
editorRef.value.startTypewriter(
  {
    type: 'doc',
    content: [
      { type: 'paragraph', content: [{ type: 'text', text: 'AI response...' }] }
    ]
  },
  { speed: 50 }  // optional options passed to the extension
)

// Stop the animation mid-stream
editorRef.value.stopTypewriter()

// Check the current state
const state = editorRef.value.getTypewriterState()
```

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

### Get and Manipulate Selection

Source: https://context7.com/umodoc/editor/llms.txt

Retrieve selected text or nodes, and perform actions like deletion or setting the current node selection.

```javascript
// Get selected plain text
const selectedText = editorRef.value.getSelectionText()

// Get the Tiptap/ProseMirror node object at the selection
const node = editorRef.value.getSelectionNode()

// Delete the currently selected node
editorRef.value.deleteSelectionNode()

// Select the entire node at the current cursor position
editorRef.value.setCurrentNodeSelection()
```

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

### Retrieve Table of Contents

Source: https://context7.com/umodoc/editor/llms.txt

Get the auto-generated table of contents from heading nodes in the editor content.

```javascript
const toc = editorRef.value.getTableOfContents()
// → [
//     { id: 'abc123', level: 1, textContent: 'Chapter 1', pos: 1, ... },
//     { id: 'def456', level: 2, textContent: '1.1 Overview', pos: 50, ... },
//   ]
```

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

### Typewriter API

Source: https://context7.com/umodoc/editor/llms.txt

Stream AI-generated or animated content into the editor with a typewriter effect. This API allows starting, stopping, and checking the state of the typewriter animation.

```APIDOC
## Typewriter API

Stream AI-generated or animated content into the editor with a typewriter effect.

### Methods

- `startTypewriter(doc: object, options?: object)`: Starts the typewriter animation with the given Tiptap JSON document and optional configuration.
- `stopTypewriter()`: Stops the animation mid-stream.
- `getTypewriterState()`: Returns the current state of the typewriter animation.
```

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

### Control Editor Focus

Source: https://context7.com/umodoc/editor/llms.txt

Programmatically set or remove focus from the editor. Focus can be directed to the start, end, a specific character position, or removed entirely.

```javascript
editorRef.value.focus('start')
```

```javascript
editorRef.value.focus('end')
```

```javascript
editorRef.value.focus(42)
```

```javascript
editorRef.value.blur()
```

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

### Selection API

Source: https://context7.com/umodoc/editor/llms.txt

Inspect and manipulate the current text selection or selected node within the editor. Provides methods to get selected text, the selected node, and to delete or select nodes.

```APIDOC
## Selection API

Inspect and manipulate the current text selection or selected node.

### Methods

- `getSelectionText()`: Returns the selected plain text.
- `getSelectionNode()`: Returns the Tiptap/ProseMirror node object at the selection.
- `deleteSelectionNode()`: Deletes the currently selected node.
- `setCurrentNodeSelection()`: Selects the entire node at the current cursor position.
```

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

### Implement `onFileUpload` Callback

Source: https://context7.com/umodoc/editor/llms.txt

Handle file uploads. Must be an async function returning an object with `id` and `url` at minimum.

```js
async onFileUpload(file) {
  // file is a browser File object (possibly with a .url property for URL-based inserts)
  if (!file) throw new Error('No file provided')

  const formData = new FormData()
  formData.append('file', file)

  const res = await fetch('/api/upload', { method: 'POST', body: formData })
  if (!res.ok) throw new Error('Upload failed')

  const { id, url } = await res.json()
  return {
    id,
    url,
    name: file.name,
    type: file.type,
    size: file.size,
  }
}
```

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

### Basic Umo Editor Component Usage

Source: https://context7.com/umodoc/editor/llms.txt

Mount the `<umo-editor>` component with a minimal configuration. The `onSave` callback is required, and `onFileUpload` must be provided for media/file insertion.

```vue
<template>
  <div style="height: 100vh;">
    <umo-editor
      ref="editorRef"
      :document="{ title: 'My Document', content: '<p>Hello world</p>' }"
      :onSave="handleSave"
      :onFileUpload="handleUpload"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const editorRef = ref(null)

async function handleSave(content, page, document) {
  // content: { html, json, text }
  // page: current page state object
  // document: current document options
  await fetch('/api/save', {
    method: 'POST',
    body: JSON.stringify({ html: content.html }),
    headers: { 'Content-Type': 'application/json' },
  })
  return 'Document saved successfully' // shown as success toast
}

async function handleUpload(file) {
  const form = new FormData()
  form.append('file', file)
  const res = await fetch('/api/upload', { method: 'POST', body: form })
  const data = await res.json()
  return { id: data.id, url: data.url, name: file.name, type: file.type, size: file.size }
}
</script>
```

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

### Implement `onFileDelete` Callback

Source: https://context7.com/umodoc/editor/llms.txt

Handle file deletion. Use this to clean up files from your server.

```js
onFileDelete(id, url, type) {
  // id   — the id returned from onFileUpload
  // url  — the file URL
  // type — MIME type string
  fetch(`/api/files/${id}`, { method: 'DELETE' })
    .catch(console.error)
}
```

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

### Configure Page Layout Settings

Source: https://context7.com/umodoc/editor/llms.txt

Programmatically adjust page layout parameters including size, orientation, margins, background color, and layout mode. Ensure 'size' matches a defined label.

```javascript
editorRef.value.setPage({
  size: 'A4',
  orientation: 'landscape',
  background: '#f5f5f5',
  layout: 'web',
  margin: { top: 2.0, bottom: 2.0, left: 2.54, right: 2.54 }
})
```

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

### setTheme / setSkin

Source: https://context7.com/umodoc/editor/llms.txt

Switches the editor's theme or skin at runtime.

```APIDOC
## setTheme / setSkin

### Description
Switch theme or skin at runtime.

### Method
```js
editorRef.value.setTheme('dark')   // 'light' | 'dark' | 'auto'
editorRef.value.setTheme('auto')   // follows OS prefers-color-scheme

editorRef.value.setSkin('modern')  // 'default' | 'modern'
editorRef.value.setSkin('default')
```
```

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

### getEditor / useEditor

Source: https://context7.com/umodoc/editor/llms.txt

Access the raw Tiptap `Editor` instance for advanced low-level operations. This allows direct interaction with Tiptap commands and ProseMirror state.

```APIDOC
## getEditor / useEditor

Access the raw Tiptap `Editor` instance for advanced low-level operations.

### Methods

- `getEditor()`: Returns a Vue ref wrapping the Tiptap Editor instance.
- `useEditor()`: Returns the Tiptap Editor instance directly.

### Usage

- Run any Tiptap command directly: `editor.chain().focus().toggleBold().run()`
- Access ProseMirror state: `const { doc, selection } = editor.state`
```

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

### Switch Page Layout Mode

Source: https://context7.com/umodoc/editor/llms.txt

Toggle between paginated page view and continuous web view for the document layout. Use 'web' for continuous scrolling and 'page' for traditional pagination.

```javascript
editorRef.value.setLayout('web')
```

```javascript
editorRef.value.setLayout('page')
```

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

### onFileUpload Callback

Source: https://context7.com/umodoc/editor/llms.txt

This asynchronous callback is triggered whenever a user inserts an image, video, audio, or file. It must return an object containing at least `id` and `url` properties for the uploaded file.

```APIDOC
## `onFileUpload` Callback

Called whenever the user inserts an image, video, audio, or file node. Must be an async function returning an object with `id` and `url` at minimum.

```js
async onFileUpload(file) {
  // file is a browser File object (possibly with a .url property for URL-based inserts)
  if (!file) throw new Error('No file provided')

  const formData = new FormData()
  formData.append('file', file)

  const res = await fetch('/api/upload', { method: 'POST', body: formData })
  if (!res.ok) throw new Error('Upload failed')

  const { id, url } = await res.json()
  return {
    id,
    url,
    name: file.name,
    type: file.type,
    size: file.size,
  }
}
```
```

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

### Implement `onSave` Callback

Source: https://context7.com/umodoc/editor/llms.txt

Handle document saving. Must be an async function. Returns a status object for success or error toasts.

```js
async onSave(content, page, document) {
  // content.html  — full HTML string of editor content
  // content.json  — Tiptap/ProseMirror JSON document
  // content.text  — plain text
  // page          — { layout, size, margin, background, orientation, watermark, ... }
  // document      — current document options (title, content, ...)

  const response = await fetch('/api/documents/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: content.html, title: document.title }),
  })

  if (!response.ok) {
    // Return object form: status 'error' shows an error toast
    return { status: 'error', message: 'Save failed: server error' }
  }

  // Return object form: status 'success' shows a success toast
  return { status: 'success', message: 'Saved at ' + new Date().toLocaleTimeString() }

  // Legacy: return a non-empty string for success, empty string for failure
  // return 'Document saved'
}
```

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

### Display Dialogs and Messages

Source: https://context7.com/umodoc/editor/llms.txt

Utilize built-in utilities for showing alerts, confirmation dialogs, and toast messages within the editor's scope. These methods are asynchronous and can be configured with various options.

```javascript
// Alert dialog
await editorRef.value.useAlert({
  header: 'Notice',
  body: 'This action cannot be undone.',
  confirmBtn: { content: 'OK' },
})

// Confirm dialog with async result
const dialog = editorRef.value.useConfirm({
  theme: 'warning',
  header: 'Delete Document?',
  body: 'All content will be permanently deleted.',
  confirmBtn: { theme: 'danger', content: 'Delete' },
  onConfirm() {
    dialog.destroy()
    console.log('confirmed')
  },
})

// Toast messages
editorRef.value.useMessage('success', { content: 'Saved!', placement: 'bottom' })
editorRef.value.useMessage('error',   { content: 'Failed to save', placement: 'bottom' })
editorRef.value.useMessage('warning', { content: 'Low storage', placement: 'bottom' })
editorRef.value.useMessage('loading', { content: 'Saving…', duration: 0, placement: 'bottom' })
```

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

### setContent Method

Source: https://context7.com/umodoc/editor/llms.txt

This exposed method allows for programmatic replacement of the entire document content. It accepts either an HTML string or a Tiptap JSON object.

```APIDOC
## Exposed Method: `setContent`

Programmatically replace the entire document content. Accepts an HTML string or a Tiptap JSON object.

```vue
<template>
  <umo-editor ref="editorRef" :onSave="() => {}" :onFileUpload="() => {}" />
  <button @click="loadDocument">Load Document</button>
</template>

<script setup>
import { ref } from 'vue'

const editorRef = ref(null)

function loadDocument() {
  editorRef.value.setContent('<h1>New Title</h1><p>New content loaded from server.</p>', {
    emitUpdate: true,
    focusPosition: 'start',
    focusOptions: { scrollIntoView: true },
  })
}
</script>
```
```

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

### Reset or Destroy Editor Instance

Source: https://context7.com/umodoc/editor/llms.txt

Manage the editor's lifecycle with `reset` to clear state (optionally with confirmation) or `destroy` to cleanly unmount the instance and remove event listeners.

```javascript
// Reset localStorage state and reload (with confirmation dialog)
editorRef.value.reset()

// Reset silently without dialog
editorRef.value.reset(true)

// Destroy the editor (unmount Tiptap, clear hotkeys)
editorRef.value.destroy()
```

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

### Register Custom Tiptap Extensions

Source: https://context7.com/umodoc/editor/llms.txt

Add custom functionality to the editor by creating and registering new Tiptap extensions using the `extensions` option.

```javascript
import { Extension } from '@tiptap/core'

const WordCountExtension = Extension.create({
  name: 'wordCount',
  addStorage() {
    return { count: 0 }
  },
  onUpdate() {
    const words = this.editor.getText().split(/\s+/).filter(Boolean)
    this.storage.count = words.length
  },
})

const options = {
  extensions: [WordCountExtension],
  async onSave(content) { return 'Saved' },
  async onFileUpload(file) { return { id: '1', url: '#' } },
}
```

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

### getContentExcerpt Method

Source: https://context7.com/umodoc/editor/llms.txt

Obtain a plain-text excerpt of the document, which is useful for generating previews or search indexes. The length and suffix can be customized.

```APIDOC
## Exposed Method: `getContentExcerpt`

Get a plain-text excerpt of the document (useful for previews and search indexes).

```js
// Default: first 100 characters followed by ' ...'
const excerpt = editorRef.value.getContentExcerpt()

// Custom length and suffix
const shortExcerpt = editorRef.value.getContentExcerpt(50, '…')
// → "Lorem ipsum dolor sit amet, consectetur adipisc…"
```
```

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

### Change Editor Theme or Skin

Source: https://context7.com/umodoc/editor/llms.txt

Update the editor's visual theme (e.g., 'dark', 'light') or skin ('modern', 'default') at runtime. 'auto' theme follows the OS preference.

```javascript
editorRef.value.setTheme('dark')
```

```javascript
editorRef.value.setTheme('auto')
```

```javascript
editorRef.value.setSkin('modern')
```

```javascript
editorRef.value.setSkin('default')
```

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

### onSave Callback

Source: https://context7.com/umodoc/editor/llms.txt

This callback is invoked when the user initiates a save action (e.g., Ctrl/Cmd+S, toolbar button) or during auto-save. It must be an async function and can return a string for legacy success indication or a status object for more detailed feedback.

```APIDOC
## `onSave` Callback

Called when the user presses Ctrl/Cmd+S or the toolbar save button, and also during auto-save. Must be an async function. Return a string (legacy) or a status object.

```js
async onSave(content, page, document) {
  // content.html  — full HTML string of editor content
  // content.json  — Tiptap/ProseMirror JSON document
  // content.text  — plain text
  // page          — { layout, size, margin, background, orientation, watermark, ... }
  // document      — current document options (title, content, ...)

  const response = await fetch('/api/documents/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: content.html, title: document.title }),
  })

  if (!response.ok) {
    // Return object form: status 'error' shows an error toast
    return { status: 'error', message: 'Save failed: server error' }
  }

  // Return object form: status 'success' shows a success toast
  return { status: 'success', message: 'Saved at ' + new Date().toLocaleTimeString() }

  // Legacy: return a non-empty string for success, empty string for failure
  // return 'Document saved'
}
```
```

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

### setLayout

Source: https://context7.com/umodoc/editor/llms.txt

Switches the page layout mode between paginated and continuous web modes.

```APIDOC
## setLayout

### Description
Switch the page layout mode between paginated and continuous web modes.

### Method
```js
editorRef.value.setLayout('web')   // continuous web mode
editorRef.value.setLayout('page')  // paginated page mode
```
```

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

### Access Raw Tiptap Editor Instance

Source: https://context7.com/umodoc/editor/llms.txt

Obtain the underlying Tiptap `Editor` instance for advanced operations or direct command execution. Use `getEditor` for a Vue ref or `useEditor` for the direct instance.

```javascript
// Returns Vue ref wrapping the Editor instance
const editorRef2 = editorRef.value.getEditor()

// Returns the Editor instance directly
const editor = editorRef.value.useEditor()

// Run any Tiptap command directly
editor.chain().focus().toggleBold().run()

// Access ProseMirror state
const { doc, selection } = editor.state
```

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

### Define Custom Document Templates

Source: https://context7.com/umodoc/editor/llms.txt

Pre-populate the 'New Document' template selector with your own custom templates by providing an array of template objects to the `templates` option.

```javascript
const options = {
  templates: [
    {
      title: 'Meeting Notes',
      description: 'Standard meeting notes template',
      content: `
        <h1>Meeting Notes</h1>
        <h3>Date:</h3><p>[Date]</p>
        <h3>Attendees:</h3><ul><li>[Name]</li></ul>
        <h3>Agenda:</h3><ol><li>[Item]</li></ol>
        <h3>Action Items:</h3><ul><li>[ ] [Task] — [Owner]</li></ul>
      `,
    },
    {
      title: 'Project Brief',
      description: 'Project brief template',
      content: '<h1>Project Brief</h1><h3>Objective:</h3><p></p>',
    },
  ],
  async onSave(content) { return 'Saved' },
  async onFileUpload(file) { return { id: '1', url: '#' } },
}
```

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

### Update Editor Options with `setOptions`

Source: https://context7.com/umodoc/editor/llms.txt

Update the editor configuration at runtime without remounting the component. Supports locale, read-only mode, and toolbar menus.

```js
// Switch locale
editorRef.value.setOptions({ locale: 'en-US' })

// Enable read-only mode
editorRef.value.setOptions({ document: { readOnly: true } })

// Change toolbar menus
editorRef.value.setOptions({
  toolbar: { menus: ['base', 'insert', 'table', 'export'] }
})
```

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

### setPage

Source: https://context7.com/umodoc/editor/llms.txt

Programmatically changes page layout settings including size, orientation, margins, background, and layout mode.

```APIDOC
## setPage

### Description
Programmatically change page layout settings such as size, orientation, margins, background, and layout mode.

### Method
```js
editorRef.value.setPage({
  size: 'A4',                  // must match a label in dicts.pageSizes
  orientation: 'landscape',    // 'portrait' | 'landscape'
  background: '#f5f5f5',
  layout: 'web',               // 'page' | 'web'
  margin: { top: 2.0, bottom: 2.0, left: 2.54, right: 2.54 }, // cm
})
```
```

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

### setOptions Method

Source: https://context7.com/umodoc/editor/llms.txt

This method allows updating the editor's configuration at runtime without requiring the component to be remounted. Options include changing the locale, enabling read-only mode, or modifying toolbar menus.

```APIDOC
## Exposed Method: `setOptions`

Update the editor configuration at runtime without remounting the component.

```js
// Switch locale
editorRef.value.setOptions({ locale: 'en-US' })

// Enable read-only mode
editorRef.value.setOptions({ document: { readOnly: true } })

// Change toolbar menus
editorRef.value.setOptions({
  toolbar: { menus: ['base', 'insert', 'table', 'export'] }
})
```
```

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

### setToolbar

Source: https://context7.com/umodoc/editor/llms.txt

Switches the toolbar display mode or shows/hides the toolbar at runtime.

```APIDOC
## setToolbar

### Description
Switch toolbar display mode or show/hide the toolbar at runtime.

### Method
```js
// Switch from ribbon to classic mode
editorRef.value.setToolbar({ mode: 'classic' })

// Hide the toolbar (e.g. for a read-only viewer)
editorRef.value.setToolbar({ show: false })

// Restore toolbar
editorRef.value.setToolbar({ show: true, mode: 'ribbon' })
```
```

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

### Register Umo Editor as a Vue Plugin

Source: https://context7.com/umodoc/editor/llms.txt

Register the Umo Editor globally as a Vue plugin in your main application file. Remember to import the companion stylesheet.

```javascript
// main.js
import { createApp } from 'vue'
import UmoEditor from '@umoteam/editor'
import '@umoteam/editor/style'
import App from './App.vue'

const app = createApp(App)
app.use(UmoEditor)
app.mount('#app')
```

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

### Dialog and Message Utilities

Source: https://context7.com/umodoc/editor/llms.txt

Display alerts, confirm dialogs, and toast messages scoped to the editor container. These utilities provide user feedback and interaction prompts.

```APIDOC
## Dialog and Message Utilities

Display alerts, confirm dialogs, and toast messages scoped to the editor container.

### Methods

- `useAlert(options)`: Displays an alert dialog. Options include `header`, `body`, and `confirmBtn`.
- `useConfirm(options)`: Displays a confirmation dialog. Options include `theme`, `header`, `body`, `confirmBtn`, and `onConfirm` callback.
- `useMessage(type, options)`: Displays a toast message. `type` can be 'success', 'error', 'warning', or 'loading'. Options include `content`, `placement`, and `duration`.
```

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

### Insert Content with `insertContent`

Source: https://context7.com/umodoc/editor/llms.txt

Insert content at the current cursor position without replacing the entire document. Accepts HTML or Tiptap JSON.

```js
// Insert an HTML snippet at cursor position
editorRef.value.insertContent('<blockquote><p>Inserted quote</p></blockquote>')

// Insert a Tiptap JSON node
editorRef.value.insertContent({
  type: 'paragraph',
  content: [{ type: 'text', text: 'Inserted via JSON' }],
})
```

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

### Full Editor Configuration

Source: https://context7.com/umodoc/editor/llms.txt

This object defines all available top-level options for the editor, including defaults and accepted values. Configure UI locale, theme, editor height, toolbar, page layout, document properties, and integrations like ECharts and diagrams.net.

```javascript
const options = {
  // Unique key per editor instance; used to namespace localStorage keys
  editorKey: 'default',

  // UI locale: 'zh-CN' | 'en-US'
  locale: 'zh-CN',

  // Color theme: 'light' | 'dark' | 'auto'
  theme: 'light',

  // Visual skin: 'default' | 'modern'
  skin: 'default',

  // CSS height of the editor container
  height: '100%',

  // z-index when fullscreen is active
  fullscreenZIndex: 10,

  // Toolbar configuration
  toolbar: {
    showSaveLabel: true,
    defaultMode: 'ribbon',           // 'ribbon' | 'classic'
    menus: ['base', 'insert', 'table', 'tools', 'page', 'view', 'export'],
  },

  // Page / layout settings
  page: {
    layouts: ['page', 'web'],        // available layout modes
    defaultMargin: { left: 3.18, right: 3.18, top: 2.54, bottom: 2.54 }, // cm
    defaultOrientation: 'portrait',  // 'portrait' | 'landscape'
    defaultBackground: '#fff',
    showBreakMarks: true,
    showLineNumber: false,
    showBookmark: false,
    showToc: false,
    watermark: {
      type: 'compact',               // 'compact' | 'spacious'
      alpha: 0.2,
      fontColor: '#000',
      fontSize: 16,
      fontFamily: 'SimSun',
      fontWeight: 'normal',          // 'normal' | 'bold' | 'bolder'
      text: '',
    },
  },

  // Document content and behavior
  document: {
    title: '',
    content: '',                     // HTML string, JSON object, or ''
    placeholder: { en_US: 'Please enter...', zh_CN: '请输入文档内容...' },
    structure: 'block+',             // ProseMirror document structure rule
    enableSpellcheck: true,
    enableMarkdown: true,
    enableBubbleMenu: true,
    enableBlockMenu: true,
    enableNodeId: false,             // attach unique IDs to every node
    readOnly: false,
    autofocus: false,                // 'start' | 'end' | 'all' | number | bool
    characterLimit: 0,               // 0 = unlimited
    typographyRules: {},             // Tiptap Typography extension overrides
    editorProps: {},                 // ProseMirror EditorProps
    parseOptions: { preserveWhitespace: 'full' },
    autoSave: { enabled: true, interval: 300000 }, // ms
  },

  // ECharts integration
  echarts: {
    mode: 1,
    renderImage: false,
    onCustomSettings() { return null },
  },

  // Document templates shown in the new-document dialog
  templates: [
    { title: 'Weekly Report', description: 'Template', content: '<h1>Report</h1>' },
  ],

  // CDN base URL for external assets (fonts, icons, etc.)
  cdnUrl: 'https://unpkg.com/@umoteam/editor-external@latest',

  // URL used when generating share links
  shareUrl: location.href,

  // draw.io / diagrams.net configuration
  diagrams: {
    domain: 'https://embed.diagrams.net',
    params: {},
  },

  // File upload constraints and preview configuration
  file: {
    allowedMimeTypes: [],            // [] = all types allowed
    maxSize: 1024 * 1024 * 100,     // 100 MB
    preview: [
      { extensions: ['pdf'], url: '{url}' },
      { extensions: ['doc','docx','xls','xlsx','ppt','pptx'],
        url: 'https://view.officeapps.live.com/op/embed.aspx?src={url}' },
    ],
  },

  // Current user (for mentions, collaboration cursors)
  user: { id: 'user1', label: 'Alice', avatar: 'https://example.com/avatar.png' },

  // All mentionable users
  users: [
    { id: 'user2', label: 'Bob', bio: 'Developer', color: '#4a90e2' },
  ],

  // Array of additional Tiptap extensions
  extensions: [],

  // Array of built-in extension names to disable
  disableExtensions: [], // e.g. ['print', 'footnote', 'echarts']

  // i18n overrides
  translations: { en_US: {}, zh_CN: {} },

  // Callbacks
  async onSave(content, page, document) { /* required */ },
  async onFileUpload(file) { /* required */ },
  onFileDelete(id, url, type) { /* optional */ },
}
```

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

### Manage Document Bookmarks

Source: https://context7.com/umodoc/editor/llms.txt

API for inserting, navigating to, and removing named bookmarks within the document. Bookmarks help in quickly locating specific sections.

```javascript
editorRef.value.setBookmark('section-1')
```

```javascript
editorRef.value.focusBookmark('section-1')
```

```javascript
const bookmarks = editorRef.value.getAllBookmarks()
// → [{ bookmarkName: 'section-1', pos: 42 }, ...]
```

```javascript
const removed = editorRef.value.deleteBookmark('section-1')
// → true if found and removed, false otherwise
```

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

### toggleFullscreen

Source: https://context7.com/umodoc/editor/llms.txt

Enters or exits the editor's fullscreen mode. Can be controlled to force entering or exiting.

```APIDOC
## toggleFullscreen

### Description
Enter or exit fullscreen mode.

### Method
```js
editorRef.value.toggleFullscreen()         // toggle
editorRef.value.toggleFullscreen(true)     // force fullscreen
editorRef.value.toggleFullscreen(false)    // exit fullscreen
```
```

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

### getImage

Source: https://context7.com/umodoc/editor/llms.txt

Exports the current page content as an image in Blob, JPEG, or PNG format.

```APIDOC
## getImage

### Description
Export the current page content as an image (blob, JPEG, or PNG).

### Method
```js
// Get as Blob (default)
const blob = await editorRef.value.getImage('blob')
const blobUrl = URL.createObjectURL(blob)

// Get as JPEG data URL string
const jpeg = await editorRef.value.getImage('jpeg')

// Get as PNG data URL string
const png = await editorRef.value.getImage('png')

// Download example
const link = document.createElement('a')
link.href = URL.createObjectURL(await editorRef.value.getImage('blob'))
link.download = 'document.png'
link.click()
```
```

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

### Update Document Options

Source: https://context7.com/umodoc/editor/llms.txt

Modify specific document properties like title, read-only status, or content without replacing the entire configuration. Use this for granular updates.

```javascript
editorRef.value.setDocument({ title: 'Updated Title' })
```

```javascript
editorRef.value.setDocument({ readOnly: true })
```

```javascript
editorRef.value.setDocument({ characterLimit: 5000 })
```

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

### getContent Method

Source: https://context7.com/umodoc/editor/llms.txt

Retrieve the current document content in various formats: HTML, plain text, or Tiptap/ProseMirror JSON object. It also provides a `getVanillaHTML` method for serialized HTML.

```APIDOC
## Exposed Method: `getContent`

Retrieve the current document content in HTML, plain text, or JSON format.

```js
// HTML string
const html = editorRef.value.getHTML()
// Equivalent: editorRef.value.getContent('html')

// Plain text (strips all markup)
const text = editorRef.value.getText()
// Equivalent: editorRef.value.getContent('text')

// Tiptap/ProseMirror JSON document object
const json = editorRef.value.getJSON()
// Equivalent: editorRef.value.getContent('json')

// Serialized HTML suitable for standalone rendering (no editor CSS required)
const vanillaHtml = await editorRef.value.getVanillaHTML()
```
```

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

### Control Toolbar Display

Source: https://context7.com/umodoc/editor/llms.txt

Dynamically change the toolbar's display mode or toggle its visibility. Useful for switching between editing and viewing modes.

```javascript
editorRef.value.setToolbar({ mode: 'classic' })
```

```javascript
editorRef.value.setToolbar({ show: false })
```

```javascript
editorRef.value.setToolbar({ show: true, mode: 'ribbon' })
```

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

### Set Editor Content with `setContent`

Source: https://context7.com/umodoc/editor/llms.txt

Programmatically replace the entire document content. Accepts an HTML string or a Tiptap JSON object.

```vue
<template>
  <umo-editor ref="editorRef" :onSave="() => {}" :onFileUpload="() => {}" />
  <button @click="loadDocument">Load Document</button>
</template>

<script setup>
import { ref } from 'vue'

const editorRef = ref(null)

function loadDocument() {
  editorRef.value.setContent('<h1>New Title</h1><p>New content loaded from server.</p>', {
    emitUpdate: true,
    focusPosition: 'start',
    focusOptions: { scrollIntoView: true },
  })
}
</script>
```

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

### Trigger Print Dialog

Source: https://context7.com/umodoc/editor/llms.txt

Open the browser's print dialog to print the document. This method utilizes a dedicated print stylesheet for consistent output.

```javascript
editorRef.value.print()
```

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

### Export Document as Image

Source: https://context7.com/umodoc/editor/llms.txt

Generate an image representation of the current page content in various formats like Blob, JPEG, or PNG. Useful for previews or external use.

```javascript
const blob = await editorRef.value.getImage('blob')
const blobUrl = URL.createObjectURL(blob)
```

```javascript
const jpeg = await editorRef.value.getImage('jpeg')
```

```javascript
const png = await editorRef.value.getImage('png')
```

```javascript
const link = document.createElement('a')
link.href = URL.createObjectURL(await editorRef.value.getImage('blob'))
link.download = 'document.png'
link.click()
```

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

### Embed Umo Editor in Non-Vue 3 Projects via iframe

Source: https://context7.com/umodoc/editor/llms.txt

For projects not using Vue 3 (e.g., React, Angular, plain HTML), embed the editor within an iframe. Communication with the editor is handled via `postMessage`.

```html
<!-- host.html (non-Vue project) -->
<iframe
  id="umo-editor-frame"
  src="https://your-umo-editor-host.example.com/"
  style="width: 100%; height: 600px; border: none;"
></iframe>

<script>
const frame = document.getElementById('umo-editor-frame')

// Wait for the editor to signal readiness
window.addEventListener('message', (event) => {
  if (event.data?.type === 'umo-editor:ready') {
    // Send commands to the editor
    frame.contentWindow.postMessage(
      { type: 'umo-editor:setContent', content: '<p>Hello from host!</p>' },
      '*'
    )
  }
  if (event.data?.type === 'umo-editor:saved') {
    console.log('Saved content:', event.data.content)
  }
})
</script>
```

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

### print

Source: https://context7.com/umodoc/editor/llms.txt

Triggers the browser's print dialog, utilizing a dedicated print stylesheet for accurate output.

```APIDOC
## print

### Description
Trigger the print dialog (uses a dedicated print stylesheet via a hidden print container).

### Method
```js
editorRef.value.print()
```
```

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

### saveContent

Source: https://context7.com/umodoc/editor/llms.txt

Programmatically triggers a save operation, similar to pressing Ctrl+S. Can be configured to show or suppress toast messages.

```APIDOC
## saveContent

### Description
Programmatically trigger a save (same flow as Ctrl+S).

### Method
```js
// Save with success/error toast shown
await editorRef.value.saveContent()

// Save silently (no toast messages)
await editorRef.value.saveContent(false)
```
```

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

### Bookmark API

Source: https://context7.com/umodoc/editor/llms.txt

Provides functionality to insert, navigate to, and remove named bookmarks within the document.

```APIDOC
## Bookmark API

### Description
Insert, navigate, and remove named bookmarks in the document.

### Methods
#### setBookmark
Inserts a bookmark at the current cursor position.
```js
editorRef.value.setBookmark('section-1')
```

#### focusBookmark
Scrolls to and focuses a specified bookmark.
```js
editorRef.value.focusBookmark('section-1')
```

#### getAllBookmarks
Retrieves all bookmarks currently present in the document.
```js
const bookmarks = editorRef.value.getAllBookmarks()
// → [{ bookmarkName: 'section-1', pos: 42 }, ...]
```

#### deleteBookmark
Deletes a bookmark by its name.
```js
const removed = editorRef.value.deleteBookmark('section-1')
// → true if found and removed, false otherwise
```
```

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

### Define Custom Embedded Web Page Sources

Source: https://context7.com/umodoc/editor/llms.txt

Add custom embed sources for the web page node beyond the built-in options by providing an array of objects to the `webPages` option. Each object should include a label, icon, validation function, and URL transformation function.

```javascript
const options = {
  webPages: [
    {
      label: { zh_CN: 'YouTube', en_US: 'YouTube' },
      icon: '<svg …>…</svg>',
      validate(url) {
        return /^https?:\/\/(www\.)?youtube\.com\/watch\?v=/.test(url)
      },
      transformURL(url) {
        const videoId = new URL(url).searchParams.get('v')
        return videoId ? `https://www.youtube.com/embed/${videoId}` : ''
      },
    },
  ],
  async onSave(content) { return 'Saved' },
  async onFileUpload(file) { return { id: '1', url: '#' } },
}
```

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

### Set Global Default Editor Options

Source: https://context7.com/umodoc/editor/llms.txt

Register editor-wide defaults at the Vue app level using `app.use` options. These defaults are inherited by all `<umo-editor>` instances and can be overridden per instance.

```javascript
// main.js
import UmoEditor from '@umoteam/editor'
import '@umoteam/editor/style'

app.use(UmoEditor, {
  locale: 'en-US',
  theme: 'light',
  cdnUrl: 'https://your-cdn.example.com/umo-editor-external',
  async onSave(content) {
    // shared default save handler for all instances
    return 'Saved'
  },
  async onFileUpload(file) {
    const form = new FormData()
    form.append('file', file)
    const res = await fetch('/upload', { method: 'POST', body: form })
    return res.json()
  },
})
```

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

### focus / blur

Source: https://context7.com/umodoc/editor/llms.txt

Programmatically controls the editor's focus state, allowing focus to be set at specific positions or removed entirely.

```APIDOC
## focus / blur

### Description
Programmatically control editor focus.

### Method
```js
// Focus at start
editorRef.value.focus('start')

// Focus at end
editorRef.value.focus('end')

// Focus at specific position
editorRef.value.focus(42)

// Remove focus
editorRef.value.blur()
```
```

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

### Toggle Fullscreen Mode

Source: https://context7.com/umodoc/editor/llms.txt

Enter, exit, or force the editor into or out of fullscreen mode. The boolean argument can be used to explicitly control the fullscreen state.

```javascript
editorRef.value.toggleFullscreen()
```

```javascript
editorRef.value.toggleFullscreen(true)
```

```javascript
editorRef.value.toggleFullscreen(false)
```

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

### insertContent Method

Source: https://context7.com/umodoc/editor/llms.txt

This method inserts content at the current cursor position without affecting the existing document content.

```APIDOC
## Exposed Method: `insertContent`

Insert content at the current cursor position without replacing the entire document.

```js
// Insert an HTML snippet at cursor position
editorRef.value.insertContent('<blockquote><p>Inserted quote</p></blockquote>')

// Insert a Tiptap JSON node
editorRef.value.insertContent({
  type: 'paragraph',
  content: [{ type: 'text', text: 'Inserted via JSON' }],
})
```
```

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

### onFileDelete Callback

Source: https://context7.com/umodoc/editor/llms.txt

This callback is invoked when a file, image, or media node is removed from the document. It provides the `id`, `url`, and `type` of the deleted file, allowing for server-side cleanup.

```APIDOC
## `onFileDelete` Callback

Called when a file/image/media node is deleted from the document. Use this to clean up the file from your server.

```js
onFileDelete(id, url, type) {
  // id   — the id returned from onFileUpload
  // url  — the file URL
  // type — MIME type string
  fetch(`/api/files/${id}`, { method: 'DELETE' })
    .catch(console.error)
}
```
```

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

### setWatermark

Source: https://context7.com/umodoc/editor/llms.txt

Adds or updates a page watermark at runtime. Can also be used to remove a watermark by setting text to an empty string.

```APIDOC
## setWatermark

### Description
Add or update a page watermark at runtime.

### Method
```js
editorRef.value.setWatermark({
  text: 'CONFIDENTIAL',
  type: 'compact',             // 'compact' | 'spacious'
  alpha: 0.15,
  fontColor: '#cc0000',
  fontSize: 18,
  fontFamily: 'Arial',
  fontWeight: 'bold',          // 'normal' | 'bold' | 'bolder'
})

// Remove watermark
editorRef.value.setWatermark({ text: '' })
```
```

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

### Set Read-Only Mode

Source: https://context7.com/umodoc/editor/llms.txt

Switch the editor between editable and read-only states. Pass 'true' to enable read-only mode and 'false' to allow editing.

```javascript
editorRef.value.setReadOnly(true)
```

```javascript
editorRef.value.setReadOnly(false)
```

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

### Add or Update Page Watermark

Source: https://context7.com/umodoc/editor/llms.txt

Apply or modify a watermark on the page at runtime. To remove the watermark, set the 'text' property to an empty string.

```javascript
editorRef.value.setWatermark({
  text: 'CONFIDENTIAL',
  type: 'compact',
  alpha: 0.15,
  fontColor: '#cc0000',
  fontSize: 18,
  fontFamily: 'Arial',
  fontWeight: 'bold'
})
```

```javascript
editorRef.value.setWatermark({ text: '' })
```

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

### reset / destroy

Source: https://context7.com/umodoc/editor/llms.txt

Reset persisted editor state or cleanly tear down the editor instance. These methods manage the editor's lifecycle and state persistence.

```APIDOC
## reset / destroy

Reset all persisted editor state or cleanly tear down the editor instance.

### Methods

- `reset(skipConfirmation?: boolean)`: Resets editor state (e.g., localStorage) and reloads. Optionally skips the confirmation dialog.
- `destroy()`: Tears down the editor instance, unmounting Tiptap and clearing hotkeys.
```

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

### Event Emits

Source: https://context7.com/umodoc/editor/llms.txt

The editor component emits various events that can be listened to for reacting to changes and actions within the editor.

```APIDOC
## Event Emits

The component emits the following events, all listenable with `@event-name` on the component tag.

### Events

- `@created`: Emitted when the editor is ready.
- `@changed`: Emitted when the editor content changes.
- `@changed:selection`: Emitted when the editor selection changes.
- `@changed:menu`: Emitted when the editor menu changes.
- `@changed:toolbar`: Emitted when the editor toolbar changes.
- `@changed:pageLayout`: Emitted when the page layout changes.
- `@changed:pageSize`: Emitted when the page size changes.
- `@changed:pageOrientation`: Emitted when the page orientation changes.
- `@changed:pageMargin`: Emitted when the page margin changes.
- `@changed:pageBackground`: Emitted when the page background changes.
- `@changed:pageWatermark`: Emitted when the page watermark changes.
- `@changed:pageZoom`: Emitted when the page zoom level changes.
- `@changed:pagePreview`: Emitted when the page preview mode changes.
- `@changed:pageShowToc`: Emitted when the table of contents visibility changes.
- `@changed:locale`: Emitted when the editor locale changes.
- `@changed:theme`: Emitted when the editor theme changes.
- `@changed:skin`: Emitted when the editor skin changes.
- `@saved`: Emitted when the document is saved.
- `@focus`: Emitted when the editor gains focus.
- `@blur`: Emitted when the editor loses focus.
- `@paste`: Emitted when content is pasted into the editor.
- `@drop`: Emitted when content is dropped onto the editor.
- `@delete`: Emitted when content is deleted.
- `@print`: Emitted when the print action is triggered.
- `@destroy`: Emitted when the editor is destroyed.
```

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

### Trigger Document Save

Source: https://context7.com/umodoc/editor/llms.txt

Programmatically initiate the document save process, mimicking the behavior of Ctrl+S. The boolean argument controls whether toast messages are displayed.

```javascript
await editorRef.value.saveContent()
```

```javascript
await editorRef.value.saveContent(false)
```

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

### Set Editor Locale and UI Language

Source: https://context7.com/umodoc/editor/llms.txt

Change the editor's user interface language. The second argument controls whether a confirmation dialog is shown before reloading the page.

```javascript
editorRef.value.setLocale('en-US', true)
```

```javascript
editorRef.value.setLocale('zh-CN', false)
```

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

### setDocument

Source: https://context7.com/umodoc/editor/llms.txt

Updates specific document options such as title, read-only status, or content without replacing the entire configuration.

```APIDOC
## setDocument

### Description
Updates specific document options (title, readOnly, content, etc.) without replacing the full config.

### Method
```js
editorRef.value.setDocument({ title: 'Updated Title' })
editorRef.value.setDocument({ readOnly: true })
editorRef.value.setDocument({ characterLimit: 5000 })
```
```

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

### Customize UI Translations

Source: https://context7.com/umodoc/editor/llms.txt

Override or extend UI strings for different locales, such as English and Chinese, using the `translations` option.

```javascript
const options = {
  locale: 'en-US',
  translations: {
    en_US: {
      'save.saving': 'Saving your work…',
      'save.success': 'All changes saved',
      'save.failed': 'Could not save — please retry',
    },
    zh_CN: {
      'save.saving': '正在保存…',
    },
  },
  async onSave(content) { return 'Saved' },
  async onFileUpload(file) { return { id: '1', url: '#' } },
}
```

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

### setReadOnly

Source: https://context7.com/umodoc/editor/llms.txt

Switches the editor between an editable state and a read-only mode.

```APIDOC
## setReadOnly

### Description
Switch the editor between editable and read-only mode.

### Method
```js
editorRef.value.setReadOnly(true)   // read-only
editorRef.value.setReadOnly(false)  // editable (default)
```
```