Lexical Integration

WriteTrack includes a first-party Lexical integration, compatible with Lexical v0.12+.

Installation

Install WriteTrack alongside Lexical:

npm

npm i writetrack lexical

pnpm

pnpm add writetrack lexical

yarn

yarn add writetrack lexical

bun

bun add writetrack lexical

Basic Usage

import { createEditor, $getSelection } from 'lexical';
import { createWriteTrackLexical } from 'writetrack/lexical';

const editor = createEditor({ namespace: 'MyEditor', onError: console.error });
editor.setRootElement(document.getElementById('editor'));

const handle = createWriteTrackLexical(editor, $getSelection, {
  license: 'your-license-key',
});

// Access WriteTrack data when needed
const data = handle.tracker?.getData();

Configuration

Pass $getSelection as the second argument and options as the third:

const handle = createWriteTrackLexical(editor, $getSelection, {
  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 root element is available
wasmUrl	string	undefined	URL to WASM binary for analysis
persist	boolean	false	Enable IndexedDB session persistence (requires contentId)

Accessing Data

// Get the tracker instance (null until root element is available)
const tracker = handle.tracker;

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

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

Manual DOM Attachment

If you prefer not to use the integration, you can attach WriteTrack directly to the root element:

import WriteTrack from 'writetrack';
import { createEditor } from 'lexical';

const editor = createEditor({ namespace: 'MyEditor', onError: console.error });
const rootElement = document.getElementById('editor')!;
editor.setRootElement(rootElement);

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

Cleanup

Call destroy() to stop tracking and release resources:

handle.destroy();

The integration also automatically cleans up if the root element is removed from the editor.

TypeScript

import type {
  WriteTrackLexicalOptions,
  WriteTrackLexicalHandle,
} from 'writetrack/lexical';