feat: add emmet option to edit menu

Author: devvaannsh

src/brackets.js

@@ -121,7 +121,6 @@ define(function (require, exports, module) {
     // load modules for later use
     require("utils/Global");
     require("editor/CSSInlineEditor");
-    require("preferences/AllPreferences");
     require("project/WorkingSetSort");
     require("search/QuickOpen");
     require("search/QuickOpenHelper");

src/command/Commands.js

@@ -215,6 +215,8 @@ define(function (require, exports, module) {
     /** Toggles code beautification on save */
     exports.EDIT_BEAUTIFY_CODE_ON_SAVE  = "edit.beautifyOnSave";         // CodeHintManager.js           _startNewSession()
 
+    exports.EDIT_EMMET                 = "edit.emmet";                 // HTMLCodeHints CSSCodeHints
+
     /** Opens find dialog */
     exports.CMD_FIND                    = "cmd.find";                   // FindReplace.js               _launchFind()
 
@@ -580,4 +582,3 @@ define(function (require, exports, module) {
     DeprecationWarning.deprecateConstant(exports, "SORT_WORKINGSET_BY_TYPE",    "CMD_WORKINGSET_SORT_BY_TYPE");
     DeprecationWarning.deprecateConstant(exports, "SORT_WORKINGSET_AUTO",       "CMD_WORKING_SORT_TOGGLE_AUTO");
 });
-

src/command/DefaultMenus.js

@@ -185,6 +185,8 @@ define(function (require, exports, module) {
         menu.addMenuItem(Commands.SHOW_CODE_HINTS);
         menu.addMenuDivider();
         menu.addMenuItem(Commands.TOGGLE_CLOSE_BRACKETS);
+        menu.addMenuItem(Commands.EDIT_EMMET);
+
 
         /*
          * Find menu
@@ -472,4 +474,4 @@ define(function (require, exports, module) {
         Menus.getContextMenu(Menus.ContextMenuIds.WORKING_SET_CONTEXT_MENU).on("beforeContextMenuOpen", _setMenuItemsVisible);
         Menus.getContextMenu(Menus.ContextMenuIds.PROJECT_MENU).on("beforeContextMenuOpen", _setMenuItemsVisible);
     });
-});
+});

src/document/DocumentCommandHandlers.js

@@ -140,6 +140,30 @@ define(function (require, exports, module) {
     });
     EventDispatcher.makeEventDispatcher(exports);
 
+
+    PreferencesManager.definePreference("emmet", "boolean", true, {
+        description: Strings.DESCRIPTION_EMMET
+    });
+
+    // Register the Emmet toggle command
+    const EMMET_COMMAND_ID = "edit.emmet";
+    const emmetCommand = CommandManager.register(Strings.CMD_TOGGLE_EMMET, EMMET_COMMAND_ID, toggleEmmet);
+
+    // Set initial state based on the preference
+    emmetCommand.setChecked(PreferencesManager.get("emmet"));
+
+    // Helper function to toggle the Emmet preference
+    function toggleEmmet() {
+        PreferencesManager.set("emmet", !PreferencesManager.get("emmet"));
+        emmetCommand.setChecked(PreferencesManager.get("emmet"));
+    }
+
+    // Listen for any change in the "emmet" preference and update the menu's toggle state
+    // this is needed because else the menu is not getting updated when the preference is changed
+    PreferencesManager.on("change", "emmet", function () {
+        emmetCommand.setChecked(PreferencesManager.get("emmet"));
+    });
+
     /**
      * Event triggered when File Save is cancelled, when prompted to save dirty files
      */

src/extensions/default/CSSCodeHints/main.js

@@ -36,7 +36,6 @@ define(function (require, exports, module) {
         KeyEvent = brackets.getModule("utils/KeyEvent"),
         LiveDevelopment = brackets.getModule("LiveDevelopment/main"),
         Metrics = brackets.getModule("utils/Metrics"),
-        AllPreferences = brackets.getModule("preferences/AllPreferences"),
         CSSProperties = require("text!CSSProperties.json"),
         properties = JSON.parse(CSSProperties);
 
@@ -74,7 +73,7 @@ define(function (require, exports, module) {
     // the Emmet icon serves as a clickable link that redirects to the MDN page for the property (if available).
     // This object follows the structure:
     // { PROPERTY_NAME: MDN_URL }
-    const MDN_PROPERTIES_URLS = {};
+    const mdnPropertiesUrls = {};
 
     PreferencesManager.definePreference("codehint.CssPropHints", "boolean", true, {
         description: Strings.DESCRIPTION_CSS_PROP_HINTS
@@ -477,7 +476,7 @@ define(function (require, exports, module) {
                 const propertyKey = computedPropertyKeys[resultItem.sourceIndex];
                 if (properties[propertyKey] && properties[propertyKey].MDN_URL) {
                     resultItem.MDN_URL = properties[propertyKey].MDN_URL;
-                    MDN_PROPERTIES_URLS[propertyKey] = resultItem.MDN_URL;
+                    mdnPropertiesUrls[propertyKey] = resultItem.MDN_URL;
                 }
             }
 
@@ -517,8 +516,8 @@ define(function (require, exports, module) {
                             let $icon = $(`<a class="emmet-css-code-hint" style="text-decoration: none">Emmet</a>`);
 
                             // if MDN_URL is available for the property, add the href attribute to redirect to mdn
-                            if (MDN_PROPERTIES_URLS[expandedAbbr]) {
-                                $icon.attr("href", MDN_PROPERTIES_URLS[expandedAbbr]);
+                            if (mdnPropertiesUrls[expandedAbbr]) {
+                                $icon.attr("href", mdnPropertiesUrls[expandedAbbr]);
                                 $icon.attr("title", Strings.DOCS_MORE_LINK_MDN_TITLE);
                             }
 
@@ -825,15 +824,15 @@ define(function (require, exports, module) {
      * Checks for preference changes, to enable/disable Emmet
      */
     function preferenceChanged() {
-        enabled = PreferencesManager.get(AllPreferences.EMMET);
+        enabled = PreferencesManager.get("emmet");
     }
 
 
     AppInit.appReady(function () {
         var cssPropHints = new CssPropHints();
         CodeHintManager.registerHintProvider(cssPropHints, ["css", "scss", "less"], 1);
 
-        PreferencesManager.on("change", AllPreferences.EMMET, preferenceChanged);
+        PreferencesManager.on("change", "emmet", preferenceChanged);
         preferenceChanged();
 
         // For unit testing

src/extensions/default/HTMLCodeHints/main.js

@@ -33,7 +33,6 @@ define(function (require, exports, module) {
         CSSUtils            = brackets.getModule("language/CSSUtils"),
         StringMatch         = brackets.getModule("utils/StringMatch"),
         LiveDevelopment     = brackets.getModule("LiveDevelopment/main"),
-        AllPreferences      = brackets.getModule("preferences/AllPreferences"),
         KeyEvent            = brackets.getModule("utils/KeyEvent"),
         Metrics             = brackets.getModule("utils/Metrics"),
         HTMLTags            = require("text!HtmlTags.json"),
@@ -468,7 +467,7 @@ define(function (require, exports, module) {
             return null;
         }
 
-        // to show emmet hint when either a single or three exclamation mark(s) is present
+        // not to show emmet hint when either a single or three exclamation mark(s) is present
         if (line.includes('!!') && !line.includes('!!!')) {
             return null;
         }
@@ -1205,7 +1204,7 @@ define(function (require, exports, module) {
      * Checks for preference changes, to enable/disable Emmet
      */
     function preferenceChanged() {
-        enabled = PreferencesManager.get(AllPreferences.EMMET);
+        enabled = PreferencesManager.get("emmet");
     }
 
 
@@ -1222,11 +1221,11 @@ define(function (require, exports, module) {
         CodeHintManager.registerHintProvider(attrHints, ["html"], 0);
         NewFileContentManager.registerContentProvider(newDocContentProvider, ["html"], 0);
 
-        PreferencesManager.on("change", AllPreferences.EMMET, preferenceChanged);
+        PreferencesManager.on("change", "emmet", preferenceChanged);
         preferenceChanged();
 
         var emmetMarkupHints = new EmmetMarkupHints();
-        CodeHintManager.registerHintProvider(emmetMarkupHints, ["html", "php", "jsp"], 0);
+        CodeHintManager.registerHintProvider(emmetMarkupHints, ["html", "php"], 0);
 
         // For unit testing
         exports.emmetHintProvider = emmetMarkupHints;

src/nls/root/strings.js

@@ -524,6 +524,7 @@ define({
     "CMD_BEAUTIFY_CODE": "Beautify Code",
     "CMD_BEAUTIFY_CODE_ON_SAVE": "Beautify Code After Save",
     "CMD_AUTO_RENAME_TAGS": "Auto Rename HTML Tags",
+    "CMD_TOGGLE_EMMET": "Emmet",
 
     // Search menu commands
     "FIND_MENU": "Find",