### Install quasar-tiptap and Dependencies

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Installs the quasar-tiptap package and its core dependencies using Yarn. Includes optional dependencies for diagram and LaTeX support.

```bash
# Install quasar-tiptap
yarn add quasar-tiptap

# Required dependencies
yarn add tiptap
yarn add tiptap-extensions

# Optional dependencies (for diagram and LaTeX support)
yarn add vue-codemirror
yarn add mermaid
yarn add katex
```

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

### Install Dependencies for quasar-tiptap

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/README.md

Installs the required and optional dependencies for quasar-tiptap. This includes tiptap and tiptap-extensions, along with optional packages like vue-codemirror, mermaid, and katex if diagram and LaTeX support are needed.

```bash
# required
yarn add tiptap
yarn add tiptap-extensions

# optional (required if diagram and latex formula enabled)
yarn add vue-codemirror
yarn add mermaid
yarn add katex

yarn add quasar-tiptap
```

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

### Internationalization (i18n) Setup and Usage in Vue

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

This snippet demonstrates how to set up and dynamically switch languages in Quasar Tiptap using the `QuasarTiptapPlugin`. It shows how to install the plugin with an initial language and provides methods to change the language at runtime using the `$o.lang.set()` API. Supported languages include English, Chinese, Polish, and Portuguese.

```javascript
import Vue from 'vue'
import { QuasarTiptapPlugin } from 'quasar-tiptap'

// Set initial language during plugin installation
Vue.use(QuasarTiptapPlugin, {
  language: 'en-us',  // Default language
  spellcheck: true
})

// Available languages:
// - 'en-us' (English - default)
// - 'zh-hans' (Chinese Simplified)
// - 'pl' (Polish)
// - 'pt-br' (Portuguese Brazil)

export default {
  methods: {
    switchToEnglish() {
      this.$o.lang.set('en-us')
    },
    switchToChinese() {
      this.$o.lang.set('zh-hans')
    },
    switchToPolish() {
      this.$o.lang.set('pl')
    },
    switchToPortuguese() {
      this.$o.lang.set('pt-br')
    }
  },
  mounted() {
    // Change language on component mount
    this.$o.lang.set('zh-hans')
  }
}
```

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

### Install quasar-tiptap Plugin Globally

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/README.md

Demonstrates how to install the quasar-tiptap plugin globally within a Vue.js application. This allows for easy access to the editor component and its features across the project. It also shows how to configure language and spellcheck options.

```javascript
import Vue from 'vue'
import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap'

Vue.use(QuasarTiptapPlugin, {
  language: 'zh-hans',
  spellcheck: true
})
```

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

### Use quasar-tiptap Component in Vue

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/README.md

Shows how to import and use the QuasarTiptap component in a Vue.js template and script. It includes basic configuration for content, extensions, and toolbar buttons. The example also demonstrates how to handle editor updates to get JSON and HTML output.

```vue
<template>
  <div>
    <quasar-tiptap v-bind="options" @update="onUpdate" />
  </div>
</template>

<script>
import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'
import 'quasar-tiptap/lib/index.css'

export default {
  data () {
    return {
      options: {
        content: 'content',
        editable: true,
        extensions: [
          ...RecommendedExtensions,
          // other extenstions
          // name string, or custom extension
        ],
        toolbar: [
          'add-more',
          'separator',
          'bold',
          'italic',
          'underline',
          // other toolbar buttons
          // name string
        ]
      },
      json: '',
      html: ''
    }
  },
  components: {
    QuasarTiptap,
  },
  methods: {
    onUpdate ({ getJSON, getHTML }) {
      this.json = getJSON()
      this.html = getHTML()
      console.log('html', this.html)
    }
  },
  mounted () {
    // set language dynamically
    this.$o.lang.set('en-us')
  }
}
</script>
```

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

### Create OMenubarBtn Component in Vue

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Demonstrates how to create custom toolbar buttons for the Quasar Tiptap editor using the OMenubarBtn component. It shows how to integrate these buttons with the editor's command system and styling, including examples for view modes and fullscreen toggling. Dependencies include 'quasar-tiptap' components like QuasarTiptap and OMenubarBtn.

