Skip to content

Commit

Permalink
feat: set cursor pos and opens quick edit when color icon is clicked
Browse files Browse the repository at this point in the history
  • Loading branch information
devvaannsh authored and abose committed Dec 2, 2024
1 parent 245b3a6 commit 18a7578
Showing 1 changed file with 45 additions and 0 deletions.
45 changes: 45 additions & 0 deletions src/extensionsIntegrated/CSSColorPreview/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ define(function (require, exports, module) {
Editor = require("editor/Editor").Editor,
PreferencesManager = require("preferences/PreferencesManager"),
MainViewManager = require("view/MainViewManager"),
Commands = require("command/Commands"),
CommandManager = require("command/CommandManager"),
Strings = require("strings");

// Extension variables.
Expand Down Expand Up @@ -142,6 +144,45 @@ define(function (require, exports, module) {
});
}


/**
* To move the cursor to the color text and display the color quick edit
* @param {Editor} codem the codemirror instance
* @param {Number} lineNumber the line number that is clicked
* @param {String} gutter the gutter name
*/
function colorIconClicked(codem, lineNumber, gutter) {
const editor = EditorManager.getActiveEditor();
const cm = editor._codeMirror;

if(gutter === 'CodeMirror-linenumbers') {

let colorValue;

for(let i of codem.colorGutters) {
if(i.lineNumber === lineNumber) {
colorValue = i.colorValues[0];
}
}

const lineText = cm.getLine(lineNumber);
const colorIndex = lineText.indexOf(colorValue);

if (colorIndex !== -1) {
// Place cursor at the start of the color text
if (editor) {
editor.setCursorPos(lineNumber, colorIndex);

// Added a 50ms delay with setTimeout to make sure the quick edit menu toggles correctly.
// Without it, closing the menu trigger text selection, reopening the menu.
setTimeout(() => {
CommandManager.execute(Commands.TOGGLE_QUICK_EDIT);
}, 50);
}
}
}
}

/**
* To display the color marks on the gutter
* @param {activeEditor} editor
Expand All @@ -155,6 +196,10 @@ define(function (require, exports, module) {
editor.clearGutter(GUTTER_NAME); // clear color markers
_addDummyGutterMarkerIfNotExist(editor, editor.getCursorPos().line);

cm.on("gutterClick", (codem, lineNumber, gutter) => {
colorIconClicked(codem, lineNumber, gutter);
});

// Only add markers if enabled
if (enabled) {
cm.colorGutters = _.sortBy(_results, "lineNumber");
Expand Down

0 comments on commit 18a7578

Please sign in to comment.