Quill ImageResize Module

A module for Quill rich text editor to allow images to be resized.

A fork of kensnyder/quill-image-resize-module with the following changes:

• Updated to work with Quill 2
• Alternative text input added (as of version 1.1.0)
• Toolbar removed since alignment settings were not preserved in the Quill Delta data structure
• The presence of resize handles no longer impacts the underlying selection range so keyboard actions such as copy to clipboard and type to replace still work as expected
• Keyboard shortcuts added to increase image size (+ key), decrease image size (- key), and to focus alt text input (a key)
• Resize handles now appear when image is selected with the keyboard (using shift with the arrow keys)
• Works with touch events in addition to mouse events
• Add minWidth and keyboardSizeDelta options for min image width and keyboard + and - size increment (both in pixels)
• Add altTextPlaceholder and altTextLabel options for alt text input
• Modernized toolchain using vite and TypeScript
• Add Playwright tests

Demo

Preview Site

Installation

npm install @mgreminger/quill-image-resize-module

Usage

Importing and Registering the Module

import Quill from "quill";
import ImageResize from "@mgreminger/quill-image-resize-module";

Quill.register("modules/imageResize", ImageResize);

const quill = new Quill(editorDiv, {
  // ...
  modules: {
    // ...
    imageResize: {
      // See optional "config" below
    },
  },
});

Config

For the default experience, pass an empty object, like so:

var quill = new Quill(editorDiv, {
  // ...
  modules: {
    // ...
    imageResize: {},
  },
});

Functionality is broken down into modules, which can be mixed and matched as you like. For example, this config includes all of the modules (this is the default) and uses the default values for minWidth, keyboardSizeDelta, altTextPlaceholder, and altTextLabel:

import { type ImageResizeOptions } from "@mgreminger/quill-image-resize-module/dist/types";

const options: ImageResizeOptions = {
  modules: ["Resize", "DisplaySize", "AltText"],
  minWidth: 13,
  keyboardSizeDelta: 10,
  altTextPlaceholder: "Image description...",
  altTextLabel: "Alt Text:",
};

const quill = new Quill(editorDiv, {
  // ...
  modules: {
    // ...
    imageResize: options,
  },
});

The default configuration options can be seen in this source file. Each module is described below.

Resize - Resize the image

Adds handles to the image's corners which can be dragged with the mouse to resize the image.

The look and feel can be controlled with options:

var quill = new Quill(editorDiv, {
  // ...
  modules: {
    // ...
    imageResize: {
      // ...
      handleStyles: {
        backgroundColor: "black",
        border: "none",
        color: white,
        // other camelCase styles for the resize handles
      },
    },
  },
});

DisplaySize - Display pixel size

Shows the size of the image in pixels near the bottom right of the image.

The look and feel can be controlled with options:

var quill = new Quill(editorDiv, {
  // ...
  modules: {
    // ...
    imageResize: {
      // ...
      displayStyles: {
        backgroundColor: "black",
        border: "none",
        color: white,
        // other camelCase styles for the size display
      },
    },
  },
});

AltText - Add alt text input

Adds an input field to edit the alternative text for the image.

The look and feel can be controlled with options:

var quill = new Quill(editorDiv, {
  // ...
  modules: {
    // ...
    imageResize: {
      // ...
      altTextContainerStyles: {
        border: "1px solid #ccc",
        padding: "4px 8px",
        borderRadius: "4px",
        // other camelCase styles for the alt text container
      },
      altTextLabelStyles: {
        fontWeight: "bold",
        color: "#333",
        // other camelCase styles for the alt text input label
      },
      altTextTextareaStyles: {
        border: "1px solid #ddd",
        borderRadius: "2px",
        // other camelCase styles for the textarea element
      },
    },
  },
});

BaseModule - Include your own custom module

You can write your own module by extending the BaseModule class, and then including it in the module setup.

For example,

import { Resize, BaseModule } from "quill-image-resize-module";

class MyModule extends BaseModule {
  // See lib/modules/BaseModule.js for documentation on the various lifecycle callbacks
}

var quill = new Quill(editorDiv, {
  // ...
  modules: {
    // ...
    imageResize: {
      modules: [MyModule, Resize, DisplaySize],
      // ...
    },
  },
});