A hyperscript helper for creating Slate documents with JSX-like syntax.
90
Build a utility function that creates structured document representations from JSX-like syntax. The function should handle text content, support nested structures, and work with cursor positioning for testing purposes.
Your utility should create document structures that:
@generates
/**
* Creates a structured document from JSX-like syntax.
*
* The function should handle automatic text node conversion where:
* - Plain strings are converted to text objects
* - Adjacent strings with identical properties are merged
* - Cursor positions are calculated based on merged text
*
* @param {string} tagName - The element type (e.g., 'element', 'text', 'cursor')
* @param {Object} attributes - Properties to attach to the node
* @param {...any} children - Child nodes or plain strings
* @returns {Object} The structured document node
*/
function createDocument(tagName, attributes, ...children) {
// IMPLEMENTATION HERE
}
module.exports = {
createDocument
};The following test cases should pass:
// Given a plain string in an element
const result = createDocument('element', {}, 'hello world');
// Should convert to text object
assert.deepEqual(result.children, [{ text: 'hello world' }]);@test
// Given multiple adjacent strings
const result = createDocument('element', {}, 'one', ' ', 'two');
// Should merge into single text node
assert.deepEqual(result.children, [{ text: 'one two' }]);@test
// Given strings with a cursor marker between them
const result = createDocument(
'element',
{},
'hello',
createDocument('cursor', {}),
'world'
);
// Should have merged text with cursor at correct offset
assert.equal(result.children[0].text, 'helloworld');
assert.equal(result.selection.anchor.offset, 5);@test
Provides utilities for creating Slate document structures with JSX syntax, including automatic string-to-text conversion and selection handling.
Install with Tessl CLI
npx tessl i tessl/npm-slate-hyperscriptdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10