feat: add allPreferences module and enable Emmet preference

Author: devvaannsh

src/brackets.js

@@ -121,6 +121,7 @@ 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/extensions/default/CSSCodeHints/main.js

@@ -35,6 +35,7 @@ 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);
 
@@ -43,6 +44,7 @@ define(function (require, exports, module) {
      * This provides a function to expand abbreviations into full CSS properties.
      */
     const EXPAND_ABBR = Phoenix.libs.Emmet.expand;
+    let enabled = true; // whether Emmet is enabled or not in preferences
 
     require("./css-lint");
 
@@ -394,81 +396,85 @@ define(function (require, exports, module) {
             // pushedHints stores all the hints that will be displayed to the user
             let pushedHints = formatHints(result);
 
-            // needle gives the current word before cursor, make sure that it exists
-            // also needle shouldn't contain `-`, because for example if user typed:
-            // `box-siz` then in that case it is very obvious that user wants to type `box-sizing`
-            // but emmet expands it `box: siz;`. So we prevent calling emmet when needle has `-`.
-            if(needle && !needle.includes('-')) {
-
-                // wrapped in try catch block because EXPAND_ABBR might throw error when it gets unexpected
-                // characters such as `, =, etc
-                try {
-                    let expandedAbbr = EXPAND_ABBR(needle, { syntax: "css", type: "stylesheet" });
-                    if(expandedAbbr && isEmmetExpandable(needle, expandedAbbr)) {
-
-                        // if the expandedAbbr doesn't have any numbers, we should split the expandedAbbr to,
-                        // get its first word before `:`.
-                        // For instance, `m` expands to `margin: ;`. Here the `: ;` is unnecessary.
-                        // Also, `bgc` expands to `background-color: #fff;`. Here we don't need the `: #fff;`
-                        // as we have cssIntelligence to display hints based on the property
-                        if(!isEmmetAbbrNumeric(expandedAbbr)) {
-                            expandedAbbr = expandedAbbr.split(':')[0];
-                        }
+            // make sure that emmet feature is on in preferences
+            if(enabled) {
+
+                // needle gives the current word before cursor, make sure that it exists
+                // also needle shouldn't contain `-`, because for example if user typed:
+                // `box-siz` then in that case it is very obvious that user wants to type `box-sizing`
+                // but emmet expands it `box: siz;`. So we prevent calling emmet when needle has `-`.
+                if(needle && !needle.includes('-')) {
+
+                    // wrapped in try catch block because EXPAND_ABBR might throw error when it gets unexpected
+                    // characters such as `, =, etc
+                    try {
+                        let expandedAbbr = EXPAND_ABBR(needle, { syntax: "css", type: "stylesheet" });
+                        if(expandedAbbr && isEmmetExpandable(needle, expandedAbbr)) {
+
+                            // if the expandedAbbr doesn't have any numbers, we should split the expandedAbbr to,
+                            // get its first word before `:`.
+                            // For instance, `m` expands to `margin: ;`. Here the `: ;` is unnecessary.
+                            // Also, `bgc` expands to `background-color: #fff;`. Here we don't need the `: #fff;`
+                            // as we have cssIntelligence to display hints based on the property
+                            if(!isEmmetAbbrNumeric(expandedAbbr)) {
+                                expandedAbbr = expandedAbbr.split(':')[0];
+                            }
 
-                        // token is required for highlighting the matched part. It gives access to
-                        // stringRanges property. Refer to `formatHints()` function in this file for more detail
-                        const [token] = StringMatch.codeHintsSort(needle, [expandedAbbr]);
+                            // token is required for highlighting the matched part. It gives access to
+                            // stringRanges property. Refer to `formatHints()` function in this file for more detail
+                            const [token] = StringMatch.codeHintsSort(needle, [expandedAbbr]);
 
-                        // this displays an emmet icon at the side of the hint
-                        // this gives an idea to the user that the hint is coming from Emmet
-                        let $icon = $(`<a class="emmet-css-code-hint" style="text-decoration: none">Emmet</a>`);
+                            // this displays an emmet icon at the side of the hint
+                            // this gives an idea to the user that the hint is coming from Emmet
+                            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]);
-                            $icon.attr("title", Strings.DOCS_MORE_LINK_MDN_TITLE);
-                        }
+                            // 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]);
+                                $icon.attr("title", Strings.DOCS_MORE_LINK_MDN_TITLE);
+                            }
 
-                        const $emmetHintObj = $("<span>")
-                            .addClass("brackets-css-hints brackets-hints")
-                            .attr("data-val", expandedAbbr);
-
-                        // for highlighting the already-typed characters
-                        if (token.stringRanges) {
-                            token.stringRanges.forEach(function (range) {
-                                if (range.matched) {
-                                    $emmetHintObj.append($("<span>")
-                                        .text(range.text)
-                                        .addClass("matched-hint"));
-                                } else {
-                                    $emmetHintObj.append(range.text);
-                                }
-                            });
-                        } else {
-                            // fallback
-                            $emmetHintObj.text(expandedAbbr);
-                        }
+                            const $emmetHintObj = $("<span>")
+                                .addClass("brackets-css-hints brackets-hints")
+                                .attr("data-val", expandedAbbr);
+
+                            // for highlighting the already-typed characters
+                            if (token.stringRanges) {
+                                token.stringRanges.forEach(function (range) {
+                                    if (range.matched) {
+                                        $emmetHintObj.append($("<span>")
+                                            .text(range.text)
+                                            .addClass("matched-hint"));
+                                    } else {
+                                        $emmetHintObj.append(range.text);
+                                    }
+                                });
+                            } else {
+                                // fallback
+                                $emmetHintObj.text(expandedAbbr);
+                            }
 
-                        // add the emmet icon to the final hint object
-                        $emmetHintObj.append($icon);
+                            // add the emmet icon to the final hint object
+                            $emmetHintObj.append($icon);
 
-                        if(pushedHints) {
+                            if(pushedHints) {
 
-                            // to remove duplicate hints. one comes from emmet and other from default css hints.
-                            // we remove the default css hints and push emmet hint at the beginning.
-                            for(let i = 0; i < pushedHints.length; i++) {
-                                if(pushedHints[i][0].getAttribute('data-val') === expandedAbbr) {
-                                    pushedHints.splice(i, 1);
-                                    break;
+                                // to remove duplicate hints. one comes from emmet and other from default css hints.
+                                // we remove the default css hints and push emmet hint at the beginning.
+                                for(let i = 0; i < pushedHints.length; i++) {
+                                    if(pushedHints[i][0].getAttribute('data-val') === expandedAbbr) {
+                                        pushedHints.splice(i, 1);
+                                        break;
+                                    }
                                 }
+                                pushedHints.unshift($emmetHintObj);
+                            } else {
+                                pushedHints = $emmetHintObj;
                             }
-                            pushedHints.unshift($emmetHintObj);
-                        } else {
-                            pushedHints = $emmetHintObj;
                         }
+                    } catch (e) {
+                        // pass
                     }
-                } catch (e) {
-                    // pass
                 }
             }
 
@@ -712,10 +718,21 @@ define(function (require, exports, module) {
         return keepHints;
     };
 
+    /**
+     * Checks for preference changes, to enable/disable Emmet
+     */
+    function preferenceChanged() {
+        enabled = PreferencesManager.get(AllPreferences.EMMET);
+    }
+
+
     AppInit.appReady(function () {
         var cssPropHints = new CssPropHints();
         CodeHintManager.registerHintProvider(cssPropHints, ["css", "scss", "less"], 1);
 
+        PreferencesManager.on("change", AllPreferences.EMMET, preferenceChanged);
+        preferenceChanged();
+
         // For unit testing
         exports.cssPropHintProvider = cssPropHints;
     });

src/nls/root/strings.js

@@ -1264,6 +1264,9 @@ define({
     "DESCRIPTION_HIDE_FIRST": "true to show the first Indent Guide line else false.",
     "DESCRIPTION_CSS_COLOR_PREVIEW": "true to display color previews in the gutter, else false.",
 
+    // Emmet
+    "DESCRIPTION_EMMET": "true to enable Emmet, else false.",
+
     // Git extension
     "ENABLE_GIT": "Enable Git",
     "ACTION": "Action",

src/preferences/AllPreferences.js

@@ -0,0 +1,50 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ * Original work Copyright (c) 2012 - 2021 Adobe Systems Incorporated. All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+/*
+ * This file houses all the preferences used across Phoenix.
+ *
+ * To use:
+ * ```
+ * const AllPreferences = brackets.getModule("preferences/AllPreferences");
+ * function preferenceChanged() {
+       enabled = PreferencesManager.get(AllPreferences.EMMET);
+   }
+ * PreferencesManager.on("change", AllPreferences.EMMET, preferenceChanged);
+   preferenceChanged();
+ * ```
+ */
+
+define(function (require, exports, module) {
+    const PreferencesManager = require("preferences/PreferencesManager");
+    const Strings = require("strings");
+
+    // list of all the preferences
+    const PREFERENCES_LIST = {
+        EMMET: "emmet"
+    };
+
+    PreferencesManager.definePreference(PREFERENCES_LIST.EMMET, "boolean", true, {
+        description: Strings.DESCRIPTION_EMMET
+    });
+
+    module.exports = PREFERENCES_LIST;
+});