v0.0.07

Cosmetics, making this a version
Cosmetics
2025-10-12 00:13:34 +02:00 · 2025-10-12 00:11:32 +02:00 · 2025-10-11 23:40:48 +02:00 · 2025-10-11 23:38:45 +02:00 · 2025-10-11 23:21:50 +02:00 · 2025-10-11 23:12:32 +02:00
28 changed files with 2087 additions and 320 deletions
@@ -83,5 +83,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

-# AF speciffic
+# AF specific
 Status.txt
@@ -1,42 +1,32 @@
 # ****** 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
-#
-# Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI_AF_FindNodeByID
-#
-# LICENSE: MIT License
-#
-# v0.0.04
+# Creator: Alex Furer - Co-Creator(s): Claude AI & DeepSeek
 #
 # 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-Find-Nodes
+#
+# Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI-AF-Find-Nodes/issues
+#
+# LICENSE: MIT License
+#
+# v0.0.07
+#
 # Usage:
 # Read Me on Github
 #
 # Changelog:
-# 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.
-# 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.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"
 #
+# Feature Requests / Wet Dreams
+# -

 class AF_Enhanced_HTML_Note:
    """
@@ -49,28 +39,123 @@ class AF_Enhanced_HTML_Note:
            "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>
+                    "default": """<h2>Positive Prompt Section</h2>
+<div class="af-section af-positive">
+	<h2>🟢 Positive Prompts</h2>
+	<p><strong>masterpiece, best quality, highly detailed</strong></p>
+	<ul>
+		<li>Professional lighting</li>
+		<li>Sharp focus</li>
+		<li>8K resolution</li>
+	</ul>
 </div>

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

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

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

+<h2>Neutral Prompt Section</h2>
 <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>
