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
This commit is contained in:
Alex Furer
@@ -1,13 +1,6 @@
|
||||
# ****** 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
|
||||
# Creator: Alex Furer - Co-Creator(s): Claude AI & DeepSeek
|
||||
#
|
||||
# Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI_AF_FindNodeByID
|
||||
#
|
||||
@@ -25,7 +18,7 @@
|
||||
# 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.
|
||||
# - 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
|
||||
@@ -52,7 +45,7 @@ class AF_Enhanced_HTML_Note:
|
||||
"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>
|
||||
<a href="https://www.fullframestudios.ch" onclick="alert('Link clicked!')">Click me!</a>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer"></div>
|
||||
@@ -96,85 +89,3 @@ 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,8 +1,34 @@
|
||||
# AF Enhanced HTML Node - 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
|
||||
## ✨ Key Features
|
||||
|
||||
- **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
|
||||
- **Beautiful Styling** - Predefined color schemes that match ComfyUI's theme
|
||||
- **No Dependencies** - All CSS is inlined for reliable performance
|
||||
|
||||
## 🎮 Interaction Guide
|
||||
|
||||
### 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
|
||||
|
||||
### 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
|
||||
|
||||
### 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)
|
||||
|
||||
## 🎨 Basic Section Colors
|
||||
|
||||
```html
|
||||
<!-- Positive section (green) -->
|
||||
@@ -40,11 +66,9 @@ A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's dire
|
||||
<h3>🎨 Custom</h3>
|
||||
<p>Custom styled content...</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Spacers
|
||||
# 📐 Spacers
|
||||
|
||||
```html
|
||||
<!-- Small spacer -->
|
||||
<div class="af-spacer-small"></div>
|
||||
|
||||
@@ -56,40 +80,40 @@ A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's dire
|
||||
|
||||
<!-- Extra large spacer -->
|
||||
<div class="af-spacer-xl"></div>
|
||||
```
|
||||
|
||||
## Clickable Links
|
||||
#🔗 Clickable Links & Actions
|
||||
|
||||
```html
|
||||
<!-- External link -->
|
||||
<a href="https://github.com/comfyanonymous/ComfyUI" target="_blank">ComfyUI GitHub</a>
|
||||
<!-- External link (opens in new tab with Ctrl+click) -->
|
||||
<a href="https://github.com/comfyanonymous/ComfyUI">ComfyUI GitHub</a>
|
||||
|
||||
<!-- Link with custom action -->
|
||||
<!-- Alert action (triggers with Ctrl+click) -->
|
||||
<a href="#" onclick="alert('Custom action triggered!')">Click for alert</a>
|
||||
|
||||
<!-- Link with data attribute for custom handling -->
|
||||
<a href="#" data-action="custom-command">Custom Command</a>
|
||||
```
|
||||
<!-- Multiple actions -->
|
||||
<a href="https://example.com" onclick="console.log('Link clicked')">Link with multiple actions</a>
|
||||
|
||||
## Complete Example Template
|
||||
<!-- JavaScript links -->
|
||||
<a href="javascript:alert('Hello!')">JavaScript link</a>
|
||||
|
||||
# 📋 Complete Example Template
|
||||
|
||||
```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>
|
||||
<a href="#" onclick="alert('Positive prompts copied!')">📋 Copy Prompts</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, blurry, distorted</em></p>
|
||||
<code>nsfw, watermark, signature, bad anatomy</code>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer-large"></div>
|
||||
@@ -97,41 +121,84 @@ A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's dire
|
||||
<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>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</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>⚠️ Important Notes</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 class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-neutral">
|
||||
<h3>📝 Notes</h3>
|
||||
<h3>📝 Workflow Notes</h3>
|
||||
<p>Remember to:</p>
|
||||
<ol>
|
||||
<li>Check image dimensions</li>
|
||||
<li>Adjust sampling method</li>
|
||||
<li>Fine-tune CFG scale</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>Check image dimensions before generating</li>
|
||||
<li>Adjust CFG scale for different results</li>
|
||||
<li>Save frequently!</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><small>Last updated: Today</small></p>
|
||||
<p><small>Last updated: Today | Created with AF Enhanced HTML Node</small></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Features
|
||||
🛠️ Installation
|
||||
Create folder: ComfyUI/custom_nodes/ComfyUI-AF_Enhanced_HTML_Note/
|
||||
|
||||
- **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
|
||||
Add the Python file: AF_Enhanced_HTML_Note.py
|
||||
|
||||
## Installation
|
||||
Add the init file: __init__.py
|
||||
|
||||
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**
|
||||
Create web/ subfolder
|
||||
|
||||
Add the JavaScript file: web/AF_Enhanced_HTML_Note.js
|
||||
|
||||
Restart ComfyUI
|
||||
|
||||
Find the node under AF - Nodes > AF - Enhanced HTML Note
|
||||
|
||||
🔧 Technical Details
|
||||
Node Name: AF_Enhanced_HTML_Note
|
||||
|
||||
Category: AF - Nodes
|
||||
|
||||
Input: HTML content (multiline string)
|
||||
|
||||
Output: None (display only)
|
||||
|
||||
Compatibility: ComfyUI latest version
|
||||
|
||||
🐛 Troubleshooting
|
||||
Node won't select/move?
|
||||
|
||||
Click on the node's title bar or edges, not the HTML content area
|
||||
|
||||
Links not working?
|
||||
|
||||
Remember to hold the Control key while clicking links
|
||||
|
||||
Can't edit content?
|
||||
|
||||
Double-click directly on the HTML content (not the node borders)
|
||||
|
||||
Scrollbar appears unnecessarily?
|
||||
|
||||
The node has minimal padding; resize if you need more space
|
||||
|
||||
📞 Support
|
||||
Creator: Alex Furer
|
||||
|
||||
Co-Creators: Claude AI & DeepSeek
|
||||
|
||||
GitHub: https://github.com/alFrame/ComfyUI_AF_FindNodeByID
|
||||
|
||||
License: MIT License
|
||||
+121
-86
@@ -10,23 +10,61 @@ const AF_HTML_NOTE_STYLES = `
|
||||
min-height: 100px;
|
||||
background: var(--comfy-menu-bg, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #555);
|
||||
padding: 16px;
|
||||
padding: 8px; /* Reduced padding */
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
overflow: hidden; /* Changed from auto to 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;
|
||||
}
|
||||
|
||||
.af-html-note-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Allow double-clicks for editing */
|
||||
pointer-events: auto;
|
||||
overflow-y: auto; /* Move scroll to content instead of container */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.af-html-note-editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--comfy-menu-bg, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #555);
|
||||
padding: 8px; /* Reduced padding to match container */
|
||||
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;
|
||||
pointer-events: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Enable link interactions only when Ctrl is held */
|
||||
.af-html-note-content a {
|
||||
color: #58a6ff;
|
||||
text-decoration: none;
|
||||
/* Links are not clickable by default */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.af-ctrl-active .af-html-note-content {
|
||||
body.af-ctrl-active .af-html-note-content a {
|
||||
/* Links become clickable when Ctrl is held */
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.af-ctrl-active .af-html-note-content a:hover {
|
||||
color: #79c0ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.af-html-note-editor {
|
||||
@@ -43,6 +81,7 @@ const AF_HTML_NOTE_STYLES = `
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.af-html-note-container.edit-mode .af-html-note-content {
|
||||
@@ -53,7 +92,7 @@ const AF_HTML_NOTE_STYLES = `
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* HTML content styles */
|
||||
/* Rest of your CSS remains exactly 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;
|
||||
@@ -107,16 +146,6 @@ const AF_HTML_NOTE_STYLES = `
|
||||
.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;
|
||||
@@ -235,58 +264,58 @@ 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;
|
||||
|
||||
// Append both elements to container
|
||||
this.containerElement.appendChild(this.contentElement);
|
||||
this.containerElement.appendChild(this.editorElement);
|
||||
|
||||
// Add double-click to edit - works anytime (no Ctrl required)
|
||||
this.contentElement.addEventListener('dblclick', (e) => {
|
||||
if (!this.isEditMode) {
|
||||
this.enterEditMode();
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle links
|
||||
this.handleLinksInHTML();
|
||||
// Handle links
|
||||
this.handleLinksInHTML();
|
||||
|
||||
// Handle editor events
|
||||
this.editorElement.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
this.exitEditMode();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
} else {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
// Handle editor events
|
||||
this.editorElement.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
this.exitEditMode();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
} else {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
|
||||
this.editorElement.addEventListener('blur', () => {
|
||||
setTimeout(() => {
|
||||
if (this.isEditMode && document.activeElement !== this.editorElement) {
|
||||
this.exitEditMode();
|
||||
}
|
||||
}, 10);
|
||||
});
|
||||
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);
|
||||
};
|
||||
// Add as DOM widget
|
||||
this.addDOMWidget("html_note_display", "div", this.containerElement);
|
||||
};
|
||||
|
||||
nodeType.prototype.enterEditMode = function() {
|
||||
if (this.isEditMode) return;
|
||||
@@ -322,30 +351,36 @@ 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;
|
||||
};
|
||||
});
|
||||
};
|
||||
nodeType.prototype.handleLinksInHTML = function() {
|
||||
if (!this.contentElement) return;
|
||||
|
||||
const links = this.contentElement.querySelectorAll('a');
|
||||
links.forEach(link => {
|
||||
// Remove any existing handlers
|
||||
link.onclick = null;
|
||||
|
||||
// Add new handler that requires Ctrl key
|
||||
link.addEventListener('click', (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');
|
||||
}
|
||||
// For javascript: links and onclick handlers, let them execute naturally
|
||||
// Don't prevent default or stop propagation for these
|
||||
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Global Ctrl key handling
|
||||
let ctrlKeyActive = false;
|
||||
|
||||
Reference in New Issue
Block a user