Make font ligatures an option

Author: CompuIves

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -1484,7 +1484,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
         'Source Code Pro',
         'monospace'
       ),
-      fontLigatures: true,
+      fontLigatures: settings.enableLigatures,
       minimap: {
         enabled: false,
       },

packages/app/src/app/components/CodeEditor/types.js

@@ -16,6 +16,7 @@ export type Settings = {
   lintEnabled: boolean,
   vimMode: boolean,
   tabWidth: number,
+  enableLigatures: boolean,
 };
 
 export interface Editor {

packages/app/src/app/pages/Sandbox/Editor/Content/index.js

@@ -30,6 +30,7 @@ const settings = store =>
     tabWidth: store.preferences.settings.prettierConfig
       ? store.preferences.settings.prettierConfig.tabWidth || 2
       : 2,
+    enableLigatures: store.preferences.settings.enableLigatures,
   }: Settings);
 
 type Props = {

packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings/index.js

@@ -80,7 +80,8 @@ function EditorSettings({ store, signals }) {
             {...bindValue('vimMode')}
           />
           <SubDescription>
-            This will override Use CodeMirror setting as Monaco doesn{"'"}t have a VIM mode yet.
+            This will override Use CodeMirror setting as Monaco doesn{"'"}t have
+            a VIM mode yet.
           </SubDescription>
           <Rule />
           <PaddedPreference
@@ -96,6 +97,22 @@ function EditorSettings({ store, signals }) {
             {...bindValue('fontFamily')}
           />
           <Rule />
+          <PaddedPreference
+            title="Font ligatures enabled"
+            type="boolean"
+            {...bindValue('enableLigatures')}
+          />
+          <SubDescription>
+            Whether we should enable{' '}
+            <a
+              href="https://en.wikipedia.org/wiki/Typographic_ligature"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              font ligatures
+            </a>.
+          </SubDescription>
+          <Rule />
           <PaddedPreference
             title="Line height"
             type="number"

packages/app/src/app/store/modules/preferences/index.js

@@ -39,6 +39,7 @@ export default Module({
       trailingComma: 'none',
       useTabs: false,
       vimMode: false,
+      enableLigatures: false,
     },
     isLoadingPaymentDetails: true,
     paymentDetailError: null,

packages/app/src/app/store/modules/preferences/keys.js

@@ -14,3 +14,4 @@ export const autoDownloadTypes = 'settings.autoDownloadTypes';
 export const newPackagerExperiment = 'settings.newPackagerExperiment';
 export const zenMode = 'settings.zenMode';
 export const keybindings = 'settings.keybindings';
+export const enableLigatures = 'settings.enableLigatures';

packages/app/src/app/store/modules/preferences/model.js

@@ -39,6 +39,7 @@ export default {
     useTabs: types.boolean,
     vimMode: types.boolean,
     zenMode: types.boolean,
+    enableLigatures: types.boolean,
   }),
   isLoadingPaymentDetails: types.boolean,
   itemId: types.string,

packages/app/src/embed/components/Content/index.js

@@ -226,6 +226,7 @@ export default class Content extends React.PureComponent<Props, State> {
     autoCompleteEnabled: true,
     vimMode: false,
     tabWidth: 2,
+    enableLigatures: false,
   });
 
   setCurrentModule = (moduleId: string) => {