v0.0.05

- Ctrl-Click to open links - No more java script on links possible - Made sure anchor links work
CSS Updated
2025-10-10 21:01:38 +02:00 · 2025-10-10 17:57:10 +02:00 · 2025-10-07 13:54:36 +02:00 · 2025-10-06 23:35:52 +02:00 · 2025-10-06 23:33:44 +02:00
4 changed files with 322 additions and 232 deletions
@@ -1,19 +1,12 @@
 # ****** ComfyUI-AF - Enhanced HTML-NOTE ******
 #
-# Creator: Alex Furer - Co-Creator(s): Claude AI
-#
-# Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI_AF_FindNodeByID
-#
-# LICENSE: MIT License
-## ****** ComfyUI-AF - Enhanced HTML-NOTE ******
-#
-# Creator: Alex Furer - Co-Creator(s): Claude AI
+# Creator: Alex Furer - Co-Creator(s): Claude AI & DeepSeek
 #
 # Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI_AF_FindNodeByID
 #
 # LICENSE: MIT License
 #
-# v0.0.04
+# v0.0.05
 #
 # Description:
 # A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
@@ -22,10 +15,12 @@
 # Read Me on Github
 #
 # Changelog:
+# v0.0.05
+# - Made edit mode less intrusive and keep ComfyUI canvas navigation (panning, zooming [space bar] and [H] now work to pan around the canvas)
 # v0.0.04
 # - Fixed node selection and resizing by removing OUTPUT_NODE and using proper widget approach
 # - Double clicking is now used to edit the html
-# - Mouse interaction is now persistent to ComfyUI behaviour. Except middle mouse button for panning.
+# - Mouse interaction is now persistent to ComfyUI behavior. Except middle mouse button for panning.
 # v0.0.03
 # - Fixed node resizing issues on save/reload
 # - Improved selection and edit mode behavior to match ComfyUI core notes
