Skip to content

Latest commit

 

History

History
78 lines (61 loc) · 2.31 KB

README.md

File metadata and controls

78 lines (61 loc) · 2.31 KB
Raw

npm version npm downloads Github Actions Codecov bundle

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">
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