new editor option: selectByTokens

implements #361 except for toggling via Ctrl

_locales/en/messages.json

@@ -139,6 +139,13 @@
     "message": "Colorpickers for CSS colors",
     "description": "Label for the checkbox controlling colorpicker option for the style editor."
   },
+  "cm_selectByTokens": {
+    "message": "Double-clicking selects tokens",
+    "description": "Label for the checkbox in the editor."
+  },
+  "cm_selectByTokensTooltip": {
+    "message": "Examples of tokens: .foo-bar-2 #aabbcc 0.32 !important\nWhen disabled: punctuation-delimited words are selected."
+  },
   "cm_indentWithTabs": {
     "message": "Use tabs with smart indentation",
     "description": "Label for the checkbox controlling tabs with smart indentation option for the style editor."

edit.html

@@ -311,6 +311,13 @@
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
         </div>
+        <div class="option">
+          <label i18n-text="cm_selectByTokens"
+                 i18n-title="cm_selectByTokensTooltip">
+            <input id="editor.selectByTokens" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
+        </div>
         <div class="option">
           <label i18n-text="cm_colorpicker">
             <input id="editor.colorpicker" type="checkbox">

edit/codemirror-default.js

@@ -33,7 +33,6 @@
       'Ctrl-Pause': 'toggleEditorFocus',
     }),
     maxHighlightLength: 100e3,
-    configureMouse: (cm, repeat) => repeat === 'double' ? {unit: selectTokenOnDoubleclick} : {},
   };
 
   Object.assign(CodeMirror.defaults, defaults, prefs.get('editor.options'));
@@ -157,6 +156,20 @@
     return isBlank;
   });
 
+  // doubleclick option
+  {
+    const fn = (cm, repeat) =>
+      repeat === 'double' ?
+        {unit: selectTokenOnDoubleclick} :
+        {};
+    const configure = (_, enabled) => {
+      editors.forEach(cm => cm.setOption('configureMouse', enabled ? fn : null));
+      CodeMirror.defaults.configureMouse = enabled ? fn : null;
+    };
+    configure(null, prefs.get('editor.selectByTokens'));
+    prefs.subscribe(['editor.selectByTokens'], configure);
+  }
+
   function selectTokenOnDoubleclick(cm, pos) {
     let {ch} = pos;
     const {line, sticky} = pos;

js/prefs.js

@@ -66,6 +66,7 @@ var prefs = new function Prefs() {
     'editor.autoCloseBrackets': true,    // auto-add a closing pair when typing an opening one of ()[]{}''""
     'editor.autocompleteOnTyping': false, // show autocomplete dropdown on typing a word token
     'editor.contextDelete': contextDeleteMissing(), // "Delete" item in context menu
+    'editor.selectByTokens': true,
 
     'editor.appliesToLineWidget': true, // show applies-to line widget on the editor
     'editor.livePreview': true,