tessl/npm-slate-hyperscript

A hyperscript helper for creating Slate documents with JSX-like syntax.

1.15x

Overview

Eval results

Files

Selection Test Fixture Generator

Name: tessl/npm-slate-hyperscript
Rating: 0.9 (1 reviews)
Author: tessl

Create a test fixture generator that creates Slate editor states with precise selections using explicit path and offset specifications.

Requirements

Build a function createSelectionFixture that takes a document structure and selection parameters, returning a complete Slate editor state with the specified selection applied.

The function should:

Accept a document structure (array of elements) and selection configuration
Create an editor with the document structure
Apply a selection using explicit path and offset coordinates
Support both collapsed selections (cursor) and range selections (anchor + focus)
Return the complete editor state with selection applied

Selection Configuration

The selection configuration should accept:

anchor: Object with path (array of numbers) and offset (number)
focus: Object with path (array of numbers) and offset (number)

For collapsed selections (cursor), anchor and focus should have identical values.

Example Inputs and Outputs

Example 1: Collapsed selection (cursor) in middle of text

const doc = [
  { type: 'paragraph', children: [{ text: 'Hello world' }] }
];

const selection = {
  anchor: { path: [0, 0], offset: 5 },
  focus: { path: [0, 0], offset: 5 }
};

const result = createSelectionFixture(doc, selection);
// Should create editor with cursor at position 5 (after "Hello")

Example 2: Range selection across multiple elements

const doc = [
  { type: 'paragraph', children: [{ text: 'First paragraph' }] },
  { type: 'paragraph', children: [{ text: 'Second paragraph' }] }
];

const selection = {
  anchor: { path: [0, 0], offset: 6 },
  focus: { path: [1, 0], offset: 6 }
};

const result = createSelectionFixture(doc, selection);
// Should create editor with selection from "First |paragraph" to "Second| paragraph"

Example 3: Selection within nested structure

const doc = [
  {
    type: 'blockquote',
    children: [
      { type: 'paragraph', children: [{ text: 'Nested content' }] }
    ]
  }
];

const selection = {
  anchor: { path: [0, 0, 0], offset: 0 },
  focus: { path: [0, 0, 0], offset: 6 }
};

const result = createSelectionFixture(doc, selection);
// Should create editor with "Nested" selected in nested structure

Implementation

@generates

API

/**
 * Creates a Slate editor fixture with explicit selection applied
 *
 * @param {Array} document - Array of element nodes representing document structure
 * @param {Object} selection - Selection configuration
 * @param {Object} selection.anchor - Anchor point with path and offset
 * @param {Array<number>} selection.anchor.path - Path to anchor text node
 * @param {number} selection.anchor.offset - Character offset within anchor text
 * @param {Object} selection.focus - Focus point with path and offset
 * @param {Array<number>} selection.focus.path - Path to focus text node
 * @param {number} selection.focus.offset - Character offset within focus text
 * @returns {Object} Slate editor state with selection applied
 */
function createSelectionFixture(document, selection) {
  // Implementation here
}

module.exports = { createSelectionFixture };

Test Cases

Creates collapsed selection at start of text @test
Creates collapsed selection at end of text @test
Creates range selection within single element @test
Creates range selection across multiple elements @test
Creates selection in nested document structure @test

Dependencies { .dependencies }

slate-hyperscript { .dependency }

Provides hyperscript helper for creating Slate documents with explicit selections.

Install with Tessl CLI

npx tessl i tessl/npm-slate-hyperscript