CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-typography

tessl install tessl/npm-tiptap--extension-typography@3.4.0

Typography extension for Tiptap that automatically converts common text input patterns into proper typographic characters.

Agent Success

Agent success rate when using this tile

73%

Improvement

Agent success rate improvement when using this tile compared to baseline

0.86x

Baseline

Agent success rate without this tile

85%

rubric.jsonevals/scenario-6/

{
  "context": "This evaluation assesses how effectively the engineer uses the Tiptap rich text editor package to implement text formatting capabilities. The focus is entirely on proper usage of Tiptap's Editor, formatting extensions (Bold, Italic, Strike, Code, Underline), command system, and state checking APIs.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Editor Initialization",
      "description": "Creates a Tiptap Editor instance using the Editor class from @tiptap/core with proper configuration including extensions array. The editor should be configured with content and include the five formatting extensions: Bold, Italic, Strike, Code, and Underline (from @tiptap/extension-bold, @tiptap/extension-italic, @tiptap/extension-strike, @tiptap/extension-code, @tiptap/extension-underline, or via StarterKit).",
      "max_score": 25
    },
    {
      "name": "Bold Toggle Implementation",
      "description": "Uses Tiptap's command system to toggle bold formatting by calling editor.chain().focus().toggleBold().run() or editor.commands.toggleBold(). Should not manually manipulate DOM or state.",
      "max_score": 10
    },
    {
      "name": "Italic Toggle Implementation",
      "description": "Uses Tiptap's command system to toggle italic formatting by calling editor.chain().focus().toggleItalic().run() or editor.commands.toggleItalic(). Should not manually manipulate DOM or state.",
      "max_score": 10
    },
    {
      "name": "Strike Toggle Implementation",
      "description": "Uses Tiptap's command system to toggle strikethrough formatting by calling editor.chain().focus().toggleStrike().run() or editor.commands.toggleStrike(). Should not manually manipulate DOM or state.",
      "max_score": 10
    },
    {
      "name": "Code Toggle Implementation",
      "description": "Uses Tiptap's command system to toggle inline code formatting by calling editor.chain().focus().toggleCode().run() or editor.commands.toggleCode(). Should not manually manipulate DOM or state.",
      "max_score": 10
    },
    {
      "name": "Underline Toggle Implementation",
      "description": "Uses Tiptap's command system to toggle underline formatting by calling editor.chain().focus().toggleUnderline().run() or editor.commands.toggleUnderline(). Should not manually manipulate DOM or state.",
      "max_score": 10
    },
    {
      "name": "Text Selection",
      "description": "Implements text selection using Tiptap's setTextSelection command: editor.commands.setTextSelection({ from, to }) or editor.chain().focus().setTextSelection({ from, to }).run(). Should use Tiptap's position-based selection API.",
      "max_score": 10
    },
    {
      "name": "Active Format Checking",
      "description": "Checks if a format is currently active using Tiptap's isActive method: editor.isActive('bold'), editor.isActive('italic'), editor.isActive('strike'), editor.isActive('code'), or editor.isActive('underline'). Should not check DOM or manually track state.",
      "max_score": 10
    },
    {
      "name": "HTML Export",
      "description": "Exports editor content as HTML using Tiptap's getHTML method: editor.getHTML(). Should use the built-in serialization method rather than manual DOM extraction or custom serialization.",
      "max_score": 5
    }
  ]
}

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-typography@3.4.x
tile.json