Vue Tiptap Renderer

A Vue component to render JSON content generated by tiptap editor

✔️ Supported features

• Headings
• Blockquote
• Bullet list
• Ordered list
• Line feed
• Images
• Marks
  • Text styles
    • Text align
    • Font family (customisable class name)
  • Bold
  • Italic
  • Underline
  • Strike
• 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">
// Optional : Import CSS Classes or provide your own
// You can also whitelist those tailwind css classes : italic line-through underline font-bold text-center text-justify text-left text-right font-bold
import '@leo91000/vue-tiptap-renderer/styles.css'

import type { JSONContent } from '@leo91000/vue-tiptap-renderer'
import { JsonRenderer } from '@leo91000/vue-tiptap-renderer'

defineProps<{
  article: JSONContent
}>()

// Inject css class for font family text style
const fontFamilyClasses = {
  'Roboto': 'font-roboto'
}
</script>

<template>
  <JsonRenderer
    :content="article" 
    :font-family-classes="fontFamilyClasses" 
  />
</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