```vue
<template>
  <quasar-tiptap v-bind="options" scrollable>
    <template slot="toolbar-left">
      <q-separator vertical inset />
      <o-menubar-btn
        icon="mdi-overscan"
        tooltip="Full Width View"
        :class="{ 'is-active': pageView === 'full' }"
        @click.native="pageView = 'full'"
      />
      <o-menubar-btn
        icon="mdi-fit-to-page-outline"
        tooltip="Page View"
        :class="{ 'is-active': pageView === 'page' }"
        @click.native="pageView = 'page'"
      />
    </template>
    <template slot="toolbar-right">
      <o-menubar-btn
        :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
        tooltip="Toggle Fullscreen"
        @click.native="$q.fullscreen.toggle()"
      />
      <o-menubar-btn
        icon="mdi-content-save"
        tooltip="Save Document"
        @click.native="saveDocument"
      />
    </template>
  </quasar-tiptap>
</template>

<script>
import { QuasarTiptap, OMenubarBtn, RecommendedExtensions } from 'quasar-tiptap'

export default {
  components: { QuasarTiptap, OMenubarBtn },
  data() {
    return {
      pageView: 'page',
      options: {
        content: '<p>Document with custom toolbar buttons</p>',
        editable: true,
        extensions: [...RecommendedExtensions]
      }
    }
  },
  methods: {
    saveDocument() {
      console.log('Save triggered')
    }
  }
}
</script>
```

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

### Create Diagrams with Mermaid Extension

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Utilize the ODiagram extension with Mermaid syntax to generate various types of diagrams directly within the editor. This extension requires the 'mermaid' library to be installed and can be configured in the toolbar.

```javascript
// Ensure mermaid is installed: yarn add mermaid

import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'

export default {
  data() {
    return {
      options: {
        content: "\n          <p>Here's a flowchart:</p>\n          <diagram src=\"graph TD\n            A[Start] --> B{Decision}\n            B -->|Yes| C[Do something]\n            B -->|No| D[Do something else]\n            C --> E[End]\n            D --> E\"></diagram>\n          <p>And a sequence diagram:</p>\n          <diagram src=\"sequenceDiagram\n            Alice->>John: Hello John\n            John-->>Alice: Hi Alice\n            Alice->>John: How are you?\n            John-->>Alice: Great!\"></diagram>\n        ",
        extensions: [
          'ODiagram',
          ...RecommendedExtensions.filter(e => e !== 'ODiagram')
        ],
        toolbar: [
          {
            name: 'add-more',
            type: 'menu',
            options: { /* includes diagram option */ }
          }
        ]
      }
    }
  }
}
```

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

### Configure TipTap and Quasar-Tiptap Extensions (JavaScript)

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Illustrates how to import and configure extensions for TipTap and Quasar-TipTap. It lists available core TipTap extensions for text editing and Quasar-TipTap extensions for advanced features. Shows how to combine them and add custom extensions, like a Placeholder.

```javascript
import {
  TipTapExtensions,
  QuasarTipTapExtensions,
  RecommendedExtensions
} from 'quasar-tiptap'
import { Placeholder } from 'tiptap-extensions'

// TipTap Extensions (core text editing)
const tiptapExtensions = [
  'Bold',
  'Italic',
  'Strike',
  'Underline',
  'Code',
  'CodeBlock',
  'CodeBlockHighlight',
  'BulletList',
  'OrderedList',
  'ListItem',
  'TodoList',
  'HorizontalRule',
  'Table',
  'Link'
]

// QuasarTipTap Extensions (advanced features)
const quasarExtensions = [
  'OTitle',
  'ODoc',
  'OParagraph',
  'OBlockquote',
  'OTodoItem',
  'OHeading',
  'OAlignment',
  'OIndent',
  'OLineHeight',
  'OForeColor',
  'OBackColor',
  'OFontFamily',
  'OIframe',
  'ODiagram',
  'OKatexBlock',
  'OKatexInline',
  'OFormatClear',
  'OPrint',
  'OImage',
  'OEmbed',
  'OInsertHtml',
  'OLink'
]

// Full configuration example
export default {
  data() {
    return {
      options: {
        extensions: [
          ...RecommendedExtensions,
          // Add custom tiptap-extensions
          new Placeholder({
            showOnlyCurrent: false,
            emptyNodeText: node => {
              if (node.type.name === 'title') return 'Enter title...'
              return 'Start typing...'
            }
          })
        ]
      }
    }
  }
}
```

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

