CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-slate-hyperscript

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

90

1.15x
Overview
Eval results
Files

task.mdevals/scenario-3/

Document Structure Factory

Build a helper function that creates test fixtures for Slate editor documents using custom JSX-like tags. The system should support defining element type shortcuts with default properties, overriding those defaults, and providing custom creation logic with proper precedence rules.

Requirements

Your solution should create a test fixture factory that supports:

  1. Custom Element Types: Define shorthand tags for common document elements (paragraph, heading, blockquote, etc.) that automatically include default properties
  2. Property Overrides: Allow any custom element tag to accept additional attributes that merge with or override the default properties
  3. Custom Creation Logic: Support special-case elements that need custom validation or transformation logic beyond simple property assignment
  4. Priority System: Ensure that custom creators take precedence over element shorthands, which take precedence over built-in behavior

Example Usage

Your factory should enable code like this:

// Configure element shortcuts and custom logic
const builder = createDocumentBuilder({
  shortcuts: {
    paragraph: { type: 'paragraph' },
    heading: { type: 'heading', level: 1 }
  },
  creators: {
    link: (tag, attrs, children) => {
      if (!attrs.url) throw new Error('Link requires url attribute');
      return { type: 'link', url: attrs.url, children };
    }
  }
});

// Build editor documents using custom tags
const editor = builder(
  <editor>
    <paragraph>Regular paragraph</paragraph>
    <heading level={2}>Custom level heading</heading>
    <link url="https://example.com">Link text</link>
  </editor>
);

Test Cases

  • Creating an element using a shorthand with default properties produces the correct structure @test
  • Creating an element with additional attributes merges them with shorthand defaults @test
  • A custom creator with validation logic throws errors for invalid input @test
  • When a custom creator and element shorthand both exist for the same tag, the creator takes precedence @test

Implementation

@generates

API

/**
 * Creates a document builder with custom element shortcuts and creation logic
 *
 * @param {Object} config - Configuration object
 * @param {Object} config.shortcuts - Element shorthand definitions (tag name -> default properties)
 * @param {Object} config.creators - Custom creator functions (tag name -> function)
 * @returns {Function} A builder function that processes JSX-like structures into Slate documents
 */
function createDocumentBuilder(config) {
  // IMPLEMENTATION HERE
}

module.exports = { createDocumentBuilder };

Dependencies { .dependencies }

slate-hyperscript { .dependency }

Provides JSX-based creation of Slate document structures with extensible creator system.

Install with Tessl CLI

npx tessl i tessl/npm-slate-hyperscript

tile.json