Link extension for tiptap rich text editor providing automatic link detection, paste handling, click behavior, and XSS protection.
88
{
"context": "This criteria evaluates how well the engineer uses @tiptap/extension-link for HTML parsing and rendering in a Tiptap editor. The focus is on proper extension configuration, utilizing the mark's HTML attribute handling, and leveraging the built-in parseHTML and renderHTML capabilities.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Extension Installation",
"description": "Imports Link from '@tiptap/extension-link' and adds it to the editor's extensions array configuration",
"max_score": 15
},
{
"name": "Editor Initialization",
"description": "Creates a Tiptap Editor instance by importing from '@tiptap/core' and configuring it with content and extensions",
"max_score": 15
},
{
"name": "HTML Attribute Configuration",
"description": "Configures the Link extension's HTMLAttributes option to specify default attributes (target, rel, class) that should be applied to rendered links",
"max_score": 20
},
{
"name": "HTML Import",
"description": "Uses the editor's setContent() or content option to import HTML, which automatically triggers the Link mark's parseHTML functionality to extract href, target, rel, and class attributes from <a> tags",
"max_score": 20
},
{
"name": "HTML Export",
"description": "Uses the editor's getHTML() method to export content, which triggers the Link mark's renderHTML functionality to generate properly formatted <a> tags with all preserved attributes",
"max_score": 20
},
{
"name": "Attribute Preservation",
"description": "Demonstrates that link attributes (href, target, rel, class) are correctly preserved through the import-export cycle by testing with links containing various attribute combinations",
"max_score": 10
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-tiptap--extension-linkdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10