+	<h3>📝 Notes</h3>
+	<p>General notes and information...</p>
+	<ul>
+		<li>Item 1</li>
+		<li>Item 2</li>
+		<li>Item 3</li>
+	</ul>
+</div>
+
+<h2>Info Section</h2>
+<div class="af-section af-info">
+	<h3>ℹ️ Information</h3>
+	<p>Using: <strong>SDXL 1.0</strong></p>
+	<p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
+</div>
+
+<h2>Warning Section</h2>
+<div class="af-section af-warning">
+	<h3>⚠️ Warning</h3>
+	<p>This workflow requires:</p>
+	<ol>
+		<li>High VRAM (8GB+)</li>
+		<li>Latest ComfyUI version</li>
+		<li>SDXL compatible models</li>
+	</ol>
+</div>
+
+<h2>Column Layouts</h2>
+<div class="row">
+	<div class="af-column-half-left">
+		<div class="af-section af-positive">
+			<h3>🎨 Style Settings</h3>
+			<ul>
+				<li>Style: Photorealistic</li>
+				<li>Aspect: 16:9</li>
+				<li>Quality: Ultra High</li>
+			</ul>
+		</div>
+		
+		<div class="af-spacer"></div>
+		
+		<div class="af-section af-info">
+			<h3>⚙️ Technical</h3>
+			<p>Resolution: <code>1920x1080</code></p>
+			<p>Batch: <code>4</code></p>
+		</div>
+	</div>
+	
+	<div class="af-column-half-right">
+		<div class="af-section af-negative">
+			<h3>🚫 Exclusions</h3>
+			<ul>
+				<li>No text in image</li>
+				<li>Avoid oversaturation</li>
+				<li>No watermarks</li>
+			</ul>
+		</div>
+		
+		<div class="af-spacer"></div>
+		
+		<div class="af-section af-warning">
+			<h3>💡 Tips</h3>
+			<p>Use lower CFG for more creative results</p>
+		</div>
+	</div>
+</div>
+
+<h2>Clickable Links & Actions</h2>
+<div class="af-section af-info">
+	<h3>🔗 Interactive Links</h3>
+	
+	<!-- 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>
+	
+	<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>
+<div style="display: flex; gap: 10px; flex-wrap: wrap;">
+	<div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
+		<strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
+		<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
+	</div>
+	
+	<div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
+		<strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
+		<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
+	</div>
+	
+	<div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
+		<strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
+		<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
+	</div>
 </div>""",
                    "placeholder": "Enter your HTML content here..."
                }),
@@ -96,85 +181,4 @@ 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,137 +1,743 @@
-# AF Enhanced HTML Node - Usage Guide
+# AF Enhanced HTML Node - Complete 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
+![Version](https://img.shields.io/badge/version-0.0.5-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+![ComfyUI](https://img.shields.io/badge/ComfyUI-Compatible-orange)

-```html
-<!-- Positive section (green) -->
-<div class="af-section af-positive">
-    <h2>🟢 Positive Prompts</h2>
-    <p>Your positive prompts go here...</p>
-</div>
+---

-<!-- Negative section (red) -->
-<div class="af-section af-negative">
-    <h2>🔴 Negative Prompts</h2>
-    <p>Your negative prompts go here...</p>
-</div>
+## ✨ Key Features

-<!-- Neutral section (gray) -->
-<div class="af-section af-neutral">
-    <h3>📝 Notes</h3>
-    <p>General notes and information...</p>
-</div>
+- **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 (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

-<!-- Info section (blue) -->
-<div class="af-section af-info">
-    <h3>ℹ️ Information</h3>
-    <p>Important information...</p>
-</div>
+---

-<!-- Warning section (yellow) -->
-<div class="af-section af-warning">
-    <h3>⚠️ Warning</h3>
-    <p>Warning or caution messages...</p>
-</div>
+## 🛠️ Installation

-<!-- Custom section (purple) -->
-<div class="af-section af-custom">
-    <h3>🎨 Custom</h3>
-    <p>Custom styled content...</p>
-</div>
-```
+### Via ComfyUI Manager (Recommended)
+1. Open ComfyUI Manager
+2. Search for "AF - Enhanced HTML Note"
+3. Install

-## Spacers
+### 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
+	```
+	
+---

-```html
-<!-- Small spacer -->
-<div class="af-spacer-small"></div>
+## ⚠️ Disclaimer

-<!-- Regular spacer -->
-<div class="af-spacer"></div>
+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.

-<!-- Large spacer -->
-<div class="af-spacer-large"></div>
+**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

-<!-- Extra large spacer -->
-<div class="af-spacer-xl"></div>
-```
+This node has been carefully designed and tested, but individual system configurations may vary. Please report any issues on the GitHub repository.

-## Clickable Links
+---

-```html
-<!-- External link -->
-<a href="https://github.com/comfyanonymous/ComfyUI" target="_blank">ComfyUI GitHub</a>
+## 🎮 Interaction Guide

-<!-- Link with custom action -->
-<a href="#" onclick="alert('Custom action triggered!')">Click for alert</a>
+### 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

-<!-- Link with data attribute for custom handling -->
-<a href="#" data-action="custom-command">Custom Command</a>
-```
+### Using Links
+- **Hold Control key + Click** on any link to activate it
+- External links open in new tabs
+- JavaScript execution is disabled for security

-## Complete Example Template
+### 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)

+---
+
+## 🎨 Predefined Section Colors
+
+The node comes with several predefined colored section styles. Click each section below to see the code and rendered example.
+
+<details>
+<summary><b>🟢 Positive Section (Green)</b></summary>
+
+### Code:
 ```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>
 </div>
+```
+
+### Rendered Result:
+![Positive Section Example](examples/positive-section.webp)
+
+</details>
+
+<details>
+<summary><b>🔴 Negative Section (Red)</b></summary>
+
+### Code:
+```html
+<div class="af-section af-negative">
+    <h2>🔴 Negative Prompts</h2>
+    <p><em>low quality, blurry, distorted</em></p>
+    <p><code>nsfw, watermark, signature, bad anatomy</code></p>
+</div>
+```
+
+### Rendered Result:
+![Negative Section Example](examples/negative-section.webp)
+
+</details>
+
+<details>
+<summary><b>📝 Neutral Section (Gray)</b></summary>
+
+### Code:
+```html
+<div class="af-section af-neutral">
+    <h3>📝 Notes</h3>
+    <p>General notes and information...</p>
+    <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ul>
+</div>
+```
+
+### Rendered Result:
+![Neutral Section Example](examples/neutral-section.webp)
+
+</details>
+
+<details>
+<summary><b>ℹ️ Info Section (Light Blue)</b></summary>
+
+### Code:
+```html
+<div class="af-section af-info">
+    <h3>ℹ️ Information</h3>
+    <p>Using: <strong>SDXL 1.0</strong></p>
+    <p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
+</div>
+```
+
+### Rendered Result:
+![Info Section Example](examples/info-section.webp)
+
+</details>
+
+<details>
+<summary><b>⚠️ Warning Section (Yellow)</b></summary>
+
+### Code:
+```html
+<div class="af-section af-warning">
+    <h3>⚠️ Warning</h3>
+    <p>This workflow requires:</p>
+    <ol>
+        <li>High VRAM (8GB+)</li>
+        <li>Latest ComfyUI version</li>
+        <li>SDXL compatible models</li>
+    </ol>
+</div>
+```
+
+### Rendered Result:
+![Warning Section Example](examples/warning-section.webp)
+
+</details>
+
+<details>
+<summary><b>💛 Yellow Section (Alternative)</b></summary>
+
+### Code:
+```html
+<div class="af-section af-yellow">
+    <h3>💛 Yellow Section</h3>
+    <p>Alternative yellow styled content with different shade...</p>
+</div>
+```
+
+### Rendered Result:
+![Yellow Section Example](examples/yellow-section.webp)
+
+</details>
+
+<details>
+<summary><b>🔵 Blue Section (Deep Blue)</b></summary>
+
+### Code:
+```html
+<div class="af-section af-blue">
+    <h3>🔵 Blue Section</h3>
+    <p>Deep blue styled content for technical information...</p>
+</div>
+```
+
+### Rendered Result:
+![Blue Section Example](examples/blue-section.webp)
+
+</details>
+
+<details>
+<summary><b>🎨 Custom Section (Purple)</b></summary>
+
+### Code:
+```html
+<div class="af-section af-custom">
+    <h3>🎨 Custom</h3>
+    <p>Purple custom styled content for special cases...</p>
+</div>
+```
+
+### Rendered Result:
+![Custom Section Example](examples/custom-section.webp)
+
+</details>
+
+---
+
+## 📏 Predefined Spacers
+
+Use these spacer classes to control vertical spacing between elements.
+
+<details>
+<summary><b>All Spacer Sizes</b> - Click to see examples</summary>
+
+### Code:
+```html
+<div class="af-section af-positive">Content Block 1</div>
+
+<!-- Top spacer (2px) -->
+<div class="af-spacer-top"></div>
+
+<div class="af-section af-negative">Content Block 2</div>
+
+<!-- Mini spacer (4px) -->
+<div class="af-spacer-mini"></div>
+
+<div class="af-section af-neutral">Content Block 3</div>
+
+<!-- Small spacer (8px) -->
+<div class="af-spacer-small"></div>
+
+<div class="af-section af-info">Content Block 4</div>
+
+<!-- Regular spacer (16px) -->
+<div class="af-spacer"></div>
+
+<div class="af-section af-warning">Content Block 5</div>
+
+<!-- Large spacer (32px) -->
+<div class="af-spacer-large"></div>
+
+<div class="af-section af-custom">Content Block 6</div>
+
+<!-- Extra large spacer (48px) -->
+<div class="af-spacer-xl"></div>
+
+<div class="af-section af-blue">Content Block 7</div>
+```
+
+### Rendered Result:
+![Spacer Examples](examples/spacers.webp)
+
+### Size Reference:
+- `af-spacer-top` → 2px
+- `af-spacer-mini` → 4px
+- `af-spacer-small` → 8px
+- `af-spacer` → 16px (default)
+- `af-spacer-large` → 32px
+- `af-spacer-xl` → 48px
+
+</details>
+
+---
+
+## 📐 Column Layouts
+
+Create two-column layouts using the predefined column classes.
+
+<details>
+<summary><b>Two-Column Layout Example</b></summary>
+
+### Code:
+```html
+<div class="row">
+    <div class="af-column-half-left">
+        <div class="af-section af-positive">
+            <h3>🎨 Style Settings</h3>
+            <ul>
+                <li>Style: Photorealistic</li>
+                <li>Aspect: 16:9</li>
+                <li>Quality: Ultra High</li>
+            </ul>
+        </div>
+        
+        <div class="af-spacer"></div>
+        
+        <div class="af-section af-info">
+            <h3>⚙️ Technical</h3>
+            <p>Resolution: <code>1920x1080</code></p>
+            <p>Batch: <code>4</code></p>
+        </div>
+    </div>
+    
+    <div class="af-column-half-right">
+        <div class="af-section af-negative">
+            <h3>🚫 Exclusions</h3>
+            <ul>
+                <li>No text in image</li>
+                <li>Avoid oversaturation</li>
+                <li>No watermarks</li>
+            </ul>
+        </div>
+        
+        <div class="af-spacer"></div>
+        
+        <div class="af-section af-warning">
+            <h3>💡 Tips</h3>
+            <p>Use lower CFG for more creative results</p>
+        </div>
+    </div>
+</div>
+```
+
+### Rendered Result:
+![Two Column Layout Example](examples/two-column-layout.webp)
+
+**Note:** The `row` class ensures proper column wrapping, and each column is 49% width with 1% margin.
+
+</details>
+
+---
+
+## 🔗 Clickable Links & Actions
+
+All links require **Ctrl+Click** to activate for safety and to prevent accidental navigation. JavaScript actions work on links when Ctrl+Click is used.
+
+<details>
+<summary><b>Link Examples</b></summary>
+
+### Code:
+```html
+<div class="af-section af-info">
+    <h3>🔗 Interactive Links</h3>
+    
+    <!-- External link (opens in new tab with Ctrl+click) -->
+    <p><a href="https://github.com/comfyanonymous/ComfyUI">ComfyUI GitHub Repository</a></p>
+    
+    <!-- Anchor link (page navigation with Ctrl+click) -->
+    <p><a href="#section-name">Jump to section</a></p>
+    
+    <!-- Mailto link (opens email client with Ctrl+click) -->
+    <p><a href="mailto:example@domain.com">Send Email</a></p>
+    
+    <!-- Relative URL (opens in new tab with Ctrl+click) -->
+    <p><a href="docs/page.html">Documentation</a></p>
+</div>
+```
+
+**Remember:** Hold **Ctrl** while clicking any link to activate it!
+
+### Rendered Result:
+![Link Examples](examples/links.webp)
+
+</details>
+
+### 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
+
+### 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 HTML & Inline Styles
+
+The node supports **standard HTML** with **inline CSS styling**. You can write custom HTML just like you would for a webpage.
+
+### ✅ Supported Features
+
+- **All standard HTML tags**: `<div>`, `<span>`, `<p>`, `<h1>`-`<h6>`, `<ul>`, `<ol>`, `<li>`, `<table>`, etc.
+- **Inline CSS styles**: Use the `style` attribute on any element
+- **Text formatting**: `<strong>`, `<em>`, `<u>`, `<small>`, `<code>`, `<pre>`
+- **Lists**: Ordered and unordered lists
+- **Tables**: Full table support with styling
+- **Horizontal rules**: `<hr>` for dividers
+- **Code blocks**: `<code>` and `<pre>` tags
+
+---
+
+## 🎨 Custom Styling Examples
+
+<details>
+<summary><b>Custom Spacers with Inline Styles</b></summary>
+
+### Code:
+```html
+<div class="af-section af-positive">First Section</div>
+
+<!-- Custom 12px spacer -->
+<div style="height: 12px;"></div>
+
+<div class="af-section af-negative">Second Section</div>
+
+<!-- Custom 24px spacer -->
+<div style="height: 24px;"></div>
+
+<div class="af-section af-info">Third Section</div>
+
+<!-- Custom 50px spacer -->
+<div style="height: 50px;"></div>
+
+<div class="af-section af-warning">Fourth Section</div>
+```
+
+### Rendered Result:
+![Custom Spacers](examples/custom-spacers.webp)
+
+</details>
+
+<details>
+<summary><b>Custom Colored Sections</b></summary>
+
+### Code:
+```html
+<!-- Custom pink section -->
+<div style="background: rgba(255, 100, 150, 0.1); border-left: 4px solid #ff6496; padding: 12px; border-radius: 6px; margin: 8px 0;">
+    <h3 style="color: #ff6496; margin-top: 0;">Custom Pink Section</h3>
+    <p>Your content here with custom colors...</p>
+</div>
+
+<!-- Custom teal section -->
+<div style="background: rgba(64, 224, 208, 0.1); border-left: 4px solid #40E0D0; padding: 12px; border-radius: 6px; margin: 8px 0;">
+    <h3 style="color: #40E0D0; margin-top: 0;">Custom Teal Section</h3>
+    <p>Different color scheme for variety...</p>
+</div>
+
+<!-- Custom orange section -->
+<div style="background: rgba(255, 165, 0, 0.1); border-left: 4px solid #FFA500; padding: 12px; border-radius: 6px; margin: 8px 0;">
+    <h3 style="color: #FFA500; margin-top: 0;">Custom Orange Section</h3>
+    <p>Create any color combination you need...</p>
+</div>
+```
+
+### Rendered Result:
+![Custom Colors](examples/custom-colors.webp)
+
+</details>
+
+<details>
+<summary><b>Custom Text Styling</b></summary>
+
+### Code:
+```html
+<div class="af-section af-neutral">
+    <!-- Large blue bold text -->
+    <p style="font-size: 18px; color: #58a6ff; font-weight: bold;">
+        Large blue bold text for emphasis
+    </p>
+    
+    <!-- Small gray italic text -->
+    <p style="font-size: 12px; color: #888; font-style: italic;">
+        Small gray italic text for subtitles
+    </p>
+    
+    <!-- Highlighted text -->
+    <p style="background: rgba(255, 255, 0, 0.2); padding: 4px 8px; border-radius: 3px;">
+        Highlighted text with yellow background
+    </p>
+    
+    <!-- Custom monospace -->
+    <p style="font-family: 'Courier New', monospace; color: #90EE90; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 4px;">
+        Custom monospace text for code-like display
+    </p>
+</div>
+```
+
+### Rendered Result:
+![Custom Text Styles](examples/custom-text.webp)
+
+</details>
+
+<details>
+<summary><b>Custom Borders and Boxes</b></summary>
+
+### Code:
+```html
+<!-- Dashed border box -->
+<div style="border: 2px dashed #90EE90; padding: 16px; margin: 10px 0; background: rgba(0, 0, 0, 0.2); border-radius: 8px;">
+    <p><strong>Dashed Border Box</strong></p>
+    <p>Content in a custom dashed border box</p>
+</div>
+
+<!-- Solid border with shadow effect -->
+<div style="border: 2px solid #58a6ff; padding: 16px; margin: 10px 0; background: rgba(88, 166, 255, 0.05); box-shadow: 0 4px 8px rgba(0,0,0,0.3); border-radius: 8px;">
+    <p><strong>Solid Border with Shadow</strong></p>
+    <p>Creates depth with shadow effect</p>
+</div>
+
+<!-- Thick left border -->
+<div style="border-left: 8px solid #BA55D3; padding: 16px; margin: 10px 0; background: rgba(186, 85, 211, 0.1);">
+    <p><strong>Thick Left Border</strong></p>
+    <p>Emphasizes content with thick accent border</p>
+</div>
+```
+
+### Rendered Result:
+![Custom Borders](examples/custom-borders.webp)
+
+</details>
+
+<details>
+<summary><b>Custom Layouts and Alignment</b></summary>
+
+### Code:
+```html
+<!-- Centered content -->
+<div style="text-align: center; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 8px; margin: 10px 0;">
+    <h2 style="margin: 0 0 12px 0;">Centered Title</h2>
+    <p style="margin: 0;">Centered paragraph text for announcements</p>
+</div>
+
+<!-- Right-aligned content -->
+<div style="text-align: right; padding: 10px; border-top: 1px solid #555; margin-top: 20px;">
+    <small style="color: #888;">Right-aligned footer note</small>
+</div>
+
+<!-- Flex layout for inline elements -->
+<div style="display: flex; gap: 10px; align-items: center; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 6px;">
+    <span style="background: #90EE90; color: #000; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 1</span>
+    <span style="background: #58a6ff; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 2</span>
+    <span style="background: #FFA500; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 3</span>
+</div>
+```
+
+### Rendered Result:
+![Custom Layouts](examples/custom-layouts.webp)
+
+</details>
+
+<details>
+<summary><b>Custom Info Cards</b></summary>
+
+### Code:
+```html
+<div style="display: flex; gap: 10px; flex-wrap: wrap;">
+    <div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
+        <strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
+        <p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
+    </div>
+    
+    <div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
+        <strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
+        <p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
+    </div>
+    
+    <div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
+        <strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
+        <p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
+    </div>
+</div>
+```
+
+### Rendered Result:
+![Custom Info Cards](examples/custom-cards.webp)
+
+</details>
+
+---
+
+## 📋 Complete Workflow Example
+
+<details>
+<summary><b>Full Workflow Documentation Template</b></summary>
+
+### Code:
+```html
+<div class="af-section af-positive">
+    <h2>🟢 Positive Prompts</h2>
+    <p><strong>masterpiece, best quality, highly detailed, 8k uhd, professional photography</strong></p>
+    <ul>
+        <li>Professional lighting and composition</li>
+        <li>Sharp focus with bokeh background</li>
+        <li>Photorealistic textures and materials</li>
+        <li>Award-winning cinematography</li>
+    </ul>
+    <a href="https://example.com/prompts">📋 View Prompt Guide</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, worst quality, blurry, out of focus</em></p>
+    <p><code>nsfw, watermark, signature, text, bad anatomy, deformed, ugly, mutation</code></p>
 </div>

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

 <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>Model: <strong>SDXL 1.0 Base</strong></p>
+    <p>Settings: Steps <code>25</code> | CFG <code>7.5</code> | Sampler <code>DPM++ 2M Karras</code></p>
+    <p>Resolution: <code>1024x1024</code> | Batch Size: <code>4</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>⚠️ System Requirements</h3>
+    <p>This workflow requires:</p>
+    <ol>
+        <li>GPU with 8GB+ VRAM (12GB recommended)</li>
+        <li>ComfyUI latest version</li>
+        <li>SDXL compatible checkpoint</li>
+        <li>Required custom nodes installed</li>
+    </ol>
 </div>

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

 <div class="af-section af-neutral">
-    <h3>📝 Notes</h3>
-    <p>Remember to:</p>
-    <ol>
-        <li>Check image dimensions</li>
-        <li>Adjust sampling method</li>
-        <li>Fine-tune CFG scale</li>
-    </ol>
+    <h3>📝 Workflow Notes</h3>
+    <p><strong>Tips for best results:</strong></p>
+    <ul>
+        <li>Verify image dimensions before generating</li>
+        <li>Lower CFG (6-7) for more creative interpretations</li>
+        <li>Higher CFG (8-10) for more prompt adherence</li>
+        <li>Save your workflow frequently!</li>
+    </ul>
    <hr>
-    <p><small>Last updated: Today</small></p>
+    <p><small>Last updated: 2025-01-15 | Created with AF Enhanced HTML Node v0.0.5</small></p>
 </div>
 ```

-## Features
+### Rendered Result:
+![Complete Workflow Example](examples/complete-workflow.webp)

- **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
+</details>

-## Installation
+---

-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**
+## 🐛 Troubleshooting
+
+<details>
+<summary><b>Common Issues and Solutions</b></summary>
+
+### Node won't select/move?
+**Solution:** Click on the node's title bar or edges, not the HTML content area
+
+### 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
+
+### Styling not applying?
+**Solution:**
+- Use inline styles with the `style` attribute
+- Check for CSS syntax errors in your inline styles
+- Predefined classes must be spelled exactly as documented
+
+### Content not saving?
+**Solution:** 
+- Press **Escape** or click outside to exit edit mode
+- Ensure you're not just closing the browser/tab
+- Save your ComfyUI workflow after making changes
+
+</details>
+
+---
+
+## 📚 Quick Reference
+
+### Predefined Color Classes
+| Class | Color | Use Case |
+|-------|-------|----------|
+| `af-positive` | Green | Positive prompts, success messages |
+| `af-negative` | Red | Negative prompts, errors, warnings |
+| `af-neutral` | Gray | General notes, neutral information |
+| `af-info` | Light Blue | Information, technical details |
+| `af-warning` | Yellow | Warnings, cautions |
+| `af-yellow` | Yellow | Alternative yellow styling |
+| `af-blue` | Deep Blue | Technical information |
+| `af-custom` | Purple | Custom content, special cases |
+
+### Predefined Spacer Classes
+| Class | Height | Use Case |
+|-------|--------|----------|
+| `af-spacer-top` | 2px | Minimal spacing |
+| `af-spacer-mini` | 4px | Tiny spacing |
+| `af-spacer-small` | 8px | Small spacing |
+| `af-spacer` | 16px | Default spacing |
+| `af-spacer-large` | 32px | Large spacing |
+| `af-spacer-xl` | 48px | Extra large spacing |
+
+### Column Layout Classes
+| Class | Width | Use Case |
+|-------|-------|----------|
+| `af-column-half-left` | 49% | Left column in two-column layout |
+| `af-column-half-right` | 49% | Right column in two-column layout |
+| `row` | Container | Wrap around columns for proper layout |
+
+### Keyboard Shortcuts
+| Shortcut | Action |
+|----------|--------|
+| **Double-click** | Enter edit mode |
+| **Escape** | Exit edit mode and save |
+| **Ctrl+Click** | Activate links (JavaScript disabled) |
+
+---
+
+## 📞 Support & Credits
+
+- **Creator:** Alex Furer
+- **Co-Creators:** Claude AI & DeepSeek
+- **GitHub:** [ComfyUI_AF_FindNodes](https://github.com/alFrame/ComfyUI-AF-Find-Nodes)
+- **License:** MIT License
+- **Version:** 0.0.5
@@ -1,10 +1,42 @@
-# AF - Enhanced HTML-Note Node for ComfyUI
-# File: __init__.py
+"""
+@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"

