diff --git a/.gitattributes b/.gitattributes
index dfe0770..6324dca 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1,19 @@
-# Auto detect text files and perform LF normalization
+# Set default behavior to automatically normalize line endings
* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+*.md text
+*.py text
+*.js text
+*.css text
+*.html text
+
+# Declare files that will always have CRLF line endings on checkout
+*.bat text eol=crlf
+
+# Denote all files that are truly binary and should not be modified
+*.png binary
+*.jpg binary
+*.gif binary
+*.ico binary
+*.zip binary
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 2afde5d..f93f3db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -86,4 +86,5 @@ yarn-error.log*
# AF specific
Status.txt
*.psd
-*.docx
\ No newline at end of file
+*.docx
+helpers/
\ No newline at end of file
diff --git a/AF_Enhanced_HTML_Note.py b/AF_Enhanced_HTML_Note.py
index fa1cf84..b620257 100644
--- a/AF_Enhanced_HTML_Note.py
+++ b/AF_Enhanced_HTML_Note.py
@@ -1,184 +1,171 @@
-# ****** ComfyUI-AF - Enhanced HTML-NOTE ******
-#
-# 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.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:
- """
- AF Enhanced HTML-Note node with colored sections and rich formatting
- """
-
- @classmethod
- def INPUT_TYPES(cls):
- return {
- "required": {
- "html_content": ("STRING", {
- "multiline": True,
- "default": """Positive Prompt Section
-
-
đĸ Positive Prompts
-
masterpiece, best quality, highly detailed
-
- - Professional lighting
- - Sharp focus
- - 8K resolution
-
-
Negative Prompt Section
-
-
đ´ Negative Prompts
-
low quality, blurry, distorted
-
nsfw, watermark, signature, bad anatomy
-
Neutral Prompt Section
-
-
đ Notes
-
General notes and information...
-
- - Item 1
- - Item 2
- - Item 3
-
-
Info Section
-
-
âšī¸ Information
-
Using: SDXL 1.0
-
Steps: 25 | CFG: 7.5 | Sampler: DPM++ 2M Karras
-
Warning Section
-
-
â ī¸ Warning
-
This workflow requires:
-
- - High VRAM (8GB+)
- - Latest ComfyUI version
- - SDXL compatible models
-
-
Column Layouts
-
-
-
-
đ¨ Style Settings
-
- - Style: Photorealistic
- - Aspect: 16:9
- - Quality: Ultra High
-
-
-
-
-
-
-
âī¸ Technical
-
Resolution: 1920x1080
-
Batch: 4
-
-
-
-
-
-
đĢ Exclusions
-
- - No text in image
- - Avoid oversaturation
- - No watermarks
-
-
-
-
-
-
-
đĄ Tips
-
Use lower CFG for more creative results
-
-
-
Clickable Links & Actions
-
-
-Custom Info Cards
-""",
- "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",
-}
-
+# ****** ComfyUI-AF - Enhanced HTML-NOTE ******
+#
+# 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-Enhanced_HTML_Note
+#
+# Issues praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note/issues
+#
+# LICENSE: MIT License
+#
+# Usage: https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note
+#
+# Feature Requests / Wet Dreams
+# -
+
+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": """Positive Prompt Section
+
+
đĸ Positive Prompts
+
masterpiece, best quality, highly detailed
+
+ - Professional lighting
+ - Sharp focus
+ - 8K resolution
+
+
Negative Prompt Section
+
+
đ´ Negative Prompts
+
low quality, blurry, distorted
+
nsfw, watermark, signature, bad anatomy
+
Neutral Prompt Section
+
+
đ Notes
+
General notes and information...
+
+ - Item 1
+ - Item 2
+ - Item 3
+
+
Info Section
+
+
âšī¸ Information
+
Using: SDXL 1.0
+
Steps: 25 | CFG: 7.5 | Sampler: DPM++ 2M Karras
+
Warning Section
+
+
â ī¸ Warning
+
This workflow requires:
+
+ - High VRAM (8GB+)
+ - Latest ComfyUI version
+ - SDXL compatible models
+
+
Column Layouts
+
+
+
+
đ¨ Style Settings
+
+ - Style: Photorealistic
+ - Aspect: 16:9
+ - Quality: Ultra High
+
+
+
+
+
+
+
âī¸ Technical
+
Resolution: 1920x1080
+
Batch: 4
+
+
+
+
+
+
đĢ Exclusions
+
+ - No text in image
+ - Avoid oversaturation
+ - No watermarks
+
+
+
+
+
+
+
đĄ Tips
+
Use lower CFG for more creative results
+
+
+
Clickable Links & Actions
+
+
+Custom Info Cards
+""",
+ "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",
+}
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..c4d7b95
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,31 @@
+## Changelog
+
+### v0.0.08
+- Moved the CSS from the JS file to it's own file.
+- Added CHANGELOG.md
+- Added package.json for ComfyUI Manager compliance
+- Added pyproject.toml for registry compliance
+- Reworked the README
+- Added the "helpers" folder to the .gitignore
+- Added an icon to the pyproject.toml
+
+### 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
\ No newline at end of file
diff --git a/examples/blue-section.webp b/Docs/examples/blue-section.webp
similarity index 100%
rename from examples/blue-section.webp
rename to Docs/examples/blue-section.webp
diff --git a/examples/complete-workflow.webp b/Docs/examples/complete-workflow.webp
similarity index 100%
rename from examples/complete-workflow.webp
rename to Docs/examples/complete-workflow.webp
diff --git a/examples/custom-borders.webp b/Docs/examples/custom-borders.webp
similarity index 100%
rename from examples/custom-borders.webp
rename to Docs/examples/custom-borders.webp
diff --git a/examples/custom-cards.webp b/Docs/examples/custom-cards.webp
similarity index 100%
rename from examples/custom-cards.webp
rename to Docs/examples/custom-cards.webp
diff --git a/examples/custom-colors.webp b/Docs/examples/custom-colors.webp
similarity index 100%
rename from examples/custom-colors.webp
rename to Docs/examples/custom-colors.webp
diff --git a/examples/custom-layouts.webp b/Docs/examples/custom-layouts.webp
similarity index 100%
rename from examples/custom-layouts.webp
rename to Docs/examples/custom-layouts.webp
diff --git a/examples/custom-section.webp b/Docs/examples/custom-section.webp
similarity index 100%
rename from examples/custom-section.webp
rename to Docs/examples/custom-section.webp
diff --git a/examples/custom-spacers.webp b/Docs/examples/custom-spacers.webp
similarity index 100%
rename from examples/custom-spacers.webp
rename to Docs/examples/custom-spacers.webp
diff --git a/examples/custom-text.webp b/Docs/examples/custom-text.webp
similarity index 100%
rename from examples/custom-text.webp
rename to Docs/examples/custom-text.webp
diff --git a/examples/info-section.webp b/Docs/examples/info-section.webp
similarity index 100%
rename from examples/info-section.webp
rename to Docs/examples/info-section.webp
diff --git a/examples/links.webp b/Docs/examples/links.webp
similarity index 100%
rename from examples/links.webp
rename to Docs/examples/links.webp
diff --git a/examples/negative-section.webp b/Docs/examples/negative-section.webp
similarity index 100%
rename from examples/negative-section.webp
rename to Docs/examples/negative-section.webp
diff --git a/examples/neutral-section.webp b/Docs/examples/neutral-section.webp
similarity index 100%
rename from examples/neutral-section.webp
rename to Docs/examples/neutral-section.webp
diff --git a/examples/positive-section.webp b/Docs/examples/positive-section.webp
similarity index 100%
rename from examples/positive-section.webp
rename to Docs/examples/positive-section.webp
diff --git a/examples/spacers.webp b/Docs/examples/spacers.webp
similarity index 100%
rename from examples/spacers.webp
rename to Docs/examples/spacers.webp
diff --git a/examples/two-column-layout.webp b/Docs/examples/two-column-layout.webp
similarity index 100%
rename from examples/two-column-layout.webp
rename to Docs/examples/two-column-layout.webp
diff --git a/examples/warning-section.webp b/Docs/examples/warning-section.webp
similarity index 100%
rename from examples/warning-section.webp
rename to Docs/examples/warning-section.webp
diff --git a/examples/yellow-section.webp b/Docs/examples/yellow-section.webp
similarity index 100%
rename from examples/yellow-section.webp
rename to Docs/examples/yellow-section.webp
diff --git a/Docs/icon.png b/Docs/icon.png
new file mode 100644
index 0000000..b6af349
Binary files /dev/null and b/Docs/icon.png differ
diff --git a/README.md b/README.md
index 2156e75..258fa72 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,6 @@
A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting.
-
-
-
-
---
## ⨠Key Features
@@ -89,7 +85,7 @@ The node comes with several predefined colored section styles. Click each sectio
```
### Rendered Result:
-
+
@@ -106,7 +102,7 @@ The node comes with several predefined colored section styles. Click each sectio
```
### Rendered Result:
-
+
@@ -127,7 +123,7 @@ The node comes with several predefined colored section styles. Click each sectio
```
### Rendered Result:
-
+
@@ -144,7 +140,7 @@ The node comes with several predefined colored section styles. Click each sectio
```
### Rendered Result:
-
+
@@ -165,7 +161,7 @@ The node comes with several predefined colored section styles. Click each sectio
```
### Rendered Result:
-
+
@@ -181,7 +177,7 @@ The node comes with several predefined colored section styles. Click each sectio
```
### Rendered Result:
-
+
@@ -197,7 +193,7 @@ The node comes with several predefined colored section styles. Click each sectio
```
### Rendered Result:
-
+
@@ -213,7 +209,7 @@ The node comes with several predefined colored section styles. Click each sectio
```
### Rendered Result:
-
+
@@ -262,7 +258,7 @@ Use these spacer classes to control vertical spacing between elements.
```
### Rendered Result:
-
+
### Size Reference:
- `af-spacer-top` â 2px
@@ -326,7 +322,7 @@ Create two-column layouts using the predefined column classes.
```
### Rendered Result:
-
+
**Note:** The `row` class ensures proper column wrapping, and each column is 49% width with 1% margin.
@@ -363,7 +359,7 @@ All links require **Ctrl+Click** to activate for safety and to prevent accidenta
**Remember:** Hold **Ctrl** while clicking any link to activate it!
### Rendered Result:
-
+
@@ -431,7 +427,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
```
### Rendered Result:
-
+
@@ -460,7 +456,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
```
### Rendered Result:
-
+
@@ -493,7 +489,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
```
### Rendered Result:
-
+
@@ -522,7 +518,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
```
### Rendered Result:
-
+
@@ -551,7 +547,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
```
### Rendered Result:
-
+
@@ -579,7 +575,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
```
### Rendered Result:
-
+
@@ -652,7 +648,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
```
### Rendered Result:
-
+
@@ -734,10 +730,26 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
---
-## đ Support & Credits
+## â ī¸ Disclaimer
-- **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
\ No newline at end of file
+This ComfyUI custom node is developed through AI-assisted coding. While carefully tested, it is provided **"as is" without warranty**.
+
+**By using this node pack:**
+- You install and run at your own risk
+- The creator is not liable for damages or data loss
+- Compatibility with your setup is not guaranteed
+- Test in a safe environment before production use
+
+Report issues on GitHub - we appreciate your feedback!
+
+---
+
+## đ Additional Resources
+
+- **[Changelog](CHANGELOG.md)** - Version history and updates
+- [GitHub Issues](https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note) - Report bugs & request features
+- [License](LICENSE) - MIT License details
+
+---
+
+**Made with â¤ī¸ by Alex Furer & Qwen3, Claude AI, DeepSeek**
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8b75bd1
--- /dev/null
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "af-enhanced-html-note",
+ "version": "0.0.08",
+ "description": "A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting.",
+ "author": "Alex Furer",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note"
+ },
+ "nodepath": "custom_nodes/ComfyUI-AF-Enhanced_HTML_Note"
+}
\ No newline at end of file
diff --git a/pyproject.toml b/pyproject.toml
new file mode 100644
index 0000000..dc026b5
--- /dev/null
+++ b/pyproject.toml
@@ -0,0 +1,14 @@
+[project]
+name = "af-enhanced-html-note"
+description = "A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting."
+version = "0.0.08"
+license = {file = "LICENSE"}
+dependencies = []
+
+[project.urls]
+Repository = "https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note"
+
+[tool.comfy]
+PublisherId = "alframe"
+DisplayName = "ComfyUI AF - Enhanced HTML Note"
+Icon = "https://raw.githubusercontent.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note/main/Docs/icon.png"
\ No newline at end of file
diff --git a/web/AF_Enhanced_HTML_Note.css b/web/AF_Enhanced_HTML_Note.css
new file mode 100644
index 0000000..474e667
--- /dev/null
+++ b/web/AF_Enhanced_HTML_Note.css
@@ -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;
+}
\ No newline at end of file
diff --git a/web/AF_Enhanced_HTML_Note.js b/web/AF_Enhanced_HTML_Note.js
index 6135677..7963bf2 100644
--- a/web/AF_Enhanced_HTML_Note.js
+++ b/web/AF_Enhanced_HTML_Note.js
@@ -2,285 +2,17 @@
import { app } from "../../scripts/app.js";
-// Define inline CSS styles
-const AF_HTML_NOTE_STYLES = `
- .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;
+// Inject styles from external CSS file
+function injectStyles() {
+ const styleId = 'af-html-note-styles';
+ if (!document.getElementById(styleId)) {
+ const link = document.createElement('link');
+ link.id = styleId;
+ link.rel = 'stylesheet';
+ link.href = './web/AF_Enhanced_HTML_Note.css';
+ document.head.appendChild(link);
}
-
- .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;
- }
-`;
+}
// Inject styles
function injectStyles() {