From 9fa5d1b3d99981e1ab6e7b38dd3dc5ddff543c1d Mon Sep 17 00:00:00 2001 From: Alex Furer Date: Wed, 5 Nov 2025 14:21:04 +0100 Subject: [PATCH] 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 --- .gitattributes | 19 +- .gitignore | 3 +- AF_Enhanced_HTML_Note.py | 355 +++++++++--------- CHANGELOG.md | 31 ++ {examples => Docs/examples}/blue-section.webp | Bin .../examples}/complete-workflow.webp | Bin .../examples}/custom-borders.webp | Bin {examples => Docs/examples}/custom-cards.webp | Bin .../examples}/custom-colors.webp | Bin .../examples}/custom-layouts.webp | Bin .../examples}/custom-section.webp | Bin .../examples}/custom-spacers.webp | Bin {examples => Docs/examples}/custom-text.webp | Bin {examples => Docs/examples}/info-section.webp | Bin {examples => Docs/examples}/links.webp | Bin .../examples}/negative-section.webp | Bin .../examples}/neutral-section.webp | Bin .../examples}/positive-section.webp | Bin {examples => Docs/examples}/spacers.webp | Bin .../examples}/two-column-layout.webp | Bin .../examples}/warning-section.webp | Bin .../examples}/yellow-section.webp | Bin Docs/icon.png | Bin 0 -> 7931 bytes README.md | 68 ++-- package.json | 12 + pyproject.toml | 14 + web/AF_Enhanced_HTML_Note.css | 276 ++++++++++++++ web/AF_Enhanced_HTML_Note.js | 288 +------------- 28 files changed, 574 insertions(+), 492 deletions(-) create mode 100644 CHANGELOG.md rename {examples => Docs/examples}/blue-section.webp (100%) rename {examples => Docs/examples}/complete-workflow.webp (100%) rename {examples => Docs/examples}/custom-borders.webp (100%) rename {examples => Docs/examples}/custom-cards.webp (100%) rename {examples => Docs/examples}/custom-colors.webp (100%) rename {examples => Docs/examples}/custom-layouts.webp (100%) rename {examples => Docs/examples}/custom-section.webp (100%) rename {examples => Docs/examples}/custom-spacers.webp (100%) rename {examples => Docs/examples}/custom-text.webp (100%) rename {examples => Docs/examples}/info-section.webp (100%) rename {examples => Docs/examples}/links.webp (100%) rename {examples => Docs/examples}/negative-section.webp (100%) rename {examples => Docs/examples}/neutral-section.webp (100%) rename {examples => Docs/examples}/positive-section.webp (100%) rename {examples => Docs/examples}/spacers.webp (100%) rename {examples => Docs/examples}/two-column-layout.webp (100%) rename {examples => Docs/examples}/warning-section.webp (100%) rename {examples => Docs/examples}/yellow-section.webp (100%) create mode 100644 Docs/icon.png create mode 100644 package.json create mode 100644 pyproject.toml create mode 100644 web/AF_Enhanced_HTML_Note.css 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

- -
- - -

Negative Prompt Section

-
-

🔴 Negative Prompts

-

low quality, blurry, distorted

-

nsfw, watermark, signature, bad anatomy

-
- - -

Neutral Prompt Section

-
-

📝 Notes

-

General notes and information...

- -
- -

Info Section

-
-

ℹī¸ Information

-

Using: SDXL 1.0

-

Steps: 25 | CFG: 7.5 | Sampler: DPM++ 2M Karras

-
- -

Warning Section

-
-

⚠ī¸ Warning

-

This workflow requires:

-
    -
  1. High VRAM (8GB+)
    2. -
  2. Latest ComfyUI version
    3. -
  3. SDXL compatible models
    4. -
-
- -

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

-
-

🔗 Interactive Links

- - -

External link (opens in new tab with Ctrl+click)

-

Full Frame Studios - Alex Furer

- -

Anchor Links

-

Full Frame Studios - Alex Furer - 3D

-
- -

Custom Info Cards

-
-
- Steps -

25

-
- -
- CFG Scale -

7.5

-
- -
- Batch Size -

4

