├── demo
    ├── demo.css
    ├── demo.js
    └── demo.html
├── .gitignore
├── .jshintrc
├── bower.json
├── LICENSE
├── publish.js
├── package.json
├── test
    ├── karma.conf.js
    └── codemirror.spec.js
├── CHANGELOG.md
├── gruntFile.js
├── src
    └── ui-codemirror.js
├── .travis.yml
└── README.md


/demo/demo.css:
--------------------------------------------------------------------------------
1 | .CodeMirror {
2 |   height: 256px;
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | node_modules/
3 | out/
4 | dist/
5 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "bitwise": true,
 3 |   "camelcase": false,
 4 |   "curly": true,
 5 |   "eqeqeq": true,
 6 |   "freeze": true,
 7 |   "globalstrict": true,
 8 |   "immed": true,
 9 |   "latedef": false,
10 |   "newcap": true,
11 |   "noarg": true,
12 |   "noempty": true,
13 |   "quotmark": "single",
14 |   "undef": true,
15 |   "unused": true,
16 |   "maxdepth": 4,
17 |   "maxcomplexity": 8,
18 | 
19 |   "eqnull": false,
20 |   "esnext": true,
21 | 
22 |   "browser": true,
23 |   "jasmine": true,
24 |   "validthis": true,
25 | 
26 |   "globals": {
27 |     "angular": true
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-ui-codemirror",
 3 |   "version": "0.3.0",
 4 |   "description": "This directive allows you to add CodeMirror to your textarea elements.",
 5 |   "author": "https://github.com/angular-ui/ui-codemirror/contributors",
 6 |   "license": "MIT",
 7 |   "homepage": "http://angular-ui.github.com",
 8 |   "main": "./src/ui-codemirror.js",
 9 |   "ignore": [
10 |     "**/.*",
11 |     "node_modules",
12 |     "bower_components",
13 |     "out",
14 |     "test*",
15 |     "demo*",
16 |     "gruntFile.js",
17 |     "package.json"
18 |   ],
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "https://github.com/angular-ui/ui-codemirror.git"
22 |   },
23 |   "dependencies": {
24 |     "angular": "^1.3",
25 |     "codemirror": "^5.0"
26 |   },
27 |   "devDependencies": {
28 |     "angular-mocks": "^1.3"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/demo/demo.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('doc.ui-codeMirror', ['ui.codemirror', 'prettifyDirective', 'ui.bootstrap', 'plunker' ])
 4 |   .controller('CodemirrorCtrl', ['$scope', function ($scope) {
 5 | 
 6 |     // The modes
 7 |     $scope.modes = ['Scheme', 'XML', 'Javascript'];
 8 |     $scope.mode = $scope.modes[0];
 9 | 
10 | 
11 |     // The ui-codemirror option
12 |     $scope.cmOption = {
13 |       lineNumbers: true,
14 |       indentWithTabs: true,
15 |       onLoad: function (_cm) {
16 | 
17 |         // HACK to have the codemirror instance in the scope...
18 |         $scope.modeChanged = function () {
19 |           _cm.setOption('mode', $scope.mode.toLowerCase());
20 |         };
21 | 
22 |       }
23 |     };
24 | 
25 | 
26 |     // Initial code content...
27 |     $scope.cmModel = ';; Scheme code in here.\n' +
28 |       '(define (double x)\n\t(* x x))\n\n\n' +
29 |       '<!-- XML code in here. -->\n' +
30 |       '<root>\n\t<foo>\n\t</foo>\n\t<bar/>\n</root>\n\n\n' +
31 |       '// Javascript code in here.\n' +
32 |       'function foo(msg) {\n\tvar r = Math.random();\n\treturn "" + r + " : " + msg;\n}';
33 | 
34 |   }]);
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2012 the AngularUI Team, http://angular-ui.github.com
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/publish.js:
--------------------------------------------------------------------------------
 1 | /* jshint node:true */
 2 | 
 3 | 'use strict';
 4 | 
 5 | var fs = require('fs');
 6 | var path = require('path');
 7 | 
 8 | module.exports = function() {
 9 | 
10 |   var js_dependencies = [
11 |     'bower_components/codemirror/lib/codemirror.js',
12 |     'bower_components/codemirror/mode/scheme/scheme.js',
13 |     'bower_components/codemirror/mode/javascript/javascript.js',
14 |     'bower_components/codemirror/mode/xml/xml.js'
15 |   ];
16 | 
17 |   var css_dependencies = [
18 |     'bower_components/codemirror/lib/codemirror.css',
19 |     'bower_components/codemirror/theme/twilight.css'
20 |   ];
21 | 
22 |   function putThemInVendorDir(filepath) {
23 |     return 'vendor/' + path.basename(filepath);
24 |   }
25 | 
26 |   return {
27 |     humaName: 'UI.CodeMirror',
28 |     repoName: 'ui-codemirror',
29 |     inlineHTML: fs.readFileSync(__dirname + '/demo/demo.html'),
30 |     inlineJS: fs.readFileSync(__dirname + '/demo/demo.js'),
31 |     css: css_dependencies.map(putThemInVendorDir),
32 |     js: js_dependencies.map(putThemInVendorDir).concat(['dist/ui-codemirror.js']),
33 |     tocopy: css_dependencies.concat(js_dependencies),
34 |     bowerData: {
35 |       main: ['ui-codemirror.js']
36 |     }
37 |   };
38 | };
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-ui-codemirror",
 3 |   "version": "0.3.0",
 4 |   "description": "This directive allows you to add CodeMirror to your textarea elements.",
 5 |   "author": "https://github.com/angular-ui/ui-codemirror/contributors",
 6 |   "license": "MIT",
 7 |   "homepage": "http://angular-ui.github.com",
 8 |   "main": "./src/ui-codemirror.js",
 9 |   "dependencies": {},
10 |   "devDependencies": {
11 |     "angular-ui-publisher": "angular-ui/angular-ui-publisher#06e016272e0064eb030f52cffbe00daa48b56e20",
12 |     "grunt": "~0.4.2",
13 |     "grunt-contrib-connect": "~0.9.0",
14 |     "grunt-contrib-copy": "~0.7.0",
15 |     "grunt-contrib-jshint": "~0.10.0",
16 |     "grunt-contrib-uglify": "~0.6.0",
17 |     "grunt-contrib-watch": "~0.6.0",
18 |     "grunt-conventional-changelog": "~1.1.0",
19 |     "grunt-karma": "~0.9.0",
20 |     "grunt-ng-annotate": "0.8.0",
21 |     "karma": "~0.12.0",
22 |     "karma-chrome-launcher": "~0.1.1",
23 |     "karma-coffee-preprocessor": "~0.2.1",
24 |     "karma-firefox-launcher": "~0.1.2",
25 |     "karma-html2js-preprocessor": "~0.1.0",
26 |     "karma-jasmine": "~0.3.0",
27 |     "karma-phantomjs-launcher": "~0.1.1",
28 |     "karma-requirejs": "~0.2.0",
29 |     "karma-script-launcher": "~0.1.0",
30 |     "load-grunt-tasks": "~1.0.0",
31 |     "requirejs": "~2.1.9"
32 |   },
33 |   "scripts": {
34 |     "test": "grunt"
35 |   },
36 |   "repository": {
37 |     "type": "git",
38 |     "url": "https://github.com/angular-ui/ui-codemirror.git"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/test/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | // Generated on Thu Oct 31 2013 13:03:03 GMT+0100 (CET)
 3 | 
 4 | module.exports = function(config) {
 5 |   config.set({
 6 | 
 7 |     // base path, that will be used to resolve files and exclude
 8 |     basePath: '..',
 9 | 
10 | 
11 |     // frameworks to use
12 |     frameworks: ['jasmine'],
13 | 
14 | 
15 |     // list of files / patterns to load in the browser
16 |     files: [
17 |       'bower_components/angular/angular.js',
18 |       'bower_components/angular-mocks/angular-mocks.js',
19 |       'bower_components/codemirror/lib/codemirror.js',
20 |       'src/ui-codemirror.js',
21 |       'test/*.spec.js'
22 |     ],
23 | 
24 | 
25 |     // list of files to exclude
26 |     exclude: [
27 | 
28 |     ],
29 | 
30 | 
31 |     // test results reporter to use
32 |     // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
33 |     reporters: ['dots'],
34 | 
35 | 
36 |     // web server port
37 |     port: 9876,
38 | 
39 | 
40 |     // enable / disable colors in the output (reporters and logs)
41 |     colors: true,
42 | 
43 | 
44 |     // level of logging
45 |     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
46 |     logLevel: config.LOG_INFO,
47 | 
48 | 
49 |     // enable / disable watching file and executing tests whenever any file changes
50 |     autoWatch: false,
51 | 
52 | 
53 |     // Start these browsers, currently available:
54 |     // - Chrome
55 |     // - ChromeCanary
56 |     // - Firefox
57 |     // - Opera (has to be installed with `npm install karma-opera-launcher`)
58 |     // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
59 |     // - PhantomJS
60 |     // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
61 |     browsers: ['Chrome', 'Firefox', 'PhantomJS'],
62 | 
63 | 
64 |     // If browser does not capture in given timeout [ms], kill it
65 |     captureTimeout: 60000,
66 | 
67 | 
68 |     // Continuous Integration mode
69 |     // if true, it capture browsers, run tests and exit
70 |     singleRun: false
71 |   });
72 | 
73 | 
74 |   if(process.env.TRAVIS){
75 |     config.set({
76 |       browsers: ['TravisCI_Chrome', 'Firefox', 'PhantomJS'],
77 |       customLaunchers: {
78 |         TravisCI_Chrome: {
79 |           base: 'Chrome',
80 |           flags: ['--no-sandbox']
81 |         }
82 |       },
83 |     });
84 |   }
85 | };
86 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | <a name="0.3.0"></a>
 2 | ## 0.3.0 (2015-05-04)
 3 | 
 4 | * **bower:** bump to CodeMirror ^5
 5 | 
 6 | <a name="0.2.3"></a>
 7 | ### 0.2.3 (2015-01-27)
 8 | 
 9 | 
10 | #### Bug Fixes
11 | 
12 | * error calling scope.$applyAsync ([15b84f04](https://github.com/angular-ui/ui-codemirror/commit/15b84f04b322958c6f00e476d0ef8e872ea98770), closes [#89](https://github.com/angular-ui/ui-codemirror/issues/89))
13 | 
14 | 
15 | <a name="0.2.2"></a>
16 | ### 0.2.2 (2015-01-07)
17 | 
18 | 
19 | #### Bug Fixes
20 | 
21 | * use of undefined this/scope ([744bff1](https://github.com/angular-ui/ui-codemirror/commit/744bff199f3cd57c0c7333fd73a775b11b3bde6d))
22 | 
23 | <a name="0.2.1"></a>
24 | ### 0.2.1 (2015-01-07)
25 | 
26 | 
27 | <a name="0.2.0"></a>
28 | ## 0.2.0 (2014-12-08)
29 | 
30 | 
31 | #### Bug Fixes
32 | 
33 | * digest in progress ([645d6e5d](https://github.com/angular-ui/ui-codemirror/commit/645d6e5da2cfb40afa342cd6822374b2299bba39))
34 | * refresh codemirror in next event loop ([1c03cacd](https://github.com/angular-ui/ui-codemirror/commit/1c03cacdd30d5b70cb0e8c15b6383fbfddeff6d2), closes [#76](https://github.com/angular-ui/ui-codemirror/issues/76))
35 | * undefined newValue watched ([f5061497](https://github.com/angular-ui/ui-codemirror/commit/f5061497f465090be4bb53a4b4b6c534c586d214))
36 | * not watching `ui-codemirror-opts` attribute ([0f5802ed](https://github.com/angular-ui/ui-codemirror/commit/0f5802ed39444b3c3dcf49b5bbcc9fd756833cfe))
37 | * element not removed when the element gets replaced ([7dfcb070](https://github.com/angular-ui/ui-codemirror/commit/7dfcb0704220d8034647b18e41ffd9ee7904d525))
38 | * **grunt:** do a standard livereload over the built branch ([a856e085](https://github.com/angular-ui/ui-codemirror/commit/a856e085a0ddff949b15c5cac9ec67b4323d8e13))
39 | 
40 | 
41 | #### Features
42 | 
43 | * Makes the onChange event handled by ngChange ([fa52ea4e](https://github.com/angular-ui/ui-codemirror/commit/fa52ea4e86b85dc9e2b90996282cb1cc12020d04))
44 | * allow using it as an element ([42de591d](https://github.com/angular-ui/ui-codemirror/commit/42de591db63711d27b75fa5d345623ab3e472efb))
45 | * **demo:** update demo to Angular UI Publisher 1.2.x ([18317b7c](https://github.com/angular-ui/ui-codemirror/commit/18317b7c010c80e3eadc4f516eae62d2be837e73), closes [#34](https://github.com/angular-ui/ui-codemirror/issues/34))
46 | * **directive:** add instance access throught $broadcast event ([14f6954c](https://github.com/angular-ui/ui-codemirror/commit/14f6954c376479ac2108edc0556b48c6b1123953))
47 | * **publisher:** initial publisher use commit ([a144e2f8](https://github.com/angular-ui/ui-codemirror/commit/a144e2f8b3134df9e4a9ce313778b0086ea82af9))
48 | 
49 | 
50 | <a name="v0.1.0"></a>
51 | ## v0.1.0 (2013-12-28)
52 | 
53 | 
54 | #### Features
55 | 
56 | * **publisher:** initial publisher use commit ([a144e2f8](https://github.com/angular-ui/ui-codemirror/commit/a144e2f8b3134df9e4a9ce313778b0086ea82af9))
57 | 
58 | 


--------------------------------------------------------------------------------
/gruntFile.js:
--------------------------------------------------------------------------------
  1 | module.exports = function (grunt) {
  2 |   'use strict';
  3 | 
  4 |   require('load-grunt-tasks')(grunt);
  5 | 
  6 |   // Default task.
  7 |   grunt.registerTask('default', ['jshint', 'karma:unit']);
  8 |   grunt.registerTask('serve', ['connect:continuous', 'karma:continuous', 'watch']);
  9 |   grunt.registerTask('dist', ['ngAnnotate', 'uglify']);
 10 | 
 11 |   // HACK TO ACCESS TO THE COMPONENT-PUBLISHER
 12 |   function fakeTargetTask(prefix){
 13 |     return function(){
 14 | 
 15 |       if (this.args.length !== 1) {
 16 |         return grunt.log.fail('Just give the name of the ' + prefix + ' you want like :\ngrunt ' + prefix + ':bower');
 17 |       }
 18 | 
 19 |       var done = this.async();
 20 |       var spawn = require('child_process').spawn;
 21 |       spawn('./node_modules/.bin/gulp', [ prefix, '--branch='+this.args[0] ].concat(grunt.option.flags()), {
 22 |         cwd : './node_modules/angular-ui-publisher',
 23 |         stdio: 'inherit'
 24 |       }).on('close', done);
 25 |     };
 26 |   }
 27 | 
 28 |   grunt.registerTask('build', fakeTargetTask('build'));
 29 |   grunt.registerTask('publish', fakeTargetTask('publish'));
 30 |   //
 31 | 
 32 |   // Project configuration.
 33 |   grunt.initConfig({
 34 |     bower: 'bower_components',
 35 |     dist : '<%= bower %>/angular-ui-docs',
 36 |     pkg: grunt.file.readJSON('package.json'),
 37 |     meta: {
 38 |       banner: ['/**',
 39 |         ' * <%= pkg.name %> - <%= pkg.description %>',
 40 |         ' * @version v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>',
 41 |         ' * @link <%= pkg.homepage %>',
 42 |         ' * @license <%= pkg.license %>',
 43 |         ' */',
 44 |         ''].join('\n')
 45 |     },
 46 | 
 47 |     watch: {
 48 |       src: {
 49 |         files: ['src/*'],
 50 |         tasks: ['jshint:src', 'karma:unit:run', 'dist', 'build:gh-pages']
 51 |       },
 52 |       test: {
 53 |         files: ['test/*.js'],
 54 |         tasks: ['jshint:test', 'karma:unit:run']
 55 |       },
 56 |       demo: {
 57 |         files: ['demo/*', 'publish.js'],
 58 |         tasks: ['jshint', 'build:gh-pages']
 59 |       },
 60 |       livereload: {
 61 |         files: ['out/built/gh-pages/**/*'],
 62 |         options: { livereload: true }
 63 |       }
 64 |     },
 65 | 
 66 |     karma: {
 67 |       unit: {configFile: 'test/karma.conf.js', singleRun: true},
 68 |       server: {configFile: 'test/karma.conf.js'},
 69 |       continuous: {configFile: 'test/karma.conf.js',  background: true }
 70 |     },
 71 | 
 72 |     connect: {
 73 |       options: {
 74 |         base : 'out/built/gh-pages',
 75 |         open: true,
 76 |         livereload: true
 77 |       },
 78 |       server: { options: { keepalive: true } },
 79 |       continuous: { options: { keepalive: false } }
 80 |     },
 81 | 
 82 |     jshint: {
 83 |       src: {
 84 |         files:{ src : ['src/*.js', 'demo/**/*.js'] },
 85 |         options: { jshintrc: '.jshintrc' }
 86 |       },
 87 |       test: {
 88 |         files:{ src : [ 'test/*.spec.js', 'publish.js', 'gruntFile.js'] },
 89 |         options: grunt.util._.extend({}, grunt.file.readJSON('.jshintrc'), {
 90 |           node: true,
 91 |           globals: {
 92 |             angular: false,
 93 |             inject: false,
 94 |             jQuery: false,
 95 | 
 96 |             jasmine: false,
 97 |             afterEach: false,
 98 |             beforeEach: false,
 99 |             ddescribe: false,
100 |             describe: false,
101 |             expect: false,
102 |             iit: false,
103 |             it: false,
104 |             spyOn: false,
105 |             xdescribe: false,
106 |             xit: false
107 |           }
108 |         })
109 |       }
110 |     },
111 | 
112 |     uglify: {
113 |       options: {banner: '<%= meta.banner %>'},
114 |       build: {
115 |         expand: true,
116 |         cwd: 'dist',
117 |         src: ['*.js'],
118 |         ext: '.min.js',
119 |         dest: 'dist'
120 |       }
121 |     },
122 | 
123 |     ngAnnotate: {
124 |       main: {
125 |         expand: true,
126 |         cwd: 'src',
127 |         src: ['*.js'],
128 |         dest: 'dist'
129 |       }
130 |     },
131 | 
132 |     changelog: {
133 |       options: {
134 |         dest: 'CHANGELOG.md',
135 |         from: grunt.option('from')
136 |       }
137 |     }
138 |   });
139 | 
140 | };
141 | 


--------------------------------------------------------------------------------
/src/ui-codemirror.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * Binds a CodeMirror widget to a <textarea> element.
  5 |  */
  6 | angular.module('ui.codemirror', [])
  7 |   .constant('uiCodemirrorConfig', {})
  8 |   .directive('uiCodemirror', uiCodemirrorDirective);
  9 | 
 10 | /**
 11 |  * @ngInject
 12 |  */
 13 | function uiCodemirrorDirective($timeout, uiCodemirrorConfig) {
 14 | 
 15 |   return {
 16 |     restrict: 'EA',
 17 |     require: '?ngModel',
 18 |     compile: function compile() {
 19 | 
 20 |       // Require CodeMirror
 21 |       if (angular.isUndefined(window.CodeMirror)) {
 22 |         throw new Error('ui-codemirror needs CodeMirror to work... (o rly?)');
 23 |       }
 24 | 
 25 |       return postLink;
 26 |     }
 27 |   };
 28 | 
 29 |   function postLink(scope, iElement, iAttrs, ngModel) {
 30 | 
 31 |     var codemirrorOptions = angular.extend(
 32 |       { value: iElement.text() },
 33 |       uiCodemirrorConfig.codemirror || {},
 34 |       scope.$eval(iAttrs.uiCodemirror),
 35 |       scope.$eval(iAttrs.uiCodemirrorOpts)
 36 |     );
 37 | 
 38 |     var codemirror = newCodemirrorEditor(iElement, codemirrorOptions);
 39 | 
 40 |     configOptionsWatcher(
 41 |       codemirror,
 42 |       iAttrs.uiCodemirror || iAttrs.uiCodemirrorOpts,
 43 |       scope
 44 |     );
 45 | 
 46 |     configNgModelLink(codemirror, ngModel, scope);
 47 | 
 48 |     configUiRefreshAttribute(codemirror, iAttrs.uiRefresh, scope);
 49 | 
 50 |     // Allow access to the CodeMirror instance through a broadcasted event
 51 |     // eg: $broadcast('CodeMirror', function(cm){...});
 52 |     scope.$on('CodeMirror', function(event, callback) {
 53 |       if (angular.isFunction(callback)) {
 54 |         callback(codemirror);
 55 |       } else {
 56 |         throw new Error('the CodeMirror event requires a callback function');
 57 |       }
 58 |     });
 59 | 
 60 |     // onLoad callback
 61 |     if (angular.isFunction(codemirrorOptions.onLoad)) {
 62 |       codemirrorOptions.onLoad(codemirror);
 63 |     }
 64 |   }
 65 | 
 66 |   function newCodemirrorEditor(iElement, codemirrorOptions) {
 67 |     var codemirrot;
 68 | 
 69 |     if (iElement[0].tagName === 'TEXTAREA') {
 70 |       // Might bug but still ...
 71 |       codemirrot = window.CodeMirror.fromTextArea(iElement[0], codemirrorOptions);
 72 |     } else {
 73 |       iElement.html('');
 74 |       codemirrot = new window.CodeMirror(function(cm_el) {
 75 |         iElement.append(cm_el);
 76 |       }, codemirrorOptions);
 77 |     }
 78 | 
 79 |     return codemirrot;
 80 |   }
 81 | 
 82 |   function configOptionsWatcher(codemirrot, uiCodemirrorAttr, scope) {
 83 |     if (!uiCodemirrorAttr) { return; }
 84 | 
 85 |     var codemirrorDefaultsKeys = Object.keys(window.CodeMirror.defaults);
 86 |     scope.$watch(uiCodemirrorAttr, updateOptions, true);
 87 |     function updateOptions(newValues, oldValue) {
 88 |       if (!angular.isObject(newValues)) { return; }
 89 |       codemirrorDefaultsKeys.forEach(function(key) {
 90 |         if (newValues.hasOwnProperty(key)) {
 91 | 
 92 |           if (oldValue && newValues[key] === oldValue[key]) {
 93 |             return;
 94 |           }
 95 | 
 96 |           codemirrot.setOption(key, newValues[key]);
 97 |         }
 98 |       });
 99 |     }
100 |   }
101 | 
102 |   function configNgModelLink(codemirror, ngModel, scope) {
103 |     if (!ngModel) { return; }
104 |     // CodeMirror expects a string, so make sure it gets one.
105 |     // This does not change the model.
106 |     ngModel.$formatters.push(function(value) {
107 |       if (angular.isUndefined(value) || value === null) {
108 |         return '';
109 |       } else if (angular.isObject(value) || angular.isArray(value)) {
110 |         throw new Error('ui-codemirror cannot use an object or an array as a model');
111 |       }
112 |       return value;
113 |     });
114 | 
115 | 
116 |     // Override the ngModelController $render method, which is what gets called when the model is updated.
117 |     // This takes care of the synchronizing the codeMirror element with the underlying model, in the case that it is changed by something else.
118 |     ngModel.$render = function() {
119 |       //Code mirror expects a string so make sure it gets one
120 |       //Although the formatter have already done this, it can be possible that another formatter returns undefined (for example the required directive)
121 |       var safeViewValue = ngModel.$viewValue || '';
122 |       codemirror.setValue(safeViewValue);
123 |     };
124 | 
125 | 
126 |     // Keep the ngModel in sync with changes from CodeMirror
127 |     codemirror.on('change', function(instance) {
128 |       var newValue = instance.getValue();
129 |       if (newValue !== ngModel.$viewValue) {
130 |         scope.$evalAsync(function() {
131 |           ngModel.$setViewValue(newValue);
132 |         });
133 |       }
134 |     });
135 |   }
136 | 
137 |   function configUiRefreshAttribute(codeMirror, uiRefreshAttr, scope) {
138 |     if (!uiRefreshAttr) { return; }
139 | 
140 |     scope.$watch(uiRefreshAttr, function(newVal, oldVal) {
141 |       // Skip the initial watch firing
142 |       if (newVal !== oldVal) {
143 |         $timeout(function() {
144 |           codeMirror.refresh();
145 |         });
146 |       }
147 |     });
148 |   }
149 | 
150 | }
151 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
  1 | ---
  2 | git:
  3 |   depth: 1
  4 | language: node_js
  5 | node_js:
  6 | - '0.10'
  7 | before_install:
  8 | - export CHROME_BIN=chromium-browser
  9 | - export DISPLAY=:99.0
 10 | - sh -e /etc/init.d/xvfb start
 11 | - npm update -g
 12 | before_script:
 13 | - npm install -qg bower grunt-cli
 14 | - bower install
 15 | after_success:
 16 | - "./node_modules/angular-ui-publisher/travis/authentication.sh || exit 0"
 17 | - "grunt dist build:gh-pages publish:gh-pages build:bower publish:bower"
 18 | env:
 19 |   global:
 20 |   - REPO="git@github.com:angular-ui/ui-codemirror.git"
 21 |   - secure: ! 'DBi9FeoZGlpMxD0bRE7qthGP/1hUMm3HR1J7d7X8+keEcb86Gedofg/C+BtV
 22 | 
 23 |       FiNYdrZ5DaovIvBALvsGnqqEd6BwZzcXeJjdobwFO1XNkmA+8kZIOvgRvw3c
 24 | 
 25 |       Tn1A8EeN2WpJk90qglt0gBhfiLfSgpHEaCw9O/Tqxe4eXRBFXMA='
 26 |   - secure: ! 'DXcSW/2MkOTXyfF/nGSDF1aNJk+YIu6fKyrs8L7Oqnzsy+MkdbXuKuew7EuH
 27 | 
 28 |       k+lxkwN4p6I5nZi/I9VUIWZRBTCNEZ6plscF34vewGgkS0c1MoiSyICDJJPk
 29 | 
 30 |       BTtxN0wj5DwQrZeXR86Z9DbIW9ru7Qq1hoFwHsGGM6lp61iXwWM='
 31 |   - secure: ! 'Bf/qhwpsDQ2JbwhA7osz0NKiVsjh0ke03mjzZm6FEkrs/MoK0Idf3OYbPtS4
 32 | 
 33 |       yZ9fKXbd6DYQ3FJpJ+UUCw8d4xw7mJTM8uSH2Yc9SYXF2IEooV/AY9I757q/
 34 | 
 35 |       KZ1nwbO/tuNS2nvTuLEkfrZt1b50QacsfIfXN5XFGJxdur2B3Ho='
 36 |   - secure: ! 'Th0gzgAr+ulWuZZ+fiwqwNCRmjOGEhD1R3xHAntvVjz3Qe0ZMi3mNeK7m2I3
 37 | 
 38 |       FSyJzjau4m8UmgHshuhav8rmyLThanC54uZLr4pBJBezlnoIsQaEwKrhghSy
 39 | 
 40 |       SB0G7TwvjK70zEdDd192s0jPS1+pVku23rP1349vYQahCtQgJBY='
 41 |   - secure: ! 'e8XmrQlUuC8rYIkOQZY2+HMMqvHrd+pwtnUZXtenVRSJ5mfn0+FsepgKb9Bb
 42 | 
 43 |       le+VDtcjQebDdsSj3w/RVurgRFCMS3q3dB/uc/TYbPvdfj2a+TekjxPefF7l
 44 | 
 45 |       auip2/Mz5jz3Rhzld7i0tlerb5zb86TouePDKHiWcDmPt5+5/10='
 46 |   - secure: ! 'hvJhPRJtVo5DNR8PMp+JdtaFcyUJlukTirRcft6UgusSBNwUNU83SBUGr5kl
 47 | 
 48 |       5RxSSFDzGoJbvUPotaiqZP8/hvAK2Kt8McwwkByDA8rZnB5hka21hZf4o3Ol
 49 | 
 50 |       4VObr715UGCTli0Rr25qb/URiaX+R8g0V/VViDXepG3vuhT80rU='
 51 |   - secure: ! 'LzTdmF0PqnRB8aDkosQ6Brqz+29cdRbv9lqQ1EegNYcbOrIJUGWbUZ8nolkW
 52 | 
 53 |       wyx4ARRbnkXDFv7Mfb1zzeEYMUdwB2VimXNhngz8HOqnBJ9/lhxn+xT7hvGm
 54 | 
 55 |       0ZapuExxCDQAbEC0O67UKzqI0mlOykWF+xCBrzAUCwG4X+N147g='
 56 |   - secure: ! 'LwKPnkAAN56GUvLAqYtACWhHKXT4dCylidcUtUYW2FkuOUQ8m5SfitSWOKM5
 57 | 
 58 |       GxqrpZwq2oZAD92CZFP1nPvfrTgdO46YnEOIRIaPIhySunedC+Ro5CG+s6Dw
 59 | 
 60 |       BtA9RHQ3OLpVfqMNVyjCss1pDZ7Zepm5iBTZletZx1lFzwwayU0='
 61 |   - secure: ! 'PiBJDuiaCk/9oZWC5S4VmQdB+FEoJkiZVEfZo0yOdv3rlA4RkNhHn65IhTHt
 62 | 
 63 |       /Q9+UeP3jHTN/Q1wjTcjI75e14qA22cQiNlB89Rei62d72W6+ec/jpqZgOaN
 64 | 
 65 |       94ZBDAglXjta6nniPF5pyF5HdfxRejsEZEP44fkwn3nDbUE+fWw='
 66 |   - secure: ! 'j2V3oZz0tYOSWuHSx8xAb7f7NYgyJcL8yirYfD7l9A9LtxptbcLQBFOu9+fp
 67 | 
 68 |       +4ggpBM6bkgbk2VgqDO9yNkhWNRyanRw9RsW2c3XTEEI2WwOpz4ishEhfsXN
 69 | 
 70 |       ROxNvxgv44v9HfCrqejYBh3T2y6FHSPUNmguhohxW/50Ow4ZyYs='
 71 |   - secure: ! 'OseZXjykVLz9Z2LPHqoROFB0HaIlBaBsJglRXNR+omVLwV/shhQ6tsXsphRQ
 72 | 
 73 |       HE3LAkHGvBMP+4C3epgCW85RYGf9j2KWI6d+JH4zTJH3OuOxJbVyGFSqxKEb
 74 | 
 75 |       bELrU3pgBcxG5pS/Hc8sltE8xVcCsiAhVrp0SA9Y+nmNRpzr6hk='
 76 |   - secure: ! 'RCDqfkiKSQMrRvuLp/0pz5dvLVJaQ6zVqIwp37EULoQokIa9zoYyWRkYPShh
 77 | 
 78 |       BfBizXb0Juj9JgHxuYogQqdUBNpmO25PhGRyYEYurW5LpvxBcgJKjarw07hx
 79 | 
 80 |       DhYvoECbHxWKqIPFinyPoCr09y3yaTwkIT+gQu5QKbzyD0smtt4='
 81 |   - secure: ! 'PlLA+hdGdP1X6GZvO8PmLDnHEj3ToZqXkw8Knhmjh4KIoQBNxgXsYK6bTsz8
 82 | 
 83 |       85Vd6p5BA32vpwFyNck3jP1wNYDzB/yR/yeJaNRfDwT0u25HAIR8gc0aCG3D
 84 | 
 85 |       Kr6myPBucnNEGA03MUX815g29tJt35jUNMLDoYb+Mfc4opvqiXQ='
 86 |   - secure: ! 'CP5qP1gQyhnaCNcPBtw7POFfG1DwBLgzN0JdgsxUElYgB4Vzm4O0SFP8gKRk
 87 | 
 88 |       LVOGy5P0+qnnLx1qrC77WlGEKSC+z3QXI+7WQVuFmcODWrHygsAqU1Bg5U+b
 89 | 
 90 |       SSfGGHJoboVe4+rBAsti4Scgi6KjUFLelVOgKgKS5toMxPxbtG4='
 91 |   - secure: ! 'QT3Zn/qzure21attmXwv5zcj0pHPh/sQLmTiA29GIJuN803pxblm+40IPscQ
 92 | 
 93 |       ZW/rh9fGYGvaazFJT4fjvJpO8FEx1cAOrizASnMoQ/8++AWMyqTNRq/2ME3D
 94 | 
 95 |       1dH5ThLSiF/r9kbeN+6Z9VayRmOT2ou52VXxDkqVqMtplmHxzEo='
 96 |   - secure: ! 'URZxGDMAJbZw2LSr7ohZzEK8nlFFMWVUfvcvJd52aAs2wh5fmhnY+9AJwZJP
 97 | 
 98 |       OaVSo4Q5eCJ4Kf6qgmk7dDxtKQdEJNrCTfNnA4Kn9O9XEJajTTDwsnOq0uQ9
 99 | 
100 |       ydGpWfHxVEdAsmJo5KAAoPwASyIDv7BwECjgDJasH8bP+jC3GF0='
101 |   - secure: ! 'Rbo7iqf2ZsHioq0c0FWXsfeTIE3WmghxxD7AaqOjKRYQJzlgV/ek+uOwHXkf
102 | 
103 |       pmCrOFm8Wjfs6tYFvA7wxHlh6sft+cSg15/059Vs/LSS/1P4CPQmQ7e4zxfx
104 | 
105 |       tEaS1RxuGg9U8XBURUe6UnhWsjrrFXe0JbViu+RA0vdejJzrelw='
106 |   - secure: ! 'Q+q6wcW91t+vJSO/lVUg0e7deKKWqcO9B2rfiV6XhCsBepo7CzTrPY+dYOR5
107 | 
108 |       AYKMKiYvpX7K8G52CFwEyRkM+hxA1I7JTiKbazhQ3MiFumMBrRlfHC27Xqqr
109 | 
110 |       EBWcy0lJEGDzaQlXcHutqEcURTYe1dtRgcNPp8zNT+bQ5Pq1NAg='
111 |   - secure: ! 'SB8CfnHqZNOlA6KALj1ThmGvka+mTWUSpSRA+Q0kt3ZWT1YJh52VVOZ+9NoD
112 | 
113 |       gNk6uhJscTX9yOS61xxad/ImyO1cHfuaKu9Ftbf412P/EMGugnHiyH9nLOsQ
114 | 
115 |       7JXm+8gkasnerrKY3wermHt/H0BXgXD8zI5les8N+VXJgpiKadg='
116 |   - secure: ! 'g3ssiBB/m4w8LhYTiq1JMpylmfjz4QNu/X/G5bWzV+SFZlzE442XBd+Do08a
117 | 
118 |       o9prXo/KHKQ7IppMI+KYHh9QAuD8YqlKS6V6cbke0Ey6uXXlY5k8FFvF9yxj
119 | 
120 |       syqvIR5bSK8nPakG3VoRECJD1BOGbVUTejO8vuxolS4eixse0zQ='
121 |   - secure: ! 'iUIaUpA8Qt1uTt6yVM0phoPc3EL+ZCoBn6EOtfpsH7VwcKIX2D8yGfUSGafx
122 | 
123 |       Fs0xYqQSMEpX9LLO/ShQI7tO9Rfx5KSZH2Hl9d+ZioRGyKLG/6efW+J+H8ai
124 | 
125 |       XqHFqqyJ2e3rK8+9YCFwjjXb981Twn3XnTT695R7tD5hNw9WBBA='
126 |   - secure: ! 'd3EyFwnLSHLw2XYtoh/X3/S9jbLuPO5loowvoZiGaffPTFT7owg6n8Sw0Z6i
127 | 
128 |       rXKP1cc11WaTULyzsuWUniB8AjOP8+Y4kirGCnLEOV8rp8ij0mZXC6T1xJyx
129 | 
130 |       qbZnvvFV7WOrC8bgMkwTSM/7+NaRIiiafcsyAqBIF3dZA0FDgyY='
131 |   - secure: ! 'F2WnvptTxk+DpucvJB19RflH4e3y/mr3B9nyuQd1t6MV8/jAuKb8hA6kT12e
132 | 
133 |       sAS9G5zVGJLtAJkpxrfzacYO9urHCOheFvupLWp1kn6xlu1/RXZSQLVcu6GS
134 | 
135 |       PFHyhUM78olj5nMH1GH68ic/kP2EO+IjUAf5uZpuvk/PSoOfLtQ='
136 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # UI.Codemirror directive [![Build Status][travis-image]][travis-url] [![Code Climate][codeclimate-image]][codeclimate-url]
  2 | 
  3 | This directive allows you to add [CodeMirror](http://codemirror.net/) to your textarea elements.
  4 | 
  5 | ## Requirements
  6 | 
  7 | - AngularJS 1.3.x
  8 | - [CodeMirror 4.8.x](https://github.com/marijnh/CodeMirror)
  9 | 
 10 | 
 11 | ## Usage
 12 | 
 13 | You can get it from [Bower](http://bower.io/)
 14 | 
 15 | ```sh
 16 | bower install angular-ui-codemirror
 17 | ```
 18 | 
 19 | This will copy the UI.Codemirror files into a `bower_components` folder, along with its dependencies. Load the script files in your application:
 20 | 
 21 | ```html
 22 | <link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">
 23 | <script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
 24 | <script type="text/javascript" src="bower_components/angular/angular.js"></script>
 25 | <script type="text/javascript" src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
 26 | ```
 27 | 
 28 | Add the UI.Codemirror module as a dependency to your application module:
 29 | 
 30 | ```javascript
 31 | var myAppModule = angular.module('MyApp', ['ui.codemirror']);
 32 | ```
 33 | 
 34 | Finally, add the directive to your html,
 35 | as attribute :
 36 | 
 37 | ```html
 38 | // Not well supported yet but still... We need feedbacks to improve it...
 39 | <textarea ui-codemirror></textarea>
 40 | 
 41 | <div ui-codemirror></div>
 42 | ```
 43 | 
 44 | as element :
 45 | ```xml
 46 | <ui-codemirror></ui-codemirror>
 47 | ```
 48 | 
 49 | 
 50 | ## Options
 51 | 
 52 | All the [Codemirror configuration options](http://codemirror.net/doc/manual.html#config) can be passed through the directive.
 53 | 
 54 | ```javascript
 55 | myAppModule.controller('MyController', [ '$scope', function($scope) {
 56 | 	$scope.editorOptions = {
 57 | 		lineWrapping : true,
 58 | 		lineNumbers: true,
 59 | 		readOnly: 'nocursor',
 60 | 		mode: 'xml',
 61 | 	};
 62 | }]);
 63 | ```
 64 | 
 65 | If you update this variable with the new values, they will be merged and the ui will be updated.
 66 | 
 67 | ```xml
 68 | <ui-codemirror ui-codemirror-opts="editorOptions"></ui-codemirror>
 69 | ```
 70 | 
 71 | ### Working with ng-model
 72 | 
 73 | The ui-codemirror directive plays nicely with ng-model.
 74 | 
 75 | The ng-model will be watched for to set the CodeMirror document value (by [setValue](http://codemirror.net/doc/manual.html#setValue)).
 76 | 
 77 | _The ui-codemirror directive stores and expects the model value to be a standard javascript String._
 78 | 
 79 | ### ui-refresh directive
 80 | 
 81 | If you apply the refresh directive to element then any change to do this scope value will result to a [refresh of the CodeMirror instance](http://codemirror.net/doc/manual.html#refresh).
 82 | 
 83 | _The ui-refresh directive expects a scope variable that can be any thing...._
 84 | 
 85 | ```html
 86 | <div ui-codemirror ng-model="x" ui-refresh='isSomething'></div>
 87 | ```
 88 | 
 89 | Now you can set the _isSomething_ in the controller scope.
 90 | 
 91 | ```javascript
 92 | $scope.isSomething = true;
 93 | ```
 94 | 
 95 | Note: the comparison operator between the old and the new value is "!=="
 96 | 
 97 | 
 98 | ### CodeMirror instance direct access
 99 | 
100 | For more interaction with the CodeMirror instance in the directive, we provide a direct access to it.
101 | Using
102 | 
103 | ```html
104 | <div ui-codemirror="{ onLoad : codemirrorLoaded }" ></div>
105 | ```
106 | 
107 | the `$scope.codemirrorLoaded` function will be called with the [CodeMirror editor instance](http://codemirror.net/doc/manual.html#CodeMirror) as first argument
108 | 
109 | ```javascript
110 | myAppModule.controller('MyController', [ '$scope', function($scope) {
111 | 
112 |   $scope.codemirrorLoaded = function(_editor){
113 |     // Editor part
114 |     var _doc = _editor.getDoc();
115 |     _editor.focus();
116 | 
117 |     // Options
118 |     _editor.setOption('firstLineNumber', 10);
119 |     _doc.markClean()
120 | 
121 |     // Events
122 |     _editor.on("beforeChange", function(){ ... });
123 |     _editor.on("change", function(){ ... });
124 |   };
125 | 
126 | }]);
127 | ```
128 | 
129 | ## Testing
130 | 
131 | We use Karma and jshint to ensure the quality of the code.  The easiest way to run these checks is to use grunt:
132 | 
133 | ```sh
134 | npm install -g grunt-cli
135 | npm install && bower install
136 | grunt
137 | ```
138 | 
139 | The karma task will try to open Firefox and Chrome as browser in which to run the tests.  Make sure this is available or change the configuration in `test\karma.conf.js`
140 | 
141 | 
142 | ### Grunt Serve
143 | 
144 | We have one task to serve them all !
145 | 
146 | ```sh
147 | grunt serve
148 | ```
149 | 
150 | It's equal to run separately:
151 | 
152 | * `grunt connect:server` : giving you a development server at [http://localhost:8000/](http://localhost:8000/).
153 | 
154 | * `grunt karma:server` : giving you a Karma server to run tests (at [http://localhost:9876/](http://localhost:9876/) by default). You can force a test on this server with `grunt karma:unit:run`.
155 | 
156 | * `grunt watch` : will automatically test your code and build your demo.  You can demo generation with `grunt build:gh-pages`.
157 | 
158 | 
159 | ### Dist
160 | 
161 | This repo is using the [angular-ui/angular-ui-publisher](https://github.com/angular-ui/angular-ui-publisher).
162 | New tags will automatically trigger a new publication.
163 | To test is locally you can trigger a :
164 | 
165 | ```sh
166 | grunt dist build:bower
167 | ```
168 | 
169 | it will put the final files in the _'dist'_ folder and a sample of the bower tag output in the _'out/built/bower'_ folder.
170 | 
171 | [travis-url]: https://travis-ci.org/angular-ui/ui-codemirror
172 | [travis-image]: https://travis-ci.org/angular-ui/ui-codemirror.svg?branch=master
173 | [codeclimate-url]: https://codeclimate.com/github/angular-ui/ui-codemirror
174 | [codeclimate-image]: https://codeclimate.com/github/angular-ui/ui-codemirror/badges/gpa.svg
175 | 


--------------------------------------------------------------------------------
/demo/demo.html:
--------------------------------------------------------------------------------
  1 | <section id="codemirror" ng-app="doc.ui-codeMirror">
  2 | 
  3 | <!-- =Minimal code
  4 | --------------------------------------------------------------------------- -->
  5 | <div id="demo-mini">
  6 |   <div class="page-header">
  7 |     <h1>Minimal code</h1>
  8 |   </div>
  9 |   <div class="row">
 10 |     <div class="col-md-6">
 11 |       <div ui-codemirror>Code mirror here</div>
 12 |     </div>
 13 | 
 14 |     <div class="col-md-6" ng-controller="PlunkerCtrl"
 15 |          ng-init="
 16 | vendor_css=['http://codemirror.net/lib/codemirror.css'];
 17 | vendor_js=['http://codemirror.net/lib/codemirror.js'];
 18 |       "
 19 |         >
 20 |       <div class="pull-right">
 21 |         <button class="btn btn-info" ng-click="edit('1.2.6', 'UI.Codemirror', 'ui-codemirror')">
 22 |           <i class="glyphicon glyphicon-edit"></i> Edit in plunker
 23 |         </button>
 24 |       </div>
 25 | 
 26 |       <tabset>
 27 |         <tab heading="Markup">
 28 |           <div plunker-content="markup">
 29 | <pre class="prettyprint">&lt;section&gt;
 30 |   &lt;div ui-codemirror &gt;Code mirror here&lt;/div&gt;
 31 | &lt;/section&gt;</pre>
 32 |           </div>
 33 |         </tab>
 34 |       </tabset>
 35 |     </div>
 36 |   </div>
 37 | </div>
 38 | 
 39 | 
 40 | <!-- =General options demo
 41 | --------------------------------------------------------------------------- -->
 42 | <div id="demo-general">
 43 |   <div class="page-header">
 44 |     <h1>General options</h1>
 45 |   </div>
 46 |   <div class="row">
 47 |     <div class="col-md-6">
 48 |       <div ui-codemirror="{
 49 |             lineNumbers: true,
 50 |             theme:'twilight',
 51 |             readOnly: 'nocursor',
 52 |             lineWrapping : true,
 53 |             mode: 'xml'
 54 |           }">&lt;html style=&quot;color: green&quot;&gt;
 55 | &lt;!-- this is a comment --&gt;
 56 | &lt;head&gt;
 57 | &lt;title&gt;HTML Example&lt;/title&gt;
 58 | &lt;/head&gt;
 59 | &lt;body&gt;
 60 | The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
 61 | I mean&amp;quot;&lt;/em&gt;... but might not match your style.
 62 | &lt;/body&gt;
 63 | &lt;/html&gt;</div>
 64 |     </div>
 65 | 
 66 |     <div class="col-md-6" ng-controller="PlunkerCtrl"
 67 |          ng-init="
 68 | vendor_css=['http://codemirror.net/lib/codemirror.css', 'http://codemirror.net/theme/twilight.css'];
 69 | vendor_js=['http://codemirror.net/lib/codemirror.js', 'http://codemirror.net/mode/xml/xml.js'];
 70 |       "
 71 |         >
 72 |       <div class="pull-right">
 73 |         <button class="btn btn-info" ng-click="edit('1.2.6', 'UI.Codemirror', 'ui-codemirror')">
 74 |           <i class="glyphicon glyphicon-edit"></i> Edit in plunker
 75 |         </button>
 76 |       </div>
 77 | 
 78 |       <tabset>
 79 |         <tab heading="Markup">
 80 |           <div plunker-content="markup">
 81 | <pre class="prettyprint">&lt;section&gt;
 82 |   &lt;div ui-codemirror=&quot;{
 83 |       lineNumbers: true,
 84 |       theme:&#39;twilight&#39;,
 85 |       readOnly: &#39;nocursor&#39;,
 86 |       lineWrapping : true,
 87 |       mode: &#39;xml&#39;
 88 |     }&quot; &gt;&amp;lt;html style=&amp;quot;color: green&amp;quot;&amp;gt;
 89 | &amp;lt;!-- this is a comment --&amp;gt;
 90 | &amp;lt;head&amp;gt;
 91 | &amp;lt;title&amp;gt;HTML Example&amp;lt;/title&amp;gt;
 92 | &amp;lt;/head&amp;gt;
 93 | &amp;lt;body&amp;gt;
 94 | The indentation tries to be &amp;lt;em&amp;gt;somewhat &amp;amp;quot;do what
 95 | I mean&amp;amp;quot;&amp;lt;/em&amp;gt;... but might not match your style.
 96 | &amp;lt;/body&amp;gt;
 97 | &amp;lt;/html&amp;gt;&lt;/div&gt;
 98 | &lt;/section&gt;</pre>
 99 |             </div>
100 |           </tab>
101 |         </tabset>
102 |       </div>
103 |     </div>
104 | </div>
105 | 
106 | 
107 | <!-- =Mode-Changing demo
108 | --------------------------------------------------------------------------- -->
109 | <div id="demo-mode-changing">
110 |     <div class="page-header">
111 |       <h1>Mode-Changing demo</h1>
112 |     </div>
113 |   <div class="row" ng-controller="CodemirrorCtrl">
114 |     <div class="col-md-12">
115 |       <div ui-codemirror="cmOption" ng-model="cmModel"></div>
116 |     </div>
117 |     <div class="col-md-6">
118 |       Mode : <select class="form-control" ng-model="mode" ng-options="m for m in modes" ng-change="modeChanged()"></select>
119 |     </div>
120 |   </div>
121 | </div>
122 | 
123 | <hr>
124 | 
125 | <div class="row">
126 | 
127 |   <div class="span12" ng-controller="PlunkerCtrl"
128 |        ng-init="
129 | vendor_css=['http://codemirror.net/lib/codemirror.css'];
130 | vendor_js=['http://codemirror.net/lib/codemirror.js', 'http://codemirror.net/mode/scheme/scheme.js', 'http://codemirror.net/mode/javascript/javascript.js', 'http://codemirror.net/mode/xml/xml.js'];
131 |         "
132 |       >
133 |     <div class="pull-right">
134 |       <button class="btn btn-info" ng-click="edit('1.2.6', 'UI.Codemirror', 'ui-codemirror')">
135 |         <i class="glyphicon glyphicon-edit"></i> Edit in plunker
136 |       </button>
137 |     </div>
138 | 
139 |     <tabset>
140 |       <tab heading="Markup">
141 |         <div plunker-content="markup">
142 | <pre class="prettyprint">&lt;section ng-controller=&quot;CodemirrorCtrl&quot;&gt;
143 | 
144 |   &lt;textarea ui-codemirror=&quot;cmOption&quot; ng-model=&quot;cmModel&quot;&gt;&lt;/textarea&gt;
145 | 
146 |   Mode : &lt;select ng-model=&quot;mode&quot; ng-options=&quot;m for m in modes&quot; ng-change=&quot;modeChanged()&quot;&gt;&lt;/select&gt;
147 | 
148 | &lt;/section&gt;</pre>
149 | 
150 |     <div style="margin-top: 450px;"></div>
151 |         </div>
152 |       </tab>
153 |       <tab heading="JavaScript">
154 |         <div plunker-content="javascript">
155 | <pre class="prettyprint">app.controller(&#39;CodemirrorCtrl&#39;, [&#39;$scope&#39;, function($scope) {
156 | 
157 |   // The modes
158 |   $scope.modes = [&#39;Scheme&#39;, &#39;XML&#39;, &#39;Javascript&#39;];
159 |   $scope.mode = $scope.modes[0];
160 | 
161 | 
162 |   // The ui-codemirror option
163 |   $scope.cmOption = {
164 |     lineNumbers: true,
165 |     indentWithTabs: true,
166 |     onLoad : function(_cm){
167 | 
168 |       // HACK to have the codemirror instance in the scope...
169 |       $scope.modeChanged = function(){
170 |         _cm.setOption(&quot;mode&quot;, $scope.mode.toLowerCase());
171 |       };
172 |     }
173 |   };
174 | 
175 | 
176 | 
177 |   // Initial code content...
178 |   $scope.cmModel = &#39;;; Scheme code in here.\n&#39; +
179 |     &#39;(define (double x)\n\t(* x x))\n\n\n&#39; +
180 |     &#39;&lt;!-- XML code in here. --&gt;\n&#39; +
181 |     &#39;&lt;root&gt;\n\t&lt;foo&gt;\n\t&lt;/foo&gt;\n\t&lt;bar/&gt;\n&lt;/root&gt;\n\n\n&#39; +
182 |     &#39;// Javascript code in here.\n&#39; +
183 |     &#39;function foo(msg) {\n\tvar r = Math.random();\n\treturn &quot;&quot; + r + &quot; : &quot; + msg;\n}&#39;;
184 | 
185 | }]);</pre>
186 |         </div>
187 |       </tab>
188 |     </tabset>
189 |   </div>
190 | </div>
191 | 
192 | </section>
193 | 


--------------------------------------------------------------------------------
/test/codemirror.spec.js:
--------------------------------------------------------------------------------
  1 | describe('uiCodemirror', function() {
  2 |   'use strict';
  3 | 
  4 |   // declare these up here to be global to all tests
  5 |   var scope, $compile, $timeout, uiConfig;
  6 |   var codemirrorDefaults = window.CodeMirror.defaults;
  7 | 
  8 |   beforeEach(function() {
  9 |     module('ui.codemirror');
 10 | 
 11 |     inject(function(_$rootScope_, _$compile_, _$timeout_, uiCodemirrorConfig) {
 12 |       scope = _$rootScope_.$new();
 13 |       $compile = _$compile_;
 14 |       $timeout = _$timeout_;
 15 |       uiConfig = uiCodemirrorConfig;
 16 |     });
 17 | 
 18 |   });
 19 | 
 20 |   afterEach(function() {
 21 |     uiConfig = {};
 22 |   });
 23 | 
 24 | 
 25 |   it('should not throw an error when window.CodeMirror is defined', function() {
 26 |     function compile() {
 27 |       $compile('<div ui-codemirror></div>')(scope);
 28 |     }
 29 | 
 30 |     var _CodeMirror = window.CodeMirror;
 31 |     delete window.CodeMirror;
 32 |     expect(window.CodeMirror).toBeUndefined();
 33 |     expect(compile)
 34 |       .toThrow(new Error('ui-codemirror needs CodeMirror to work... (o rly?)'));
 35 |     window.CodeMirror = _CodeMirror;
 36 |   });
 37 | 
 38 |   describe('destruction', function() {
 39 | 
 40 |     var parentElement;
 41 | 
 42 |     beforeEach(function() {
 43 |       parentElement = angular.element('<div></div>');
 44 |       angular.element(document.body).prepend(parentElement);
 45 |     });
 46 | 
 47 |     afterEach(function() {
 48 |       parentElement.remove();
 49 |     });
 50 | 
 51 |     function shouldDestroyTest(elementType, template) {
 52 |       it('should destroy the directive of ' + elementType, function() {
 53 |         var element = angular.element(template);
 54 |         parentElement.append(element);
 55 | 
 56 |         $compile(element)(scope);
 57 |         scope.$digest();
 58 | 
 59 |         expect(parentElement.children().length).toBe(1);
 60 |         element.remove();
 61 |         scope.$digest();
 62 |         expect(parentElement.children().length).toBe(0);
 63 |       });
 64 |     }
 65 | 
 66 |     shouldDestroyTest('an element', '<ui-codemirror></ui-codemirror>');
 67 |     shouldDestroyTest('an attribute', '<div ui-codemirror=""></div>');
 68 | 
 69 |   });
 70 | 
 71 |   it('should not throw an error when window.CodeMirror is defined an attribute', function() {
 72 |     function compile() {
 73 |       $compile('<div ui-codemirror></div>')(scope);
 74 |     }
 75 | 
 76 |     expect(window.CodeMirror).toBeDefined();
 77 |     expect(compile).not.toThrow();
 78 |   });
 79 | 
 80 | 
 81 |   it('should not throw an error when window.CodeMirror is defined an element', function() {
 82 |     function compile() {
 83 |       $compile('<ui-codemirror></ui-codemirror>')(scope);
 84 |     }
 85 | 
 86 |     expect(window.CodeMirror).toBeDefined();
 87 |     expect(compile).not.toThrow();
 88 |   });
 89 | 
 90 | 
 91 |   it('should watch all uiCodemirror attribute', function() {
 92 |     spyOn(scope, '$watch');
 93 |     scope.cmOption = {};
 94 |     $compile('<div ui-codemirror="cmOption"  ng-model="foo" ui-refresh="sdf"></div>')(scope);
 95 |     expect(scope.$watch.calls.count()).toEqual(3); // The uiCodemirror+ the ngModel + the uiRefresh
 96 |     expect(scope.$watch).toHaveBeenCalledWith('cmOption', jasmine.any(Function), true); // uiCodemirror
 97 |     expect(scope.$watch).toHaveBeenCalledWith(jasmine.any(Function)); // ngModel
 98 |     expect(scope.$watch).toHaveBeenCalledWith('sdf', jasmine.any(Function)); // uiRefresh
 99 |   });
100 | 
101 |   describe('CodeMirror instance', function() {
102 | 
103 |     var codemirror = null, spies = angular.noop;
104 | 
105 |     beforeEach(function() {
106 |       var _constructor = window.CodeMirror;
107 |       window.CodeMirror = jasmine.createSpy('window.CodeMirror')
108 |         .and.callFake(function() {
109 |           codemirror = _constructor.apply(this, arguments);
110 |           spies(codemirror);
111 |           return codemirror;
112 |         });
113 | 
114 |       window.CodeMirror.defaults = codemirrorDefaults;
115 |     });
116 | 
117 | 
118 |     it('should call the CodeMirror constructor with a function', function() {
119 |       $compile('<div ui-codemirror></div>')(scope);
120 | 
121 |       expect(window.CodeMirror.calls.count()).toEqual(1);
122 |       expect(window.CodeMirror)
123 |         .toHaveBeenCalledWith(jasmine.any(Function), jasmine.any(Object));
124 | 
125 |       expect(codemirror).toBeDefined();
126 |     });
127 | 
128 |     it('should work as an element', function() {
129 |       $compile('<ui-codemirror></ui-codemirror>')(scope);
130 | 
131 |       expect(window.CodeMirror.calls.count()).toEqual(1);
132 |       expect(window.CodeMirror)
133 |         .toHaveBeenCalledWith(jasmine.any(Function), jasmine.any(Object));
134 | 
135 |       expect(codemirror).toBeDefined();
136 |     });
137 | 
138 |     it('should have a child element with a div.CodeMirror', function() {
139 |       // Explicit a parent node to support the directive.
140 |       var element = $compile('<div ui-codemirror></div>')(scope).children();
141 | 
142 |       expect(element).toBeDefined();
143 |       expect(element.prop('tagName')).toBe('DIV');
144 |       expect(element.prop('classList').length).toEqual(2);
145 |       expect(element.prop('classList')[0]).toEqual('CodeMirror');
146 |       expect(element.prop('classList')[1]).toEqual('cm-s-default');
147 |     });
148 | 
149 | 
150 |     describe('options', function() {
151 | 
152 |       spies = function(codemirror) {
153 |         codemirror._setOption = codemirror._setOption || codemirror.setOption;
154 |         codemirror.setOption = jasmine.createSpy('codemirror.setOption')
155 |           .and.callFake(function() {
156 |             codemirror._setOption.apply(this, arguments);
157 |           });
158 |       };
159 | 
160 |       it('should not be called', function() {
161 |         $compile('<div ui-codemirror></div>')(scope);
162 |         expect(window.CodeMirror)
163 |           .toHaveBeenCalledWith(jasmine.any(Function), { value: '' });
164 |         expect(codemirror.setOption).not.toHaveBeenCalled();
165 |       });
166 | 
167 |       it('should include the passed options (attribute directive)', function() {
168 |         $compile('<div ui-codemirror="{oof: \'baar\'}"></div>')(scope);
169 | 
170 |         expect(window.CodeMirror)
171 |           .toHaveBeenCalledWith(jasmine.any(Function), {
172 |             value: '',
173 |             oof: 'baar'
174 |           });
175 |         expect(codemirror.setOption).not.toHaveBeenCalled();
176 |       });
177 | 
178 |       it('should include the passed options (element directive)', function() {
179 |         $compile('<ui-codemirror ui-codemirror-opts="{oof: \'baar\'}"></ui-codemirror>')(scope);
180 | 
181 |         expect(window.CodeMirror)
182 |           .toHaveBeenCalledWith(jasmine.any(Function), {
183 |             value: '',
184 |             oof: 'baar'
185 |           });
186 |         expect(codemirror.setOption).not.toHaveBeenCalled();
187 |       });
188 | 
189 |       it('should include the default options', function() {
190 |         uiConfig.codemirror = { bar: 'baz' };
191 |         $compile('<div ui-codemirror></div>')(scope);
192 | 
193 |         expect(window.CodeMirror).toHaveBeenCalledWith(jasmine.any(Function), {
194 |           value: '',
195 |           bar: 'baz'
196 |         });
197 |         expect(codemirror.setOption).not.toHaveBeenCalled();
198 |       });
199 | 
200 |       it('should extent the default options', function() {
201 |         uiConfig.codemirror = { bar: 'baz' };
202 |         $compile('<div ui-codemirror="{oof: \'baar\'}"></div>')(scope);
203 | 
204 |         expect(window.CodeMirror).toHaveBeenCalledWith(jasmine.any(Function), {
205 |           value: '',
206 |           oof: 'baar',
207 |           bar: 'baz'
208 |         });
209 |         expect(codemirror.setOption).not.toHaveBeenCalled();
210 |       });
211 | 
212 |       it('should impact codemirror', function() {
213 |         uiConfig.codemirror = {};
214 |         $compile('<div ui-codemirror="{theme: \'baar\'}"></div>')(scope);
215 | 
216 |         expect(window.CodeMirror).toHaveBeenCalledWith(jasmine.any(Function), {
217 |           value: '',
218 |           theme: 'baar'
219 |         });
220 |         expect(codemirror.setOption).not.toHaveBeenCalled();
221 | 
222 |         expect(codemirror.getOption('theme')).toEqual('baar');
223 |       });
224 |     });
225 | 
226 |     it('should not trigger watch ui-refresh', function() {
227 |       spyOn(scope, '$watch');
228 |       $compile('<div ui-codemirror ui-refresh=""></div>')(scope);
229 |       expect(scope.$watch).not.toHaveBeenCalled();
230 |     });
231 | 
232 |     it('should trigger the CodeMirror.refresh() method', function() {
233 |       $compile('<div ui-codemirror ui-refresh="bar"></div>')(scope);
234 | 
235 | 
236 |       spyOn(codemirror, 'refresh');
237 |       scope.$apply('bar = null');
238 | 
239 |       scope.$apply('bar = false');
240 |       expect(scope.bar).toBeFalsy();
241 |       $timeout.flush();
242 |       expect(codemirror.refresh).toHaveBeenCalled();
243 |       scope.$apply('bar = true');
244 |       expect(scope.bar).toBeTruthy();
245 |       $timeout.flush();
246 |       expect(codemirror.refresh).toHaveBeenCalled();
247 |       scope.$apply('bar = 0');
248 |       expect(scope.bar).toBeFalsy();
249 |       $timeout.flush();
250 |       expect(codemirror.refresh).toHaveBeenCalled();
251 |       scope.$apply('bar = 1');
252 |       expect(scope.bar).toBeTruthy();
253 |       $timeout.flush();
254 |       expect(codemirror.refresh).toHaveBeenCalled();
255 | 
256 |       expect(codemirror.refresh.calls.count()).toEqual(4);
257 |     });
258 | 
259 | 
260 |     it('when the IDE changes should update the model', function() {
261 |       var element = $compile('<div ui-codemirror ng-model="foo"></div>')(scope);
262 |       var ctrl = element.controller('ngModel');
263 | 
264 |       expect(ctrl.$pristine).toBe(true);
265 |       expect(ctrl.$valid).toBe(true);
266 | 
267 |       var value = 'baz';
268 |       codemirror.setValue(value);
269 |       scope.$apply();
270 |       expect(scope.foo).toBe(value);
271 | 
272 |       expect(ctrl.$valid).toBe(true);
273 |       expect(ctrl.$dirty).toBe(true);
274 | 
275 |     });
276 | 
277 |     it('when the model changes should update the IDE', function() {
278 |       var element = $compile('<div ui-codemirror ng-model="foo"></div>')(scope);
279 |       var ctrl = element.controller('ngModel');
280 | 
281 |       expect(ctrl.$pristine).toBe(true);
282 |       expect(ctrl.$valid).toBe(true);
283 | 
284 |       scope.$apply('foo = "bar"');
285 |       expect(codemirror.getValue()).toBe(scope.foo);
286 | 
287 |       expect(ctrl.$pristine).toBe(true);
288 |       expect(ctrl.$valid).toBe(true);
289 |     });
290 | 
291 | 
292 |     it('when the IDE changes should use ngChange', function() {
293 |       scope.change = angular.noop;
294 |       spyOn(scope, 'change').and.callFake(function() { expect(scope.foo).toBe('baz'); });
295 | 
296 |       $compile('<div ui-codemirror ng-model="foo" ng-change="change()"></div>')(scope);
297 | 
298 |       // change shouldn't be called initialy
299 |       expect(scope.change).not.toHaveBeenCalled();
300 | 
301 | 
302 |       // change shouldn't be called when the value change is coming from the model.
303 |       scope.$apply('foo = "bar"');
304 |       expect(scope.change).not.toHaveBeenCalled();
305 | 
306 |       // change should be called when user changes the input.
307 |       codemirror.setValue('baz');
308 |       scope.$apply();
309 |       expect(scope.change.calls.count()).toBe(1);
310 |       expect(scope.change).toHaveBeenCalledWith();
311 |     });
312 | 
313 |     it('should runs the onLoad callback', function() {
314 |       scope.codemirrorLoaded = jasmine.createSpy('scope.codemirrorLoaded');
315 | 
316 |       $compile('<div ui-codemirror="{onLoad: codemirrorLoaded}"></div>')(scope);
317 | 
318 |       expect(scope.codemirrorLoaded).toHaveBeenCalled();
319 |       expect(scope.codemirrorLoaded).toHaveBeenCalledWith(codemirror);
320 |     });
321 | 
322 |     it('responds to the $broadcast event "CodeMirror"', function() {
323 |       var broadcast = {};
324 |       broadcast.callback = jasmine.createSpy('broadcast.callback');
325 | 
326 |       $compile('<div ui-codemirror></div>')(scope);
327 |       scope.$broadcast('CodeMirror', broadcast.callback);
328 | 
329 |       expect(broadcast.callback).toHaveBeenCalled();
330 |       expect(broadcast.callback).toHaveBeenCalledWith(codemirror);
331 |     });
332 | 
333 | 
334 |     it('should watch the options (attribute directive)', function() {
335 | 
336 |       scope.cmOption = { readOnly: true };
337 |       $compile('<div ui-codemirror="cmOption"></div>')(scope);
338 |       scope.$digest();
339 | 
340 |       expect(codemirror.getOption('readOnly')).toBeTruthy();
341 | 
342 |       scope.cmOption.readOnly = false;
343 |       scope.$digest();
344 |       expect(codemirror.getOption('readOnly')).toBeFalsy();
345 |     });
346 | 
347 |     it('should watch the options (element directive)', function() {
348 | 
349 |       scope.cmOption = { readOnly: true };
350 |       $compile('<ui-codemirror ui-codemirror-opts="cmOption"></div>')(scope);
351 |       scope.$digest();
352 | 
353 |       expect(codemirror.getOption('readOnly')).toBeTruthy();
354 | 
355 |       scope.cmOption.readOnly = false;
356 |       scope.$digest();
357 |       expect(codemirror.getOption('readOnly')).toBeFalsy();
358 |     });
359 | 
360 |     it('should watch the options (object property)', function() {
361 | 
362 |       scope.cm = {};
363 |       scope.cm.option = { readOnly: true };
364 |       $compile('<div ui-codemirror="cm.option"></div>')(scope);
365 |       scope.$digest();
366 | 
367 |       expect(codemirror.getOption('readOnly')).toBeTruthy();
368 | 
369 |       scope.cm.option.readOnly = false;
370 |       scope.$digest();
371 |       expect(codemirror.getOption('readOnly')).toBeFalsy();
372 |     });
373 | 
374 |   });
375 | 
376 |   it('when the model is an object or an array should throw an error', function() {
377 |     function compileWithObject() {
378 |       $compile('<div ui-codemirror ng-model="foo"></div>')(scope);
379 |       scope.foo = {};
380 |       scope.$apply();
381 |     }
382 | 
383 |     function compileWithArray() {
384 |       $compile('<div ui-codemirror ng-model="foo"></div>')(scope);
385 |       scope.foo = [];
386 |       scope.$apply();
387 |     }
388 | 
389 |     expect(compileWithObject).toThrow();
390 |     expect(compileWithArray).toThrow();
391 |   });
392 | 
393 | });
394 | 


--------------------------------------------------------------------------------