quasar-tiptap

Since quasar-tiptap is built on top of the Quasar Framework and Tiptap, you must install several packages.

Required Dependencies

Install tiptap and tiptap-extensions:

yarn add tiptap
yarn add tiptap-extensions

Optional Dependencies

If you want to enable Diagrams or LaTeX Math formulas, you must also install these:

yarn add vue-codemirror
yarn add mermaid
yarn add katex

Install the package

yarn add quasar-tiptap

You can register quasar-tiptap globally in your Vue application using QuasarTiptapPlugin. This allows you to configure global settings like language and spellcheck.

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

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

To ensure proper icon rendering and popup behavior, configure your quasar.conf.js to include the mdi-v5 icon set and the ClosePopup directive.

extras: [
  'mdi-v5'
],
framework: {
  directives: [
    'ClosePopup'
  ]
}

To use quasar-tiptap in your Vue application, register the QuasarTiptapPlugin using Vue.use(). You can pass an options object to configure global settings like spellcheck and language.

Available options:

• spellcheck (boolean): Enables or disables spellcheck. Defaults to true if not explicitly provided or set to null.
• language (string): Sets the global language for the plugin via Vue.prototype.$o.lang.set().

Upon installation, the plugin:

1. Registers the quasar-tiptap component globally.
2. Attaches the plugin instance to Vue.prototype.$quasarTiptapPlugin.

import Vue from 'vue';
import { QuasarTiptapPlugin } from 'quasar-tiptap';

Vue.use(QuasarTiptapPlugin, {
  spellcheck: true,
  language: 'en'
});

Use katex.renderToString(math, options) to generate an HTML string of the rendered math. This is particularly useful for server-side rendering (SSR) where you want to pre-render expressions in Node.js and send them as plain HTML to the client.

Note: When using this method, ensure the KaTeX CSS and font files are included in the client-side environment to display the math correctly.

// Generates an HTML string (e.g., '<span class="katex">...</span>')
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
    throwOnError: false
});

The quasar-tiptap component accepts the following properties via v-bind:

Use katex.render(math, element, options) to render a TeX expression directly into a specific DOM element.

Options:

• throwOnError: If set to false, invalid TeX inputs will be rendered as the raw TeX source code in red, with the error message provided as hover text.

// Renders math into a specific DOM element
katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, {
    throwOnError: false
});

Extensions are categorized into Tiptap official extensions and Quasar-specific extensions. You can use RecommendedExtensions to include both sets.

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

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

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

Use createIndentCommand(delta) to generate a ProseMirror command that adjusts the indentation level of selected nodes. The delta parameter is an integer representing the change in indentation (e.g., 1 to increase indent, -1 to decrease).

Supported node types for indentation include:

• paragraph
• heading
• blockquote

Indentation is clamped between a minimum of 0 and a maximum of 7. List nodes are excluded from this command.

import { createIndentCommand } from './src/utils/indent.js';

// To increase indentation by 1 level
const indentCommand = createIndentCommand(1);

// Usage within a ProseMirror dispatch loop
// dispatch(indentCommand(state, dispatch));