Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: clicking on color gutter opens color editor on wrong line after some line deletions #1986

Merged
merged 1 commit into from
Dec 11, 2024
Merged

fix: clicking on color gutter opens color editor on wrong line after some line deletions #1986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/editor/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2592,14 +2592,16 @@ define(function (require, exports, module) {
* @param {number} lineNumber The line number for the inserted gutter marker
* @param {string} gutterName The name of the gutter
* @param {object} marker The dom element representing the marker to the inserted in the gutter
* @returns {{lineNo : function}} lineHandle this can be used to track the gutter line as the line number
* changes as the user edits code.
*/
Editor.prototype.setGutterMarker = function (lineNumber, gutterName, marker) {
if (!Editor.isGutterRegistered(gutterName)) {
console.warn("Gutter name must be registered before calling editor.setGutterMarker");
return;
}

this._codeMirror.setGutterMarker(lineNumber, gutterName, marker);
return this._codeMirror.setGutterMarker(lineNumber, gutterName, marker);
};

/**
Expand Down
12 changes: 6 additions & 6 deletions src/extensionsIntegrated/CSSColorPreview/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,22 +142,24 @@ define(function (require, exports, module) {
const colorGutters = _.sortBy(_results, "lineNumber");

colorGutters.forEach(function (obj) {
let lineHandle;
let $marker;
if (obj.colorValues.length === 1) {
// Single color preview
$marker = $("<i>")
.addClass(SINGLE_COLOR_PREVIEW_CLASS)
.css('background-color', obj.colorValues[0].color);
lineHandle = editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);

editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
$marker.click((event)=>{
event.preventDefault();
event.stopPropagation();
_colorIconClicked(editor, obj.lineNumber, obj.colorValues[0].color);
_colorIconClicked(editor, lineHandle.lineNo(), obj.colorValues[0].color);
});
} else {
// Multiple colors preview
$marker = $("<div>").addClass(MULTI_COLOR_PREVIEW_CLASS);
lineHandle = editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);

// Positions for up to 4 colors in grid
const positions = [
Expand All @@ -178,18 +180,16 @@ define(function (require, exports, module) {
$colorBox.click((event)=>{
event.preventDefault();
event.stopPropagation();
_colorIconClicked(editor, obj.lineNumber, color.color);
_colorIconClicked(editor, lineHandle.lineNo(), color.color);
});
$marker.append($colorBox);
}
});

editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
}
$marker.mouseenter(event=>{
event.preventDefault();
event.stopPropagation();
_applyInlineColor(editor, obj.lineNumber);
_applyInlineColor(editor, lineHandle.lineNo());
});
$marker.mouseleave(event=>{
event.preventDefault();
Expand Down
51 changes: 43 additions & 8 deletions test/spec/Extn-CSSColorPreview-integ-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@
*
*/

/*global describe, it, beforeAll, afterAll*/
/*global describe, it, beforeAll, afterAll, beforeEach*/

define(function (require, exports, module) {


var SpecRunnerUtils = require("spec/SpecRunnerUtils");

describe("integration:ColorPreview in gutter", function () {
describe("integration:ColorPreview in gutter - needs focus", function () {
const testRootSpec = "/spec/CSSColorPreview-test-files/";
const GUTTER_NAME = "CodeMirror-colorGutter",
SINGLE_COLOR_PREVIEW_CLASS = "ico-cssColorPreview",
Expand Down Expand Up @@ -55,6 +55,10 @@ define(function (require, exports, module) {
await SpecRunnerUtils.closeTestWindow();
}, 30000);

beforeEach(async function () {
await __PR.closeAll();
});

it("should color gutter not appear in cpp files", async function () {
const fileName = "a.cpp";
await __PR.writeTextFile(fileName, "#include <iostream>", true);
Expand Down Expand Up @@ -204,16 +208,24 @@ define(function (require, exports, module) {
const editor = await init();
await __PR.execCommand(__PR.Commands.EDIT_BEAUTIFY_CODE);
if(baseFileName === "base.css"){
await __PR.awaitsFor(()=>{
return editor.getLine(0) === ".class-one {";
}, "for beautify complete");
await __PR.awaitsFor(async ()=>{
if(editor.getLine(0) !== ".class-one {"){
await __PR.execCommand(__PR.Commands.EDIT_BEAUTIFY_CODE);
return false;
}
return true;
}, "for beautify complete", 2000, 50);
_verifyExpectedColors(editor, [8, 12, 15, 18, 21, 24]);
await __PR.closeFile();
return;
}
await __PR.awaitsFor(()=>{
return editor.getLine(2) === " <head>";
}, "for beautify complete");
await __PR.awaitsFor(async ()=>{
if(editor.getLine(2) !== " <head>"){
await __PR.execCommand(__PR.Commands.EDIT_BEAUTIFY_CODE);
return false;
}
return true;
}, "for beautify complete", 2000, 50);
_verifyExpectedColors(editor, [8, 12, 13, 14, 15, 16]);
await __PR.closeFile();
});
Expand Down Expand Up @@ -250,6 +262,29 @@ define(function (require, exports, module) {
await __PR.closeFile();
});

it(`should color gutter track correct line numbers after deleting lines in ${fileName}`, async function () {
const editor = await init();
validateMultipleColors(editor, 12, ["#00ff8c", "red"]);

__PR.setCursors(["6:1-10:2"]);
__PR.keydown(["BACK_SPACE"]); // this will delete the selected lines

// now the color gutter should account for the missing lines
let gutterMarker = editor.getGutterMarker(11, GUTTER_NAME);
const individualColors = $(gutterMarker).find(".color-box");
individualColors[0].click();
await __PR.awaitsFor(()=>{
return __PR.$(".CodeMirror-linewidget").length === 1 &&
areColorsEqual(__PR.$(".CodeMirror-linewidget").find(".original-color")[0], "#ff0090");
}, "quick edit to color #ff0090 appear");
individualColors[2].click();
await __PR.awaitsFor(()=>{
return __PR.$(".CodeMirror-linewidget").length === 1 &&
areColorsEqual(__PR.$(".CodeMirror-linewidget").find(".original-color")[0], "#954e3e");
}, "quick edit to color #954e3e appear");
await __PR.closeFile();
});

it(`should update colors on typing ${fileName}`, async function () {
const editor = await init();
validateSingleColor(editor, 8, "blue");
Expand Down
Loading