ProseMirror Integration

WriteTrack includes a first-party ProseMirror plugin, compatible with prosemirror-state v1.0+ and tested against v1.4.

Installation

Install WriteTrack alongside your ProseMirror packages:

npm

npm i writetrack prosemirror-state prosemirror-view prosemirror-model

pnpm

pnpm add writetrack prosemirror-state prosemirror-view prosemirror-model

yarn

yarn add writetrack prosemirror-state prosemirror-view prosemirror-model

bun

bun add writetrack prosemirror-state prosemirror-view prosemirror-model

Basic Usage

import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { schema } from 'prosemirror-schema-basic';
import { WriteTrackPlugin, WriteTrackPluginKey } from 'writetrack/prosemirror';

const state = EditorState.create({
  schema,
  plugins: [
    WriteTrackPlugin({
      license: 'your-license-key',
    }),
  ],
});

const view = new EditorView(document.querySelector('#editor'), { state });

// Access WriteTrack data when needed
const pluginState = WriteTrackPluginKey.getState(view.state);
const data = pluginState.tracker.getData();

Configuration

Pass options to the WriteTrackPlugin() function:

WriteTrackPlugin({
  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 view is created
wasmUrl	string	undefined	URL to WASM binary for analysis
persist	boolean	false	Enable IndexedDB session persistence (requires contentId)

Accessing Data

Use the WriteTrackPluginKey to read plugin state from the editor:

import { WriteTrackPluginKey } from 'writetrack/prosemirror';

const pluginState = WriteTrackPluginKey.getState(view.state);

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

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

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

Manual DOM Attachment

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

import WriteTrack from 'writetrack';
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { schema } from 'prosemirror-schema-basic';

const state = EditorState.create({ schema });
const view = new EditorView(document.querySelector('#editor'), { state });

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

Note

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

Cleanup

The plugin automatically stops tracking when the view is destroyed:

view.destroy(); // WriteTrack is stopped automatically

TypeScript

import type {
  WriteTrackPluginOptions,
  WriteTrackPluginState,
} from 'writetrack/prosemirror';