@leo91000/vue-tiptap-renderer

Vue Tiptap Renderer

A Vue component to render JSON content generated by tiptap editor

✔️ Supported features

• [x] Headings
• [x] Blockquote
• [x] Bullet list
• [x] Ordered list
• [x] Line feed
• [x] Images
• [x] Marks
  • [x] Text styles
    • [x] Text align
    • [x] Font family (customisable class name)
  • [x] Bold
  • [x] Italic
  • [x] Underline
  • [x] Strike
• [x] Links

If any feature is missing a console.warn will pop. Do not hesitate to start a new issue to request missing feature.

Usage

npm i @leo91000/vue-tiptap-renderer
# or
yarn add @leo91000/vue-tiptap-renderer
# or
pnpm add @leo91000/vue-tiptap-renderer

<script setup lang="ts">
import type { JSONContent } from '@leo91000/vue-tiptap-renderer'
import { JsonRenderer } from '@leo91000/vue-tiptap-renderer'

defineProps<{
  article: JSONContent
}>()
</script>

<template>
  <JsonRenderer
    :content="article"
  />
</template>

Utils

This library also features utility functions :

• getContentFirstImage: Return the first image found in the JSON or null
• getContentWordCount: Return the total word count of the JSON content