EmailMark

EmailMark extends TipTap’s Mark class with an additional renderToVueEmail() method that controls how the mark is serialized when exporting to email HTML via composeVueEmail. Marks are used for inline formatting like bold, italic, links, and custom text annotations.

Import

import { EmailMark } from '@vuemaildev/editor/core';

EmailMark.create

Create a new email-compatible mark from scratch.

import { EmailMark } from '@vuemaildev/editor/core';
import { h } from 'vue';

const Highlight = EmailMark.create({
  name: 'highlight',

  parseHTML() {
    return [{ tag: 'mark' }];
  },

  renderHTML({ HTMLAttributes }) {
    return ['mark', HTMLAttributes, 0];
  },

  renderToVueEmail({ children, style }) {
    return h('mark', { style: { ...style, backgroundColor: '#fef08a' } }, [children]);
  },
});

The config object accepts all standard TipTap Mark options plus the renderToVueEmail method, a function that returns VNodes built with h().

renderToVueEmail props

Prop	Type	Description
`children`	`VNodeChild`	The content wrapped by this mark, already rendered
`style`	`CSSProperties`	Resolved theme styles for this mark (empty object if no theme)
`mark`	`{ type, attrs }`	The mark, as JSON
`node`	`JSONContent`	The node that contains this mark, as JSON
`extension`	`EmailMark`	The extension instance, useful for accessing `options`

EmailMark.from

Wrap an existing TipTap mark with email serialization support. This is useful when you want to reuse a community TipTap extension and add email export support without rewriting it.

import { EmailMark } from '@vuemaildev/editor/core';
import Strike from '@tiptap/extension-strike';
import { h } from 'vue';

const EmailStrike = EmailMark.from(Strike, ({ children, style }) => {
  return h('s', { style }, [children]);
});

The second argument is the renderToVueEmail renderer function. It receives the same props as described above.

.configure

Configure options on an EmailMark (same as TipTap’s .configure()):

import { Bold } from '@vuemaildev/editor/extensions';

const CustomBold = Bold.configure({ HTMLAttributes: { class: 'custom-bold' } });

.extend

Extend an EmailMark with additional behavior:

import { Link } from '@vuemaildev/editor/extensions';

const CustomLink = Link.extend({
  addKeyboardShortcuts() {
    return {
      'Mod-k': () => this.editor.commands.toggleLink({ href: '' }),
    };
  },
});

You can also override renderToVueEmail when extending:

import { Link } from '@vuemaildev/editor/extensions';
import { h } from 'vue';

const CustomLink = Link.extend({
  renderToVueEmail({ children, style, mark }) {
    return h(
      'a',
      {
        href: mark.attrs?.href,
        style: { ...style, color: '#0066cc', textDecoration: 'underline' },
      },
      [children],
    );
  },
});

Overview

Features

Advanced

API Reference

Import

EmailMark.create

renderToVueEmail props

EmailMark.from

.configure

.extend

See also

​Import

​EmailMark.create

​renderToVueEmail props

​EmailMark.from

​.configure

​.extend

​See also

Import

EmailMark.create

renderToVueEmail props

EmailMark.from

.configure

.extend

See also