feat: only update the modified lines, instead of re-factoring the whole file

Author: devvaannsh

src/extensionsIntegrated/CSSColorPreview/main.js

@@ -172,15 +172,22 @@ define(function (require, exports, module) {
 
     /**
      * 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.
+     * @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) {
+    function showGutters(editor, _results, update = false) {
         if (editor && enabled) {
             initGutter(editor);
             const cm = editor._codeMirror;
-            editor.clearGutter(GUTTER_NAME); // clear color markers
+            // 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
@@ -323,11 +330,81 @@ define(function (require, exports, module) {
         }
     }
 
+
+    /**
+     * Responsible to update the color marks only on the modified lines
+     *
+     * @param {Editor} editor the editor instance
+     * @param {Number} fromLineNumber modification start from line number
+     * @param {Number} toLineNumber modification upto line number
+     * @return {Array.<Object>} an array of objects with all the line nos and,
+     *  the colors to be added on those lines
+     */
+    function updateColorMarks(editor, fromLineNumber, toLineNumber) {
+        // const nLen = editor.lineCount();
+        const aColors = [];
+
+        // match colors and push into an array
+        for (let i = fromLineNumber; i <= toLineNumber; i++) {
+            let lineText = editor.getLine(i);
+
+            // to skip commented lines
+            // The second parameter in the getToken() method, `true`, enables precise tokenization.
+            // Without setting `precise` to `true`, multi-line comments are not handled correctly.
+            const token = editor.getToken({line: i}, true);
+            if(token.type === "comment") {
+                editor.setGutterMarker(i, GUTTER_NAME, "");
+                continue;
+            }
+
+            let regx = /:[^;]*;/g;
+
+            lineText = lineText.match(regx);
+            if (lineText) {
+                let tempColors = lineText[0].match(COLOR_REGEX);
+
+                // to remove color if the line is modified and now the colors are not valid
+                if(!tempColors) {
+                    editor.setGutterMarker(i, GUTTER_NAME, "");
+                }
+                // Support up to 4 colors
+                if (tempColors && tempColors.length > 0) {
+                    let colors = tempColors.slice(0, 4);
+                    aColors.push({
+                        lineNumber: i,
+                        colorValues: colors
+                    });
+                }
+            }
+        }
+
+        return aColors;
+    }
+
     /**
      * 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
      */
-    function onChanged() {
-        showColorMarks();
+    function onChanged(instance, changeObj) {
+
+        const editor = EditorManager.getActiveEditor();
+
+        // 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(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);
+            } else {
+                showColorMarks();
+            }
+
+        } else { // for any complex operation like, cut, paste etc, we re-update the whole file
+            showColorMarks();
+        }
+
     }
 
     /**