Slate Integration

WriteTrack includes a first-party Slate integration, compatible with Slate v0.94+.

Installation

Install WriteTrack alongside Slate:

npm

npm i writetrack slate slate-react

pnpm

pnpm add writetrack slate slate-react

yarn

yarn add writetrack slate slate-react

bun

bun add writetrack slate slate-react

Basic Usage

import { useEffect, useMemo, useRef } from 'react';
import { createEditor } from 'slate';
import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
import { createWriteTrackSlate } from 'writetrack/slate';

function Editor() {
  const editor = useMemo(() => withReact(createEditor()), []);
  const handleRef = useRef(null);

  useEffect(() => {
    const domNode = ReactEditor.toDOMNode(editor, editor);
    const handle = createWriteTrackSlate(editor, domNode, {
      license: 'your-license-key',
    });
    handleRef.current = handle;
    return () => handle.destroy();
  }, [editor]);

  return (
    <Slate editor={editor} initialValue={initialValue}>
      <Editable />
    </Slate>
  );
}

Configuration

Pass options as the third argument:

const handle = createWriteTrackSlate(editor, domNode, {
  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 created
wasmUrl	string	undefined	URL to WASM binary for analysis
persist	boolean	false	Enable IndexedDB session persistence (requires contentId)

Accessing Data

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

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

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

Cleanup

Slate does not have a built-in destroy lifecycle, so destroy() must be called manually — typically in a React useEffect cleanup:

useEffect(() => {
  const handle = createWriteTrackSlate(editor, domNode, options);
  return () => handle.destroy();
}, [editor]);

TypeScript

import type {
  WriteTrackSlateOptions,
  WriteTrackSlateHandle,
} from 'writetrack/slate';