Quill Image

This is a set of Quill modules, designed to be used together, that fully integrate with the Quill Delta format to provide resizable, floatable images that cleanly "round trip" between HTML and JSON.

Visit our code sandbox to try it out yourself.

History

This project is a fork and rewrite of quill-blot-formatter, which is itself a fork of an earlier work. This project makes the following improvements:

1. Functionality is decomposed into two packages: @xeger/quill-image-formats which extends Quill's built-in Image blot with new formats; and @xeger/quill-image-actions which contains the UI for applying and removing those formats.
2. Instead of applying align (an existing block format) to images, we define a new float format which allows text to wrap naturally around images.
3. For the "centered image" case, we reuse Quill's existing support for aligning whole lines of text, with the image being part of the line.
4. The packages have been ported from Flow to TypeScript.
5. The packages do not statically import the quill or parchment packages, making them more portable and compatible with a wider range of transpilation environments, including "no transpilation" i.e. direct embedding in an HTML page alongside the Quill distribution bundle.

Getting Started

Note: these packages are pure Node modules and do not have default exports. They are distributed with both a CommonJS bundle and an ES module. The primary export from each package is a Quill module, but additional, nested exports provide access to the implementation details to facilitate customization. Typings are provided for all exports.

With a Plain HTML Page

See the demo page or the code sandbox for a complete, working example.

Whenever you new Quill, make sure to include the formats and the modules in its configuration; otherwise things will not work right.

With Tailwind CSS

Important: It seems that there is a conflict between Quill and Tailwind CSS, which applies display: block to img tag which, prevents the float styles in quill-image-formats from affecting the image positioning.

If your project uses both Tailwind and Quill, you need to add extra CSS rules so that img inside the Quill editor are positioned as inline or inline-block; otherwise, the image alignment features of quill-image-actions will not work.

With a React Project

Add the quill-image packages to your project's dependencies.

1npm install @xeger/quill-image-actions --save-prod
2npm install @xeger/quill-image-formats --save-prod

At startup, import the extension modules and register them with react-quill's wrapper of the Quill framework.

1import { Quill } from 'react-quill';
2import { ImageActions } from '@xeger/quill-image-actions';
3import { ImageFormats } from '@xeger/quill-image-formats';
4
5Quill.register('modules/imageActions', ImageActions);
6Quill.register('modules/imageFormats', ImageFormats);

Whenever you new ReactQuill, make sure to include the formats and the modules in its configuration; otherwise things will not work right.

1import React from 'react';
2import ReactQuill from 'react-quill';
3
4const formats = ['align', 'float'];
5const modules = {
6  imageActions: {},
7  imageFormats: {},
8  toolbar: [
9    [{ 'align': [] }],
10    ['clean']
11  ]
12};
13
14export const Editor(): React.FC = () => (
15  <ReactQuill
16    formats={formats}
17    modules={modules}
18    theme="snow"
19  />
20);