Skip to content

Commit a1b787d

Browse files
devvaannshdevvaannsh
committed
fix: don't allow abbreviations to be more than 30 chars
1 parent 17cc098 commit a1b787d

5 files changed

Lines changed: 121 additions & 39 deletions

File tree

‎src/extensionsIntegrated/CustomSnippets/main.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,10 @@ define(function (require, exports, module) {
141141
$abbrInput.on("input", Helper.toggleSaveButtonDisability);
142142
$templateInput.on("input", Helper.toggleSaveButtonDisability);
143143

144+
$abbrInput.on("keydown", function (e) {
145+
Helper.validateAbbrInput(e, this);
146+
});
147+
144148
$templateInput.on("keydown", function (e) {
145149
Helper.handleTextareaTabKey(e, this);
146150
});
@@ -158,6 +162,10 @@ define(function (require, exports, module) {
158162
$editAbbrInput.on("input", Helper.toggleEditSaveButtonDisability);
159163
$editTemplateInput.on("input", Helper.toggleEditSaveButtonDisability);
160164

165+
$editAbbrInput.on("keydown", function (e) {
166+
Helper.validateAbbrInput(e, this);
167+
});
168+
161169
$editTemplateInput.on("keydown", function (e) {
162170
Helper.handleTextareaTabKey(e, this);
163171
});

‎src/extensionsIntegrated/CustomSnippets/src/UIHelper.js‎

Lines changed: 57 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,50 @@
22
define(function (require, exports, module) {
33
const Global = require("./global");
44

5+
/**
6+
* this is a generic function to show error messages for input fields
7+
*
8+
* @param {string} inputId - input field id
9+
* @param {string} wrapperId - wrapper element id
10+
* @param {string} errorMessage - error message to display
11+
* @param {string} errorId - Unique ID for the error message element
12+
*/
13+
function showError(inputId, wrapperId, errorMessage, errorId) {
14+
// First, clear any existing error messages for this input field
15+
const $inputField = $(`#${inputId}`);
16+
const $wrapper = $(`#${wrapperId}`);
17+
18+
// Remove any existing error messages in this wrapper
19+
$wrapper.find('.error-message').remove();
20+
21+
// Remove error styling from the input field
22+
$inputField.removeClass("error-input");
23+
24+
// Now show the new error message
25+
const $errorMessage = $("<div>")
26+
.attr("id", errorId)
27+
.addClass("error-message")
28+
.text(errorMessage);
29+
30+
$wrapper.append($errorMessage);
31+
32+
// highlight the input field with error
33+
$inputField.addClass("error-input");
34+
35+
// to automatically remove it after 5 seconds
36+
setTimeout(function () {
37+
$(`#${errorId}`).fadeOut(function () {
38+
$(this).remove();
39+
});
40+
$inputField.removeClass("error-input");
41+
}, 5000);
42+
43+
$inputField.one("input", function () {
44+
$(`#${errorId}`).remove();
45+
$(this).removeClass("error-input");
46+
});
47+
}
48+
549
/**
650
* This function is called when there are no available snippets to display
751
* this is called inside the 'showSnippetsList' function inside the snippetsList.js file
@@ -119,33 +163,19 @@ define(function (require, exports, module) {
119163
* Shows an error message when a snippet with the same abbreviation already exists
120164
* and user is trying to add a new one
121165
* @param {string} abbreviation - The abbreviation that's duplicated
166+
* @param {boolean} isEditForm - Whether this is for the edit form (optional, defaults to false)
122167
*/
123-
function showDuplicateAbbreviationError(abbreviation) {
124-
// just make sure that the error message is not already displaying
125-
if ($("#abbreviation-error-message").length === 0) {
126-
const $errorMessage = $("<div>")
127-
.attr("id", "abbreviation-error-message")
128-
.addClass("error-message")
129-
.text(`A snippet with abbreviation "${abbreviation}" already exists.`);
130-
131-
$("#abbr-box-wrapper").append($errorMessage);
132-
133-
// highlight the abbreviation input with error
134-
$("#abbr-box").addClass("error-input");
135-
136-
// automatically remove it after 5 seconds
137-
setTimeout(function () {
138-
$("#abbreviation-error-message").fadeOut(function () {
139-
$(this).remove();
140-
});
141-
$("#abbr-box").removeClass("error-input");
142-
}, 5000);
143-
144-
$("#abbr-box").one("input", function () {
145-
$("#abbreviation-error-message").remove();
146-
$(this).removeClass("error-input");
147-
});
148-
}
168+
function showDuplicateAbbreviationError(abbreviation, isEditForm = false) {
169+
const inputId = isEditForm ? 'edit-abbr-box' : 'abbr-box';
170+
const wrapperId = isEditForm ? 'edit-abbr-box-wrapper' : 'abbr-box-wrapper';
171+
const errorId = isEditForm ? 'edit-abbreviation-duplicate-error' : 'abbreviation-duplicate-error';
172+
173+
showError(
174+
inputId,
175+
wrapperId,
176+
`A snippet with abbreviation "${abbreviation}" already exists.`,
177+
errorId
178+
);
149179
}
150180

151181
/**
@@ -187,4 +217,5 @@ define(function (require, exports, module) {
187217
exports.showSnippetsListHeader = showSnippetsListHeader;
188218
exports.hideSnippetsListHeader = hideSnippetsListHeader;
189219
exports.initializeListViewToolbarTitle = initializeListViewToolbarTitle;
220+
exports.showError = showError;
190221
});

‎src/extensionsIntegrated/CustomSnippets/src/driver.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ define(function (require, exports, module) {
3131
UIHelper.showSnippetListMenu();
3232
SnippetsList.showSnippetsList();
3333
} else {
34-
UIHelper.showDuplicateAbbreviationError(snippetData.abbreviation);
34+
// false since this is from addSnippet and not from editSnippet
35+
UIHelper.showDuplicateAbbreviationError(snippetData.abbreviation, false);
3536
}
3637
}
3738

@@ -57,7 +58,8 @@ define(function (require, exports, module) {
5758
(snippet) => snippet.abbreviation === editedData.abbreviation
5859
);
5960
if (existingSnippet) {
60-
UIHelper.showDuplicateAbbreviationError(editedData.abbreviation);
61+
// true since this is from editSnippet and not from addSnippet
62+
UIHelper.showDuplicateAbbreviationError(editedData.abbreviation, true);
6163
return;
6264
}
6365
}

‎src/extensionsIntegrated/CustomSnippets/src/helper.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
define(function (require, exports, module) {
22
const StringMatch = require("utils/StringMatch");
33
const Global = require("./global");
4+
const UIHelper = require("./UIHelper");
45

56

67
/**
@@ -466,6 +467,45 @@ define(function (require, exports, module) {
466467
}
467468
}
468469

470+
function validateAbbrInput(e, abbrBox) {
471+
// Prevent space character
472+
if (e.key === ' ') {
473+
e.preventDefault();
474+
475+
// Determine if this is the edit form or new form
476+
const isEditForm = abbrBox.id === 'edit-abbr-box';
477+
const inputId = isEditForm ? 'edit-abbr-box' : 'abbr-box';
478+
const wrapperId = isEditForm ? 'edit-abbr-box-wrapper' : 'abbr-box-wrapper';
479+
const errorId = isEditForm ? 'edit-abbreviation-space-error' : 'abbreviation-space-error';
480+
481+
UIHelper.showError(
482+
inputId,
483+
wrapperId,
484+
"Space is not accepted as a valid abbreviation character.",
485+
errorId
486+
);
487+
return;
488+
}
489+
490+
// Check for character limit (30 characters)
491+
if (abbrBox.value.length >= 30 && e.key.length === 1) {
492+
e.preventDefault();
493+
494+
// Determine if this is the edit form or new form
495+
const isEditForm = abbrBox.id === 'edit-abbr-box';
496+
const inputId = isEditForm ? 'edit-abbr-box' : 'abbr-box';
497+
const wrapperId = isEditForm ? 'edit-abbr-box-wrapper' : 'abbr-box-wrapper';
498+
const errorId = isEditForm ? 'edit-abbreviation-length-error' : 'abbreviation-length-error';
499+
500+
UIHelper.showError(
501+
inputId,
502+
wrapperId,
503+
"Abbreviation cannot be more than 30 characters.",
504+
errorId
505+
);
506+
}
507+
}
508+
469509
exports.toggleSaveButtonDisability = toggleSaveButtonDisability;
470510
exports.createHintItem = createHintItem;
471511
exports.clearAllInputFields = clearAllInputFields;
@@ -487,4 +527,5 @@ define(function (require, exports, module) {
487527
exports.toggleEditSaveButtonDisability = toggleEditSaveButtonDisability;
488528
exports.clearEditInputFields = clearEditInputFields;
489529
exports.handleTextareaTabKey = handleTextareaTabKey;
530+
exports.validateAbbrInput = validateAbbrInput;
490531
});

‎src/styles/Extn-CustomSnippets.less‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -372,31 +372,31 @@
372372
}
373373
}
374374

375-
#abbreviation-error-message {
376-
color: @bc-error;
375+
.error-message {
376+
color: #dc3545;
377377
font-size: 12px;
378378
margin-top: 6px;
379379
margin-left: 0;
380380
padding: 6px 8px;
381-
background-color: rgba(247, 70, 135, 0.1);
382-
border: 1px solid @bc-error;
381+
background-color: rgba(220, 53, 69, 0.1);
382+
border: 1px solid #dc3545;
383383
border-radius: @bc-border-radius;
384384
animation: fadeIn 0.3s ease;
385385

386386
.dark & {
387-
color: @dark-bc-error;
388-
background-color: rgba(247, 70, 135, 0.15);
389-
border: 1px solid @dark-bc-error;
387+
color: #ff6b6b;
388+
background-color: rgba(220, 53, 69, 0.15);
389+
border: 1px solid #ff6b6b;
390390
}
391391
}
392392

393393
.error-input {
394-
border-color: @bc-error !important;
395-
box-shadow: 0 0 0 1px @bc-error !important;
394+
border-color: #dc3545 !important;
395+
box-shadow: 0 0 0 1px #dc3545 !important;
396396

397397
.dark & {
398-
border-color: @dark-bc-error !important;
399-
box-shadow: 0 0 0 1px @dark-bc-error !important;
398+
border-color: #ff6b6b !important;
399+
box-shadow: 0 0 0 1px #ff6b6b !important;
400400
}
401401
}
402402

0 commit comments

Comments
 (0)