npmpackage.info

Gathering detailed insights and metrics for quill-blot-formatter

Gathering detailed insights and metrics for quill-blot-formatter

quill-blot-formatter - 1.0.5 | npmpackage.info

quill-blot-formatter

A module for Quill that allows editor elements to be resized, repositioned, etc.

1.0.5

142

Apache-2.0

JavaScript

Installations

npm install quill-blot-formatter

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Pull Requests

Open

2

Total

7

Closed

4

Merged

1

Issues

Open

29

Total

39

Closed

10

Releases

Unable to fetch releases

Languages

2

JavaScript

HTML

JavaScript (94.9%)

HTML (5.1%)

Developer

Fandom-OSS

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

Apache-2.0 License

142 Stars

103 Commits

53 Forks

1 Branches

2 Contributors

Updated on Jul 06, 2025

Maintainers

1

View All 2 Contributors

Package Meta Information

Latest Version

1.0.5

Package Id

quill-blot-formatter@1.0.5

Size

23.44 kB

Published on

Mar 28, 2018

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

Peer Dependencies

1

Dev Dependencies

16

babel-cli babel-eslint babel-plugin-transform-class-properties babel-preset-env babel-preset-flow copyfiles eslint eslint-config-airbnb-base eslint-plugin-flowtype eslint-plugin-import flow-bin flow-copy-source npm-run-all quill rimraf webpack

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

Installation

Using yarn:

yarn add quill-blot-formatter

Using npm:

npm install --save quill-blot-formatter

Usage

As Module

1import Quill from 'quill';
2
3// from the index, which exports a lot of useful modules
4import BlotFormatter from 'quill-blot-formatter';
5
6// or, from each individual module
7import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';
8
9Quill.register('modules/blotFormatter', BlotFormatter);
10
11const quill = new Quill(..., {
12  modules: {
13    ...
14    blotFormatter: {
15      // see config options below
16    }
17  }
18});

Script Tag

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

1<script src="<quill>"></script>
2<script src="node_modules/quill-blot-formatter/dist/quill-blot-formatter.min.js"></script>
3<script>
4  Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
5  const quill = new Quill(..., {
6      modules: {
7          ...
8          blotFormatter: {
9            // see config options below
10          }
11      }
12    }
13  });
14</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:

1import Quill from 'quill';
2
3// from main module
4import BlotFormatter, { AlignAction, DeleteAction, ImageSpec } from 'quill-blot-formatter'
5
6// or, from individual modules
7import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';
8import AlignAction from 'quill-blot-formatter/dist/actions/align/AlignAction';
9import DeleteAction from 'quill-blot-formatter/dist/actions/DeleteAction';
10import ImageSpec from 'quill-blot-formatter/dist/specs/ImageSpec';
11
12Quill.register('modules/blotFormatter', BlotFormatter);
13
14class CustomImageSpec extends ImageSpec {
15    getActions() {
16        return [AlignAction, DeleteAction];
17    }
18}
19
20const quill = new Quill(..., {
21  modules: {
22    ...
23    blotFormatter: {
24      specs: [
25        CustomImageSpec,
26      ],
27      overlay: {
28        style: {
29          border: '2px solid red',
30        }
31      }
32    }
33  }
34});

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

Empty State

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

67 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-588m-9qg5-35pq
Warn: Project is vulnerable to: GHSA-4943-9vgg-gr5r
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.