Quill Integration

WriteTrack includes a first-party Quill module, compatible with Quill v1.3+ and tested against v2.0.

Installation

Install WriteTrack alongside Quill:

npm

npm i writetrack quill

pnpm

pnpm add writetrack quill

yarn

yarn add writetrack quill

bun

bun add writetrack quill

Basic Usage

import Quill from 'quill';
import { WriteTrackModule } from 'writetrack/quill';

// Register the module before creating the editor
Quill.register('modules/writetrack', WriteTrackModule);

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    writetrack: {
      license: 'your-license-key',
    },
  },
});

// Access WriteTrack data when needed
const mod = quill.getModule('writetrack');
const data = mod.tracker.getData();

Configuration

Pass options via the writetrack module config:

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    writetrack: {
      license: 'your-license-key',
      userId: 'user-123',
      contentId: 'document-456',
      metadata: { formName: 'signup' },
      autoStart: true, // default
    },
  },
});

Option	Type	Default	Description
license	string	undefined	WriteTrack license key
userId	string	undefined	User identifier included in metadata
contentId	string	undefined	Content identifier included in metadata
metadata	Record<string, unknown>	undefined	Additional metadata
autoStart	boolean	true	Start tracking when module is created
wasmUrl	string	undefined	URL to WASM binary for analysis
persist	boolean	false	Enable IndexedDB session persistence (requires contentId)

Accessing Data

Retrieve the module via Quill’s module system:

const mod = quill.getModule('writetrack');

// Get the tracker instance
const tracker = mod.tracker;

// Get typing data
const data = tracker.getData();

// Check tracking status
const isTracking = mod.isTracking;

Manual DOM Attachment

If you prefer not to use the module, you can attach WriteTrack directly to Quill’s editable element:

import WriteTrack from 'writetrack';
import Quill from 'quill';

const quill = new Quill('#editor', { theme: 'snow' });

const tracker = new WriteTrack({
  target: quill.root,
  license: 'your-license-key',
});
tracker.start();

Note

The editable element is quill.root — a <div> with contenteditable="true". It’s available synchronously after new Quill().

Cleanup

Quill does not have a built-in destroy lifecycle, so the WriteTrack module’s destroy() method must be called manually before unmounting the editor:

const mod = quill.getModule('writetrack');
mod.destroy();

TypeScript

import type { WriteTrackModuleOptions } from 'writetrack/quill';