Skip to content

fix: emmet text overlapping emmet hint #2460

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

Merged
merged 4 commits into from
Oct 24, 2025
Merged

fix: emmet text overlapping emmet hint #2460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f69a697
fix: emmet text overlapping emmet hint
devvaannsh Oct 22, 2025
b55c024
refactor: improve emmet code readability
devvaannsh Oct 24, 2025
68b4948
fix: add max limit for emmet expandable text to prevent app crash
devvaannsh Oct 24, 2025
b198346
fix: use 400 instead of 1000 for max repeat to prevent app freeze
devvaannsh Oct 24, 2025
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
5 changes: 3 additions & 2 deletions src/extensions/default/CSSCodeHints/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ define(function (require, exports, module) {
// wrapped in try catch block because EXPAND_ABBR might throw error when it gets unexpected
// characters such as `, =, etc
try {
let expandedAbbr = expandAbbr(needle, { syntax: "css", type: "stylesheet" });
let expandedAbbr = expandAbbr(needle, { syntax: "css", type: "stylesheet", maxRepeat: 400 });
if (expandedAbbr && _isEmmetExpandable(needle, expandedAbbr)) {

// if the expandedAbbr doesn't have any numbers, we should split the expandedAbbr to,
Expand Down Expand Up @@ -524,7 +524,8 @@ define(function (require, exports, module) {
const $emmetHintObj = $("<span>")
.addClass("brackets-css-hints brackets-hints")
.attr("data-val", expandedAbbr)
.attr("data-isEmmet", true);
.attr("data-isEmmet", true)
.css("margin-right", "48px");

// for highlighting the already-typed characters
if (token.stringRanges) {
Expand Down
8 changes: 4 additions & 4 deletions src/extensions/default/HTMLCodeHints/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,15 +145,15 @@ define(function (require, exports, module) {
function formatEmmetHint(abbr) {
// Create the main container for the hint
var $hint = $("<span>")
.addClass("emmet-hint");
.css("margin-right", "48px");

// Create a wrapper for the text content
var $textContent = $("<span>")
.addClass("emmet-text-content")
.text(abbr);

// style in brackets_patterns_override.less file
let $icon = $(`<span class="emmet-code-hint">Emmet</span>`);
let $icon = $(`<span class="emmet-html-code-hint">Emmet</span>`);

// Append both text content and icon to the main container
$hint.append($textContent);
Expand Down Expand Up @@ -498,7 +498,7 @@ define(function (require, exports, module) {
) {

try {
return expandAbbr(word, { syntax: "html", type: "markup" }); // expanded
return expandAbbr(word, { syntax: "html", type: "markup", maxRepeat: 400 }); // expanded
} catch (error) {

// emmet api throws an error when abbr contains unclosed quotes, handling that case
Expand All @@ -510,7 +510,7 @@ define(function (require, exports, module) {
const modifiedWord = word + nextChar;

try {
return expandAbbr(modifiedWord, { syntax: "html", type: "markup" }); //expandedModified
return expandAbbr(modifiedWord, { syntax: "html", type: "markup", maxRepeat: 400 });
} catch (innerError) {
// If it still fails, return false
return null;
Expand Down
8 changes: 2 additions & 6 deletions src/styles/brackets_patterns_override.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -727,11 +727,11 @@ a:focus {
}
}

.emmet-code-hint {
.emmet-html-code-hint {
visibility: hidden;
}

.codehint-menu .dropdown-menu li a.highlight .emmet-code-hint {
.codehint-menu .dropdown-menu li a.highlight .emmet-html-code-hint {
visibility: visible;
position: absolute;
right: 1rem;
Expand All @@ -744,10 +744,6 @@ a:focus {
}
}

.emmet-hint {
margin-right: 48px !important;
}

.emmet-text-content {
display: inline-block;
max-width: 320px;
Expand Down
Loading