v0.0.12

- Explained and emphasized the limitation of the middle mouse ComfyUI panning being blocked by the node
- Changed the ComfyUI category for cleanliness and standardization

.gitignore

@@ -83,8 +83,13 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# Ruff cache
+.ruff_cache/
+
 # AF specific
 Status.txt
 *.psd
 *.docx
-helpers/
+helpers/
+nodes.zip
+node.zip

AF_Enhanced_HTML_Note.py

@@ -4,13 +4,13 @@
 #
 # Description: A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
 #
-# Repo and ReadMe URL: https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note
+# Repo and ReadMe URL: https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note
 #
-# Issues praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note/issues
+# Issues praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note/issues
 #
 # LICENSE: MIT License
 #
-# Usage: https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note
+# Usage: https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note
 #
 # Feature Requests / Wet Dreams
 # -
@@ -151,7 +151,7 @@ class AF_Enhanced_HTML_Note:
 
     RETURN_TYPES = ()
     FUNCTION = "display_html"
-    CATEGORY = "AF - Nodes"
+    CATEGORY = "AF - Nodes/AF - HTML Pack"
     OUTPUT_NODE = False
 
     def display_html(self, html_content):

CHANGELOG.md

@@ -1,5 +1,19 @@
 ## Changelog
 
+### v0.0.12
+- Updated the README. Explained the limitation of the middle mouse ComfyUI panning being blocked by the node
+- Changed the ComfyUI category for cleanliness and standardization
+
+### v0.0.11
+- Changed Icon location to my own website as the ComfyUI Registry botched out on any GitHub URL I tried...
+
+### v0.0.10
+- Updated the README (CSS file editing)
+
+### v0.0.09
+- Added nodes.py and node.js for ComfyUI registry and Manager compliance
+- Made sure the repo name change from "ComfyUI-AF-Enhanced_HTML_Note" to "ComfyUI-AF-Enhanced-HTML-Note" is consistent for all links and such
+
 ### v0.0.08
 - Moved the CSS from the JS file to it's own file.
 - Added CHANGELOG.md
@@ -28,4 +42,4 @@
 - Fixed naming consistency to HTML_Note Implemented single-window toggle behavior
 
 ### v0.0.01
-- Initial Version
+- Initial Version

README.md

@@ -11,8 +11,17 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire
 - **Easy Editing** - Double-click anywhere on the content to edit HTML
 - **Smart Links** - Ctrl+click to open external links (JavaScript disabled for security)
 - **Beautiful Styling** - Predefined color schemes that match ComfyUI's theme
-- **Custom HTML Support** - Write your own HTML with inline styles
-- **No Dependencies** - All CSS is inlined for reliable performance
+- **Custom HTML Support** - Write your own HTML with inline styles or customize the external CSS file
+
+## ⚠️ 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](https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note/issues) on the repository.
 
 ---
 
@@ -26,22 +35,8 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire
 ### Manual Installation
 1. Clone this repository into your `ComfyUI/custom_nodes/` directory:
    ```bash
-   git clone https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note.git
+   git clone https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note.git
 	```
-	
----
-
-## ⚠️ Disclaimer
-
-This ComfyUI custom node is developed through AI-assisted coding, prompted and directed by a human developer. While considerable care has been taken to ensure proper functionality, security, and compatibility, this software is provided **"as is" without warranty of any kind**, express or implied.
-
-**By using this custom node, you acknowledge that:**
-- You install and run this software at your own risk
-- The creator is not liable for any damages, data loss, or issues arising from its use
-- Compatibility with your specific setup is not guaranteed
-- You should test thoroughly in a safe environment before production use
-
-This node has been carefully designed and tested, but individual system configurations may vary. Please report any issues on the GitHub repository.
 
 ---
 
@@ -64,6 +59,48 @@ This node has been carefully designed and tested, but individual system configur
 
 ---
 
+## 🎨 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:
+```css
+.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:
+```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.
@@ -734,7 +771,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
 
 This ComfyUI custom node is developed through AI-assisted coding. While carefully tested, it is provided **"as is" without warranty**. 
 
-**By using this node pack:**
+**By using this node:**
 - You install and run at your own risk
 - The creator is not liable for damages or data loss
 - Compatibility with your setup is not guaranteed
@@ -747,9 +784,9 @@ Report issues on GitHub - we appreciate your feedback!
 ## 📚 Additional Resources
 
 - **[Changelog](CHANGELOG.md)** - Version history and updates
-- [GitHub Issues](https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note) - Report bugs & request features
+- [GitHub Issues](https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note/issues) - Report bugs & request features
 - [License](LICENSE) - MIT License details
 
 ---
 
-**Made with ❤️ by Alex Furer & Qwen3, Claude AI, DeepSeek**
+**Made with ❤️ by Alex Furer & Qwen3, Claude AI, DeepSeek**

