quill-audio-embed

v2.1.0

Published

2 months ago

Embed and play audio in quill editor.

Downloads

0High
0Medium
0Low

batman4496

quill quilljs audio module embed

Introduction

A Quill module for embedding audio files that you can play! You can also validate and upload files!

How to Use

Install the package: npm install quill-audio-embed

Script

You can import the script tag from the node_modules/quill-audio-embed/dist/quill-audio-embed.umd.cjs

<head>
  ...
    <script type="text/javascript" src="/dist/umd/index.umd.cjs"></script>
  ...
</head>


<script>
  // Pass in the Quill constructor
  QuillAudioEmbed.default.setQuillConstructor(Quill);

  // Register the module
  Quill.register('modules/audioEmbed', QuillAudioEmbed.default);

  const quill = new Quill('#editor', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block'],
      ],
      audioEmbed: {
        alignment: 'left' // Alignment of the play button
      }
    },
    placeholder: 'Compose an epic...',
    theme: 'snow',
  });

quill.on('text-change', () => {
  console.log(quill.getSemanticHTML());
});
</script>

Module

You can also import it as a module

import Quill from "quill";
import QuilAudioEmbed, { setQuillConstructor } from "quill-audio-embed";

setQuillConstructor(Quill);
Quill.register('modules/audioEmbed', QuillAudioEmbed);
  const quill = new Quill('#editor', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block'],
      ],
      audioEmbed: {
        alignment: 'left' // Alignment of the play button
      }
    },
    placeholder: 'Compose an epic...',
    theme: 'snow',
});

ReactQuill

import React from 'react';
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import QuillAudioEmbed from "quill-audio-embed";

QuillAudioEmbed.setQuillConstructor(Quill);
Quill.register('modules/audioEmbed', QuillAudioEmbed);

function QuillEditor() {

  return (
    <ReactQuill theme="snow" modules={{
      audioEmbed: {
        alignment: 'left' // Setting default alignment
      }
    }}/>
  );
}

export default QuillEditor;

CommonJs

The common js library is located inside quill-audio-embed/dist/lib.

File Uploading

You can also upload files right from the module and embed them into quill editor. You can read all the types here.

onLoad: Executed once the quill-audio-embed is successfully rendered into the browser.

validate: Executed after a file upload and before onUpload. Here you can write you validation logic. You must return a boolean for success (true) and failure (false) case. You can access all the input fields of the quill-audio-embed using the AudioInputs or through the IQuillAudioEmbed object.


const quill = new Quill('#editor', {
    modules: {
      toolbar: [ ... ],
      audioEmbed: {
        validate: (inputs, audioEmbed) => {
          // Check if file is larger than 5 mb
          const file = inputs.file.files[0];

          if ((file / (1024 * 1024)) > 5) {
            // Write your own error message displaying logic
            document.querySelector('#upload-error').innerHTML = "An error occured!";
            return false;
          }

          if (!file.type.split('/').includes('image')) {
            // Write your own error message displaying logic
            document.querySelector('#upload-error').innerHTML = "An error occured!";
            return false;
          }


          return true;
        },
        },
        alignment: 'left' // Default alignment of the play button
      }
    },
    placeholder: 'Compose an epic...',
    theme: 'snow',
  });

onUpload: Executed after successful validation, here you can write your logic for uploading files. The function must return an AudioBlotValue in case of a successful run or a false in case of failure. In the return value is AudioBlotValue then, it will automatically be injected at the selection area or at the top of the quill content.

const quill = new Quill('#editor', {
  modules: {
    toolbar: [ ... ],
    audioEmbed: {
      validate: (inputs, audioEmbed) => {
        ...
        return true;
      },
      onUpload: async (inputs, audioEmbed) => {
        const file = inputs.file.files[0];  // Getting file from the inputs

        // Uploading file to an api
        const res = await fetch('/api/file', {
          method: 'POST',
          body: file
        });
        const json = await res.json();

        if (!json.sucesss) return false;
        
        return {
          label: json.data.name,
          url: json.data.url,
          alignment: 'right'
        }
      },
      alignment: 'left' // Default alignment of the play button
    }
  },
  placeholder: 'Compose an epic...',
  theme: 'snow',
});

onDelete: Executed when you try to delete an audio embed. You can add your own deletion logic for uploaded files. Return true in case of success and the quill-audio-embed will automatically remove the embed from the editor. Return false in case of failure and embed will not be removed.



const quill = new Quill('#editor', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block'],
      ],
      audioEmbed: {
        onUpload: async (inputs, audioEmbed) => {
          // File uploading
        },
        onDelete: async (data, audioEmbed) => {

          // Doing a delete request to external api
          const res = await fetch(`https://www.example.com/api/file?id=${data.id}`, {
            method: 'DELETE',
          });

          const json = await res.json();

          if (json.success) {
            // File successfully deleted
            return true;
          }

          // Failed to delete the file
          return false;
        },
        alignment: 'left' // Default alignment of the play button
      }
    },
    placeholder: 'Compose an epic...',
    theme: 'snow',
  });

Types


interface IQuillAudioEmbed  {
  quill: any;
  options: Options;
  audioButton: HTMLDivElement;
  container: HTMLDivElement;
  popup: HTMLDivElement;
  inputs: AudioInputs;
  open: boolean = false;
}

type Options = {
  onLoad?: (audioEmbed: IQuillAudioEmbed) => any,
  validate?: (inputs: AudioInputs, audioEmbed: IQuillAudioEmbed) => Promise<boolean>,
  onUpload?: (inputs: AudioInputs, audioEmbed: IQuillAudioEmbed) => Promise<AudioBlotValue|false>,
  onDelete?: (data: AudioBlotValue, audioEmbed: IQuillAudioEmbed) => Promise<boolean>,
  alignment?: 'center' | 'left' | 'right'
};

type AudioInputs = {
  label: HTMLInputElement, 
  url: HTMLInputElement,
  alignment: HTMLSelectElement,
  file: HTMLInputElement
}

type AudioBlotValue = { id?: string, url: string, label?: string, alignment?: string };

Contribute

Contribution can help a long way ✌️

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme