Conversation
67e1958 to
633e7cc
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a Custom Snippets feature to allow users to quickly expand short abbreviations into their corresponding code templates. Key changes include new CSS rules and Less imports to style custom snippet hints, new extension modules (such as snippetsState, snippetsList, snippetCodeHints, driver, and codeHintIntegration) for managing snippet state and editor integration, and a new UI panel for displaying and managing custom snippets.
Reviewed Changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/brackets_patterns_override.less | Adds new styles for custom snippet code hints and snippet description display |
| src/styles/brackets.less | Imports the custom snippets stylesheet |
| src/extensionsIntegrated/loader.js | Loads the new Custom Snippets extension |
| src/extensionsIntegrated/CustomSnippets/*.js | Introduces several new modules to manage snippet state, list, code hints, and integration with the editor |
| src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html | Provides the new UI panel for custom snippets |
abose
left a comment
There was a problem hiding this comment.
I have added review comments, but those are not breaking changes, except probably the possible event handler leaks.
So merging this change, the review comments can happen in another pull request.
Also pending is writing integration tests.
| * @param {string} languageId - The language ID from Phoenix | ||
| * @returns {string} - The equivalent file extension for snippet matching | ||
| */ | ||
| function mapLanguageToExtension(languageId) { |
There was a problem hiding this comment.
use language = LanguageManager.getLanguageForPath(editor.document.file._path); or languageId = LanguageManager.getLanguageForPath(editor.document.file._path).getId(); to reliably get the language. this will honor users custom file type associations as well.
| .split(",") | ||
| .map((ext) => ext.trim()); | ||
|
|
||
| return supportedExtensions.some((ext) => ext === effectiveExtension); |
There was a problem hiding this comment.
these could be replaced with language check directly from languageId = LanguageManager.getLanguageForPath(editor.document.file._path).getId();
| const wrapperId = isEditForm ? "edit-desc-box-wrapper" : "desc-box-wrapper"; | ||
| const errorId = isEditForm ? "edit-description-length-error" : "description-length-error"; | ||
|
|
||
| UIHelper.showError(inputId, wrapperId, "Description cannot be more than 80 characters.", errorId); |
There was a problem hiding this comment.
move all UI strings to root/strings.js. The strings are all in English currently and not localized.
| // Register cursor activity handler for current and future editors | ||
| function registerCursorActivityForEditor(editor) { | ||
| if (editor) { | ||
| editor.on("cursorActivity", handleCursorActivity); |
There was a problem hiding this comment.
Always good to editor.off and then on to prevent event handler leaks.
… boxes are focused
…nt is properly visible
…ype accepted values
5d6e68e to
a74eb87
Compare
|





Tracking issue: #2268
This PR brings the support of Custom Snippets feature to Phoenix.
Custom snippets let users define short abbreviations. When typed in the editor, these trigger a hint. Selecting the hint expands it into the corresponding template text.
This helps reduce development time by avoiding repetitive typing.
Visual References
https://github.com/user-attachments/assets/a0a8d4f4-42d1-4c94-b2e2-4529371284c3 <- checkout this video too.
Untitled.video.-.Made.with.Clipchamp.20.mp4