Merge pull request #7 from alexopus/highlight-wildcard-comment

Option to highlight commented lines

web/js/highlighting/highlighter.js

@@ -54,6 +54,9 @@ export class SyntaxHighlighter {
                     style: { backgroundColor: errorColor },
                 })}${escapeHtml(token.value[1])}`;
 
+            case TokenType.COMMENT_LINE:
+                return this.processCommentLine(token);
+
             case TokenType.EMBEDDING:
                 return this.processEmbedding(token);
 
@@ -76,6 +79,11 @@ export class SyntaxHighlighter {
         }
     }
 
+    processCommentLine(token) {
+        if (!config.commentHighlight) return escapeHtml(token.value);
+        return html("span", token.value, { style: { backgroundColor: config.commentColor } });
+    }
+
     processEmbedding(token) {
         const { colors, errorColor, validEmbeddings } = config;
         const embeddingName = token.value.split(":")[1];

web/js/highlighting/tokenizer.js

@@ -9,11 +9,13 @@ export const TokenType = {
     INVALID_ESCAPE: "invalid_escape",
     WILDCARD_OPEN: "wildcard_open",
     WILDCARD_CLOSE: "wildcard_close",
+    COMMENT_LINE: "comment_line",
 };
 
 export class SyntaxTokenizer {
     constructor() {
         this.patterns = [
+            { type: TokenType.COMMENT_LINE, regex: /^\s*#[^\n]*/gm },
             { type: TokenType.ESCAPE, regex: /\\[()]/g },
             { type: TokenType.INVALID_ESCAPE, regex: /\/[()]/g },
             { type: TokenType.EMBEDDING, regex: /embedding:[^,\s]+/gi },
@@ -47,6 +49,7 @@ export class SyntaxTokenizer {
         matches.sort((a, b) => {
             if (a.start !== b.start) return a.start - b.start;
             const priority = {
+                comment_line: -1,
                 escape: 0,
                 invalid_escape: 1,
                 paren_open: 2,

web/js/settings.js

@@ -38,6 +38,21 @@ const settingsDefinitions = [
         type: SettingsHelper.ST.COLORPICKER,
         onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
     },
+    {
+        name: "Comment Highlighting",
+        category: ["Syntax Highlighting", "Textbox", "CommentHighlighting"],
+        defaultValue: true,
+        tooltip: "Highlight lines starting with '#' as comments (e.g. Impact Pack comment syntax). Suppresses all other highlighting on that line.",
+        type: SettingsHelper.ST.BOOLEAN,
+        onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
+    },
+    {
+        name: "Comment Color",
+        category: ["Syntax Highlighting", "Textbox", "CommentColor"],
+        defaultValue: "#6a9955",
+        type: SettingsHelper.ST.COLORPICKER,
+        onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
+    },
     {
         name: "Tag Tooltips",
         category: ["Syntax Highlighting", "Textbox", "TextboxTooltips"],

web/js/textbox/state.js

@@ -7,6 +7,8 @@ export class TextHighlightConfig {
     colors = null;
     wildcardColor = null;
     wildcardHighlight = true;
+    commentColor = null;
+    commentHighlight = true;
     highlightType = "nesting";
     errorColor = "var(--error-text)";
 
@@ -25,10 +27,12 @@ export class TextHighlightConfig {
     }
 
     async #updateTextColors() {
-        const [customTextboxColors, rawWildcardColor, wildcardHighlight] = await Promise.all([
+        const [customTextboxColors, rawWildcardColor, wildcardHighlight, rawCommentColor, commentHighlight] = await Promise.all([
             settingsHelper.getSetting("Textbox Colors"),
             settingsHelper.getSetting("Wildcard Color"),
             settingsHelper.getSetting("Wildcard Highlighting"),
+            settingsHelper.getSetting("Comment Color"),
+            settingsHelper.getSetting("Comment Highlighting"),
         ]);
         this.highlightType = await settingsHelper.getSetting("Textbox Highlight Type");
         this.colors = customTextboxColors
@@ -37,6 +41,9 @@ export class TextHighlightConfig {
         this.wildcardColor =
             rawWildcardColor.charAt(0) === "#" ? hexToRgb(rawWildcardColor) : rawWildcardColor;
         this.wildcardHighlight = wildcardHighlight;
+        this.commentColor =
+            rawCommentColor.charAt(0) === "#" ? hexToRgb(rawCommentColor) : rawCommentColor;
+        this.commentHighlight = commentHighlight;
     }
 }