Fresh-tap NPM | npm.io

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

Name	Description	Default	Example
initialValue	The initial value to populate the editor with.	`''`	`'<p>test!</p>'`
previewUrl	The url to populate the 'preview' content into.	`''`	`'https://yoursite.com/page-where-the-content-will-live'`
previewSelector	What section of the preview url should be replaced by the content.	`''`	`'.css-selector-here'`
previewWrapperElement	The element to wrap your content in.	`null`	`{ element: 'div', attributes: { class: 'your-class' } }`
uploadImage	Your upload image function.	`async (file) => await blobToDataUrl(file)`	`any async function that takes an image Blob and returns the string of where the image is saved.`
save	Your save function.	`null`	`any function that takes a value and saves it to your database.`
keepEmptyParagraphLineBreaks	Boolean to keep empty paragraph line breaks.	`false`	`true`
editorStyles	Styles to apply to the editor. Styles should be prefixed with the class `.FreshTapEditor .ProseMirror`	`''`	`'.FreshTapEditor .ProseMirror { display: grid; grid-template-columns: 100%; gap: 20px; }'`