deploy: 606b7d0

Author: phoenixide

appConfig.js

@@ -26,7 +26,7 @@ window.AppConfig = {
         "app_notification_url": "assets/notifications/dev/",
         "app_update_url": "https://updates.phcode.io/tauri/update-latest-experimental-build.json",
         "linting.enabled_by_default": true,
-        "build_timestamp": "2024-11-30T08:26:33.102Z",
+        "build_timestamp": "2024-11-30T08:30:14.323Z",
         "googleAnalyticsID": "G-P4HJFPDB76",
         "googleAnalyticsIDDesktop": "G-VE5BXWJ0HF",
         "mixPanelID": "49c4d164b592be2350fc7af06a259bf3",
@@ -38,7 +38,7 @@ window.AppConfig = {
         "bugsnagEnv": "development"
     },
     "name": "Phoenix Code",
-    "version": "3.11.0-20687",
+    "version": "3.11.0-20694",
     "apiVersion": "3.11.0",
     "homepage": "https://core.ai",
     "issues": {

assets/default-project/en.zip

@@ -33113,6 +33113,262 @@ define("extensibility/registry_utils", function (require, exports, module) {
     };
 });
 
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ * Original work Copyright (c) 2024 [cmgddd](https://github.com/cmgddd/Brackets-css-color-preview). All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+
+/* Displays a color preview in the gutter for any file containing color values */
+/* Styles on `styles/brackets.less` file */
+
+define("extensionsIntegrated/CSSColorPreview/main", function (require, exports, module) {
+
+    // Brackets modules.
+    const _                 = require("thirdparty/lodash"),
+        EditorManager       = require('editor/EditorManager'),
+        ColorUtils          = require('utils/ColorUtils'),
+        AppInit             = require("utils/AppInit"),
+        PreferencesManager  = require("preferences/PreferencesManager"),
+        Strings             = require("strings");
+
+    // Extension variables.
+    const COLOR_REGEX       = ColorUtils.COLOR_REGEX,    // used to match color
+        gutterName          = "CodeMirror-colorGutter";
+
+
+    // For preferences settings, to toggle this feature on/off
+    const PREFERENCES_CSS_COLOR_PREVIEW = "CSSColorPreview";
+    let enabled = true; // by default:- on
+
+    PreferencesManager.definePreference(PREFERENCES_CSS_COLOR_PREVIEW, "boolean", enabled, {
+        description: Strings.DESCRIPTION_CSS_COLOR_PREVIEW
+    });
+
+    /**
+     * Gets all the colors that are to be displayed
+     *
+     * Makes sure that the feature is enabled and editor is active, if yes:
+     * Calls showGutter function to display the color marks on the gutter
+     */
+    function showColorMarks() {
+        if (!enabled) {
+            removeColorMarks();
+            return;
+        }
+
+        const editor = EditorManager.getActiveEditor();
+        if (editor) {
+
+            const cm = editor._codeMirror;
+            const nLen = cm.lineCount();
+            const aColors = [];
+
+            // match colors and push into an array
+            for (let i = 0; i < nLen; i++) {
+                let lineText = cm.getLine(i);
+
+                if ((lineText.indexOf('/*') !== -1) || (lineText.indexOf('*/') !== -1)) {
+                    continue;
+                } else {
+                    let regx = /:[^;]*;/g;
+
+                    lineText = lineText.match(regx);
+                    if (lineText) {
+                        let tempColors = lineText[0].match(COLOR_REGEX);
+                        // Support up to 4 colors
+                        if (tempColors && tempColors.length > 0) {
+                            let colors = tempColors.slice(0, 4);
+                            aColors.push({
+                                lineNumber: i,
+                                colorValues: colors
+                            });
+                        }
+                    }
+                }
+            }
+
+            showGutters(editor, aColors);
+        }
+    }
+
+    /**
+     * To remove the color marks from the gutter
+     */
+    function removeColorMarks() {
+        const editor = EditorManager.getActiveEditor();
+        if (editor) {
+            const cm = editor._codeMirror;
+            cm.clearGutter(gutterName);
+        }
+    }
+
+    /**
+     * To display the color marks on the gutter
+     * @param {activeEditor} editor
+     * @param {Array.<object>} _results An array of objects which stores
+     *   all the line numbers and the colors to be displayed on that line.
+     */
+    function showGutters(editor, _results) {
+        if (editor && enabled) {
+            initGutter(editor);
+            const cm = editor._codeMirror;
+            cm.clearGutter(gutterName); // clear color markers
+
+            // Only add markers if enabled
+            if (enabled) {
+                cm.colorGutters = _.sortBy(_results, "lineNumber");
+
+                cm.colorGutters.forEach(function (obj) {
+                    let $marker;
+
+                    if (obj.colorValues.length === 1) {
+                        // Single color preview
+                        $marker = $("<i>")
+                            .addClass("ico-cssColorPreview")
+                            .css('background-color', obj.colorValues[0]);
+
+                        cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]);
+                    } else {
+                        // Multiple colors preview
+                        $marker = $("<div>").addClass("ico-multiple-cssColorPreview");
+
+                        // Positions for up to 4 colors in grid
+                        const positions = [
+                            { top: 0, left: 0 },
+                            { top: 0, right: 0 },
+                            { bottom: 0, right: 0 },
+                            { bottom: 0, left: 0 }
+                        ];
+
+                        obj.colorValues.forEach((color, index) => {
+                            if (index < 4) {
+                                const $colorBox = $("<div>")
+                                    .addClass("color-box")
+                                    .css({
+                                        'background-color': color,
+                                        ...positions[index]
+                                    });
+                                $marker.append($colorBox);
+                            }
+                        });
+
+                        cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]);
+                    }
+                });
+            }
+
+        }
+    }
+
+
+    /**
+     * Initialize the gutter
+     * @param {activeEditor} editor
+     */
+    function initGutter(editor) {
+
+        const cm = editor._codeMirror;
+        const gutters = cm.getOption("gutters").slice(0);
+        let str = gutters.join('');
+        if (str.indexOf(gutterName) === -1) {
+            gutters.unshift(gutterName);
+            cm.setOption("gutters", gutters);
+        }
+    }
+
+    /**
+     * Register all the required handlers
+     */
+    function registerHandlers() {
+        // Remove previous listeners to avoid multiple binding issue
+        EditorManager.off("activeEditorChange", onChanged);
+
+        // Add listener for all editor changes
+        EditorManager.on("activeEditorChange", function (event, newEditor, oldEditor) {
+            if (newEditor) {
+                // Unbind the previous editor's change event if it exists
+                if (oldEditor) {
+                    const oldCM = oldEditor._codeMirror;
+                    if (oldCM) {
+                        oldCM.off("change", onChanged);
+                    }
+                }
+
+                // Bind change event to the new editor
+                const cm = newEditor._codeMirror;
+                if (cm) {
+                    cm.on("change", onChanged);
+                }
+
+                showColorMarks();
+            }
+        });
+
+        // Handle the currently active editor at initialization
+        const activeEditor = EditorManager.getActiveEditor();
+        if (activeEditor) {
+            const cm = activeEditor._codeMirror;
+            if (cm) {
+                cm.on("change", onChanged);
+            }
+            showColorMarks();
+        }
+
+    }
+
+    /**
+     * Checks for preference changes, to enable/disable the feature
+     */
+    function preferenceChanged() {
+        const value = PreferencesManager.get(PREFERENCES_CSS_COLOR_PREVIEW);
+        enabled = value;
+        if (!value) {
+            removeColorMarks();
+        } else {
+            showColorMarks();
+        }
+    }
+
+    /**
+     * Function that gets triggered when any change occurs on the editor
+     */
+    function onChanged() {
+        showColorMarks();
+    }
+
+    /**
+     * Driver function, runs at the start of the program
+     */
+    function init() {
+        showColorMarks();
+        registerHandlers();
+    }
+
+    // init after appReady
+    AppInit.appReady(function () {
+        PreferencesManager.on("change", PREFERENCES_CSS_COLOR_PREVIEW, preferenceChanged);
+        init();
+    });
+});
+
+
 /*
  * GNU AGPL-3.0 License
  *
@@ -43954,6 +44210,7 @@ define("extensionsIntegrated/loader", function (require, exports, module) {
     require("./appUpdater/main");
     require("./HtmlTagSyncEdit/main");
     require("./indentGuides/main");
+    require("./CSSColorPreview/main");
 });
 
 /*
@@ -92532,7 +92789,8 @@ define("nls/root/strings", {
     "BEAUTIFY_OPTION_PRINT_TRAILING_COMMAS": "Print trailing commas wherever possible in multi-line comma-separated syntactic structures",
     // indent guides extension
     "DESCRIPTION_INDENT_GUIDES_ENABLED": "true to show indent guide lines, else false.",
-    "DESCRIPTION_HIDE_FIRST": "true to show the first Indent Guide line else false."
+    "DESCRIPTION_HIDE_FIRST": "true to show the first Indent Guide line else false.",
+    "DESCRIPTION_CSS_COLOR_PREVIEW": "true to display color previews in the gutter, else false."
 });
 
 /*