How to pass and use custom options, like Headings? #920

bgrand-ch · 2020-12-22T08:38:28Z

bgrand-ch
Dec 22, 2020

I would like to pass some options via object, like Headings node extension.

Test.vue:

<template>
  <div>
    <!-- [...] -->
    <editor-menu-bar
      class="q-gutter-sm"
      :editor="editor"
      v-slot="{ commands, isActive }"
    >
      <q-btn
        flat
        dense
        color="primary"
        label="Section col"
        :class="{ 'is-active': isActive.section({ flexDirection: 'row' }) }"
        @click="commands.section({ flexDirection: 'row' })"
      />
    </editor-menu-bar>
    <!-- [...] -->
  </div>
</template>

import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap'
import { Heading } from 'tiptap-extensions'
import Section from './extensions/blocks/section'

// [...]

export default {
  // [...]
  mounted () {
    this.editor = new Editor({
      autoFocus: true,
      extensions: [
        new Heading({ levels: [1, 2, 3] }),
        new Section({ flexDirections: ['row', 'column'] })
      ]
    })

    console.log('mounted() -> this.editor', this.editor)
  }
  // [...]
}

Section.js:

import { Node } from 'tiptap'
import { toggleWrap } from 'tiptap-commands'

export default class SectionTag extends Node {
  get name () {
    return 'section'
  }

  get defaultOptions () {
    return {
      flexDirections: ['row', 'column']
    }
  }

  get schema () {
    return {
      attrs: {
        flexDirection: {
          default: 'column'
        }
      },
      content: 'block*',
      group: 'block',
      defining: true,
      draggable: false,
      parseDOM: [{ tag: 'section' }],
      toDOM: node => ['section', {
        style: `display: flex; flex-flow: ${node.attrs.flexDirection} wrap; justify-content: space-around;`
      }, 0]
    }
  }

  commands ({ type }) {
    return () => toggleWrap(type)
  }
}