-
-
""", - "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

+ +
+ + +

Negative Prompt Section

+
+

🔴 Negative Prompts

+

low quality, blurry, distorted

+

nsfw, watermark, signature, bad anatomy

+
+ + +

Neutral Prompt Section

+
+

📝 Notes

+

General notes and information...

+ +
+ +

Info Section

+
+

ℹī¸ Information

+

Using: SDXL 1.0

+

Steps: 25 | CFG: 7.5 | Sampler: DPM++ 2M Karras

+
+ +

Warning Section

+
+

⚠ī¸ Warning

+

This workflow requires:

+
    +
  1. High VRAM (8GB+)
    2. +
  2. Latest ComfyUI version
    3. +
  3. SDXL compatible models
    4. +
+
+ +

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

+
+

🔗 Interactive Links

+ + +

External link (opens in new tab with Ctrl+click)

+

Full Frame Studios - Alex Furer

+ +

Anchor Links

+

Full Frame Studios - Alex Furer - 3D

+
+ +

Custom Info Cards

+
+
+ Steps +

25

+
+ +
+ CFG Scale +

7.5

+
+ +
+ Batch Size +

4

+
+
""", + "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 0000000000000000000000000000000000000000..b6af34997fc232db3aef6bf89bbf9e46d86339eb GIT binary patch literal 7931 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 B3SR&K literal 0 HcmV?d00001 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. -![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) - --- ## ✨ Key Features @@ -89,7 +85,7 @@ The node comes with several predefined colored section styles. Click each sectio ``` ### Rendered Result: -![Positive Section Example](examples/positive-section.webp) +![Positive Section Example](Docs/examples/positive-section.webp) @@ -106,7 +102,7 @@ The node comes with several predefined colored section styles. Click each sectio ``` ### Rendered Result: -![Negative Section Example](examples/negative-section.webp) +![Negative Section Example](Docs/examples/negative-section.webp) @@ -127,7 +123,7 @@ The node comes with several predefined colored section styles. Click each sectio ``` ### Rendered Result: -![Neutral Section Example](examples/neutral-section.webp) +![Neutral Section Example](Docs/examples/neutral-section.webp) @@ -144,7 +140,7 @@ The node comes with several predefined colored section styles. Click each sectio ``` ### Rendered Result: -![Info Section Example](examples/info-section.webp) +![Info Section Example](Docs/examples/info-section.webp) @@ -165,7 +161,7 @@ The node comes with several predefined colored section styles. Click each sectio ``` ### Rendered Result: -![Warning Section Example](examples/warning-section.webp) +![Warning Section Example](Docs/examples/warning-section.webp) @@ -181,7 +177,7 @@ The node comes with several predefined colored section styles. Click each sectio ``` ### Rendered Result: -![Yellow Section Example](examples/yellow-section.webp) +![Yellow Section Example](Docs/examples/yellow-section.webp) @@ -197,7 +193,7 @@ The node comes with several predefined colored section styles. Click each sectio ``` ### Rendered Result: -![Blue Section Example](examples/blue-section.webp) +![Blue Section Example](Docs/examples/blue-section.webp) @@ -213,7 +209,7 @@ The node comes with several predefined colored section styles. Click each sectio ``` ### Rendered Result: -![Custom Section Example](examples/custom-section.webp) +![Custom Section Example](Docs/examples/custom-section.webp) @@ -262,7 +258,7 @@ Use these spacer classes to control vertical spacing between elements. ``` ### Rendered Result: -![Spacer Examples](examples/spacers.webp) +![Spacer Examples](Docs/examples/spacers.webp) ### Size Reference: - `af-spacer-top` → 2px @@ -326,7 +322,7 @@ Create two-column layouts using the predefined column classes. ``` ### Rendered Result: -![Two Column Layout Example](examples/two-column-layout.webp) +![Two Column Layout Example](Docs/examples/two-column-layout.webp) **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: -![Link Examples](examples/links.webp) +![Link Examples](Docs/examples/links.webp) @@ -431,7 +427,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c ``` ### Rendered Result: -![Custom Spacers](examples/custom-spacers.webp) +![Custom Spacers](Docs/examples/custom-spacers.webp) @@ -460,7 +456,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c ``` ### Rendered Result: -![Custom Colors](examples/custom-colors.webp) +![Custom Colors](Docs/examples/custom-colors.webp) @@ -493,7 +489,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c ``` ### Rendered Result: -![Custom Text Styles](examples/custom-text.webp) +![Custom Text Styles](Docs/examples/custom-text.webp) @@ -522,7 +518,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c ``` ### Rendered Result: -![Custom Borders](examples/custom-borders.webp) +![Custom Borders](Docs/examples/custom-borders.webp) @@ -551,7 +547,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c ``` ### Rendered Result: -![Custom Layouts](examples/custom-layouts.webp) +![Custom Layouts](Docs/examples/custom-layouts.webp) @@ -579,7 +575,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c ``` ### Rendered Result: -![Custom Info Cards](examples/custom-cards.webp) +![Custom Info Cards](Docs/examples/custom-cards.webp) @@ -652,7 +648,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c ``` ### Rendered Result: -![Complete Workflow Example](examples/complete-workflow.webp) +![Complete Workflow Example](Docs/examples/complete-workflow.webp) @@ -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() {