### HTML Starter Template for KaTeX

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/src/css/katex/README.md

This HTML template demonstrates how to include KaTeX's CSS and JavaScript files, including the auto-render extension, to enable automatic math rendering on a webpage. It specifies the use of the HTML5 doctype for proper rendering and defers the loading of KaTeX's JavaScript for faster page load times. The auto-render extension is configured to render math within the document's body upon page load.

```html
<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  ...
</html>
```

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

### Render Math Formulas with KaTeX Extension

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Integrate the KaTeX extensions (OKatexBlock and OKatexInline) to render mathematical formulas using LaTeX syntax. This allows for both block-level and inline math expressions within the editor and requires the 'katex' library.

```javascript
// Ensure katex is installed: yarn add katex

import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'

export default {
  data() {
    return {
      options: {
        content: "\n          <p>Inline math: <katex src=\"E = mc^2\"></katex> is Einstein's formula.</p>\n          <p>Block math formula:</p>\n          <katex src=\"\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}\"></katex>\n          <p>Quadratic formula:</p>\n          <katex src=\"x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}\"></katex>\n        ",
        extensions: [
          'OKatexBlock',
          'OKatexInline',
          ...RecommendedExtensions.filter(e =>
            e !== 'OKatexBlock' && e !== 'OKatexInline'
          )
        ],
        toolbar: [
          {
            name: 'add-more',
            type: 'menu',
            options: { /* includes katex options */ }
          }
        ]
      }
    }
  }
}
```

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

### Embed External Services with OEmbed Extension

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Configure the OEmbed extension to embed content from various online services like YouTube, Google Maps, and Figma. The extension supports a wide range of embeddable content types and can be customized in the toolbar.

```javascript
const embedServices = {
  video: [
    'youtube',
    'youku',
    'bilibili',
    'qqvideo'
  ],
  map: [
    'google_map',
    'amap',
    'baidu_map'
  ],
  design: [
    'modao',
    'lanhu',
    'figma',
    'canva',
    'processon'
  ],
  develop: [
    'codepen'
  ],
  data: [
    'google_forms',
    'jinshuju'
  ],
  others: [
    'iframe'
  ]
}

export default {
  data() {
    return {
      options: {
        extensions: ['OEmbed', 'OIframe'],
        toolbar: [
          {
            name: 'add-more',
            type: 'menu',
            options: {
              embed: {
                video: ['youtube', 'bilibili'],
                map: ['google_map'],
                design: ['figma', 'canva'],
                develop: ['codepen'],
                others: ['iframe']
              }
            }
          }
        ]
      }
    }
  }
}
```

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

### Configure Quasar Framework in quasar.conf.js

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Configures the Quasar Framework in `quasar.conf.js` to include the necessary icon set and directives for quasar-tiptap.

```javascript
// quasar.conf.js
module.exports = function (ctx) {
  return {
    extras: [
      'mdi-v5'
    ],
    framework: {
      directives: [
        'ClosePopup'
      ]
    }
  }
}
```

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

### Render Math to String with KaTeX API

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/src/css/katex/README.md

This JavaScript code snippet shows how to use the `katex.renderToString` function to generate an HTML string representation of a LaTeX math expression. This is useful for server-side rendering or when you need the HTML output directly. Similar to `katex.render`, it accepts an options object, and `throwOnError: false` is demonstrated here for handling potential errors by displaying the TeX source.

```js
var html = katex.renderToString("c = \pm\sqrt{a^2 + b^2}", {
    throwOnError: false
});
// '<span class="katex">...</span>'
```

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

### Use QuasarTiptap Component in Vue Template

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Demonstrates the usage of the `<quasar-tiptap>` component within a Vue template. It shows how to bind options, handle events, and customize toolbar and footer slots.

