diff --git a/AF_Enhanced_HTML_Note.py b/AF_Enhanced_HTML_Note.py index b620257..1b83241 100644 --- a/AF_Enhanced_HTML_Note.py +++ b/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 # - diff --git a/CHANGELOG.md b/CHANGELOG.md index c4d7b95..1e18b90 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ ## Changelog +### 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 diff --git a/README.md b/README.md index 258fa72..dedfb95 100644 --- a/README.md +++ b/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,47 @@ 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 + +### 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 +
+

🟢 Teal Section

+

Your custom styled content...

+
+``` + +**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 +760,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 +773,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 --- diff --git a/__init__.py b/__init__.py index 3fea339..cbd5275 100644 --- a/__init__.py +++ b/__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("* * * * * * * * * * * * * * * * * * * * * * * * * *") \ No newline at end of file +""" +@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("* * * * * * * * * * * * * * * * *") \ No newline at end of file diff --git a/node.py b/node.py new file mode 100644 index 0000000..db0089f --- /dev/null +++ b/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'] \ No newline at end of file diff --git a/package.json b/package.json index 8b75bd1..4169fac 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "af-enhanced-html-note", - "version": "0.0.08", + "version": "0.0.09", "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" } \ No newline at end of file diff --git a/pyproject.toml b/pyproject.toml index dc026b5..c2fbb54 100644 --- a/pyproject.toml +++ b/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.09" 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" \ No newline at end of file +Icon = "https://raw.githubusercontent.com/alFrame/ComfyUI-AF-Enhanced-HTML-Note/main/Docs/icon.png" \ No newline at end of file diff --git a/web/AF_Enhanced_HTML_Note.css b/web/AF-Enhanced-HTML-Note.css similarity index 100% rename from web/AF_Enhanced_HTML_Note.css rename to web/AF-Enhanced-HTML-Note.css diff --git a/web/AF_Enhanced_HTML_Note.js b/web/AF-Enhanced-HTML-Note.js similarity index 91% rename from web/AF_Enhanced_HTML_Note.js rename to web/AF-Enhanced-HTML-Note.js index 7963bf2..da2393c 100644 --- a/web/AF_Enhanced_HTML_Note.js +++ b/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; diff --git a/web/nodes.js b/web/nodes.js new file mode 100644 index 0000000..f21d087 --- /dev/null +++ b/web/nodes.js @@ -0,0 +1,2 @@ +// web/nodes.js - Entry point for ComfyUI +import './AF-Enhanced-HTML-Note.js'; \ No newline at end of file