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-12-09T07:14:11.164Z",
+        "build_timestamp": "2024-12-10T01:39:07.053Z",
         "googleAnalyticsID": "G-P4HJFPDB76",
         "googleAnalyticsIDDesktop": "G-VE5BXWJ0HF",
         "mixPanelID": "49c4d164b592be2350fc7af06a259bf3",
@@ -38,7 +38,7 @@ window.AppConfig = {
         "bugsnagEnv": "development"
     },
     "name": "Phoenix Code",
-    "version": "3.11.0-20727",
+    "version": "3.11.0-20736",
     "apiVersion": "3.11.0",
     "homepage": "https://core.ai",
     "issues": {

assets/default-project/en.zip

@@ -33190,13 +33190,16 @@ define("extensionsIntegrated/CSSColorPreview/main", function (require, exports,
     // Extension variables.
     const COLOR_REGEX       = ColorUtils.COLOR_REGEX,    // used to match color
         GUTTER_NAME          = "CodeMirror-colorGutter",
+        DUMMY_GUTTER_CLASS   = "CodeMirror-colorGutter-none",
+        SINGLE_COLOR_PREVIEW_CLASS   = "ico-cssColorPreview",
+        MULTI_COLOR_PREVIEW_CLASS   = "ico-multiple-cssColorPreview",
         COLOR_PREVIEW_GUTTER_PRIORITY = 200,
         COLOR_LANGUAGES= ["css", "scss", "less", "sass", "stylus", "html", "svg", "jsx", "tsx",
             "php", "ejs", "erb_html", "pug"];
 
 
     // For preferences settings, to toggle this feature on/off
-    const PREFERENCES_CSS_COLOR_PREVIEW = "CSSColorPreview";
+    const PREFERENCES_CSS_COLOR_PREVIEW = "colorPreview";
     let enabled = true; // by default:- on
 
     PreferencesManager.definePreference(PREFERENCES_CSS_COLOR_PREVIEW, "boolean", enabled, {
@@ -33264,81 +33267,82 @@ define("extensionsIntegrated/CSSColorPreview/main", function (require, exports,
     /**
      * To display the color marks on the gutter
      *
-     * @param {activeEditor} editor
+     * @param {Editor} editor
      * @param {Array.<object>} _results An array of objects which stores
      *   all the line numbers and the colors to be displayed on that line.
      * @param {Boolean} update marks whether this function is called when some lines
      *  are updated or when the whole file is re-updated. Defaults to false.
      */
     function showGutters(editor, _results, update = false) {
         if (editor && enabled) {
-            // if the file is updated we don't need to clear the gutter
-            // as it will clear all the existing markers.
-            if(!update) {
-                editor.clearGutter(GUTTER_NAME); // clear color markers
-            }
-            _addDummyGutterMarkerIfNotExist(editor, editor.getCursorPos().line);
+            editor.operation(()=>{
+                // if the file is updated we don't need to clear the gutter
+                // as it will clear all the existing markers.
+                if(!update) {
+                    editor.clearGutter(GUTTER_NAME); // clear color markers
+                }
+                _addDummyGutterMarkerIfNotExist(editor, editor.getCursorPos().line);
+
+                // Only add markers if enabled
+                if (enabled) {
+                    const colorGutters = _.sortBy(_results, "lineNumber");
+
+                    colorGutters.forEach(function (obj) {
+                        let $marker;
+                        if (obj.colorValues.length === 1) {
+                            // Single color preview
+                            $marker = $("<i>")
+                                .addClass(SINGLE_COLOR_PREVIEW_CLASS)
+                                .css('background-color', obj.colorValues[0]);
+
+                            editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
+                            $marker.click((event)=>{
+                                event.preventDefault();
+                                event.stopPropagation();
+                                _colorIconClicked(editor, obj.lineNumber, obj.colorValues[0]);
+                            });
+                        } else {
+                            // Multiple colors preview
+                            $marker = $("<div>").addClass(MULTI_COLOR_PREVIEW_CLASS);
+
+                            // 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 }
+                            ];
 
-            // Only add markers if enabled
-            if (enabled) {
-                const colorGutters = _.sortBy(_results, "lineNumber");
-
-                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]);
-
-                        editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
-                        $marker.click((event)=>{
-                            event.preventDefault();
-                            event.stopPropagation();
-                            _colorIconClicked(editor, obj.lineNumber, obj.colorValues[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]
+                            obj.colorValues.forEach((color, index) => {
+                                if (index < 4) {
+                                    const $colorBox = $("<div>")
+                                        .addClass("color-box")
+                                        .css({
+                                            'background-color': color,
+                                            ...positions[index]
+                                        });
+                                    $colorBox.click((event)=>{
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        _colorIconClicked(editor, obj.lineNumber, color);
                                     });
-                                $colorBox.click((event)=>{
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    _colorIconClicked(editor, obj.lineNumber, color);
-                                });
-                                $marker.append($colorBox);
-                            }
-                        });
-
-                        editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
-                    }
-                });
-            }
+                                    $marker.append($colorBox);
+                                }
+                            });
 
+                            editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
+                        }
+                    });
+                }
+            });
         }
     }
 
     function _addDummyGutterMarkerIfNotExist(editor, line) {
         let marker = editor.getGutterMarker(line, GUTTER_NAME);
         if(!marker){
             let $marker = $('<div>')
-                .addClass(GUTTER_NAME);
+                .addClass(DUMMY_GUTTER_CLASS);
             editor.setGutterMarker(line, GUTTER_NAME, $marker[0]);
         }
     }
@@ -33396,6 +33400,35 @@ define("extensionsIntegrated/CSSColorPreview/main", function (require, exports,
         }
     }
 
+    const STYLE_PARSE_LANGUAGES = {
+        php: true,
+        jsx: true,
+        tsx: true
+    };
+    function _isInStyleAttr(editor, token) {
+        while(token.type === "string") {
+            const currentToken = token;
+            token = editor.getPreviousToken({line: token.line, ch: token.start}, true);
+            if(currentToken.line === token.line &&
+                currentToken.start === token.start && currentToken.end === token.end) {
+                // reached start of file
+                break;
+            }
+        }
+        return token.type === "attribute" && token.string === "style";
+    }
+
+    function _shouldProcessToken(editor, token, pos) {
+        const languageID = editor.document.getLanguage().getId();
+        if(languageID === "html") {
+            return editor.getLanguageForPosition(pos).getId() === "css";
+        } else if (STYLE_PARSE_LANGUAGES[languageID]) {
+            // unfortunately the codemirror mode doesn't support css detection in attributes in php files right now
+            return token.type !== "comment" && _isInStyleAttr(editor, token);
+        }
+        return token.type !== "comment";
+    }
+
     /**
      * Detects valid colors in a given line of text
      *
@@ -33411,7 +33444,7 @@ define("extensionsIntegrated/CSSColorPreview/main", function (require, exports,
             return [];
         }
 
-        const valueRegex = /:[^;]*;/g;
+        const valueRegex = /:[^;]*;?/g; // the last semi colon is optional.
         const validColors = [];
 
         // Find all property value sections in the line
@@ -33428,7 +33461,7 @@ define("extensionsIntegrated/CSSColorPreview/main", function (require, exports,
                 const token = editor.getToken({ line: lineNumber, ch: colorIndex }, true);
 
                 // If the token is not a comment, add the color
-                if (token.type !== "comment") {
+                if (_shouldProcessToken(editor, token, { line: lineNumber, ch: colorIndex })) {
                     validColors.push({
                         color: colorMatch[0],
                         index: colorIndex
@@ -33503,27 +33536,33 @@ define("extensionsIntegrated/CSSColorPreview/main", function (require, exports,
     /**
      * Function that gets triggered when any change occurs on the editor
      *
-     * @param {Editor} instance the codemirror instance
-     * @param {Object} changeObj an object that has properties regarding the line changed and type of change
+     * @param _evt unused event detail
+     * @param {Editor} instance the editor instance
+     * @param {Object} changeList an object that has properties regarding the line changed and type of change
      */
-    function onChanged(instance, changeObj) {
-
-        const editor = EditorManager.getActiveEditor();
-
+    function onChanged(_evt, instance, changeList) {
         // for insertion and deletion, update the changed lines
-        if(changeObj.origin === '+input' || changeObj.origin === '+delete') {
-            // make sure that the required properties exist and in the form they are expected to be
+        if(!changeList || !changeList.length) {
+            return;
+        }
+        const changeObj = changeList[0];
+        if(changeList.length === 1 && changeObj.origin === '+input' || changeObj.origin === '+delete') {
+            // we only do the diff updates on single key type input/delete and not bulk changes
+            // somehow the performance degrades if we do the diff logic on large blocks.
             if(changeObj.from.line && changeObj.to.line && changeObj.from.line <= changeObj.to.line) {
-                const aColors = updateColorMarks(editor, changeObj.from.line, changeObj.to.line);
-                showGutters(editor, aColors, true);
+                let toLine = changeObj.to.line;
+                if(changeObj.text && changeObj.text.length) {
+                    toLine = changeObj.from.line + changeObj.text.length;
+                }
+                const aColors = updateColorMarks(instance, changeObj.from.line, Math.max(changeObj.to.line, toLine));
+                showGutters(instance, aColors, true);
             } else {
                 showColorMarks();
             }
 
         } else { // for any complex operation like, cut, paste etc, we re-update the whole file
             showColorMarks();
         }
-
     }
 
     // init after appReady