__init__.py

@@ -1,42 +1,23 @@
-"""
-@author: Alex Furer
-@title: AF - Enhanced HTML Note
-@nickname: AF - Enhanced HTML Note
-@description: A ComfyUI custom node that allows you to create a note node with HTML support.
-"""
-
-import os
-from .AF_Enhanced_HTML_Note import NODE_CLASS_MAPPINGS, NODE_DISPLAY_NAME_MAPPINGS
-
-__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']
-
-# Tell ComfyUI about our web files
-WEB_DIRECTORY = "./web"
-
-__version__ = "0.0.06"
-__author__ = "Alex Furer"
-__title__ = "AF - Enhanced HTML Note"
-__description__ = " ComfyUI custom node that allows you to create a note node with HTML support."
-__license__ = "MIT"
-__changelog__ = [
-    "v0.0.07 - Comsetics, making tis a version",
-    "v0.0.06 - Removed all Java Script functionality for links and updated README",
-    "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 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. 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"
-]
-
-print("*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *")
-print(r"""
-   ___   ____        _____           ___     __  ______  _  __       __      
-  / _ | / __/ ____  / ___/__  __ _  / _/_ __/ / / /  _/ / |/ /__ ___/ /__ ___
- / __ |/ _/  /___/ / /__/ _ \/  ' \/ _/ // / /_/ // /  /    / _ Y _  / -_|_-<
-/_/ |_/_/          \___/\___/_/_/_/_/ \_, /\____/___/ /_/|_/\___|_,_/\__/___/
-                                     /___/
-                                     
-              📋 AF - Enhanced HTML Note Loaded !
-                 
-""")
-print("*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *")
+"""
+@author: Alex Furer
+@title: AF - Enhanced HTML Note
+@nickname: AF - Enhanced HTML Note
+@description: A ComfyUI custom node that allows you to create a note node with HTML support.
+"""
+
+import os
+from .node import NODE_CLASS_MAPPINGS, NODE_DISPLAY_NAME_MAPPINGS
+
+# Tell ComfyUI about our web files
+WEB_DIRECTORY = "./web"
+
+__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']
+
+
+print("*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *")
+print(r"""
+       ＡＦ  －  ＣｏｍｆｙＵＩ  Ｎｏｄｅｓ
+                                     
+      📋 AF - Enhanced HTML Note Loaded !
+""")
+print("*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *")

node.py

@@ -0,0 +1,5 @@
+# node.py - Main entry point for ComfyUI registry
+
+from .AF_Enhanced_HTML_Note import NODE_CLASS_MAPPINGS, NODE_DISPLAY_NAME_MAPPINGS
+
+__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS']

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "af-enhanced-html-note",
-  "version": "0.0.08", 
+  "name": "comfyui-af-enhanced-html-note",
+  "version": "0.0.12",
   "description": "A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting.",
   "author": "Alex Furer",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note"
+    "url": "https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note"
   },
-  "nodepath": "custom_nodes/ComfyUI-AF-Enhanced_HTML_Note"
-}
+  "nodepath": "custom_nodes/ComfyUI-AF-Enhanced-HTML-Note"
+}

pyproject.toml

@@ -1,14 +1,14 @@
 [project]
-name = "af-enhanced-html-note"
+name = "comfyui-af-enhanced-html-note"
 description = "A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting."
-version = "0.0.08"
+version = "0.0.12"
 license = {file = "LICENSE"}
 dependencies = []
 
 [project.urls]
-Repository = "https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note"
+Repository = "https://github.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note"
 
 [tool.comfy]
 PublisherId = "alframe"
 DisplayName = "ComfyUI AF - Enhanced HTML Note"
-Icon = "https://raw.githubusercontent.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note/main/Docs/icon.png"
+Icon = "https://fullframestudios.ch/ComfyUI-Icon/icon.png"

web/AF-Enhanced-HTML-Note.js

@@ -1,4 +1,4 @@
-// File: web/AF_Enhanced_HTML_Note.js
+// File: web/AF-Enhanced-HTML-Note.js
 
 import { app } from "../../scripts/app.js";
 
@@ -9,54 +9,48 @@ function injectStyles() {
         const link = document.createElement('link');
         link.id = styleId;
         link.rel = 'stylesheet';
-        link.href = './web/AF_Enhanced_HTML_Note.css';
+        
+        // Use the same base path as our JS file
+        const jsPath = import.meta.url;
+        const basePath = jsPath.substring(0, jsPath.lastIndexOf('/'));
+        link.href = basePath + '/AF-Enhanced-HTML-Note.css';
+        
         document.head.appendChild(link);
     }
 }
 
