npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@chuyik/quill-blot-formatter

v1.2.0

Published

a module for the Quill text editor to allow blots to be reformatted. Built in formatters: resize and realign. Built in blot support: images and iframe videos.

Downloads

98

Readme

Quill Blot Formatter

A quill module to format document blots. Heavily inspired by quill-image-resize-module. Out of the box supports resizing and realigning images and iframe videos, but can be easily extended using BlotSpec and Action.

Demo

demo

Installation

Using yarn:

yarn add @chuyik/quill-blot-formatter

Using npm:

npm install --save @chuyik/quill-blot-formatter

Usage

As Module

import Quill from 'quill';

// from the index, which exports a lot of useful modules
import BlotFormatter from 'quill-blot-formatter';

// or, from each individual module
import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';

Quill.register('modules/blotFormatter', BlotFormatter);

const quill = new Quill(..., {
  modules: {
    ...
    blotFormatter: {
      // see config options below
    }
  }
});

Script Tag

quill-blot-formatter.min.js is provided which exports the same modules as index.js under the global QuillBlotFormatter.

<script src="<quill>"></script>
<script src="node_modules/quill-blot-formatter/dist/quill-blot-formatter.min.js"></script>
<script>
  Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
  const quill = new Quill(..., {
      modules: {
          ...
          blotFormatter: {
            // see config options below
          }
      }
    }
  });
</script>

BlotSpec

The BlotSpec classes define how BlotFormatter interacts with blots. They take the BlotFormatter as a constructor arg and have the following functions:

init(): void

Called after all specs have been constructed. Use this to bind to quill events to determine when to activate a specific spec.

getActions(): Class<Action>[]

The actions that are allowed on this blot. The default is [AlignAction, ResizeAction, DeleteAction].

getTargetElement(): ?HTMLElement

When the spec is active this should return the element that is to be formatter

getOverlayElement(): ?HTMLElement

When the spec is active this should return the element to display the formatting overlay. This defaults to return getTargetElement() since they will typically be the same element.

setSelection(): void

After the spec is activated this should set the quill selection using setSelection. Defaults to quill.setSelection(null).

onHide(): void

Called when the spec is deactivated by the user clicking away from the blot. Use this to clean up any state in the spec during activation.

Notes

Each spec should call this.formatter.show(this); to request activation. See specs/ for the built-in specs.

Action

The Action classes define the actions available to a blot once its spec is activated. They take the BlotFormatter as a constructor arg and have the following functions:

onCreate(): void

Called immediately after the action is created. Use this to bind quill events and create elements to attach to the overlay.

onUpdate(): void

Called when the formatter has changed something on the blot. Use this to update any internal state.

onDestroy(): void

Called when the formatter is hidden by the user.

See actions/ for the existing actions.

Options

Using quill module options it's easy to disable existing specs, actions, or to override any of the styles provided by this module. For example: if you wanted to remove resizing, support only images, and change the overlay border the following config would work:

import Quill from 'quill';

// from main module
import BlotFormatter, { AlignAction, DeleteAction, ImageSpec } from 'quill-blot-formatter'

// or, from individual modules
import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';
import AlignAction from 'quill-blot-formatter/dist/actions/align/AlignAction';
import DeleteAction from 'quill-blot-formatter/dist/actions/DeleteAction';
import ImageSpec from 'quill-blot-formatter/dist/specs/ImageSpec';

Quill.register('modules/blotFormatter', BlotFormatter);

class CustomImageSpec extends ImageSpec {
    getActions() {
        return [AlignAction, DeleteAction];
    }
}

const quill = new Quill(..., {
  modules: {
    ...
    blotFormatter: {
      specs: [
        CustomImageSpec,
      ],
      overlay: {
        style: {
          border: '2px solid red',
        }
      }
    }
  }
});

Notes

  • For all supported options as well as the default see Options.
  • object properties are merged, but array properties override the defaults.
  • To completely disable styles (overlay.style, resize.handleStyle, etc) set those to null