v0.0.11

- Changed Icon location to my own website as the ComfyUI Registry botched out on any GitHub URL I tried...

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
 # -

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## Changelog
 
+### 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

README.md

@@ -11,8 +11,7 @@ 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
 
 ---
 
@@ -26,22 +25,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 +49,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 +761,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,7 +774,7 @@ 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
 
 ---

__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", 
+  "version": "0.0.11", 
   "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"
 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.11"
 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';