```vue
<template>
  <div>
    <quasar-tiptap
      v-bind="options"
      @init="onInit"
      @update="onUpdate"
      @focus="onFocus"
      @blur="onBlur"
    >
      <template slot="toolbar-left">
        <!-- Custom toolbar buttons on the left -->
      </template>
      <template slot="toolbar-right">
        <!-- Custom toolbar buttons on the right -->
      </template>
      <template slot="footer">
        <div>Custom footer content</div>
      </template>
    </quasar-tiptap>
  </div>
</template>

<script>
import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'
import 'quasar-tiptap/lib/index.css'

export default {
  components: { QuasarTiptap },
  data() {
    return {
      options: {
        content: '<p>Hello World!</p>',
        editable: true,
        showToolbar: true,
        showBubble: true,
        scrollable: false,
        pageView: 'page',  // 'page' or 'full'
        extensions: [...RecommendedExtensions],
        toolbar: [
          'add-more',
          'separator',
          'bold', 'italic', 'underline', 'strike', 'code',
          'separator',
          'heading', 'font-family', 'fore-color', 'back-color',
          'separator',
          'align-dropdown', 'indent', 'outdent', 'line-height',
          'separator',
          'bullet_list', 'ordered_list', 'todo_list',
          'separator',
          'blockquote', 'code_block', 'link', 'photo', 'table',
          'separator',
          'undo', 'redo', 'print'
        ],
        bubble: [
          'bold', 'italic',
          'separator',
          'font-family', 'fore-color', 'back-color',
          'separator',
          'link',
          'separator',
          'align-group'
        ]
      },
      json: '',
      html: ''
    }
  },
  methods: {
    onInit({ state, view }) {
      console.log('Editor initialized', { state, view })
    },
    onUpdate({ getJSON, getHTML, state, transaction }) {
      this.json = getJSON()
      this.html = getHTML()
      console.log('Content updated:', this.html)
    },
    onFocus({ event, state, view }) {
      console.log('Editor focused')
    },
    onBlur({ event, state, view }) {
      console.log('Editor blurred')
    }
  },
  mounted() {
    // Change language dynamically
    this.$o.lang.set('zh-hans')
  }
}
</script>
```

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

### Configure quasar.conf.js for quasar-tiptap

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/README.md

Configures the quasar.conf.js file to include the 'mdi-v5' icon set and the 'v-close-popup' directive, which are necessary for quasar-tiptap to function correctly.

```javascript
extras: [
  'mdi-v5'
],
framework: [
  directives: [
    'ClosePopup'
  ]
]
```

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

### Combine TipTap and Quasar Tiptap Extensions in JavaScript

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/README.md

This JavaScript code defines a 'RecommendedExtensions' array by merging the standard 'TipTapExtensions' and the custom 'QuasarTipTapExtensions' arrays. This consolidated array represents a comprehensive set of extensions that are suggested for use together in a Quasar Tiptap editor instance, ensuring a rich feature set by combining base editor capabilities with Quasar-specific enhancements.

```javascript
export const RecommendedExtensions = [
  ...TipTapExtensions,
  ...QuasarTipTapExtensions
]
```

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

### Configure Quasar-Tiptap Editor Component Properties (Vue)

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Demonstrates how to use the Quasar-Tiptap component by binding various properties like content, editability, toolbar visibility, and extensions. It also shows how to handle editor updates via the `@update` event, receiving JSON and HTML content.

```vue
<template>
  <quasar-tiptap
    :content="htmlContent"
    :editable="true"
    :showToolbar="true"
    :showBubble="true"
    :scrollable="true"
    pageView="page"
    :extensions="extensions"
    :toolbar="toolbar"
    :tableToolbar="tableToolbar"
    :bubble="bubble"
    @update="onUpdate"
  />
</template>

<script>
import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'

export default {
  components: { QuasarTiptap },
  data() {
    return {
      htmlContent: '<h1>Document Title</h1><p>Start typing...</p>',
      extensions: [...RecommendedExtensions],
      toolbar: ['bold', 'italic', 'separator', 'heading', 'link'],
      tableToolbar: ['bold', 'italic', 'table', 'fore-color', 'back-color'],
      bubble: ['bold', 'italic', 'link']
    }
  },
  methods: {
    onUpdate({ getJSON, getHTML }) {
      // getJSON() returns ProseMirror document structure
      // getHTML() returns HTML string
      console.log('JSON:', JSON.stringify(getJSON()))
      console.log('HTML:', getHTML())
    }
  }
}
</script>
```

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

