@canopie-club/tiptap-extensions NPM

TipTap Extensions

A collection of custom TipTap extensions for rich text editing.

Features

FancyBorder Extension: Adds a configurable border around content blocks with the ability to adjust color, width, and style directly in the editor
Starter Kit Integration: Ready-to-use starter kit with basic formatting controls
Vue Component Renderers: Components for rendering TipTap content
Slash Menu Commands: Command palette support for inserting content blocks

Installation

npm install @canopie-club/tiptap-extensions
# or
yarn add @canopie-club/tiptap-extensions
# or
bun add @canopie-club/tiptap-extensions

Usage

<template>
  <editor-content :editor="editor" />
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Editor, EditorContent } from '@tiptap/vue-3'
import { StarterExtension, FancyBorder, starterMenu, borderMenu } from '@canopie-club/tiptap-extensions'

const editor = ref(null)

onMounted(() => {
  editor.value = new Editor({
    extensions: [
      StarterExtension,
      FancyBorder,
    ],
    content: '<p>Hello World!</p>',
  })
})

onBeforeUnmount(() => {
  editor.value?.destroy()
})
</script>

Extensions

FancyBorder

Adds a customizable border around content with interactive controls for styling.

import { FancyBorder } from '@canopie-club/tiptap-extensions'

// Use in editor
new Editor({
  extensions: [
    // ...other extensions
    FancyBorder.configure({
      borderColor: '#000000',
      borderWidth: 1,
      borderStyle: 'solid',
    }),
  ],
})

Slash Menu Commands

Use the included menu commands to add slash command functionality.

<template>
  <editor-content :editor="editor" />
  <slash-menu
    v-if="editor"
    :editor="editor"
    :items="[...starterMenu, ...borderMenu]"
  />
</template>

<script setup>
import { starterMenu, borderMenu } from '@canopie-club/tiptap-extensions'
// ...other imports
</script>