ComfyUI-AF-Enhanced-HTML-Note

⚠️ Known Limitation: Middle Mouse Button Panning

Issue: Middle mouse button panning does not work when the cursor is over this node.

Workaround: Use the hand tool by pressing Space on your keyboard, or pan from outside the node area.

Technical Context: Since this node renders HTML content, the browser intercepts middle mouse button events before they can reach the ComfyUI canvas. Despite multiple attempts to capture and forward these events to the underlying canvas, browser security and event handling policies prevent a reliable solution.

If you have ideas for resolving this limitation, please open an issue on the repository.

🛠️ Installation

Via ComfyUI Manager (Recommended)

1. Open ComfyUI Manager
2. Search for "AF - Enhanced HTML Note"
3. Install

Manual Installation

1. Clone this repository into your ComfyUI/custom_nodes/ directory:

   git clone https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note.git
   

🎮 Interaction Guide

Editing Content

• Double-click anywhere on the HTML content to enter edit mode
• Escape key or click outside to exit edit mode and save changes
• Changes are automatically saved when exiting edit mode

Using Links

• Hold Control key + Click on any link to activate it
• External links open in new tabs
• JavaScript execution is disabled for security

Node Management

• Click and drag the node title bar to move
• Drag edges/corners to resize
• Middle mouse button works for canvas panning (like other nodes)

🎨 Custom CSS Styling

The node uses an external CSS file (AF-Enhanced-HTML-Note.css) that you can customize to match your preferences or create your own styling themes.

Editing the CSS

The CSS file is located at:

ComfyUI/custom_nodes/ComfyUI-AF-Enhanced-HTML-Note/web/AF-Enhanced-HTML-Note.css

You can edit this file directly to:

• Change colors of predefined sections (.af-positive, .af-negative, etc.)
• Modify spacing and padding
• Adjust font sizes and typography
• Create new custom section classes
• Change scrollbar styling
• Customize the edit button appearance
• OR completely replace the entire CSS and use your own classes. (Don't forget to change the classes in the HTML node in your ComfyUI workflow !!)

Example: Creating a Custom Section Color

Add this to the CSS file to create a new teal section style:

.af-html-note-content .af-section.af-teal {
    background: rgba(64, 224, 208, 0.1);
    border-left-color: #40E0D0;
}

Then use it in your HTML:

<div class="af-section af-teal">
    <h3>🟢 Teal Section</h3>
    <p>Your custom styled content...</p>
</div>

Note: After editing the CSS file, refresh your browser (Ctrl+F5 or Cmd+Shift+R) to see the changes.

🎨 Predefined Section Colors

The node comes with several predefined colored section styles. Click each section below to see the code and rendered example.

Code:

<div class="af-section af-positive">
    <h2>🟢 Positive Prompts</h2>
    <p><strong>masterpiece, best quality, highly detailed</strong></p>
    <ul>

Verifiziert 12. Sept.