-__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']
+__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("*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *")
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AF - SDXL Workflow - Help-A</title>
+	
+	<link rel="stylesheet" href="./styles.css">
+
+
+</head>
+<body>
+
+<div class="af-html-note-container">
+	<div class="af-html-note-content">
+		<!-- THIS CONTENT TO JS FILE -->
+
+<div style="height: 3px;"></div>
+
+<div class="af-section af-positive">
+	<h2>🟢 Generated Positive Global Prompt</h2>
+	<p>If you use any of the prompt generators ( [A], [B], [C], [D], [E] )<br/>
+	the genertaed prompt will be sent to this widget.<br/><br/>
+	</p>
+</div>
+
+<div style="height: 12px;"></div>
+
+<div class="af-section af-positive">
+	<h2>🟢 Manual Positive Global Prompt</h2>
+	<p>You can either write your own prompt, or use a generated prompt.<br/>
+	To use the generated prompt without editing, leave this widget empty.<br/>
+	If you wish to edit the generated prompt, click the "Copy Generated Prompt for Editing" button.
+	</p>
+</div>
+
+<div style="height: 2px;"></div>
+
+<div class="af-section af-neutral">
+	<p>Button to copy and edit the generated prompt.<p>
+</div>
+
+<div style="height: 65px;"></div>
+
+<div class="af-section af-negative">
+	<h2>🔴 Generated Negative Global Prompt</h2>
+	<p>Your generated negative prompt will be sent to this widget (same as above).</p>
+</div>
+
+<div style="height: 10px;"></div>
+
+<div class="af-section af-negative">
+	<h2>🔴 Manual Negative Global Prompt</h2>
+	<p>Here you can either enter a rompt manually, or copy the generated to edit (same as above).</p>
+</div>
+
+<div style="height: 2px;"></div>
+
+<div class="af-section af-neutral">
+	<p>Button to copy and edit the generated prompt.<p>
+</div>
+
+<div style="height: 170px;"></div>
+
+<div class="af-section af-positive">
+	<h2>🟢 Generated Positive Local Prompt</h2>
+	<p>Same as above. <strong>BUT</strong> make sure to set "5. Plain Prompt OR TextEncoded Prompt" to true  for this prompt to take effect !!
+	</p>
+</div>
+
+<div style="height: 10px;"></div>
+
+<div class="af-section af-positive">
+	<h2>🟢 Manual Positive Local Prompt</h2>
+	<p>Here you can either enter a rompt manually, or copy the generated to edit (same as above).
+	</p>
+</div>
+
+<div style="height: 2px;"></div>
+
+<div class="af-section af-neutral">
+	<p>Button to copy and edit the generated prompt.<p>
+</div>
+
+<div style="height: 152px;"></div>
+
+<div class="af-section af-blue">
+	<h2>Styles Drop-Down's</h2>
+	<p>Here you can choose up to four styles that will be applied.</p>
+</div>
+
+<div style="height: 2px;"></div>
+
+<div class="af-section af-neutral">
+	<p>Button to copy and edit the generated prompt.<p>
+</div>
+
+<div style="height: 350px;"></div>
+
+<div class="row">
+  <div class="af-column-half-left af-section af-positive">
+	<h2>Positive Prompt Text Encoding</h2>
+	<p>The CLIP Text Encode SDXL node encodes text prompts into SDXL-compatible conditioning embeddings using a dual CLIP encoder system, while incorporating image dimensions, crop, and target parameters to provide spatial context for the diffusion model.<br/><br/>
+	In other words, it can improve your image creation.<br/><br/>
+	<a href="https://docs.comfy.org/built-in-nodes/ClipTextEncodeSdxl">ComyUI manual page</a></p>
+  </div>
+  <div class="af-column-half-right af-section af-negative">
+	<h2>Negative Prompt Text Encoding</h2>
+	<p>The same as on the positive Prompt Text Encode<br/><br/><br/><br/><br/><br/><br/><br/><br/></p>
+  </div>
+</div>
+
+<div style="height: 126px;"></div>
+
+<div class="af-section af-blue">
+	<h2>Plain Prompt, OR Text Encoded Prompt (Subgraph)</h2>
+	<p>Here you can choose if you want to use the plain prompt, or the Text Encoded Prompt.<br/><br/>
+		If you choose to use the <strong>plain prompt (false)</strong>, it means that the <strong>local prompts</strong> will be ignored and the prompt will not be text encoded !!</p>
+</div>
+
+<div style="height: 225px;"></div>
+
+<div class="af-section af-yellow">
+	<h2>Save that hard earned prompting</h2>
+	<p>Here you can choose setup the <strong>Folder</strong and the <strong>File Name</strong> of the .csv file that will store all your prompts.<br/>
+	Additionally you can also define a <strong>Project Name</strong>, which will let you identify the relevant prompts later.</p>
+</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>
+		
+		<!-- END THIS CONTENT TO JS FILE -->
+	</div>
+</div>
+
+
+</body>
+</html>
+
+
+
@@ -0,0 +1,408 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AF - Enhanced HTML Note - Default Content</title>
+	
+	<link rel="stylesheet" href="./styles.css">
+
+
+</head>
+<body style="background-color: #2a2a2a;">
+
+<div class="af-html-note-container">
+	<div class="af-html-note-content">
+		<!-- THIS CONTENT TO JS FILE -->
+		
+<h1>Predefined Section Colors</h1>
+<h2>Positive Prompt Section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-positive">
+        <h2>🟢 Positive Prompts</h2>
+        <p><strong>masterpiece, best quality, highly detailed</strong></p>
+        <ul>
+            <li>Professional lighting</li>
+            <li>Sharp focus</li>
+            <li>8K resolution</li>
+        </ul>
+    </div>
+</div>
+
+<h2>Negative Prompt Section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-negative">
+        <h2>🔴 Negative Prompts</h2>
+        <p><em>low quality, blurry, distorted</em></p>
+        <p><code>nsfw, watermark, signature, bad anatomy</code></p>
+    </div>
+</div>
+
+<h2>Neutral Prompt Section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-neutral">
+        <h3>📝 Notes</h3>
+        <p>General notes and information...</p>
+        <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+        </ul>
+    </div>
+</div>
+
+<h2>Info Section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-info">
+        <h3>ℹ️ Information</h3>
+        <p>Using: <strong>SDXL 1.0</strong></p>
+        <p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
+    </div>
+</div>
+
+<h2>Warning Section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-warning">
+        <h3>⚠️ Warning</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>
+
+<h2>Yellow Section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-yellow">
+        <h3>💛 Yellow Section</h3>
+        <p>Alternative yellow styled content with different shade...</p>
+    </div>
+</div>
+
+<h2>Blue Section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-blue">
+        <h3>🔵 Blue Section</h3>
+        <p>Deep blue styled content for technical information...</p>
+    </div>
+</div>
+
+<h2>Custom Section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-custom">
+        <h3>🎨 Custom</h3>
+        <p>Purple custom styled content for special cases...</p>
+    </div>
+</div>
+
+<h1>Predefined Spacers</h1>
+<h2>Top spacer (2px)</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-spacer-top"></div>
+    
+    <div class="af-section af-negative">Content Block 1</div>
+</div>
+
+<h2>Mini spacer (4px)</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-spacer-mini"></div>
+    
+    <div class="af-section af-neutral">Content Block 2</div>
+</div>
+
+<h2>Small spacer (8px)</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-spacer-small"></div>
+    
+    <div class="af-section af-info">Content Block 3</div>
+</div>
+
+<h2>Regular spacer (16px)</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-spacer"></div>
+    
+    <div class="af-section af-warning">Content Block 4</div>
+</div>
+
+<h2>Large spacer (32px)</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-spacer-large"></div>
+    
+    <div class="af-section af-custom">Content Block 5</div>
+</div>
+
+<h2>Extra large spacer (48px)</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-spacer-xl"></div>
+    
+    <div class="af-section af-blue">Content Block 6</div>
+</div>
+
+<h2>Column Layouts</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="row">
+        <div class="af-column-half-left">
+            <div class="af-section af-positive">
+                <h3>🎨 Style Settings</h3>
+                <ul>
+                    <li>Style: Photorealistic</li>
+                    <li>Aspect: 16:9</li>
+                    <li>Quality: Ultra High</li>
+                </ul>
+            </div>
+            
+            <div class="af-spacer"></div>
+            
+            <div class="af-section af-info">
+                <h3>⚙️ Technical</h3>
+                <p>Resolution: <code>1920x1080</code></p>
+                <p>Batch: <code>4</code></p>
+            </div>
+        </div>
+        
+        <div class="af-column-half-right">
+            <div class="af-section af-negative">
+                <h3>🚫 Exclusions</h3>
+                <ul>
+                    <li>No text in image</li>
+                    <li>Avoid oversaturation</li>
+                    <li>No watermarks</li>
+                </ul>
+            </div>
+            
+            <div class="af-spacer"></div>
+            
+            <div class="af-section af-warning">
+                <h3>💡 Tips</h3>
+                <p>Use lower CFG for more creative results</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<h2>Clickable Links & Actions</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+	<div class="af-section af-info">
+		<h3>🔗 Interactive Links</h3>
+		
+		<!-- 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>
+		
+		<h4>Anchor Links</h4>
+		<p><a href="https://www.fullframestudios.ch/#ThreeDee">Full Frame Studios - Alex Furer - 3D</a></p>
+	</div>
+</div>
+
+<h2>Custom Styling Examples</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-positive">First Section</div>
+    
+    <h2>Custom 12px spacer</h2>
+    <div style="height: 12px;"></div>
+    
+    <div class="af-section af-negative">Second Section</div>
+    
+    <h2>Custom 24px spacer</h2>
+    <div style="height: 24px;"></div>
+    
+    <div class="af-section af-info">Third Section</div>
+    
+    <h2>Custom 50px spacer</h2>
+    <div style="height: 50px;"></div>
+    
+    <div class="af-section af-warning">Fourth Section</div>
+</div>
+
+<h1>Custom Color Sections</h1>
+<h2>Custom pink section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="background: rgba(255, 100, 150, 0.1); border-left: 4px solid #ff6496; padding: 12px; border-radius: 6px; margin: 8px 0;">
+        <h3 style="color: #ff6496; margin-top: 0;">Custom Pink Section</h3>
+        <p>Your content here with custom colors...</p>
+    </div>
+</div>
+
+<h2>Custom teal section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="background: rgba(64, 224, 208, 0.1); border-left: 4px solid #40E0D0; padding: 12px; border-radius: 6px; margin: 8px 0;">
+        <h3 style="color: #40E0D0; margin-top: 0;">Custom Teal Section</h3>
+        <p>Different color scheme for variety...</p>
+    </div>
+</div>
+
+<h2>Custom orange section</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="background: rgba(255, 165, 0, 0.1); border-left: 4px solid #FFA500; padding: 12px; border-radius: 6px; margin: 8px 0;">
+        <h3 style="color: #FFA500; margin-top: 0;">Custom Orange Section</h3>
+        <p>Create any color combination you need...</p>
+    </div>
+</div>
+
+<h2>Text Examples</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-neutral">
+        <!-- Large blue bold text -->
+        <p style="font-size: 18px; color: #58a6ff; font-weight: bold;">
+            Large blue bold text for emphasis
+        </p>
+        
+        <!-- Small gray italic text -->
+        <p style="font-size: 12px; color: #888; font-style: italic;">
+            Small gray italic text for subtitles
+        </p>
+        
+        <!-- Highlighted text -->
+        <p style="background: rgba(255, 255, 0, 0.2); padding: 4px 8px; border-radius: 3px;">
+            Highlighted text with yellow background
+        </p>
+        
+        <!-- Custom monospace -->
+        <p style="font-family: 'Courier New', monospace; color: #90EE90; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 4px;">
+            Custom monospace text for code-like display
+        </p>
+    </div>
+</div>
+
+<h1>Custom Border Sections</h1>
+<h2>Dashed border box</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="border: 2px dashed #90EE90; padding: 16px; margin: 10px 0; background: rgba(0, 0, 0, 0.2); border-radius: 8px;">
+        <p><strong>Dashed Border Box</strong></p>
+        <p>Content in a custom dashed border box</p>
+    </div>
+</div>
+
+<h2>Solid border with shadow effect</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="border: 2px solid #58a6ff; padding: 16px; margin: 10px 0; background: rgba(88, 166, 255, 0.05); box-shadow: 0 4px 8px rgba(0,0,0,0.3); border-radius: 8px;">
+        <p><strong>Solid Border with Shadow</strong></p>
+        <p>Creates depth with shadow effect</p>
+    </div>
+</div>
+
+<h2>Thick left border</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="border-left: 8px solid #BA55D3; padding: 16px; margin: 10px 0; background: rgba(186, 85, 211, 0.1);">
+        <p><strong>Thick Left Border</strong></p>
+        <p>Emphasizes content with thick accent border</p>
+    </div>
+</div>
+
+<h1>Align Content</h1>
+<h2>Centered content</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="text-align: center; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 8px; margin: 10px 0;">
+        <h2 style="margin: 0 0 12px 0;">Centered Title</h2>
+        <p style="margin: 0;">Centered paragraph text for announcements</p>
+    </div>
+</div>
+
+<h2>Right-aligned content</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="text-align: right; padding: 10px; border-top: 1px solid #555; margin-top: 20px;">
+        <small style="color: #888;">Right-aligned footer note</small>
+    </div>
+</div>
+
+<h2>Flex layout for inline elements</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="display: flex; gap: 10px; align-items: center; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 6px;">
+        <span style="background: #90EE90; color: #000; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 1</span>
+        <span style="background: #58a6ff; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 2</span>
+        <span style="background: #FFA500; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 3</span>
+    </div>
+</div>
+
+<h2>Custom Info Cards</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+        <div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
+            <strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
+            <p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
+        </div>
+        
+        <div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
+            <strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
+            <p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
+        </div>
+        
+        <div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
+            <strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
+            <p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
+        </div>
+    </div>
+</div>
+
+<h2>Complete Workflow Example</h2>
+<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
+    <div class="af-section af-positive">
+        <h2>🟢 Positive Prompts</h2>
+        <p><strong>masterpiece, best quality, highly detailed, 8k uhd, professional photography</strong></p>
+        <ul>
+            <li>Professional lighting and composition</li>
+            <li>Sharp focus with bokeh background</li>
+            <li>Photorealistic textures and materials</li>
+            <li>Award-winning cinematography</li>
+        </ul>
+        <a href="#" onclick="alert('Positive prompts copied to clipboard!')">📋 Copy Prompts</a>
+    </div>
+    
+    <div class="af-spacer"></div>
+    
+    <div class="af-section af-negative">
+        <h2>🔴 Negative Prompts</h2>
+        <p><em>low quality, worst quality, blurry, out of focus</em></p>
+        <p><code>nsfw, watermark, signature, text, bad anatomy, deformed, ugly, mutation</code></p>
+    </div>
+    
+    <div class="af-spacer-large"></div>
+    
+    <div class="af-section af-info">
+        <h3>ℹ️ Model Information</h3>
+        <p>Model: <strong>SDXL 1.0 Base</strong></p>
+        <p>Settings: Steps <code>25</code> | CFG <code>7.5</code> | Sampler <code>DPM++ 2M Karras</code></p>
+        <p>Resolution: <code>1024x1024</code> | Batch Size: <code>4</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>⚠️ System Requirements</h3>
+        <p>This workflow requires:</p>
+        <ol>
+            <li>GPU with 8GB+ VRAM (12GB recommended)</li>
+            <li>ComfyUI latest version</li>
+            <li>SDXL compatible checkpoint</li>
+            <li>Required custom nodes installed</li>
+        </ol>
+    </div>
+    
+    <div class="af-spacer"></div>
+    
+    <div class="af-section af-neutral">
+        <h3>📝 Workflow Notes</h3>
+        <p><strong>Tips for best results:</strong></p>
+        <ul>
+            <li>Verify image dimensions before generating</li>
+            <li>Lower CFG (6-7) for more creative interpretations</li>
+            <li>Higher CFG (8-10) for more prompt adherence</li>
+            <li>Save your workflow frequently!</li>
+        </ul>
+        <hr>
+        <p><small>Last updated: 2025-01-15 | Created with AF Enhanced HTML Node v0.0.5</small></p>
+    </div>
+</div>
+
+		<!-- END THIS CONTENT TO JS FILE -->
+	</div>
+</div>
+
+</body>
+</html>
+
+
+
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AF - Enhanced HTML Note - Default Content</title>
+	
+	<link rel="stylesheet" href="./styles.css">
+
+
+</head>
+<body style="background-color: #2a2a2a;">
+
+<div class="af-html-note-container">
+	<div class="af-html-note-content">
+		<!-- BEGINNING: THIS CONTENT TO MAIN.PY FILE -->
+		
+		
+		
+<h2>Positive Prompt Section</h2>
+<div class="af-section af-positive">
+	<h2>🟢 Positive Prompts</h2>
+	<p><strong>masterpiece, best quality, highly detailed</strong></p>
+	<ul>
+		<li>Professional lighting</li>
+		<li>Sharp focus</li>
+		<li>8K resolution</li>
+	</ul>
+</div>
+
+
+<h2>Negative Prompt Section</h2>
+<div class="af-section af-negative">
+	<h2>🔴 Negative Prompts</h2>
+	<p><em>low quality, blurry, distorted</em></p>
+	<p><code>nsfw, watermark, signature, bad anatomy</code></p>
+</div>
+
+
+<h2>Neutral Prompt Section</h2>
+<div class="af-section af-neutral">
+	<h3>📝 Notes</h3>
+	<p>General notes and information...</p>
+	<ul>
+		<li>Item 1</li>
+		<li>Item 2</li>
+		<li>Item 3</li>
+	</ul>
+</div>
+
+<h2>Info Section</h2>
+<div class="af-section af-info">
+	<h3>ℹ️ Information</h3>
+	<p>Using: <strong>SDXL 1.0</strong></p>
+	<p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
+</div>
+
+<h2>Warning Section</h2>
+<div class="af-section af-warning">
+	<h3>⚠️ Warning</h3>
+	<p>This workflow requires:</p>
+	<ol>
+		<li>High VRAM (8GB+)</li>
+		<li>Latest ComfyUI version</li>
+		<li>SDXL compatible models</li>
+	</ol>
+</div>
+
+<h2>Column Layouts</h2>
+<div class="row">
+	<div class="af-column-half-left">
+		<div class="af-section af-positive">
+			<h3>🎨 Style Settings</h3>
+			<ul>
+				<li>Style: Photorealistic</li>
+				<li>Aspect: 16:9</li>
+				<li>Quality: Ultra High</li>
+			</ul>
+		</div>
+		
+		<div class="af-spacer"></div>
+		
+		<div class="af-section af-info">
+			<h3>⚙️ Technical</h3>
+			<p>Resolution: <code>1920x1080</code></p>
+			<p>Batch: <code>4</code></p>
+		</div>
+	</div>
+	
+	<div class="af-column-half-right">
+		<div class="af-section af-negative">
+			<h3>🚫 Exclusions</h3>
+			<ul>
+				<li>No text in image</li>
+				<li>Avoid oversaturation</li>
+				<li>No watermarks</li>
+			</ul>
+		</div>
+		
+		<div class="af-spacer"></div>
+		
+		<div class="af-section af-warning">
+			<h3>💡 Tips</h3>
+			<p>Use lower CFG for more creative results</p>
+		</div>
+	</div>
+</div>
+
+<h2>Clickable Links & Actions</h2>
+<div class="af-section af-info">
+	<h3>🔗 Interactive Links</h3>
+	
+	<!-- 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>
+	
+	<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>
+<div style="display: flex; gap: 10px; flex-wrap: wrap;">
+	<div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
+		<strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
+		<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
+	</div>
+	
+	<div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
+		<strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
+		<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
+	</div>
+	
+	<div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
+		<strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
+		<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
+	</div>
+</div>
+
+
+		<!-- END: THIS CONTENT TO MAIN.PY FILE -->
+	</div>
+</div>
+
+</body>
+</html>
@@ -0,0 +1,276 @@
+.af-html-note-container {
+	width: 100%;
+	height: 100%;
+	min-height: 100px;
+	background: var(--comfy-menu-bg, #2a2a2a);
+	/* border: 1px solid var(--border-color, #555); */
+	padding: 8px;
+	box-sizing: border-box;
+	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%;
+	overflow-y: auto;
+	flex: 1;
+	/* Prevent text selection */
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	cursor: default;
+	/* Prevent keyboard focus */
+	outline: none;
+}
+
+/* Ensure content area can't be focused */
+.af-html-note-content:focus {
+	outline: none;
+}
+
+.af-html-note-editor {
+	width: 100%;
+	height: 100%;
+	background: var(--comfy-menu-bg, #2a2a2a);
+	border: 1px solid var(--border-color, #555);
+	padding: 8px;
+	font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
+	line-height: 1.4;
+	color: var(--input-text, #ffffff);
+	box-sizing: border-box;
+	resize: none;
+	outline: none;
+	font-size: 14px;
+	display: none;
+	flex: 1;
+	/* Add text selection capabilities */
+	user-select: auto;
+	-webkit-user-select: auto;
+	-moz-user-select: auto;
+	-ms-user-select: auto;
+	cursor: text;
+}
+
+/* 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 {
+	display: none;
+}
+
+.af-html-note-container.edit-mode .af-html-note-editor {
+	display: block;
+}
+
+/* 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;
+	margin-bottom: 12px;
+	font-weight: 600;
+}
+
+.af-html-note-content h1 { font-size: 1.5em; }
+.af-html-note-content h2 { font-size: 1.3em; }
+.af-html-note-content h3 { font-size: 1.1em; }
+
+.af-html-note-content .af-section {
+	padding: 8px 16px;
+	margin: 8px 0;
+	border-radius: 6px;
+	border-left: 4px solid;
+}
+
+.af-html-note-content .af-section.af-positive {
+	background: rgba(144, 238, 144, 0.1);
+	border-left-color: #90EE90;
+}
+
+.af-html-note-content .af-section.af-negative {
+	background: rgba(255, 107, 107, 0.1);
+	border-left-color: #FF6B6B;
+}
+
+.af-html-note-content .af-section.af-neutral {
+	background: rgba(224, 224, 224, 0.1);
+	border-left-color: #E0E0E0;
+}
+
+.af-html-note-content .af-section.af-info {
+	background: rgba(135, 206, 235, 0.1);
+	border-left-color: #87CEEB;
+}
+
+.af-html-note-content .af-section.af-warning {
+	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-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 code {
+	background: rgba(0,0,0,0.3);
+	padding: 2px 6px;
+	border-radius: 4px;
+	font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
+	font-size: 0.9em;
+	color: #f0f6fc;
+}
+
+.af-html-note-content pre {
+	background: rgba(0,0,0,0.4);
+	border: 1px solid #444;
+	border-radius: 6px;
+	padding: 12px;
+	margin: 16px 0;
+	overflow-x: auto;
+}
+
+.af-html-note-content pre code {
+	background: transparent;
+	padding: 0;
+}
+
+.af-html-note-content ul, .af-html-note-content ol {
+	padding-left: 20px;
+	margin: 12px 0;
+}
+
+.af-html-note-content li { margin: 4px 0; }
+.af-html-note-content p { margin: 8px 0; }
+
+.af-html-note-content table {
+	border-collapse: collapse;
+	width: 100%;
+	margin: 16px 0;
+}
+
+.af-html-note-content th, .af-html-note-content td {
+	border: 1px solid var(--border-color, #555);
+	padding: 8px 12px;
+	text-align: left;
+}
+
+.af-html-note-content th {
+	background: rgba(255,255,255,0.1);
+	font-weight: 600;
+}
+
+.af-html-note-content hr {
+	border: none;
+	border-top: 1px solid var(--border-color, #555);
+	margin: 16px 0;
+	opacity: 0.6;
+}
+
+.af-html-note-container::-webkit-scrollbar { width: 8px; }
+.af-html-note-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
+.af-html-note-container::-webkit-scrollbar-thumb { 
+	background: var(--border-color, #555); 
+	border-radius: 4px; 
+}
+.af-html-note-container::-webkit-scrollbar-thumb:hover { background: #777; }
+
+.af-html-note-editor::-webkit-scrollbar { width: 8px; }
+.af-html-note-editor::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
+.af-html-note-editor::-webkit-scrollbar-thumb { 
+	background: var(--border-color, #555); 
+	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;
+}
@@ -9,40 +9,107 @@ const AF_HTML_NOTE_STYLES = `
        height: 100%;
        min-height: 100px;
        background: var(--comfy-menu-bg, #2a2a2a);
-        border: 1px solid var(--border-color, #555);
-        padding: 16px;
+        /* border: 1px solid var(--border-color, #555); */
+        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;
+        overflow-y: auto;
+        flex: 1;
+		/* Prevent text selection */
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		cursor: default;
+		/* Prevent keyboard focus */
+		outline: none;
    }

-    body.af-ctrl-active .af-html-note-content {
-        pointer-events: auto;
-    }
+	/* Ensure content area can't be focused */
+	.af-html-note-content:focus {
+		outline: none;
+	}

-    .af-html-note-editor {
-        width: 100%;
-        height: 100%;
-        background: var(--comfy-menu-bg, #2a2a2a);
+	.af-html-note-editor {
+		width: 100%;
+		height: 100%;
+		background: var(--comfy-menu-bg, #2a2a2a);
+		border: 1px solid var(--border-color, #555);
+		padding: 8px;
+		font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
+		line-height: 1.4;
+		color: var(--input-text, #ffffff);
+		box-sizing: border-box;
+		resize: none;
+		outline: none;
+		font-size: 14px;
+		display: none;
+		flex: 1;
+		/* Add text selection capabilities */
+		user-select: auto;
+		-webkit-user-select: auto;
+		-moz-user-select: auto;
+		-ms-user-select: auto;
+		cursor: text;
+	}
+
+    /* 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);
-        padding: 16px;
-        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
-        line-height: 1.4;
        color: var(--input-text, #ffffff);
-        box-sizing: border-box;
-        resize: none;
-        outline: none;
-        font-size: 14px;
-        display: none;
+        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 +120,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 +138,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 +165,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 +261,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 +328,82 @@ 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);
-                });
-
-                // Add as DOM widget
-                this.addDOMWidget("html_note_display", "div", this.containerElement);
-            };
+				// Handle editor events
+				this.editorElement.addEventListener('keydown', (e) => {
+					if (e.key === 'Escape') {
+						this.exitEditMode();
+						e.preventDefault();
+						e.stopPropagation();
+					}
+				});
+				
+				// Comment
+				this.contentElement.setAttribute('tabindex', '-1');
+				
+				this.editorElement.addEventListener('blur', () => {
+					setTimeout(() => {
+						if (this.isEditMode && document.activeElement !== this.editorElement) {
+							this.exitEditMode();
+						}
+					}, 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;
@@ -322,31 +439,60 @@ 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;
-                    };
-                });
-            };
-
+			// 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;
+						}
+						
+						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();
+						return false;
+					});
+				});
+			};
+			
            // Global Ctrl key handling
            let ctrlKeyActive = false;
Author	SHA1	Message	Date
Alex Furer	a1f8cfbeb7	v0.0.07 Cosmetics, making this a version	2025-10-12 00:13:34 +02:00
Alex Furer	3db929b1bd	Cosmetics	2025-10-12 00:11:32 +02:00
Alex Furer	7626bc6e99	Cosmetics Cleaned up the README some more	2025-10-11 23:40:48 +02:00
Alex Furer	c5869332ae	Cosmetics Moved installation description up and rewrote installation guide (ComfyUI Manager release !!)	2025-10-11 23:38:45 +02:00
Alex Furer	01f56bfe06	Rest of the images	2025-10-11 23:21:50 +02:00
Alex Furer	9b913eecb8	Switched to .webp for images	2025-10-11 23:12:32 +02:00
Alex Furer	e06bf54607	Testing images for README	2025-10-11 23:10:33 +02:00
Alex Furer	c9786121b1	Support Files Updated	2025-10-11 18:28:42 +02:00
Alex Furer	0bbc93a39f	Update README.md	2025-10-11 18:20:20 +02:00
Alex Furer	5dcd58934d	README again	2025-10-11 18:19:27 +02:00
Alex Furer	ff3b58c2e1	README Revision	2025-10-11 18:18:15 +02:00
Alex Furer	e53365fd2d	Fixed README	2025-10-11 18:15:51 +02:00
Alex Furer	fe3d4fc25e	v0.0.06 - Removed all Java Script functionality for links and updated README - Changed the default node content html	2025-10-11 16:59:50 +02:00
Alex Furer	657230e8aa	Updated the README++ - Updated the README - Added style examples - Updated the default node content EXTRA !! - Added an html containing the HELP section of my SDXL Workflow (this will probably move to the workflow repo, once I upload it.)	2025-10-11 15:41:35 +02:00
Alex Furer	863f7cefef	UX fix & init clean up - Fixed the UX - Node can now be selected, without the html area picking it up. - That makes it so the space bar can still be pressed to pan on the canvas, while the node was selected, by selecting the html area - Double clicking works and hover edit icon as well. - Middle mouse panning does NOT work. WIll never work... - Cleaned up the __init__.py so it's ComfyUI standard and Manager compatible. We will see...	2025-10-10 22:11:30 +02:00
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