CKEditor 5 Integration

WriteTrack includes a first-party CKEditor 5 plugin, compatible with the unified ckeditor5 package v42+ and tested against v47.5.

Installation

Install WriteTrack alongside CKEditor 5:

npm i writetrack ckeditor5

pnpm add writetrack ckeditor5

yarn add writetrack ckeditor5

bun add writetrack ckeditor5

Basic Usage

import { ClassicEditor, Essentials, Paragraph, Bold, Italic } from 'ckeditor5';
import { WriteTrackPlugin } from 'writetrack/ckeditor';

ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [Essentials, Paragraph, Bold, Italic, WriteTrackPlugin],
  writetrack: {
    license: 'your-license-key',
  },
}).then((editor) => {
  // Access WriteTrack data when needed
  const plugin = editor.plugins.get('WriteTrack');
  const data = plugin.tracker.getData();
});

Configuration

Pass options via the writetrack config key:

ClassicEditor.create(element, {
  plugins: [, /* ... */ WriteTrackPlugin],
  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 editor is ready
`wasmUrl`	`string`	`undefined`	URL to WASM binary for analysis
`persist`	`boolean`	`false`	Enable IndexedDB session persistence (requires `contentId`)

Accessing Data

The plugin is retrieved via CKEditor’s plugin system:

const plugin = editor.plugins.get('WriteTrack');

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

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

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

Manual DOM Attachment

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

import WriteTrack from 'writetrack';
import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';

ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [Essentials, Paragraph],
}).then((editor) => {
  // Wait for UI to be ready, then attach
  editor.ui.once('ready', () => {
    const element = editor.ui.getEditableElement();
    const tracker = new WriteTrack({
      target: element,
      license: 'your-license-key',
    });
    tracker.start();
  });
});

Cleanup

The plugin automatically stops tracking and cleans up when the editor is destroyed:

await editor.destroy(); // WriteTrack is stopped automatically

TypeScript

import type { WriteTrackPluginOptions } from 'writetrack/ckeditor';