Skip to content

Instantly share code, notes, and snippets.

@okdewit
Created February 6, 2015 16:17
Show Gist options
  • Save okdewit/0b46319000e78c58cfe2 to your computer and use it in GitHub Desktop.
Save okdewit/0b46319000e78c58cfe2 to your computer and use it in GitHub Desktop.
Experimental CodeMirror + Merge Addon Directive for AngularJS.
/**
* Experimental directive for CodeMirror + Merge Addon.
*/
angular.module('ui.codemirror', [])
.constant('uiCodemirrorConfig', {})
.directive('uiCodemirror', uiCodemirrorDirective);
function uiCodemirrorDirective($timeout, uiCodemirrorConfig) {
'use strict';
return {
restrict: 'EA',
require: '?ngModel',
compile: function compile() {
if (angular.isUndefined(window.CodeMirror)) {
throw new Error('ui-codemirror needs CodeMirror to work...');
}
return postLink;
}
};
function postLink(scope, iElement, iAttrs, ngModel) {
var codemirrorOptions = angular.extend(
{ value: iElement.text() },
uiCodemirrorConfig.codemirror || {},
scope.$eval(iAttrs.uiCodemirror),
scope.$eval(iAttrs.uiCodemirrorOpts)
);
var codemirror = newCodemirrorEditor(iElement, codemirrorOptions);
configOptionsWatcher(
codemirror,
iAttrs.uiCodemirror || iAttrs.uiCodemirrorOpts,
scope
);
configNgModelLink(codemirror, ngModel, scope);
configUiRefreshAttribute(codemirror, iAttrs.uiRefresh, scope);
// $broadcast('CodeMirror', function(cm){...});
scope.$on('CodeMirror', function(event, callback) {
if (angular.isFunction(callback)) {
callback(codemirror);
} else {
throw new Error('the CodeMirror event requires a callback function');
}
});
if (angular.isFunction(codemirrorOptions.onLoad)) {
codemirrorOptions.onLoad(codemirror);
}
}
function newCodemirrorEditor(iElement, codemirrorOptions) {
var codemirrot;
iElement.html('');
codemirrot = window.CodeMirror.MergeView(iElement[0], codemirrorOptions);
return codemirrot;
}
function configOptionsWatcher(codemirrot, uiCodemirrorAttr, scope) {
if (!uiCodemirrorAttr) { return; }
var codemirrorDefaultsKeys = Object.keys(window.CodeMirror.defaults);
scope.$watch(uiCodemirrorAttr, updateOptions, true);
function updateOptions(newValues, oldValue) {
if (!angular.isObject(newValues)) { return; }
codemirrorDefaultsKeys.forEach(function(key) {
if (newValues.hasOwnProperty(key)) {
if (oldValue && newValues[key] === oldValue[key]) {
return;
}
codemirrot.setOption(key, newValues[key]);
}
});
}
}
function configNgModelLink(codemirror, ngModel, scope) {
if (!ngModel) { return; }
ngModel.$formatters.push(function(value) {
if (angular.isUndefined(value) || value === null) {
return '';
} else if (angular.isObject(value) || angular.isArray(value)) {
throw new Error('ui-codemirror cannot use an object or an array as a model');
}
return value;
});
// Override the ngModelController $render method, which is what gets called when the model is updated.
ngModel.$render = function() {
var safeViewValue = ngModel.$viewValue || '';
codemirror.edit.setValue(safeViewValue);
codemirror.right.forceUpdate("full");
};
// update ngModel from CodeMirror
codemirror.edit.on('change', function(instance) {
var newValue = instance.getValue();
if (newValue !== ngModel.$viewValue) {
scope.$evalAsync(function() {
ngModel.$setViewValue(newValue);
});
}
});
}
function configUiRefreshAttribute(codeMirror, uiRefreshAttr, scope) {
if (!uiRefreshAttr) { return; }
scope.$watch(uiRefreshAttr, function(newVal, oldVal) {
// Skip the initial watch firing
if (newVal !== oldVal) {
$timeout(function() {
codeMirror.refresh();
});
}
});
}
}
@rbw
Copy link

rbw commented Sep 3, 2015

You haven't created a directive for this merge version have you? I need to use both the regular editor and your version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment