EmailNode

EmailNode extends TipTap’s Node class with an additional renderToVueEmail() method that controls how the node is serialized when exporting to email HTML via composeVueEmail.

Import

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

EmailNode.create

Create a new email-compatible node from scratch.

import { EmailNode } from '@vuemaildev/editor/core';
import { mergeAttributes } from '@tiptap/core';
import { h } from 'vue';

const MyNode = EmailNode.create({
  name: 'myNode',
  group: 'block',
  content: 'inline*',

  parseHTML() {
    return [{ tag: 'div[data-my-node]' }];
  },

  renderHTML({ HTMLAttributes }) {
    return ['div', mergeAttributes(HTMLAttributes, { 'data-my-node': '' }), 0];
  },

  renderToVueEmail({ children, style }) {
    return h('div', { style }, [children]);
  },
});

The config object accepts all standard TipTap Node options plus the renderToVueEmail method, a function that returns VNodes built with h(), using plain elements or Vuemail components.

renderToVueEmail props

Prop	Type	Description
`children`	`VNodeChild`	The serialized child content of this node
`style`	`CSSProperties`	Resolved theme styles for this node (empty object if no theme)
`node`	`JSONContent`	The node, as JSON
`extension`	`EmailNode`	The extension instance, useful for accessing `options`

To render a Vuemail component, pass children as its default slot: h(Section, { style }, () => children).

EmailNode.from

Wrap an existing TipTap node 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 { EmailNode } from '@vuemaildev/editor/core';
import Blockquote from '@tiptap/extension-blockquote';
import { h } from 'vue';

const EmailBlockquote = EmailNode.from(Blockquote, ({ children, style }) => {
  return h(
    'blockquote',
    { style: { ...style, borderLeft: '4px solid #e0e0e0', paddingLeft: '16px' } },
    [children],
  );
});

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

.configure

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

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

const CustomHeading = Heading.configure({ levels: [1, 2] });

.extend

Extend an EmailNode with additional behavior:

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

const CustomParagraph = Paragraph.extend({
  addKeyboardShortcuts() {
    return {
      'Mod-Shift-p': () => this.editor.commands.setParagraph(),
    };
  },
});

You can also override renderToVueEmail when extending:

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

const CustomParagraph = Paragraph.extend({
  renderToVueEmail({ children, style }) {
    return h('p', { style: { ...style, lineHeight: '1.8' } }, [children]);
  },
});

Overview

Features

Advanced

API Reference

Import

EmailNode.create

renderToVueEmail props

EmailNode.from

.configure

.extend

See also

​Import

​EmailNode.create

​renderToVueEmail props

​EmailNode.from

​.configure

​.extend

​See also

Import

EmailNode.create

renderToVueEmail props

EmailNode.from

.configure

.extend

See also