fresh-tap

fresh-tap

Fresh Tap is a framework-agnostic Custom Element WYSIWYG Editor build on top of Tiptap and Vue.

Installation

npm i fresh-tap

Usage

HTML:

<head>
  ...
  <!-- must make link public first -->
  <link rel="stylesheet" href="/fresh-tap/dist/style.css" />
  ...
</head>

<body>
<div id="fresh-tap-wrapper"></div>

<script type="module">
import { FreshTap } from 'fresh-tap'

const freshTap = FreshTap({
  initialValue: 'my initial value here',
  previewUrl: 'https://your-preview-url.com',
  previewSelector: '.selector',
  previewWrapperElement: {
    element: 'div',
    attributes: {
      class: 'wrapper-class'
    }
  },
  keepEmptyParagraphLineBreaks: true,
  editorStyles: '.FreshTapEditor .ProseMirror { display: grid; grid-template-columns: 100%; gap: 20px; }'
})

freshTap.addEventListener('value-updated', (e) => {
  console.log(e.detail)
})

document.getElementById('fresh-tap-wrapper')
  ?.appendChild?.(freshTap)
</script>
</body>

Vue:

<template>
  <div>
    <div ref="wysiwyg" />
  </div>
</template>

<script>
import { FreshTap } from 'fresh-tap'
import 'fresh-tap/dist/style.css'

export default {
  data () {
    return {
      freshTap: null
    }
  },
  
  mounted () {
    this.freshTap = FreshTap({
      initialValue: 'my initial value here',
      previewUrl: 'https://your-preview-url.com',
      previewSelector: '.selector',
      previewWrapperElement: {
        element: 'div',
        attributes: {
          class: 'wrapper-class'
        }
      },
      keepEmptyParagraphLineBreaks: true,
      editorStyles: '.FreshTapEditor .ProseMirror { display: grid; grid-template-columns: 100%; gap: 20px; }'
    })
    
    this.freshTap.addEventListener('value-updated', (e) => {
      // do something with the updated value here...
      console.log(e.detail)
    })
    
    this.$refs.wysiwyg.appendChild(this.freshTap)
  }
}
</script>

Props

** All props are optional.