A hyperscript helper for creating Slate documents with JSX-like syntax.
90
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.
Your solution should create a test fixture factory that supports:
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>
);@generates
/**
* 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 };Provides JSX-based creation of Slate document structures with extensible creator system.
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