emmetio / codemirror

Emmet plugin for CodeMirror online editor

Deprecated: use codemirror-plugin instead with upcoming Emmet 2.0

---

Emmet plugin for CodeMirror 4.x+

To add Emmet support for CodeMirror editor, simply add dist/emmet.js as a <script> tag into your HTML page right after CodeMirror script. This script creates global emmetCodeMirror function but also can be loaded as Require.JS module. You should pass CodeMirror editor instance to emmetCodeMirror() to add Emmet support.

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
	mode : 'text/html',
	
	// define Emmet output profile
	profile: 'xhtml'
});
emmetCodeMirror(editor);

Available profiles are: html, xhtml, xml, but you can create your own output profile with emmetCodeMirror.emmet.loadProfiles({name: options}).

See profile.js for a list of available options.

Default keybindings

• Cmd-E or Tab: Expand abbreviation
• Cmd-D: Balance Tag (matches opening and closing tag pair)
• Shift-Cmd-D: Balance Tag Inward
• Shift-Cmd-A: Wrap With Abbreviation
• Ctrl-Alt-Right: Next Edit Point
• Ctrl-Alt-Left: Previous Edit Point
• Cmd-L: Select line
• Cmd-Shift-M: Merge Lines
• Cmd-/: Toggle Comment
• Cmd-J: Split/Join Tag
• Cmd-K: Remove Tag
• Shift-Cmd-Y: Evaluate Math Expression
• Ctrl-Up: Increment Number by 1
• Ctrl-Down: Decrement Number by 1
• Ctrl-Alt-Up: Increment Number by 0.1
• Ctrl-Alt-Down: Decrement Number by 0.1
• Shift-Ctrl-Up: Increment Number by 10
• Shift-Ctrl-Down: Decrement Number by 10
• Shift-Cmd-.: Select Next Item
• Shift-Cmd-,: Select Previous Item
• Cmd-B: Reflect CSS Value

Overriding keybindings

The emmetCodeMirror() function simply adds default Emmet action keybindings to editor instance. If you want your own keybindings or disable some of them, simply pass keymap (object) as second argument to emmetCodeMirror() method:

emmetCodeMirror(editor, {
    'Tab': 'emmet.expand_abbreviation_with_tab',
    'Cmd-Alt-B': 'emmet.balance_outward'
});

See defaultKeymap for available actions. The default keymap is exposed as emmetCodeMirror.defaultKeymap property.

NB: The Cmd key will be automatically replaced with Ctrl on non-OSX platforms.

Building from source

This plugin uses gulp.js as build tool:

1. Install Node.JS and NPM.
2. Install Gulp.js: npm install -g gulp
3. Clone this repo and cd to cloned dir:
4. In cloned repo run npm install and gulp to build project. The build tool will create dist/emmet.js file.

codemirror's Issues

I can't get emmet to work with CodeMirror 3 - most shortcuts fail

I've replicated the demo that's used on CodeMirror's own site, which uses a minified version of emmet. The demo uses CM2, but we're using CM3 in jsbin.com and emmet.js isn't hooking most of the keys we need - particularly like cmd+e and tab.

Example here: http://jsbin.com/asewiv/3

SyntaxError: Octal literal in strict mode (14914:23)

When I pack the file with webpack，it comes this error:

ERROR in ./src/js/vendors/codemirror/emmet.js
Module build failed: SyntaxError: Octal literal in strict mode (14914:23)

  14912 | 		 */
  14913 | 		getImageSize: function(stream) {
> 14914 | 		var pngMagicNum = "\211PNG\r\n\032\n",
        | 			            ^
  14915 | 			jpgMagicNum = "\377\330",
  14916 | 			gifMagicNum = "GIF8",
  14917 | 			pos = 0,

please help me to fix it.

emmet for requirejs does not make effective

this is my demo

require(['jquery', 'codemirror','codemirror/addon/emmet/emmet',  'codemirror/mode/htmlmixed/htmlmixed'], function($, CodeMirror,Emmet) {

    var CodeMirrorObj = {
        cms: {
            htmlCm: null
        },
        opts: {
            htmlOpt: {
                lineNumbers: true,
                mode: "text/html",
                theme: "monokai",
                indentUnit: 4,
                indentWithTabs: true
            }
        },
        init: function() {
            this.cms.htmlCm = Emmet(CodeMirror(document.getElementById("code_html"), CodeMirrorObj.opts.htmlOpt));
        }
    }
    CodeMirrorObj.init();
});

I need your help。

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Calle is deprecated

I don't know if this project is abandoned, but I notice that this plugin use olde javascript style like arguments.callee
Is anybody updating this? If it doesn't please some bod could mark it as abandoned or closed or so..
Thanks

change Merge Lines shortcut key order

I'm a Windows user.

Somehow, Merge Lines doesn't work with the Default keybindings : Shift-Cmd-M, but does work if change to Cmd-Shift-M.

It's strange, but can you switch the order?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/2532605-change-merge-lines-shortcut-key-order?utm_campaign=plugin&utm_content=tracker%2F438327&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F438327&utm_medium=issues&utm_source=github).

Caniuse data should be optional

ATM the only way to build the plugin without caniuse data is to patch emmet.js

import emmet from 'emmet';
import 'emmet/bundles/snippets';
// -- commented out
//import 'emmet/bundles/caniuse';

export default emmet;

Caniuse data is quite large and makes little sense in a web-based editor like codemirror.
So we should have a way to opt-out and cut-down the bundle size by half.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Scss personals Snippets

Hi,

I'm trying to use some personal snippets using the scss profile, but with no real success ^^

running this in a browser

// Init CodeMirror
editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    mode: 'text/x-scss',
    profile: 'scss', /* define Emmet output profile */
}); 
// Add user Snippets
emmetCodeMirror.emmet.loadSnippets({
  "scss": {
	    "snippets": {
		  '!': "!default",
	          'mix': "@mixin $1($2){\n|\n}",
		  'func': "@function $1($2){\n|\n}"
	    }
	  }
	});
