Everything there

- Html is rendering
- Mouse interaction works and Comfy shortcuts like h, for hand tool are respected
- Added double clicking to edit html

.gitignore

@@ -1 +1,87 @@
-Status.txt
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# ComfyUI specific
+*.log
+temp/
+output/
+models/
+input/
+
+# Node modules (if any JS development)
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# AF speciffic
+Status.txt

AF_Enhanced_HTML_Note.py

@@ -5,8 +5,15 @@
 # Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI_AF_FindNodeByID
 #
 # LICENSE: MIT License
+## ****** ComfyUI-AF - Enhanced HTML-NOTE ******
 #
-# v0.0.03
+# 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
 #
 # Description:
 # A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
@@ -15,6 +22,10 @@
 # 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
@@ -26,8 +37,6 @@
 # v0.0.01
 # - Initial Version
 #
-# Feature Requests / Wet Dreams
-# - 
 
 class AF_Enhanced_HTML_Note:
     """
@@ -69,22 +78,98 @@ class AF_Enhanced_HTML_Note:
         }
 
     RETURN_TYPES = ()
-    OUTPUT_NODE = True
+    FUNCTION = "display_html"
-    FUNCTION = "af_display_html_note"
     CATEGORY = "AF - Nodes"
+    OUTPUT_NODE = False
 
-    def af_display_html_note(self, html_content):
+    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",
+}
+# 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 {
-            "ui": {
+            "required": {
-                "af_html_note": [{
+                "html_content": ("STRING", {
-                    "content": html_content
+                    "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,

web/AF_Enhanced_HTML_Note.js

@@ -4,143 +4,120 @@ import { app } from "../../scripts/app.js";
 
 // Define inline CSS styles
 const AF_HTML_NOTE_STYLES = `
-    .af-html-note-widget {
+    .af-html-note-container {
+        width: 100%;
+        height: 100%;
+        min-height: 100px;
         background: var(--comfy-menu-bg, #2a2a2a);
         border: 1px solid var(--border-color, #555);
-        /* border-radius: 6px; */
         padding: 16px;
-        margin: 0;
+        box-sizing: border-box;
+        overflow-y: auto;
+        cursor: default;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
         line-height: 1.6;
         color: var(--input-text, #ffffff);
-        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    }
-        min-height: 100px;
+
-        word-wrap: break-word;
+    .af-html-note-content {
         width: 100%;
         height: 100%;
-        box-sizing: border-box;
+        pointer-events: none;
-        overflow-y: auto;
+    }
-        cursor: text;
+
-        position: absolute;
+    body.af-ctrl-active .af-html-note-content {
-        top: 0;
-        left: 0;
-        display: block;
         pointer-events: auto;
     }
 
-    .af-html-note-widget:hover {
-        background: var(--comfy-menu-bg-hover, #333);
-        border-color: var(--border-color-hover, #777);
-    }
-
     .af-html-note-editor {
+        width: 100%;
+        height: 100%;
         background: var(--comfy-menu-bg, #2a2a2a);
         border: 1px solid var(--border-color, #555);
-        /* border-radius: 6px; */
         padding: 16px;
-        margin: 0;
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         line-height: 1.4;
         color: var(--input-text, #ffffff);
-        width: 100%;
-        height: 100%;
         box-sizing: border-box;
         resize: none;
         outline: none;
-        position: absolute;
-        top: 0;
-        left: 0;
         font-size: 14px;
         display: none;
     }
 
-    .af-html-note-editor:focus {
+    .af-html-note-container.edit-mode .af-html-note-content {
-        border-color: var(--border-color-focus, #0078d4);
+        display: none;
-    }
-
-    /* When in edit mode, hide the display and show the editor */
-    .af-html-note-container.edit-mode .af-html-note-widget {
-        display: none !important;
     }
 
     .af-html-note-container.edit-mode .af-html-note-editor {
-        display: block !important;
+        display: block;
     }
 
-    /* When not in edit mode, show display and hide editor */
+    /* HTML content styles */
-    .af-html-note-container:not(.edit-mode) .af-html-note-widget {
+    .af-html-note-content h1, .af-html-note-content h2, .af-html-note-content h3, 
-        display: block !important;
+    .af-html-note-content h4, .af-html-note-content h5, .af-html-note-content h6 {
-    }
-
-    .af-html-note-container:not(.edit-mode) .af-html-note-editor {
-        display: none !important;
-    }
-
-    .af-html-note-widget h1, .af-html-note-widget h2, .af-html-note-widget h3, 
-    .af-html-note-widget h4, .af-html-note-widget h5, .af-html-note-widget h6 {
         margin-top: 0;
         margin-bottom: 12px;
         font-weight: 600;
     }
 
-    .af-html-note-widget h1 { font-size: 1.5em; }
+    .af-html-note-content h1 { font-size: 1.5em; }
-    .af-html-note-widget h2 { font-size: 1.3em; }
+    .af-html-note-content h2 { font-size: 1.3em; }
-    .af-html-note-widget h3 { font-size: 1.1em; }
+    .af-html-note-content h3 { font-size: 1.1em; }
 
-    .af-html-note-widget .af-section {
+    .af-html-note-content .af-section {
         padding: 12px 16px;
         margin: 8px 0;
         border-radius: 6px;
         border-left: 4px solid;
     }
 
-    .af-html-note-widget .af-section.af-positive {
+    .af-html-note-content .af-section.af-positive {
         background: rgba(144, 238, 144, 0.1);
         border-left-color: #90EE90;
     }
 
-    .af-html-note-widget .af-section.af-negative {
+    .af-html-note-content .af-section.af-negative {
         background: rgba(255, 107, 107, 0.1);
         border-left-color: #FF6B6B;
     }
 
-    .af-html-note-widget .af-section.af-neutral {
+    .af-html-note-content .af-section.af-neutral {
         background: rgba(224, 224, 224, 0.1);
         border-left-color: #E0E0E0;
     }
 
-    .af-html-note-widget .af-section.af-info {
+    .af-html-note-content .af-section.af-info {
         background: rgba(135, 206, 235, 0.1);
         border-left-color: #87CEEB;
     }
 
-    .af-html-note-widget .af-section.af-warning {
+    .af-html-note-content .af-section.af-warning {
         background: rgba(255, 215, 0, 0.1);
         border-left-color: #FFD700;
     }
 
-    .af-html-note-widget .af-section.af-custom {
+    .af-html-note-content .af-section.af-custom {
         background: rgba(186, 85, 211, 0.1);
         border-left-color: #BA55D3;
     }
 
-    .af-html-note-widget .af-spacer { height: 16px; margin: 8px 0; }
+    .af-html-note-content .af-spacer { height: 16px; margin: 8px 0; }
-    .af-html-note-widget .af-spacer-small { height: 8px; margin: 4px 0; }
+    .af-html-note-content .af-spacer-small { height: 8px; margin: 4px 0; }
-    .af-html-note-widget .af-spacer-large { height: 32px; margin: 16px 0; }
+    .af-html-note-content .af-spacer-large { height: 32px; margin: 16px 0; }
-    .af-html-note-widget .af-spacer-xl { height: 48px; margin: 24px 0; }
+    .af-html-note-content .af-spacer-xl { height: 48px; margin: 24px 0; }
 
-    .af-html-note-widget a {
+    .af-html-note-content a {
         color: #58a6ff;
         text-decoration: none;
-        transition: color 0.2s ease;
     }
 
-    .af-html-note-widget a:hover {
+    body.af-ctrl-active .af-html-note-content a:hover {
         color: #79c0ff;
         text-decoration: underline;
     }
 
-    .af-html-note-widget code {
+    .af-html-note-content code {
         background: rgba(0,0,0,0.3);
         padding: 2px 6px;
         border-radius: 4px;
@@ -149,7 +126,7 @@ const AF_HTML_NOTE_STYLES = `
         color: #f0f6fc;
     }
 
-    .af-html-note-widget pre {
+    .af-html-note-content pre {
         background: rgba(0,0,0,0.4);
         border: 1px solid #444;
         border-radius: 6px;
@@ -158,50 +135,50 @@ const AF_HTML_NOTE_STYLES = `
         overflow-x: auto;
     }
 
-    .af-html-note-widget pre code {
+    .af-html-note-content pre code {
         background: transparent;
         padding: 0;
     }
 
-    .af-html-note-widget ul, .af-html-note-widget ol {
+    .af-html-note-content ul, .af-html-note-content ol {
         padding-left: 20px;
         margin: 12px 0;
     }
 
-    .af-html-note-widget li { margin: 4px 0; }
+    .af-html-note-content li { margin: 4px 0; }
-    .af-html-note-widget p { margin: 8px 0; }
+    .af-html-note-content p { margin: 8px 0; }
 
-    .af-html-note-widget table {
+    .af-html-note-content table {
         border-collapse: collapse;
         width: 100%;
         margin: 16px 0;
     }
 
-    .af-html-note-widget th, .af-html-note-widget td {
+    .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-widget th {
+    .af-html-note-content th {
         background: rgba(255,255,255,0.1);
         font-weight: 600;
     }
 
-    .af-html-note-widget hr {
+    .af-html-note-content hr {
         border: none;
         border-top: 1px solid var(--border-color, #555);
         margin: 16px 0;
         opacity: 0.6;
     }
 
-    .af-html-note-widget::-webkit-scrollbar { width: 8px; }
+    .af-html-note-container::-webkit-scrollbar { width: 8px; }
-    .af-html-note-widget::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
+    .af-html-note-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
-    .af-html-note-widget::-webkit-scrollbar-thumb { 
+    .af-html-note-container::-webkit-scrollbar-thumb { 
         background: var(--border-color, #555); 
         border-radius: 4px; 
     }
-    .af-html-note-widget::-webkit-scrollbar-thumb:hover { background: #777; }
+    .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); }
@@ -230,90 +207,43 @@ app.registerExtension({
         if (nodeData.name === "AF_Enhanced_HTML_Note") {
             injectStyles();
             
-            const onExecuted = nodeType.prototype.onExecuted;
+            // Store the original onNodeCreated
-            nodeType.prototype.onExecuted = function(message) {
+            const originalOnNodeCreated = nodeType.prototype.onNodeCreated;
-                onExecuted?.apply(this, arguments);
+            
+            nodeType.prototype.onNodeCreated = function() {
+                const result = originalOnNodeCreated?.apply(this, arguments);
                 
-                if (message.af_html_note) {
-                    const htmlData = message.af_html_note[0];
-                    this.updateHTMLDisplay(htmlData.content);
-                }
-            };
-
-            nodeType.prototype.updateHTMLDisplay = function(content) {
-                if (this.htmlNoteElement && !this.isEditMode) {
-                    this.htmlNoteElement.innerHTML = content;
-                    this.handleLinksInHTML();
-                }
-            };
-
-            nodeType.prototype.handleLinksInHTML = function() {
-                if (!this.htmlNoteElement) return;
-                
-                const links = this.htmlNoteElement.querySelectorAll('a');
-                links.forEach(link => {
-                    link.onclick = (e) => {
-                        e.stopPropagation();
-                        if (link.href && !link.href.includes('#')) {
-                            window.open(link.href, '_blank');
-                        }
-                    };
-                });
-            };
-
-            nodeType.prototype.enterEditMode = function() {
-                if (this.isEditMode || !this.containerElement) return;
-                
-                console.log('Entering edit mode');
-                this.isEditMode = true;
-                this.containerElement.classList.add('edit-mode');
-                this.editorElement.value = this.htmlContent;
-                
-                setTimeout(() => {
-                    this.editorElement.focus();
-                    this.editorElement.setSelectionRange(0, 0);
-                }, 10);
-                
-                this.setDirtyCanvas?.(true, true);
-            };
-
-            nodeType.prototype.exitEditMode = function() {
-                if (!this.isEditMode || !this.containerElement) return;
-                
-                console.log('Exiting edit mode');
                 this.isEditMode = false;
-                this.containerElement.classList.remove('edit-mode');
+                this.size = [400, 300];
-                this.htmlContent = this.editorElement.value;
-                this.htmlNoteElement.innerHTML = this.htmlContent;
-                this.handleLinksInHTML();
                 
-                // Update the widget value
+                // Don't hide the original widget - instead, replace it with our custom display
-                const htmlWidget = this.widgets?.find(w => w.name === "html_content");
+                setTimeout(() => {
-                if (htmlWidget) {
+                    const htmlWidget = this.widgets?.find(w => w.name === "html_content");
-                    htmlWidget.value = this.htmlContent;
+                    if (htmlWidget && htmlWidget.element) {
-                }
+                        // Store the original value
+                        this.htmlContent = htmlWidget.value;
+                        
+                        // Create our custom container
+                        this.createHTMLNoteDisplay(this.htmlContent);
+                        
+                        // Hide the original widget but keep its value
+                        htmlWidget.computeSize = () => [0, 0];
+                        htmlWidget.element.style.display = 'none';
+                    }
+                }, 0);
                 
-                this.setDirtyCanvas?.(true, true);
+                return result;
             };
 
             nodeType.prototype.createHTMLNoteDisplay = function(content) {
-                this.htmlContent = content;
-                this.isEditMode = false;
-                
                 // Create container element
                 this.containerElement = document.createElement("div");
                 this.containerElement.className = "af-html-note-container";
-                this.containerElement.style.cssText = `
-                    position: relative;
-                    width: 100%;
-                    height: 100%;
-                    overflow: hidden;
-                `;
                 
-                // Create HTML display element
+                // Create HTML content display
-                this.htmlNoteElement = document.createElement("div");
+                this.contentElement = document.createElement("div");
-                this.htmlNoteElement.className = "af-html-note-widget";
+                this.contentElement.className = "af-html-note-content";
-                this.htmlNoteElement.innerHTML = content;
+                this.contentElement.innerHTML = content;
                 
                 // Create editor element
                 this.editorElement = document.createElement("textarea");
@@ -321,188 +251,124 @@ app.registerExtension({
                 this.editorElement.value = content;
                 
                 // Append both elements to container
-                this.containerElement.appendChild(this.htmlNoteElement);
+                this.containerElement.appendChild(this.contentElement);
                 this.containerElement.appendChild(this.editorElement);
                 
-                // Add click handler for entering edit mode
+                // Add double-click to edit
-                this.htmlNoteElement.addEventListener('click', (e) => {
+                this.containerElement.addEventListener('dblclick', (e) => {
-                    // Don't enter edit mode if clicking on a link
+                    if (!this.isEditMode) {
-                    if (e.target.tagName.toLowerCase() === 'a') {
+                        this.enterEditMode();
-                        return;
-                    }
-                    
-                    e.preventDefault();
-                    e.stopPropagation();
-                    
-                    console.log('HTML note clicked, entering edit mode');
-                    this.enterEditMode();
-                });
-
-                // Handle middle mouse button to allow canvas panning
-                this.htmlNoteElement.addEventListener('mousedown', (e) => {
-                    if (e.button === 1) { // Middle mouse button
-                        e.preventDefault();
                         e.stopPropagation();
-                        // Let the canvas handle this event instead
-                        const canvasEvent = new MouseEvent('mousedown', {
-                            bubbles: true,
-                            cancelable: true,
-                            button: e.button,
-                            buttons: e.buttons,
-                            clientX: e.clientX,
-                            clientY: e.clientY
-                        });
-                        app.canvas.canvas.dispatchEvent(canvasEvent);
                     }
                 });
 
-                this.editorElement.addEventListener('mousedown', (e) => {
+                // Handle links
-                    if (e.button === 1) { // Middle mouse button
+                this.handleLinksInHTML();
-                        e.preventDefault();
-                        e.stopPropagation();
-                        // Let the canvas handle this event instead
-                        const canvasEvent = new MouseEvent('mousedown', {
-                            bubbles: true,
-                            cancelable: true,
-                            button: e.button,
-                            buttons: e.buttons,
-                            clientX: e.clientX,
-                            clientY: e.clientY
-                        });
-                        app.canvas.canvas.dispatchEvent(canvasEvent);
-                    }
-                });
 
                 // Handle editor events
                 this.editorElement.addEventListener('keydown', (e) => {
-                    e.stopPropagation(); // Prevent ComfyUI from handling these
+                    if (e.key === 'Escape') {
-                });
-
-                this.editorElement.addEventListener('blur', (e) => {
-                    // Don't exit edit mode on blur - only on explicit actions
-                    e.stopPropagation();
-                });
-
-                this.handleLinksInHTML();
-
-                // Add the container as a DOM widget
-                this.htmlNoteWidget = this.addDOMWidget(
-                    "html_note_container", 
-                    "div", 
-                    this.containerElement
-                );
-                
-                return this.htmlNoteWidget;
-            };
-
-            // Override mouse handling
-            nodeType.prototype.onMouseDown = function(e, localPos, graphCanvas) {
-                // If clicking outside the node content area, exit edit mode
-                if (this.isEditMode && e.button === 0) {
-                    const rect = this.getBounding();
-                    const canvasPos = graphCanvas.convertOffsetToCanvas([e.clientX, e.clientY]);
-                    
-                    // Check if click is outside the node bounds
-                    if (canvasPos[0] < rect[0] || canvasPos[0] > rect[0] + rect[2] ||
-                        canvasPos[1] < rect[1] || canvasPos[1] > rect[1] + rect[3]) {
                         this.exitEditMode();
+                        e.preventDefault();
+                        e.stopPropagation();
+                    } else {
+                        e.stopPropagation();
                     }
-                }
+                });
-                
-                // Allow middle mouse for canvas panning
-                if (e.button === 1) {
-                    return false;
-                }
-                
-                return true;
-            };
 
-            // Handle canvas clicks to exit edit mode
+                this.editorElement.addEventListener('blur', () => {
-            const originalOnCanvasMouseDown = app.canvas.onMouseDown;
+                    setTimeout(() => {
-            app.canvas.onMouseDown = function(e) {
+                        if (this.isEditMode && document.activeElement !== this.editorElement) {
-                // Find any nodes in edit mode and exit them when clicking on canvas
+                            this.exitEditMode();
-                if (app.graph) {
-                    for (const node of app.graph._nodes) {
-                        if (node.type === "AF_Enhanced_HTML_Note" && node.isEditMode) {
-                            // Check if click is outside this node
-                            const rect = node.getBounding();
-                            const canvasPos = this.convertOffsetToCanvas([e.clientX, e.clientY]);
-                            
-                            if (canvasPos[0] < rect[0] || canvasPos[0] > rect[0] + rect[2] ||
-                                canvasPos[1] < rect[1] || canvasPos[1] > rect[1] + rect[3]) {
-                                node.exitEditMode();
-                            }
                         }
-                    }
+                    }, 10);
-                }
+                });
-                
+
-                return originalOnCanvasMouseDown?.call(this, e);
+                // Add as DOM widget
+                this.addDOMWidget("html_note_display", "div", this.containerElement);
             };
 
-            // Override serialize to maintain size
+            nodeType.prototype.enterEditMode = function() {
-            const originalSerialize = nodeType.prototype.serialize;
+                if (this.isEditMode) return;
-            nodeType.prototype.serialize = function() {
-                const data = originalSerialize ? originalSerialize.apply(this, arguments) : {};
                 
-                // Store the current size
+                this.isEditMode = true;
-                if (this.size) {
+                this.containerElement.classList.add('edit-mode');
-                    data.size = [this.size[0], this.size[1]];
+                this.editorElement.value = this.htmlContent;
-                }
                 
-                return data;
+                setTimeout(() => {
+                    this.editorElement.focus();
+                    this.editorElement.select();
+                }, 10);
             };
 
-            // Override configure to restore size
+            nodeType.prototype.exitEditMode = function() {
-            const originalConfigure = nodeType.prototype.configure;
+                if (!this.isEditMode) return;
-            nodeType.prototype.configure = function(info) {
-                if (originalConfigure) {
-                    originalConfigure.apply(this, arguments);
-                }
-                
-                // Restore size if it was saved
-                if (info.size) {
-                    this.size = [info.size[0], info.size[1]];
-                }
-            };
-
-            // Display initial content on node creation
-            const onNodeCreated = nodeType.prototype.onNodeCreated;
-            nodeType.prototype.onNodeCreated = function() {
-                onNodeCreated?.apply(this, arguments);
                 
                 this.isEditMode = false;
+                this.containerElement.classList.remove('edit-mode');
+                this.htmlContent = this.editorElement.value;
+                this.contentElement.innerHTML = this.htmlContent;
                 
-                // Set initial larger size
+                // Update the original widget value
-                this.size = [500, 400];
+                const htmlWidget = this.widgets?.find(w => w.name === "html_content");
-                
+                if (htmlWidget) {
-                // Hide the original input widget completely
+                    htmlWidget.value = this.htmlContent;
-                setTimeout(() => {
+                    if (htmlWidget.callback) {
-                    const htmlWidget = this.widgets?.find(w => w.name === "html_content");
+                        htmlWidget.callback(this.htmlContent);
-                    if (htmlWidget) {
-                        // Hide the widget completely
-                        htmlWidget.computeSize = () => [0, -4];
-                        if (htmlWidget.element) {
-                            htmlWidget.element.style.display = 'none';
-                        }
-                        
-                        // Create our custom display
-                        this.createHTMLNoteDisplay(htmlWidget.value);
-                        
-                        // Force size update
-                        this.setSize(this.size);
                     }
-                }, 0);
-            };
-
-            // Handle Escape key globally for this node type
-            const originalOnKeyDown = nodeType.prototype.onKeyDown;
-            nodeType.prototype.onKeyDown = function(e) {
-                if (e.key === 'Escape' && this.isEditMode) {
-                    this.exitEditMode();
-                    return true; // Handled
                 }
                 
-                return originalOnKeyDown ? originalOnKeyDown.call(this, e) : false;
+                // Re-attach link handlers
+                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;
+                    };
+                });
+            };
+
+            // Global Ctrl key handling
+            let ctrlKeyActive = false;
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Control') {
+                    ctrlKeyActive = true;
+                    document.body.classList.add('af-ctrl-active');
+                }
+            });
+
+            document.addEventListener('keyup', (e) => {
+                if (e.key === 'Control') {
+                    ctrlKeyActive = false;
+                    document.body.classList.remove('af-ctrl-active');
+                }
+            });
+
+            // Clean up when node is removed
+            const originalOnRemoved = nodeType.prototype.onRemoved;
+            nodeType.prototype.onRemoved = function() {
+                document.body.classList.remove('af-ctrl-active');
+                originalOnRemoved?.apply(this, arguments);
             };
         }
     }