Support language detection for codemirror and ace editors.

package.json

@@ -7,6 +7,7 @@
   "devDependencies": {
     "babel-core": "^6.4.5",
     "babel-loader": "^6.2.1",
+    "string-replace-loader": "^1.0.0",
     "webpack": "^1.12.12"
   },
   "scripts": {
@@ -15,6 +16,7 @@
     "dev": "./node_modules/.bin/webpack --watch"
   },
   "dependencies": {
+    "codemirror": "^5.11.0",
     "uuid": "^2.0.1"
   }
 }

src/content-script-tools/text-syncer.js

@@ -1,9 +1,9 @@
 const NORMAL_CLOSE_CODE = 1000;
 
 class TextSyncer {
-  linkElem(title, handler) {
+  linkElem(title, handler, options) {
     const port = chrome.runtime.connect();
-    this.register(port, title, handler);
+    this.register(port, title, handler, options);
     port.onMessage.addListener(this.makeMessageListener(handler));
     const textChangeListener = this.makeTextChangeListener(port, handler);
     handler.bindChange(textChangeListener, false);
@@ -40,9 +40,18 @@ class TextSyncer {
     };
   }
 
-  register(port, title, handler) {
+  register(port, title, handler, options) {
+    options = options || {};
     handler.getValue().then((text) => {
-      this.post(port, 'register', {title: title, text: text});
+      const payload = {title: title, text: text};
+      let extension = options.extension;
+      if (extension) {
+        if (extension[0] !== '.') {
+          extension = `.${extension}`;
+        }
+        payload.extension = extension;
+      }
+      this.post(port, 'register', payload);
     });
   }
 

src/content-script.js

@@ -15,8 +15,8 @@ function run() {
 
   const handler = new Handler(activeElement, contentEvents);
 
-  handler.load().then(() => {
-    textSyncer.linkElem(title, handler);
+  handler.load().then((options) => {
+    textSyncer.linkElem(title, handler, options);
   });
 }
 

src/handlers/ace.js

@@ -1,48 +1,16 @@
 import InjectorHandler from './injector';
-import injectedHandlerFactory from './injected-factory';
-import BaseInjectedHandler from './base-injected';
 
-const name = 'ace';
 const aceClassName = 'ace_text-input';
 
 class AceHandler extends InjectorHandler {
   constructor(elem, contentEvents) {
-    super(elem, contentEvents, name);
-  }
-}
-
-class InjectedAceHandler extends BaseInjectedHandler {
-  constructor(elem, uuid) {
-    super(elem, uuid);
-    this.silenced = false;
-  }
-
-  load() {
-    this.editor = ace.edit(this.elem.parentElement);
-    this.editor.$blockScrolling = Infinity;
-  }
-
-  getValue() {
-    return this.editor.getValue();
-  }
-
-  setValue(text) {
-    this.executeSilenced(() => this.editor.setValue(text, 1));
-  }
-
-  bindChange(f) {
-    this.editor.on('change', this.wrapSilence(f));
-  }
-
-  unbindChange(f) {
-    this.editor.off('change', f);
+    super(elem, contentEvents, 'ace');
   }
 }
 
 AceHandler.canHandle = function (elem) {
   return elem.classList.contains(aceClassName);
 };
 
-injectedHandlerFactory.registerHandler(name, InjectedAceHandler);
 
 export default AceHandler;

src/handlers/codemirror.js

@@ -1,34 +1,8 @@
 import InjectorHandler from './injector';
-import injectedHandlerFactory from './injected-factory';
-import BaseInjectedHandler from './base-injected';
-
-const name = 'codeMirror';
 
 class CodeMirrorHandler extends InjectorHandler {
   constructor(elem, contentEvents) {
-    super(elem, contentEvents, name);
-  }
-}
-
-class InjectedCodeMirrorHandler extends BaseInjectedHandler {
-  load() {
-    this.editor = this.elem.parentElement.parentElement.CodeMirror;
-  }
-
-  getValue() {
-    return this.editor.getValue();
-  }
-
-  setValue(text) {
-    this.executeSilenced(() => this.editor.setValue(text));
-  }
-
-  bindChange(f) {
-    this.editor.on('change', this.wrapSilence(f));
-  }
-
-  unbindChange(f) {
-    this.editor.off('change', f);
+    super(elem, contentEvents, 'codemirror');
   }
 }
 
@@ -38,6 +12,4 @@ CodeMirrorHandler.canHandle = function (elem) {
     && elem.parentElement.parentElement.classList.contains('CodeMirror');
 };
 
-injectedHandlerFactory.registerHandler(name, InjectedCodeMirrorHandler);
-
 export default CodeMirrorHandler;

src/handlers/index.js

@@ -11,4 +11,3 @@ handlerFactory.registerHandler(ContentEditableHandler);
 handlerFactory.registerHandler(TextareaHandler);
 
 export {handlerFactory as handlerFactory};
-export {default as injectedHandlerFactory} from './injected-factory';

src/handlers/injected/ace.js

@@ -0,0 +1,64 @@
+import BaseInjectedHandler from './base';
+
+class InjectedAceHandler extends BaseInjectedHandler {
+  constructor(elem, uuid) {
+    super(elem, uuid);
+    this.silenced = false;
+  }
+
+  load() {
+    return new Promise((resolve) => {
+      this.editor = ace.edit(this.elem.parentElement);
+      this.editor.$blockScrolling = Infinity;
+      if (!ace.config || !ace.config.loadModule) {
+        return resolve();
+      }
+      ace.config.loadModule('ace/ext/modelist', (m) => {
+        this.modes = m.modes;
+        this.loaded = true;
+        resolve();
+      });
+      // NOTE: no callback when loadModule fails, so add a timeout
+      setTimeout(() => {
+        if (!this.loaded) {
+          resolve();
+        }
+      }, 3000);
+    });
+  }
+
+  getExtension() {
+    if (!this.modes) {
+      return null;
+    }
+    const session = this.editor.getSession();
+    const currentMode = session && session.getMode() && session.getMode().$id;
+    if (!currentMode) {
+      return null;
+    }
+    for (const mode of this.modes) {
+      if (mode.mode === currentMode) {
+        return mode.extensions.split('|')[0];
+      }
+    }
+    return null;
+  }
+
+  getValue() {
+    return this.editor.getValue();
+  }
+
+  setValue(text) {
+    this.executeSilenced(() => this.editor.setValue(text, 1));
+  }
+
+  bindChange(f) {
+    this.editor.on('change', this.wrapSilence(f));
+  }
+
+  unbindChange(f) {
+    this.editor.off('change', f);
+  }
+}
+
+export default InjectedAceHandler;

src/handlers/base-injected.js → src/handlers/injected/base.js

@@ -4,12 +4,17 @@ export default class BaseInjectedHandler {
   constructor(elem, uuid) {
     this.elem = elem;
     this.uuid = uuid;
-    this.load();
-    this.bindChange(() => this.postToInjector('change'));
+  }
+
+  setup() {
+    return this.load().then((res) => {
+      this.bindChange(() => this.postToInjector('change'));
+      return res;
+    });
   }
 
   load() {
-    // implement in subclass when needed
+    return Promise.resolve();
   }
 
   handleMessage(data) {
@@ -45,6 +50,18 @@ export default class BaseInjectedHandler {
     this.silenced = false;
   }
 
+  postReady() {
+    const payload = {};
+    const extension = this.getExtension();
+    if (extension) {
+      payload.extension = extension;
+    }
+    this.postToInjector('ready', payload);
+  }
+
+  getExtension() {
+  }
+
   wrapSilence(f) {
     return () => {
       if (!this.silenced) {

src/handlers/injected/codemirror.js

@@ -0,0 +1,49 @@
+import BaseInjectedHandler from './base';
+import 'codemirror/mode/meta';
+import CodeMirror from 'dummy-codemirror';
+
+// NOTE: keep modes which could conflict or which do not resolve here
+const commonModes = {
+  css: 'css',
+  htmlmixed: 'html',
+  html: 'html',
+  javascript: 'js'
+};
+
+class InjectedCodeMirrorHandler extends BaseInjectedHandler {
+  load() {
+    this.editor = this.elem.parentElement.parentElement.CodeMirror;
+    return Promise.resolve();
+  }
+
+  getValue() {
+    return this.editor.getValue();
+  }
+
+  setValue(text) {
+    this.executeSilenced(() => this.editor.setValue(text));
+  }
+
+  bindChange(f) {
+    this.editor.on('change', this.wrapSilence(f));
+  }
+
+  unbindChange(f) {
+    this.editor.off('change', f);
+  }
+
+  getExtension() {
+    const currentModeName = this.editor.getMode().name;
+    if (commonModes[currentModeName]) {
+      return commonModes[currentModeName];
+    }
+    for (const mode of CodeMirror.modeInfo) {
+      if (mode.mode === currentModeName && mode.ext) {
+        return mode.ext[0];
+      }
+    }
+    return null;
+  }
+}
+
+export default InjectedCodeMirrorHandler;

src/handlers/injected/index.js

@@ -0,0 +1,9 @@
+import injectedHandlerFactory from './factory';
+
+import InjectedAceHandler from './ace';
+import InjectedCodeMirrorHandler from './codemirror';
+
+injectedHandlerFactory.registerHandler('ace', InjectedAceHandler);
+injectedHandlerFactory.registerHandler('codemirror', InjectedCodeMirrorHandler);
+
+export {injectedHandlerFactory as injectedHandlerFactory};

src/injected.js

@@ -1,4 +1,4 @@
-import {injectedHandlerFactory} from './handlers';
+import {injectedHandlerFactory} from './handlers/injected';
 
 const handlers = [];
 
@@ -14,8 +14,10 @@ window.addEventListener('message', function (message) {
       return;
     }
     const handler = new Handler(document.activeElement, message.data.uuid);
-    handlers.push(handler);
-    handler.postToInjector('ready');
+    handler.setup().then(() => {
+      handlers.push(handler);
+      handler.postReady();
+    });
   } else {
     for (const handler of handlers) {
       handler.handleMessage(message.data);

src/shims/codemirror.js

@@ -0,0 +1 @@
+module.exports = {};

webpack.config.js

@@ -17,11 +17,15 @@ module.exports = {
       test: /\.js$/,
       loader: 'babel?presets[]=es2015',
       exclude: /node_modules/
+    }, {
+      test: /codemirror\/mode\/meta/,
+      loader: 'string-replace?search=../lib/codemirror,replace=dummy-codemirror'
     }]
   },
   resolve: {
     alias: {
-      'ac-util': path.join(__dirname, 'src', 'util')
+      'ac-util': path.join(__dirname, 'src', 'util'),
+      'dummy-codemirror': path.join(__dirname, 'src', 'shims', 'codemirror')
     }
   },
   externals: {