-// Inject styles
-function injectStyles() {
-    const styleId = 'af-html-note-styles';
-    if (!document.getElementById(styleId)) {
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = AF_HTML_NOTE_STYLES;
-        document.head.appendChild(style);
-    }
-}
-
 app.registerExtension({
     name: "AF.enhanced.html.note",
-    
+
     async beforeRegisterNodeDef(nodeType, nodeData, app) {
         if (nodeData.name === "AF_Enhanced_HTML_Note") {
             injectStyles();
-            
+
             // Store the original onNodeCreated
             const originalOnNodeCreated = nodeType.prototype.onNodeCreated;
-            
+
             nodeType.prototype.onNodeCreated = function() {
                 const result = originalOnNodeCreated?.apply(this, arguments);
-                
+
                 this.isEditMode = false;
                 this.size = [400, 300];
-                
+
                 // Don't hide the original widget - instead, replace it with our custom display
                 setTimeout(() => {
                     const htmlWidget = this.widgets?.find(w => w.name === "html_content");
                     if (htmlWidget && htmlWidget.element) {
                         // Store the original value
                         this.htmlContent = htmlWidget.value;
-                        
+
                         // Create our custom container
                         this.createHTMLNoteDisplay(this.htmlContent);
-                        
+
                         // Hide the original widget but keep its value
                         htmlWidget.computeSize = () => [0, 0];
                         htmlWidget.element.style.display = 'none';
                     }
                 }, 0);
-                
+
                 return result;
             };
 
@@ -64,28 +58,28 @@ app.registerExtension({
 				// 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) {
@@ -113,10 +107,10 @@ app.registerExtension({
 						e.stopPropagation();
 					}
 				});
-				
+
 				// Comment
 				this.contentElement.setAttribute('tabindex', '-1');
-				
+
 				this.editorElement.addEventListener('blur', () => {
 					setTimeout(() => {
 						if (this.isEditMode && document.activeElement !== this.editorElement) {
@@ -124,26 +118,26 @@ app.registerExtension({
 						}
 					}, 10);
 				});
-				
+
 				this.contentElement.addEventListener('mousedown', (e) => {
 					// Prevent the content area from getting focus on click
 					e.preventDefault();
-					
+
 					// But don't stop propagation - let ComfyUI handle node selection
 					// Only prevent the default focus behavior
 				});
-				
+
 				// Add as DOM widget
 				this.addDOMWidget("html_note_display", "div", this.containerElement);
 			};
 
             nodeType.prototype.enterEditMode = function() {
                 if (this.isEditMode) return;
-                
+
                 this.isEditMode = true;
                 this.containerElement.classList.add('edit-mode');
                 this.editorElement.value = this.htmlContent;
-                
+
                 setTimeout(() => {
                     this.editorElement.focus();
                     this.editorElement.select();
@@ -152,12 +146,12 @@ app.registerExtension({
 
             nodeType.prototype.exitEditMode = function() {
                 if (!this.isEditMode) return;
-                
+
                 this.isEditMode = false;
                 this.containerElement.classList.remove('edit-mode');
                 this.htmlContent = this.editorElement.value;
                 this.contentElement.innerHTML = this.htmlContent;
-                
+
                 // Update the original widget value
                 const htmlWidget = this.widgets?.find(w => w.name === "html_content");
                 if (htmlWidget) {
@@ -166,7 +160,7 @@ app.registerExtension({
                         htmlWidget.callback(this.htmlContent);
                     }
                 }
-                
+
                 // Re-attach link handlers
                 this.handleLinksInHTML();
             };
@@ -174,12 +168,12 @@ app.registerExtension({
 			// Updated link handler - REMOVED JavaScript execution
 			nodeType.prototype.handleLinksInHTML = function() {
 				if (!this.contentElement) return;
-				
+
 				const links = this.contentElement.querySelectorAll('a');
 				links.forEach(link => {
 					// Remove any existing onclick handlers to prevent JavaScript execution
 					link.onclick = null;
-					
+
 					link.addEventListener('click', (e) => {
 						// Only allow clicks when Ctrl is held
 						if (!document.body.classList.contains('af-ctrl-active')) {
@@ -187,13 +181,13 @@ app.registerExtension({
 							e.stopPropagation();
 							return false;
 						}
-						
+
 						const href = link.getAttribute('href');
-						
+
 						// Handle different types of links
 						if (href) {
 							// External URLs and anchor links - open in new tab
-							if (href.startsWith('http://') || 
+							if (href.startsWith('http://') ||
 								href.startsWith('https://') ||
 								href.startsWith('mailto:') ||
 								href.startsWith('tel:')) {
@@ -218,13 +212,13 @@ app.registerExtension({
 								window.open(href, '_blank');
 							}
 						}
-						
+
 						e.stopPropagation();
 						return false;
 					});
 				});
 			};
-			
+
             // Global Ctrl key handling
             let ctrlKeyActive = false;
 

web/nodes.js

@@ -0,0 +1,2 @@
+// web/nodes.js - Entry point for ComfyUI
+import './AF-Enhanced-HTML-Note.js';