Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
quill-blot-formatter
Advanced tools
Changelog
[v1.0.5] - 2018-03-28
Readme
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
.
Using yarn
:
yarn add quill-blot-formatter
Using npm
:
npm install --save quill-blot-formatter
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
}
}
});
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>
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.
Each spec should call this.formatter.show(this);
to request activation. See specs/
for the built-in specs.
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.
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',
}
}
}
}
});
Options
.overlay.style
, resize.handleStyle
, etc) set those to null
FAQs
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.
We found that quill-blot-formatter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).