{
  "context": "This criteria evaluates how well the engineer uses Tiptap's custom mark view rendering capabilities to create an interactive highlight mark with a clickable color badge. The evaluation focuses on proper use of Tiptap's mark extension API, custom mark rendering with React, and mark attribute management.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Mark extension creation",
      "description": "Uses Mark.create() to define a custom mark extension with the name 'interactiveHighlight' or similar",
      "max_score": 10
    },
    {
      "name": "Color attribute definition",
      "description": "Defines a 'color' attribute in the mark's addAttributes() method that stores the highlight color value",
      "max_score": 10
    },
    {
      "name": "HTML parsing rules",
      "description": "Implements parseHTML() to recognize highlighted spans with color information from HTML",
      "max_score": 8
    },
    {
      "name": "HTML rendering rules",
      "description": "Implements renderHTML() to output highlighted text with appropriate background color styling based on the color attribute",
      "max_score": 8
    },
    {
      "name": "Custom mark view renderer",
      "description": "Integrates ReactMarkViewRenderer or implements custom mark rendering logic to provide React-based interactive rendering for the mark",
      "max_score": 15
    },
    {
      "name": "React component implementation",
      "description": "Creates a React component that renders the mark with a clickable badge element displaying the current highlight color",
      "max_score": 12
    },
    {
      "name": "Mark attribute access",
      "description": "Accesses the mark's color attribute within the custom renderer component to determine current color",
      "max_score": 8
    },
    {
      "name": "Interactive color update",
      "description": "Implements click handler that uses updateAttributes() or editor.commands to update the mark's color attribute to cycle through colors",
      "max_score": 15
    },
    {
      "name": "setHighlight command",
      "description": "Implements setHighlight command using addCommands() that applies the mark with specified color using setMark() or similar Tiptap command",
      "max_score": 10
    },
    {
      "name": "unsetHighlight command",
      "description": "Implements unsetHighlight command using addCommands() that removes the mark using unsetMark() or similar Tiptap command",
      "max_score": 4
    }
  ]
}