### Register QuasarTiptapPlugin Globally

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

Registers the `QuasarTiptapPlugin` globally in a Vue application, allowing the `<quasar-tiptap>` component to be used anywhere. It supports language and spellcheck configuration.

```javascript
import Vue from 'vue'
import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap'

// Install the plugin globally
Vue.use(QuasarTiptapPlugin, {
  language: 'en-us',  // Options: 'en-us', 'zh-hans', 'pl', 'pt-br'
  spellcheck: true
})

// Now <quasar-tiptap> component is available globally
// Access plugin instance via this.$quasarTiptapPlugin
```

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

### Configure Quasar-Tiptap Editor Toolbar

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

This Javascript code snippet demonstrates how to configure the toolbar for the Quasar-Tiptap editor. It includes options for adding menus, text formatting, styling, layout controls, structure elements, content blocks, and custom components like buttons and image insertion. The configuration covers the main toolbar, table-specific toolbar, and the bubble menu.

```javascript
import OLinkBtn from 'quasar-tiptap/src/components/buttons/OLinkBtn'

export default {
  data() {
    return {
      options: {
        toolbar: [
          // Add-more menu with embed services
          {
            name: 'add-more',
            type: 'menu',
            options: {
              embed: {
                video: ['youtube', 'bilibili', 'youku', 'qqvideo'],
                map: ['google_map', 'amap', 'baidu_map'],
                design: ['modao', 'lanhu', 'figma', 'canva', 'processon'],
                develop: ['codepen'],
                data: ['google_forms', 'jinshuju'],
                others: ['iframe']
              }
            }
          },
          'separator',

          // Text formatting
          'bold', 'italic',
          {
            name: 'text-format-dropdown',
            type: 'menu',
            options: {
              list: ['underline', 'strike', 'code']
            }
          },
          'separator',

          // Headings and styling
          'heading',        // Heading dropdown (H1-H5)
          'font-family',    // Font family dropdown
          'fore-color',     // Text color picker
          'back-color',     // Background color picker
          'format_clear',   // Clear formatting
          'separator',

          // Layout
          'align-dropdown', // Text alignment dropdown
          'indent-dropdown', // Indent controls
          'line-height',    // Line height dropdown
          'separator',

          // Structure
          'horizontal',     // Horizontal rule
          'list-dropdown',  // List types dropdown
          'separator',

          // Content blocks
          'blockquote',
          'code_block',
          OLinkBtn,         // Custom component
          'photo',          // Image insertion
          'table',          // Table insertion
          'separator',

          // Actions
          'undo', 'redo', 'print'
        ],

        // Table-specific toolbar
        tableToolbar: [
          'add-more', 'separator',
          'bold', 'italic', 'code', 'separator',
          'font-family', 'fore-color', 'back-color', 'format_clear',
          'separator',
          'bullet_list', 'ordered_list', 'todo_list', 'separator',
          'align-dropdown', 'separator',
          'table'
        ],

        // Bubble menu (appears on text selection)
        bubble: [
          'bold', 'italic', 'separator',
          'font-family', 'fore-color', 'back-color', 'separator',
          'link', 'separator',
          'align-group'
        ]
      }
    }
  }
}
```

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

### Render Math to DOM Element with KaTeX API

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/src/css/katex/README.md

This JavaScript code snippet demonstrates how to use the `katex.render` function to render a LaTeX math expression directly into a specified DOM element. The `throwOnError: false` option is used, which causes invalid LaTeX input to be displayed as its source code in red, with the error message available on hover. This method is suitable for client-side rendering.

```js
katex.render("c = \pm\sqrt{a^2 + b^2}", element, {
    throwOnError: false
});
```

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

### Content Handling in Vue with Quasar Tiptap

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

This Vue component demonstrates how to manage editor content using Quasar Tiptap, supporting both HTML string and ProseMirror JSON formats. It includes methods for updating content programmatically, clearing the editor, accessing the editor instance, and retrieving content as HTML or JSON via the `@update` event. Dependencies include 'quasar-tiptap' components and extensions.