emmetCodeMirror(editor);

always return an error in console Cannot use 'in' operator to search for 'tag_case' in scss.

maybe it's just cause i'm using this in browser, or i've misunderstood something….

Support for CodeMirror 5.x

Hello, reading from the docs it seems that this plugin should work on CodeMirror 4.x+, but I can't get it to work with CodeMirror 5.5. Am I doing something wrong or it's just that the plugin doesn't support CodeMirror 5.x?

Thank you.

"Exact Match" behavior

Example:

Type "width" + TAB. It will Emmet-out to "widows: "

See:

It differs from how Emmet works in Sublime Text. Maybe that's good? Maybe it's some newer code that could be moved to this?

toggle emmet plugin on/off

I've successfully initialized the Emmet plugin for CodeMirror using emmetCodeMirror(), but is there a way to destroy it or stop it from running? What I'm trying to do is create a toggle that switches the plugin on and off. Starting it is easy, but I'm not sure if there's a way to stop it and then start it back up on a click event.

I'm running CodeMirror 5.13.2 if that makes any difference.

breaks WordPress add media dialog

Tested in latest WordPress 4.1, nothing earlier, if I Include emmet.js on any admin page that includes the "add media" dialog it throws several Uncaught TypeError: undefined is not a function...

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

ountries parts of brics

Destructing Instance

I was just curious to know if there's a way of calling a destruct on codemirror / emmet to have the visual elements disappear and no longer listening for events on the textarea specified?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of emmetio/codemirror!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library emmetio/codemirror is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "emmetio/codemirror",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Update to CodeMIrror 3.1

As far as I see the only change that has to be done is replace throw CodeMirror.Pass; with return CodeMirror.Pass;

Add 'text/x-styl': 'stylus' to the modeMap

Add 'text/x-styl': 'stylus' to the modeMap editor.js

        modeMap: {
            'text/html': 'html',
            'application/xml': 'xml',
            'text/xsl': 'xsl',
            'text/css': 'css',
            'text/x-less': 'less',
            'text/x-scss': 'scss',
            'text/x-sass': 'sass',
            'text/x-styl': 'stylus'
        },

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Extending emmet to handle JS comment toggling

Hey, this is Oskar from JSFiddle.

We have emmet enabled by default in JSFiddle, and always had the issue that a HTML comment is toggled within the JavaScript panel. Was looking into extending emmet to handle JS comments but can't figure out a good way to do so.

Any tips would be really appreciated.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

No emmet keymaps?

http://jsbin.com/vesitil/1/edit?html,output

h1<tab> but nothing happened.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/39565624-no-emmet-keymaps?utm_campaign=plugin&utm_content=tracker%2F438327&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F438327&utm_medium=issues&utm_source=github).

Haml Nesting Issue

table>tr>td>a

produces:

%table
  %tr
    %td%a{:href => ""}

which isn't quite right (the a should be nested too).

It happens in CodeMirror Emmet, but also in Sublime Text.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/7994689-haml-nesting-issue?utm_campaign=plugin&utm_content=tracker%2F438327&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F438327&utm_medium=issues&utm_source=github).

mixed tabs and spaces

Case 1

In the expand abbreviation demo, when you "try it yourself" and expand an abbreviation like ul>li, the <li> will be indented with a tab, even though the code in the editor is indented using spaces.

Case 2

JS Bin uses Code Mirror and the emmet plugin. This same bug exists in reverse there: jsbin/jsbin#2153 The child gets indented with 2 spaces though the editor is configured to indent with tabs and all preexisting html is also tab-indented.

How to use user snippets with emmet for codemirror?

Request for some docs or demo.
This stackoverflow article didn't help.

codemirror 4 support

In Chrome DevTools we just updated to CM4.

We'd be very interested in using this plugin directly inside DevTools if it's compatible.

ref: http://code.google.com/p/chromium/issues/detail?id=360242
cc @aslushnikov

Build without Lodash?

Is there a way to build emmet.js without lodash being baked right into the file? Like lodash is already available globally so it just uses that?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/2969098-build-without-lodash?utm_campaign=plugin&utm_content=tracker%2F438327&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F438327&utm_medium=issues&utm_source=github).