@@ -52,7 +47,7 @@ class AF_Enhanced_HTML_Note:
                    "default": """<div class="af-section af-positive">
    <h2>🟢 Positive Prompts</h2>
    <p>Your positive prompts go here...</p>
-    <a href="#" onclick="alert('Link clicked!')">Click me!</a>
+    <a href="https://www.fullframestudios.ch" onclick="alert('Link clicked!')">Click me!</a>
 </div>

 <div class="af-spacer"></div>
@@ -96,85 +91,3 @@ NODE_CLASS_MAPPINGS = {
 NODE_DISPLAY_NAME_MAPPINGS = {
    "AF_Enhanced_HTML_Note": "AF - Enhanced HTML Note",
 }
-# v0.0.04
-#
-# Description:
-# A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
-#
-# Usage:
-# Read Me on Github
-#
-# Changelog:
-# v0.0.04
-# - Removed width and height parameters - using standard ComfyUI resizing
-# - Simplified node to be just the HTML display
-# v0.0.03
-# - Fixed node resizing issues on save/reload
-# - Improved selection and edit mode behavior to match ComfyUI core notes
-# - Fixed middle mouse button panning over the node
-# - Improved HTML indentation in default content
-# v0.0.02
-# - Fixed naming consistency to HTML_Note
-# - Implemented single-window toggle behavior
-# v0.0.01
-# - Initial Version
-#
-
-class AF_Enhanced_HTML_Note:
-    """
-    AF Enhanced HTML-Note node with colored sections and rich formatting
-    """
-    
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "html_content": ("STRING", {
-                    "multiline": True,
-                    "default": """<div class="af-section af-positive">
-    <h2>🟢 Positive Prompts</h2>
-    <p>Your positive prompts go here...</p>
-    <a href="#" onclick="alert('Link clicked!')">Click me!</a>
-</div>
-
-<div class="af-spacer"></div>
-
-<div class="af-section af-negative">
-    <h2>🔴 Negative Prompts</h2>
-    <p>Your negative prompts go here...</p>
-</div>
-
-<div class="af-spacer-large"></div>
-
-<div class="af-section af-neutral">
-    <h3>📝 Notes</h3>
-    <p>Additional notes and information...</p>
-    <ul>
-        <li>Item 1</li>
-        <li>Item 2</li>
-    </ul>
-</div>""",
-                    "placeholder": "Enter your HTML content here..."
-                }),
-            }
-        }
-
-    RETURN_TYPES = ()
-    FUNCTION = "display_html"
-    CATEGORY = "AF - Nodes"
-    OUTPUT_NODE = False
-
-    def display_html(self, html_content):
-        """
-        Display enhanced HTML content
-        """
-        return {"ui": {"text": html_content}, "result": (html_content,)}
-
-# Node mappings for ComfyUI
-NODE_CLASS_MAPPINGS = {
-    "AF_Enhanced_HTML_Note": AF_Enhanced_HTML_Note,
-}
-
-NODE_DISPLAY_NAME_MAPPINGS = {
-    "AF_Enhanced_HTML_Note": "AF - Enhanced HTML Note",
-}
@@ -1,8 +1,34 @@
 # AF Enhanced HTML Node - Usage Guide

-A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
+A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting.

-## Basic Section Colors
+## ✨ Key Features
+
+- **Rich HTML Support** - Full HTML formatting with colored sections, lists, tables, code blocks, and more
+- **Non-Intrusive Design** - Doesn't interfere with normal ComfyUI workflow interactions
+- **Easy Editing** - Double-click anywhere on the content to edit HTML
+- **Smart Links** - Ctrl+click to open external links or trigger custom actions
+- **Beautiful Styling** - Predefined color schemes that match ComfyUI's theme
+- **No Dependencies** - All CSS is inlined for reliable performance
+
+## 🎮 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 actions and alerts work when Control is held
+
+### 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)
+
+## 🎨 Basic Section Colors

 ```html
 <!-- Positive section (green) -->
@@ -41,9 +67,7 @@ A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's dire
    <p>Custom styled content...</p>
 </div>
 ```
-
-## Spacers
-
+## 📐 Spacers
 ```html
 <!-- Small spacer -->
 <div class="af-spacer-small"></div>
@@ -56,40 +80,40 @@ A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's dire

 <!-- Extra large spacer -->
 <div class="af-spacer-xl"></div>
-```

-## Clickable Links
+#🔗 Clickable Links & Actions

-```html
-<!-- External link -->
-<a href="https://github.com/comfyanonymous/ComfyUI" target="_blank">ComfyUI GitHub</a>
+<!-- External link (opens in new tab with Ctrl+click) -->
+<a href="https://github.com/comfyanonymous/ComfyUI">ComfyUI GitHub</a>

-<!-- Link with custom action -->
+<!-- Alert action (triggers with Ctrl+click) -->
 <a href="#" onclick="alert('Custom action triggered!')">Click for alert</a>

-<!-- Link with data attribute for custom handling -->
-<a href="#" data-action="custom-command">Custom Command</a>
+<!-- Multiple actions -->
+<a href="https://example.com" onclick="console.log('Link clicked')">Link with multiple actions</a>
+
+<!-- JavaScript links -->
+<a href="javascript:alert('Hello!')">JavaScript link</a>
 ```
-
-## Complete Example Template
-
+## 📋 Complete Example Template
 ```html
 <div class="af-section af-positive">
    <h2>🟢 Positive Prompts</h2>
-    <p>masterpiece, best quality, highly detailed</p>
+    <p><strong>masterpiece, best quality, highly detailed</strong></p>
    <ul>
        <li>Professional lighting</li>
        <li>Sharp focus</li>
        <li>8K resolution</li>
    </ul>
+    <a href="#" onclick="alert('Positive prompts copied!')">📋 Copy Prompts</a>
 </div>

 <div class="af-spacer"></div>

 <div class="af-section af-negative">
    <h2>🔴 Negative Prompts</h2>
-    <p>low quality, blurry, distorted</p>
-    <code>nsfw, watermark, signature</code>
+    <p><em>low quality, blurry, distorted</em></p>
+    <code>nsfw, watermark, signature, bad anatomy</code>
 </div>

 <div class="af-spacer-large"></div>
@@ -97,41 +121,84 @@ A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's dire
 <div class="af-section af-info">
    <h3>ℹ️ Model Information</h3>
    <p>Using: <strong>SDXL 1.0</strong></p>
-    <p>Steps: <em>25</em> | CFG: <em>7.5</em></p>
-    <a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">Model Page</a>
+    <p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
+    <a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0">Model Page</a>
+</div>
+
+<div class="af-spacer"></div>
+
+<div class="af-section af-warning">
+    <h3>⚠️ Important Notes</h3>
+    <p>This workflow requires:</p>
+    <ol>
+        <li>High VRAM (8GB+)</li>
+        <li>Latest ComfyUI version</li>
+        <li>SDXL compatible models</li>
+    </ol>
 </div>

 <div class="af-spacer"></div>

 <div class="af-section af-neutral">
-    <h3>📝 Notes</h3>
+    <h3>📝 Workflow Notes</h3>
    <p>Remember to:</p>
-    <ol>
-        <li>Check image dimensions</li>
-        <li>Adjust sampling method</li>
-        <li>Fine-tune CFG scale</li>
-    </ol>
+    <ul>
+        <li>Check image dimensions before generating</li>
+        <li>Adjust CFG scale for different results</li>
+        <li>Save frequently!</li>
+    </ul>
    <hr>
-    <p><small>Last updated: Today</small></p>
+    <p><small>Last updated: Today | Created with AF Enhanced HTML Node</small></p>
 </div>
 ```
+## 🛠️ Installation
+Create folder: ComfyUI/custom_nodes/ComfyUI-AF_Enhanced_HTML_Note/

-## Features
+Add the Python file: AF_Enhanced_HTML_Note.py

- **No external dependencies** - All CSS is inlined to avoid loading issues
- **Colored sections** - 6 predefined color schemes (positive, negative, neutral, info, warning, custom)
- **Flexible spacers** - 4 different spacer sizes
- **Clickable links** - Support for external links and custom actions
- **Responsive design** - Works on different screen sizes
- **HTML support** - Full HTML formatting (lists, tables, code blocks, etc.)
- **Custom scrollbars** - Styled to match ComfyUI theme
+Add the init file: __init__.py

-## Installation
+Create web/ subfolder

-1. Create folder: `ComfyUI/custom_nodes/ComfyUI-AF_Enhanced_HTML/`
-2. Add the Python file: `AF_Enhanced_HTML.py`
-3. Add the init file: `__init__.py`
-4. Create `web/` subfolder
-5. Add the JavaScript file: `web/AF_Enhanced_HTML.js`
-6. Restart ComfyUI
-7. Find the node under **AF > AF - Enhanced HTML**
+Add the JavaScript file: web/AF_Enhanced_HTML_Note.js
+
+Restart ComfyUI
+
+Find the node under AF - Nodes > AF - Enhanced HTML Note
+
+## 🔧 Technical Details
+Node Name: AF_Enhanced_HTML_Note
+
+Category: AF - Nodes
+
+Input: HTML content (multiline string)
+
+Output: None (display only)
+
+Compatibility: ComfyUI latest version
+
+## 🐛 Troubleshooting
+Node won't select/move?
+
+Click on the node's title bar or edges, not the HTML content area
+
+Links not working?
+
+Remember to hold the Control key while clicking links
+
+Can't edit content?
+
+Double-click directly on the HTML content (not the node borders)
+
+Scrollbar appears unnecessarily?
+
+The node has minimal padding; resize if you need more space
+
+## 📞 Support
+Creator: Alex Furer
+
+Co-Creators: Claude AI & DeepSeek
+
+GitHub: https://github.com/alFrame/ComfyUI_AF_FindNodeByID
+
+License: MIT License
@@ -7,4 +7,19 @@ from .AF_Enhanced_HTML_Note import NODE_CLASS_MAPPINGS, NODE_DISPLAY_NAME_MAPPIN
 # Tell ComfyUI about our web files
 WEB_DIRECTORY = "./web"

-__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']
+__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']
+__version__ = "0.0.05"
+__author__ = "Alex Furer"
+
+print("*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *")
+print(r"""
+   ___   ____        _____           ___     __  ______  _  __       __      
+  / _ | / __/ ____  / ___/__  __ _  / _/_ __/ / / /  _/ / |/ /__ ___/ /__ ___
+ / __ |/ _/  /___/ / /__/ _ \/  ' \/ _/ // / /_/ // /  /    / _ Y _  / -_|_-<
+/_/ |_/_/          \___/\___/_/_/_/_/ \_, /\____/___/ /_/|_/\___|_,_/\__/___/
+                                     /___/
+                                     
+              📋 AF - Enhanced HTML Note Loaded !
+                 
+""")
+print("*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *")
@@ -10,23 +10,24 @@ const AF_HTML_NOTE_STYLES = `
        min-height: 100px;
        background: var(--comfy-menu-bg, #2a2a2a);
        border: 1px solid var(--border-color, #555);
-        padding: 16px;
+        padding: 8px;
        box-sizing: border-box;
-        overflow-y: auto;
+        overflow: hidden;
        cursor: default;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        line-height: 1.6;
        color: var(--input-text, #ffffff);
+        display: flex;
+        flex-direction: column;
+        position: relative;
    }

    .af-html-note-content {
        width: 100%;
        height: 100%;
-        pointer-events: none;
-    }
-
-    body.af-ctrl-active .af-html-note-content {
-        pointer-events: auto;
+        overflow-y: auto;
+        flex: 1;
+        /* NO pointer-events here - let ComfyUI handle interactions */
    }

    .af-html-note-editor {
@@ -34,7 +35,7 @@ const AF_HTML_NOTE_STYLES = `
        height: 100%;
        background: var(--comfy-menu-bg, #2a2a2a);
        border: 1px solid var(--border-color, #555);
-        padding: 16px;
+        padding: 8px;
        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
        line-height: 1.4;
        color: var(--input-text, #ffffff);
@@ -43,6 +44,54 @@ const AF_HTML_NOTE_STYLES = `
        outline: none;
        font-size: 14px;
        display: none;
+        flex: 1;
+    }
+
+    /* Floating edit button */
+    .af-floating-edit-btn {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        background: rgba(0, 0, 0, 0.8);
+        border: 1px solid var(--border-color, #555);
+        color: var(--input-text, #ffffff);
+        border-radius: 3px;
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+        z-index: 1000;
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+    }
+
+    .af-floating-edit-btn:hover {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.9);
+        border-color: #777;
+    }
+
+    /* Enable link interactions only when Ctrl is held */
+    .af-html-note-content a {
+        color: #58a6ff;
+        text-decoration: none;
+        /* Links are never directly clickable - only via Ctrl */
+        pointer-events: none;
+        cursor: default;
+    }
+
+    body.af-ctrl-active .af-html-note-content a {
+        /* Only become clickable when Ctrl is held globally */
+        pointer-events: auto;
+        cursor: pointer;
+    }
+
+    body.af-ctrl-active .af-html-note-content a:hover {
+        color: #79c0ff;
+        text-decoration: underline;
    }

    .af-html-note-container.edit-mode .af-html-note-content {
@@ -53,7 +102,12 @@ const AF_HTML_NOTE_STYLES = `
        display: block;
    }

-    /* HTML content styles */
+    /* Hide edit button in edit mode */
+    .af-html-note-container.edit-mode .af-floating-edit-btn {
+        display: none;
+    }
+
+    /* Rest of your CSS remains the same... */
    .af-html-note-content h1, .af-html-note-content h2, .af-html-note-content h3, 
    .af-html-note-content h4, .af-html-note-content h5, .af-html-note-content h6 {
        margin-top: 0;
@@ -66,7 +120,7 @@ const AF_HTML_NOTE_STYLES = `
    .af-html-note-content h3 { font-size: 1.1em; }

    .af-html-note-content .af-section {
-        padding: 12px 16px;
+        padding: 8px 16px;
        margin: 8px 0;
        border-radius: 6px;
        border-left: 4px solid;
@@ -93,30 +147,32 @@ const AF_HTML_NOTE_STYLES = `
    }

    .af-html-note-content .af-section.af-warning {
-        background: rgba(255, 215, 0, 0.1);
+        background: rgba(255, 128, 0, 0.1);
        border-left-color: #FFD700;
    }

+    .af-html-note-content .af-section.af-yellow {
+        background: rgba(255, 128, 0, 0.1);
+        border-left-color: #FFD700;
+    }
+
+    .af-html-note-content .af-section.af-blue {
+        background: rgba(102, 105, 255, 0.1);
+        border-left-color: #000099;
+    }
+
    .af-html-note-content .af-section.af-custom {
        background: rgba(186, 85, 211, 0.1);
        border-left-color: #BA55D3;
    }

-    .af-html-note-content .af-spacer { height: 16px; margin: 8px 0; }
+    .af-html-note-content .af-spacer-top { height: 2px; margin: 4px 0; }
+    .af-html-note-content .af-spacer-mini { height: 4px; margin: 4px 0; }
    .af-html-note-content .af-spacer-small { height: 8px; margin: 4px 0; }
+    .af-html-note-content .af-spacer { height: 16px; margin: 8px 0; }
    .af-html-note-content .af-spacer-large { height: 32px; margin: 16px 0; }
    .af-html-note-content .af-spacer-xl { height: 48px; margin: 24px 0; }

-    .af-html-note-content a {
-        color: #58a6ff;
-        text-decoration: none;
-    }
-
-    body.af-ctrl-active .af-html-note-content a:hover {
-        color: #79c0ff;
-        text-decoration: underline;
-    }
-
    .af-html-note-content code {
        background: rgba(0,0,0,0.3);
        padding: 2px 6px;
@@ -187,6 +243,25 @@ const AF_HTML_NOTE_STYLES = `
        border-radius: 4px; 
    }
    .af-html-note-editor::-webkit-scrollbar-thumb:hover { background: #777; }
+
+    /* ****** MY OWN STYLES ****** */
+    .af-column-half-left {
+        box-sizing: border-box;
+        float: left;
+        width: 49%;
+        margin-right: 1% !important;
+    }
+    .af-column-half-right {
+        box-sizing: border-box;
+        float: left;
+        width: 49%;
+        margin-left: 1% !important;
+    }
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
 `;

 // Inject styles
@@ -235,58 +310,71 @@ app.registerExtension({
                return result;
            };

-            nodeType.prototype.createHTMLNoteDisplay = function(content) {
-                // Create container element
-                this.containerElement = document.createElement("div");
-                this.containerElement.className = "af-html-note-container";
-                
-                // Create HTML content display
-                this.contentElement = document.createElement("div");
-                this.contentElement.className = "af-html-note-content";
-                this.contentElement.innerHTML = content;
-                
-                // Create editor element
-                this.editorElement = document.createElement("textarea");
-                this.editorElement.className = "af-html-note-editor";
-                this.editorElement.value = content;
-                
-                // Append both elements to container
-                this.containerElement.appendChild(this.contentElement);
-                this.containerElement.appendChild(this.editorElement);
-                
-                // Add double-click to edit
-                this.containerElement.addEventListener('dblclick', (e) => {
-                    if (!this.isEditMode) {
-                        this.enterEditMode();
-                        e.stopPropagation();
-                    }
-                });
+			nodeType.prototype.createHTMLNoteDisplay = function(content) {
+				// Create container element
+				this.containerElement = document.createElement("div");
+				this.containerElement.className = "af-html-note-container";
+				
+				// Create HTML content display
+				this.contentElement = document.createElement("div");
+				this.contentElement.className = "af-html-note-content";
+				this.contentElement.innerHTML = content;
+				
+				// Create editor element
+				this.editorElement = document.createElement("textarea");
+				this.editorElement.className = "af-html-note-editor";
+				this.editorElement.value = content;
+				
+				// Create floating edit button
+				this.editButton = document.createElement("div");
+				this.editButton.className = "af-floating-edit-btn";
+				this.editButton.innerHTML = "✏️";
+				this.editButton.title = "Edit HTML";
+				
+				// Append all elements to container
+				this.containerElement.appendChild(this.contentElement);
+				this.containerElement.appendChild(this.editorElement);
+				this.containerElement.appendChild(this.editButton);
+				
+				// Edit button click handler
+				this.editButton.addEventListener('click', (e) => {
+					if (!this.isEditMode) {
+						this.enterEditMode();
+						e.stopPropagation();
+					}
+				});

-                // Handle links
-                this.handleLinksInHTML();
+				// Add back double-click editing (user-friendly alternative)
+				this.contentElement.addEventListener('dblclick', (e) => {
+					if (!this.isEditMode) {
+						this.enterEditMode();
+						e.stopPropagation();
+					}
+				});

-                // Handle editor events
-                this.editorElement.addEventListener('keydown', (e) => {
-                    if (e.key === 'Escape') {
-                        this.exitEditMode();
-                        e.preventDefault();
-                        e.stopPropagation();
-                    } else {
-                        e.stopPropagation();
-                    }
-                });
+				// Handle links
+				this.handleLinksInHTML();

-                this.editorElement.addEventListener('blur', () => {
-                    setTimeout(() => {
-                        if (this.isEditMode && document.activeElement !== this.editorElement) {
-                            this.exitEditMode();
-                        }
-                    }, 10);
-                });
+				// Handle editor events
+				this.editorElement.addEventListener('keydown', (e) => {
+					if (e.key === 'Escape') {
+						this.exitEditMode();
+						e.preventDefault();
+						e.stopPropagation();
+					}
+				});

-                // Add as DOM widget
-                this.addDOMWidget("html_note_display", "div", this.containerElement);
-            };
+				this.editorElement.addEventListener('blur', () => {
+					setTimeout(() => {
+						if (this.isEditMode && document.activeElement !== this.editorElement) {
+							this.exitEditMode();
+						}
+					}, 10);
+				});
+
+				// Add as DOM widget
+				this.addDOMWidget("html_note_display", "div", this.containerElement);
+			};

            nodeType.prototype.enterEditMode = function() {
                if (this.isEditMode) return;
@@ -322,30 +410,37 @@ app.registerExtension({
                this.handleLinksInHTML();
            };

-            nodeType.prototype.handleLinksInHTML = function() {
-                if (!this.contentElement) return;
-                
-                const links = this.contentElement.querySelectorAll('a');
-                links.forEach(link => {
-                    link.onclick = (e) => {
-                        // Only handle links when Ctrl is active
-                        if (!document.body.classList.contains('af-ctrl-active')) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            return false;
-                        }
-                        
-                        // Handle external links
-                        if (link.href && !link.href.includes('#') && !link.href.startsWith('javascript:')) {
-                            e.preventDefault();
-                            window.open(link.href, '_blank');
-                        }
-                        
-                        e.stopPropagation();
-                        return false;
-                    };
-                });
-            };
+			nodeType.prototype.handleLinksInHTML = function() {
+				if (!this.contentElement) return;
+				
+				const links = this.contentElement.querySelectorAll('a');
+				links.forEach(link => {
+					// Remove any existing handlers
+					link.onclick = null;
+					
+					// Add clean, simple handler
+					link.addEventListener('click', (e) => {
+						// Only handle links when Ctrl is active
+						if (!document.body.classList.contains('af-ctrl-active')) {
+							e.preventDefault();
+							e.stopPropagation();
+							return false;
+						}
+						
+						// Ctrl is held - handle external links only
+						if (link.href && 
+							!link.href.startsWith('javascript:') && 
+							!(link.href.startsWith('#') || link.href === '#')) {
+							e.preventDefault();
+							window.open(link.href, '_blank');
+						}
+						
+						// Stop propagation to ComfyUI
+						e.stopPropagation();
+						return false;
+					});
+				});
+			};

            // Global Ctrl key handling
            let ctrlKeyActive = false;
Author	SHA1	Message	Date
Alex Furer	983bffae06	v0.0.05 - Ctrl-Click to open links - No more java script on links possible - Made sure anchor links work	2025-10-10 21:01:38 +02:00
Alex Furer	9f055259d4	CSS Updated	2025-10-10 17:57:10 +02:00
Alex Furer	f9ca71a1c8	Updated README	2025-10-07 13:54:36 +02:00
Alex Furer	47ccfd838e	Update README.md	2025-10-06 23:35:52 +02:00
Alex Furer	7d1ed1451a	All working! - Fixed node selection and resizing by removing OUTPUT_NODE and using proper widget approach - Double clicking is now used to edit the html - Mouse interaction is now persistent to ComfyUI behavior. Except middle mouse button for panning. - New documentation	2025-10-06 23:33:44 +02:00