```vue
<template>
  <div>
    <quasar-tiptap
      ref="editor"
      :content="initialContent"
      :extensions="extensions"
      @update="onUpdate"
    />
    <div class="output">
      <h4>HTML Output:</h4>
      <pre>{{ htmlOutput }}</pre>
      <h4>JSON Output:</h4>
      <pre>{{ jsonOutput }}</pre>
    </div>
  </div>
</template>

<script>
import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'

export default {
  components: { QuasarTiptap },
  data() {
    return {
      // Content can be HTML string
      initialContent: '<h1>Hello World</h1><p>Start editing...</p>',

      // Or ProseMirror JSON structure
      // initialContent: {
      //   type: 'doc',
      //   content: [
      //     { type: 'heading', attrs: { level: 1 }, content: [{ type: 'text', text: 'Hello World' }] },
      //     { type: 'paragraph', content: [{ type: 'text', text: 'Start editing...' }] }
      //   ]
      // },

      extensions: [...RecommendedExtensions],
      htmlOutput: '',
      jsonOutput: null
    }
  },
  methods: {
    onUpdate({ getJSON, getHTML, state, transaction }) {
      // Get content as HTML string
      this.htmlOutput = getHTML()

      // Get content as ProseMirror JSON
      this.jsonOutput = JSON.stringify(getJSON(), null, 2)
    },

    // Programmatically set content
    setNewContent(content) {
      // Watch on content prop triggers setContent internally
      this.initialContent = content
    },

    // Clear editor content
    clearContent() {
      this.$refs.editor.cleanContent()
    },

    // Access editor instance directly
    getEditorInstance() {
      return this.$refs.editor.editor
    }
  }
}
</script>
```

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

### Define TipTap Extensions in JavaScript

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/README.md

This JavaScript code defines an array named 'TipTapExtensions' which includes a comprehensive list of standard text formatting and block-level extensions provided by the Tiptap editor. These extensions cover basic text styling, code blocks, lists, tables, and media embedding. They serve as foundational building blocks for rich text editor functionalities.

```javascript
export const TipTapExtensions = [
  'Bold',
  'Italic',
  'Strike',
  'Underline',
  'Code',
  'CodeBlock',
  'CodeBlockHighlight',
  'BulletList',
  'OrderedList',
  'ListItem',
  'TodoList',
  'HorizontalRule',
  'Table',
  'Link',
  'Image',
]
```

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

### Define Quasar Tiptap Specific Extensions in JavaScript

Source: https://github.com/donotebase/quasar-tiptap/blob/dev/README.md

This JavaScript code snippet defines an array named 'QuasarTipTapExtensions' which lists custom extensions developed for the Quasar Tiptap integration. These extensions often provide enhanced or specialized features tailored for the Quasar framework, such as document structure, blockquote styling, advanced formatting options like color and font family, and embedding of rich media like iframes and diagrams. They extend the base Tiptap functionality with Quasar-specific components.

```javascript
export const QuasarTipTapExtensions = [
  'OTitle',
  'ODoc',
  'OParagraph',
  'OBlockquote',
  'OTodoItem',
  'OHeading',
  'OAlignment',
  'OLineHeight',
  'OForeColor',
  'OBackColor',
  'OFontFamily',
  'OIframe',
  'ODiagram',
  'OKatexBlock',
  'OKatexInline',
  'OFormatClear',
]
```

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

### Display Quasar-Tiptap Content in Read-Only Mode (Vue)

Source: https://context7.com/donotebase/quasar-tiptap/llms.txt

This Vue.js code snippet shows how to render Quasar-Tiptap content in a read-only mode. By setting `editable`, `showToolbar`, and `showBubble` to `false`, the editor becomes non-interactive, suitable for displaying published articles or previews. It imports the QuasarTiptap component and recommended extensions.

```vue
<template>
  <quasar-tiptap v-bind="options" />
</template>

<script>
import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'
import 'quasar-tiptap/lib/index.css'

export default {
  components: { QuasarTiptap },
  data() {
    return {
      options: {
        content: '
          <h1>Published Article</h1>
          <p>This content is displayed in <strong>read-only</strong> mode.</p>
          <blockquote>No toolbar or editing capabilities are shown.</blockquote>
        ',
        editable: false,
        showToolbar: false,
        showBubble: false,
        extensions: [...RecommendedExtensions]
      }
    }
  }
}
</script>
```

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