nodes/alFrame-ComfyUI-AF-Enhanced-HTML-Note
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v0.0.06

Browse Source 
- Removed all Java Script functionality for links and updated README
- Changed the default node content html
This commit is contained in:
Alex Furer
2025-10-11 16:59:50 +02:00
parent 657230e8aa
commit fe3d4fc25e
5 changed files with 120 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AF_Enhanced_HTML_Note.py
+11 -29
View File
@@ -6,7 +6,7 @@
#
# LICENSE: MIT License
#
# v0.0.05
# v0.0.06
#
# Description:
# A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
@@ -15,22 +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 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
# "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"
#
class AF_Enhanced_HTML_Note:
@@ -137,20 +127,12 @@ class AF_Enhanced_HTML_Note:
<div class="af-section af-info">
<h3>🔗 Interactive Links</h3>
<!-- External link (opens in new tab with Ctrl+click) -->
<!-- External links (opens in new tab with Ctrl+click) -->
<h4>External link (opens in new tab with Ctrl+click)</h4>
<p><a href="https://www.fullframestudios.ch/">Full Frame Studios - Alex Furer</a></p>
<!-- Alert action (triggers with Ctrl+click) -->
<p><a href="https://www.fullframestudios.ch/" onclick="alert('Custom action triggered!')">Click for alert</a></p>
<!-- Console log action -->
<p><a href="https://www.fullframestudios.ch/" onclick="console.log('Debug message logged')">Log to console</a></p>
<!-- Multiple actions -->
<p><a href="https://www.fullframestudios.ch/" onclick="console.log('Link clicked')">Link with logging</a></p>
<!-- JavaScript links -->
<p><a href="javascript:alert('Hello from JavaScript!')">JavaScript alert link</a></p>
<h4>Anchor Links</h4>
<p><a href="https://www.fullframestudios.ch/#ThreeDee">Full Frame Studios - Alex Furer - 3D</a></p>
</div>
<h2>Custom Info Cards</h2>
README.md
+70 -73
View File
@@ -13,7 +13,7 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire
- **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
- **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
@@ -30,7 +30,7 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire
### 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
- JavaScript execution is disabled for security
### Node Management
- **Click and drag** the node title bar to move
@@ -320,17 +320,14 @@ All links require **Ctrl+Click** to activate for safety and to prevent accidenta
<!-- External link (opens in new tab with Ctrl+click) -->
<p><a href="https://github.com/comfyanonymous/ComfyUI">ComfyUI GitHub Repository</a></p>
<!-- Alert action (triggers with Ctrl+click) -->
<p><a href="#" onclick="alert('Custom action triggered!')">Click for alert</a></p>
<!-- Anchor link (page navigation with Ctrl+click) -->
<p><a href="#section-name">Jump to section</a></p>
<!-- Console log action -->
<p><a href="#" onclick="console.log('Debug message logged')">Log to console</a></p>
<!-- Mailto link (opens email client with Ctrl+click) -->
<p><a href="mailto:example@domain.com">Send Email</a></p>
<!-- Multiple actions -->
<p><a href="https://example.com" onclick="console.log('Link clicked')">Link with logging</a></p>
<!-- JavaScript links -->
<p><a href="javascript:alert('Hello from JavaScript!')">JavaScript alert link</a></p>
<!-- Relative URL (opens in new tab with Ctrl+click) -->
<p><a href="docs/page.html">Documentation</a></p>
</div>
```
@@ -339,6 +336,17 @@ All links require **Ctrl+Click** to activate for safety and to prevent accidenta
**Remember:** Hold **Ctrl** while clicking any link to activate it!
### Supported Link Types:
- ✅ **External URLs** (`https://`, `http://`) - Open in new tab
- ✅ **Anchor links** (`#section`) - Page navigation
- ✅ **Mailto links** (`mailto:`) - Open email client
- ✅ **Tel links** (`tel:`) - Open phone app
- ✅ **Relative URLs** - Open in new tab
### Not Supported Link Types:
- ❌ **JavaScript links** (`javascript:`) - Blocked for security
- ❌ **onclick handlers** - Ignored for security
</details>
---
@@ -359,6 +367,52 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
---
## ⚠️ JavaScript Limitations
JavaScript functionality is limited for security. It **only works on `<a>` (link) elements** and **only when Ctrl+Click is used**.
### ✅ What Works (with Ctrl+Click on links):
```html
<!-- ✅ Alert dialogs -->
<a href="#" onclick="alert('Hello!')">Alert on click</a>
<!-- ✅ Console logging -->
<a href="#" onclick="console.log('Debug info')">Log to console</a>
<!-- ✅ Confirmation dialogs -->
<a href="javascript:confirm('Are you sure?')">Confirmation dialog</a>
<!-- ✅ Multiple statements -->
<a href="#" onclick="alert('First'); console.log('Second')">Multiple actions</a>
```
### ❌ What Doesn't Work:
```html
<!-- ❌ JavaScript links are blocked -->
<a href="javascript:alert('Hello')">JavaScript link</a>
<!-- ❌ onclick handlers are ignored -->
<a href="#" onclick="alert('This wont work')">Alert link</a>
<!-- ❌ Script tags are ignored -->
<script>console.log('Not executed')</script>
<!-- ❌ Event handlers on other elements -->
<button onclick="alert('No')">Won't work</button>
<div onclick="alert('No')">Won't work</div>
```
### Security Restrictions:
- **No JavaScript execution** - All JavaScript is blocked for security
- **No `<script>` tags** - Script tags are not executed
- **No external scripts** - Cannot load external JavaScript files
- **Ctrl+Click required** - All link interactions require Control key
- **Safe HTML only** - Only styling and navigation features are supported
- **No DOM manipulation** - JavaScript cannot modify the HTML content
- **No browser storage** - `localStorage` and `sessionStorage` are blocked
---
## 🎨 Custom Styling Examples
<details>
@@ -539,60 +593,6 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
---
## ⚠️ JavaScript Limitations
JavaScript functionality is limited for security. It **only works on `<a>` (link) elements** and **only when Ctrl+Click is used**.
### ✅ What Works (with Ctrl+Click on links):
```html
<!-- ✅ Alert dialogs -->
<a href="#" onclick="alert('Hello!')">Alert on click</a>
<!-- ✅ Console logging -->
<a href="#" onclick="console.log('Debug info')">Log to console</a>
<!-- ✅ Confirmation dialogs -->
<a href="javascript:confirm('Are you sure?')">Confirmation dialog</a>
<!-- ✅ Multiple statements -->
<a href="#" onclick="alert('First'); console.log('Second')">Multiple actions</a>
```
### ❌ What Doesn't Work:
```html
<!-- ❌ Script tags are ignored -->
<script>
console.log('This will not run');
</script>
<!-- ❌ onclick on non-link elements -->
<button onclick="alert('No')">Won't work</button>
<div onclick="alert('No')">Won't work</div>
<!-- ❌ Auto-executing events -->
<div onload="alert('Page loaded')">Won't fire</div>
<body onload="init()">Won't fire</body>
<!-- ❌ DOM manipulation -->
<a href="#" onclick="document.getElementById('test').innerHTML = 'Changed'">
Can't modify other elements
</a>
<!-- ❌ Browser storage APIs -->
<a href="#" onclick="localStorage.setItem('key', 'value')">
Storage APIs blocked
</a>
```
### Security Restrictions:
- **No `<script>` tags** - Script tags are not executed for security
- **No external scripts** - Cannot load external JavaScript files
- **Ctrl+Click required** - All link interactions require Control key
- **No DOM manipulation** - JavaScript cannot modify the HTML content
- **No browser storage** - `localStorage` and `sessionStorage` are blocked
---
## 📋 Complete Workflow Example
<details>
@@ -609,7 +609,7 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
<li>Photorealistic textures and materials</li>
<li>Award-winning cinematography</li>
</ul>
<a href="#" onclick="alert('Positive prompts copied to clipboard!')">📋 Copy Prompts</a>
<a href="https://example.com/prompts">📋 View Prompt Guide</a>
</div>
<div class="af-spacer"></div>
@@ -689,18 +689,15 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
### Links not working?
**Solution:** Remember to hold the **Control key** while clicking links
### JavaScript not working?
**Solution:** JavaScript execution is disabled for security. Only standard navigation links work.
### Can't edit content?
**Solution:** Double-click directly on the HTML content (not the node borders)
### Scrollbar appears unnecessarily?
**Solution:** The node has minimal padding; resize if you need more space
### JavaScript not working?
**Solution:**
- Ensure you're holding **Ctrl** when clicking
- Check that you're using `onclick` handlers on `<a>` tags
- Remember that `<script>` tags don't execute for security
### Styling not applying?
**Solution:**
- Use inline styles with the `style` attribute
@@ -753,7 +750,7 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
|----------|--------|
| **Double-click** | Enter edit mode |
| **Escape** | Exit edit mode and save |
| **Ctrl+Click** | Activate links and JavaScript actions |
| **Ctrl+Click** | Activate links (JavaScript disabled) |
---
__init__.py
+2 -1
View File
@@ -13,12 +13,13 @@ __all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']
# Tell ComfyUI about our web files
WEB_DIRECTORY = "./web"
__version__ = "0.0.05"
__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.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",
helpers/ComfyUI-AF-Html-Note_Example-HTML/ComfyUI-AF-Enhanced_HTML_Note_NodeDefaultContent.html
+4 -12
View File
@@ -110,20 +110,12 @@
<div class="af-section af-info">
<h3>🔗 Interactive Links</h3>
<!-- External link (opens in new tab with Ctrl+click) -->
<!-- External links (opens in new tab with Ctrl+click) -->
<h4>External link (opens in new tab with Ctrl+click)</h4>
<p><a href="https://www.fullframestudios.ch/">Full Frame Studios - Alex Furer</a></p>
<!-- Alert action (triggers with Ctrl+click) -->
<p><a href="https://www.fullframestudios.ch/" onclick="alert('Custom action triggered!')">Click for alert</a></p>
<!-- Console log action -->
<p><a href="https://www.fullframestudios.ch/" onclick="console.log('Debug message logged')">Log to console</a></p>
<!-- Multiple actions -->
<p><a href="https://www.fullframestudios.ch/" onclick="console.log('Link clicked')">Link with logging</a></p>
<!-- JavaScript links -->
<p><a href="javascript:alert('Hello from JavaScript!')">JavaScript alert link</a></p>
<h4>Anchor Links</h4>
<p><a href="https://www.fullframestudios.ch/#ThreeDee">Full Frame Studios - Alex Furer - 3D</a></p>
</div>
<h2>Custom Info Cards</h2>
web/AF_Enhanced_HTML_Note.js
+33 -8
View File
@@ -9,7 +9,7 @@ const AF_HTML_NOTE_STYLES = `
height: 100%;
min-height: 100px;
background: var(--comfy-menu-bg, #2a2a2a);
border: 1px solid var(--border-color, #555);
/* border: 1px solid var(--border-color, #555); */
padding: 8px;
box-sizing: border-box;
overflow: hidden;
@@ -439,27 +439,52 @@ app.registerExtension({
this.handleLinksInHTML();
};
// Update the link handler to temporarily enable pointer events for links
// 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')) {
e.preventDefault();
e.stopPropagation();
return false;
}
// Clean, simple link handling
if (link.href &&
!link.href.startsWith('javascript:') &&
!(link.href.startsWith('#') || link.href === '#')) {
e.preventDefault();
window.open(link.href, '_blank');
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://') ||
href.startsWith('https://') ||
href.startsWith('mailto:') ||
href.startsWith('tel:')) {
e.preventDefault();
window.open(href, '_blank');
}
// Internal anchor links (page navigation) - let browser handle
else if (href.startsWith('#') || href === '#') {
// Allow default behavior for anchor links
// They will navigate within the same page
}
// JavaScript links - BLOCK for security
else if (href.startsWith('javascript:')) {
e.preventDefault();
e.stopPropagation();
console.warn('AF HTML Note: JavaScript links are disabled for security');
return false;
}
// Relative URLs and other links - open in new tab
else {
e.preventDefault();
window.open(href, '_blank');
}
}
e.stopPropagation();