npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@easyops/angular-ui-codemirror

v0.3.2

Published

This directive allows you to add CodeMirror to your textarea elements.

Downloads

7

Readme

UI.Codemirror directive Build Status Code Climate

This directive allows you to add CodeMirror to your textarea elements.

Requirements

Usage

yarn add @easyops/angular-ui-codemirror

This will copy the UI.Codemirror files into a bower_components folder, along with its dependencies. Load the script files in your application:

<link rel="stylesheet" type="text/css" href="node_modules/codemirror/lib/codemirror.css">
<script type="text/javascript" src="node_modules/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-codemirror/ui-codemirror.js"></script>

Add the UI.Codemirror module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.codemirror']);

Finally, add the directive to your html, as attribute :

// Not well supported yet but still... We need feedbacks to improve it...
<textarea ui-codemirror></textarea>

<div ui-codemirror></div>

as element :

<ui-codemirror></ui-codemirror>

Options

All the Codemirror configuration options can be passed through the directive.

myAppModule.controller('MyController', [ '$scope', function($scope) {
	$scope.editorOptions = {
		lineWrapping : true,
		lineNumbers: true,
		readOnly: 'nocursor',
		mode: 'xml',
	};
}]);

If you update this variable with the new values, they will be merged and the ui will be updated.

<ui-codemirror ui-codemirror-opts="editorOptions"></ui-codemirror>

Working with ng-model

The ui-codemirror directive plays nicely with ng-model.

The ng-model will be watched for to set the CodeMirror document value (by setValue).

The ui-codemirror directive stores and expects the model value to be a standard javascript String.

ui-refresh directive

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.

The ui-refresh directive expects a scope variable that can be any thing....

<div ui-codemirror ng-model="x" ui-refresh='isSomething'></div>

Now you can set the isSomething in the controller scope.

$scope.isSomething = true;

Note: the comparison operator between the old and the new value is "!=="

CodeMirror instance direct access

For more interaction with the CodeMirror instance in the directive, we provide a direct access to it. Using

<div ui-codemirror="{ onLoad : codemirrorLoaded }" ></div>

the $scope.codemirrorLoaded function will be called with the CodeMirror editor instance as first argument

myAppModule.controller('MyController', [ '$scope', function($scope) {

  $scope.codemirrorLoaded = function(_editor){
    // Editor part
    var _doc = _editor.getDoc();
    _editor.focus();

    // Options
    _editor.setOption('firstLineNumber', 10);
    _doc.markClean()

    // Events
    _editor.on("beforeChange", function(){ ... });
    _editor.on("change", function(){ ... });
  };

}]);

Testing

We use Karma and jshint to ensure the quality of the code.

yarn test

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

Grunt Serve

We have one task to serve them all !

grunt serve

It's equal to run separately:

  • grunt connect:server : giving you a development server at http://localhost:8000/.

  • grunt karma:server : giving you a Karma server to run tests (at http://localhost:9876/ by default). You can force a test on this server with grunt karma:unit:run.

  • grunt watch : will automatically test your code and build your demo. You can demo generation with grunt build:gh-pages.

Dist

npm publish