codemirror / codemirror5

In-browser code editor (version 5, legacy)

CodeMirror 5

NOTE: CodeMirror 6 exists, and is more mobile-friendly, more accessible, better designed, and much more actively maintained.

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code.

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.

You can find more information (and the manual) on the project page. For questions and discussion, use the discussion forum.

See CONTRIBUTING.md for contributing guidelines.

The CodeMirror community aims to be welcoming to everybody. We use the Contributor Covenant (1.1) as our code of conduct.

Installation

Either get the zip file with the latest version, or make sure you have Node installed and run:

npm install codemirror@5

NOTE: This is the source repository for the library, and not the distribution channel. Cloning it is not the recommended way to install the library, and will in fact not work unless you also run the build step.

Quickstart

To build the project, make sure you have Node.js installed (at least version 6) and then npm install. To run, just open index.html in your browser (you don't need to run a webserver). Run the tests with npm test.

codemirror5's Issues

Weird scrolling

(Observed on Chrome 9 Mac, JS demo)

When going off the bottom of the editor with my cursor, it will first scroll by a little bit a few times (as indented), but as I keep going, it'll suddenly jump down a whole screen's worth, which is jarring.

onChange doesn't work as expected

Following the manual:

onChange (function)
When given, this function will be called every time the content of the editor is changed. It will be given the editor instance as only argument.

I setup this handler in an instance of CodeMirror 2 and it's executed only on component creation time, on setValue() and when 'delete' key is pressed. I would expect onChange to be executed on every keystroke that results in editor's content change.

It tried this in Chrome 10 and Firefox 3.6.

So, is the described behavior correct or is it a bug? I can simulate the requested behavior with onKeyEvent, but this would require me to check my self if a keystroke would result in editor's content change.

Weird issue when applying certain styles to textarea...

Hi!

So, my CodeMirror was lagging like crazy in Chrome, like I reported earlier, due to unknown reasons. Today I finally had some time to spare and tried to dig into this issue. I am glad to say after a LOT of trial and error I pinpointed the cause.

It's nothing to do with JS, it's in CSS. And it's not even to do with CSS applied to CodeMirror...

Adding the following CSS to the index.html in the root of the project will make the editor go berserk in chrome:

textarea {
    width: 100%;
    padding: 0;
    border: 0;
}

I don't know why, or how... but this just makes CodeMirror lag like crazy, and the cursor won't position properly etc. Of course this is very much a cornercase, but I find it pretty curious nonetheless.

Hope this helps.

Chiel

Comments would also be nice

No overkill like I initially had in CM1, but some of the more interesting parts of the code could really use clarification.

selecting doesn't scroll if mouse isn't moving

start selecting and move mouse out of editor
view scrolls only on mousemove events, but should scroll all the time while mouse is outside

can't use undo after multi-line indentaion

mode -> htmlmixed
Select more than one lines and press TAB button.
Then try return indent using Ctrl+Z...

Backward selection not working properly in Chromium Linux

When selecting text backwards with the keyboard (using the left arrow key or up arrow key) it only selects for the first key event (one char to the left or one line upwards). Further key presses do nothing.

Happens on the example at http://codemirror.net/2/ with Chromium 12.0.710.0 (78857) Ubuntu 10.10

Decide whether keyHook stays or goes

(and whether a better interface can be invented for this)

Also: document it if it stays

iOS support

While this isn't exactly an issue, I figured this might be the best place to bring your attention to support for iOS devices (and possibly Android, Windows 7, etc.). Obviously this wasn't possible with CodeMirror 1 and its use of an IFRAME and contentEditable, but with very little modification to codemirror.js I was able to get a functional version on my iPad and iPhone. That said, I think the future of CodeMirror on mobile devices is very promising, but there are a couple issues I immediately noticed that may prove to be very simple to solve.

First, for devices with soft keyboards the hidden textarea needs to gain focus in order for the keyboard to appear on-screen. I was able to work around this by making the text area visible and giving it focus. After it's initial focus, the keyboard responded rather naturally (but not perfectly) to focusing and blurring on CodeMirror itself. Further testing is needed, but I think it would be possible to make the textarea "visible" and position it absolutely off the screen to accommodate this.

The other problem I noticed is that, when the textarea receives input and is out of the viewport, mobile Safari centers the display on the textarea. This seems like it would be easy to fix by setting the vertical position of the hidden textarea to the same line the "cursor" is on.

Let me know what you think, Marijn. And congrats and great work on CodeMirror 2!

Brace-aligning indentation doesn't take tabs into account

In, for example, the JavaScript mode, the line after this won't indent properly:

foo({

It shouldn't just count characters when determining the alignment of the brace, but also take tab width into account.

Dealing with the 'real' selection

It is currently possible (and will probably always remain possible) to start dragging above the editor, and end dragging below it, in order to select a chunk of the document that includes the editor. This will be somewhat confusing, as copying that text will include a randomly cut off part of the editor content.

However, the real problem is that it's also possible, by starting to drag somewhere in or near the editor where CodeMirror doesn't recognize the click as representing a character position, to select just a piece of the editor content, but select it as a browser selection, not a codemirror selection. This tends to look funny, and doesn't respond to editing as expected (you can copy, but you can't replace/delete/etc).

Maybe we can adjust the mouse coord reading code to make this less likely to happen. That still allows drag events starting (slightly) outside the editor though. It is not clear how to detect those.

.refresh() Doesn't update gutter height?

Hi!

I'm working on an app which will use CodeMirror2 as it's input editor. Everything is working great, except the way the height of the gutter updates. At the moment the height of the gutter gets updated every time a line gets added/removed, which is logical, but it doesn't seem to update when the codemirror instance gets resized.

I thought the best way to counter this, was to call .refresh() on the codemirror object, but it doesn't seem to help. I may be doing something horribly wrong, but it seems to me like .refresh() was created exactly for cases like this.

Looking forward to your reply!

Chiel.

Internet Explorer 9

Hi,

Surprisingly couldn't find an issue on this so I've created this. Just upgraded to codemirror 2.0, but I am having problems with it.

On IE 9 (9.0.8112.16421), the demo here http://codemirror.net/mode/javascript/index.html is not operating correctly. It seems to skip every so often, and not read the input of the keyboard. I will be typing code and letters will be missing. Even when deleting (i.e. backspace), it sometimes does not pick up on it.

Another issue in my own implementation is that the cursor doesn't line up on IE 9 (it's slightly below the line), and blank lines aren't working correctly (they dont appear unless you select it - it's weird), but it seems to work at the above example so maybe I have done something incorrectly. Not sure what though since it works fine on Firefox.

Hope someone can help!

Thanks.

shift-click selection is broken again

I fixed it at one point... seems I didn't apply enough duct-tape.

Full size editor

Hello, is it possible to make CodeMirror2 to be fullsize (full page size)? I added:
width: 100%; height: 100%; to the CodeMirror style and this works only under Chromium. Any another browser doesn't want to make editor with that size.

Any ideas?

Double-clicking a word does not select it

CodeMirror2 is slow in webkit

Hi Marijn,

When using CodeMirror2 in Chrome/Safari, it responds very, very slowly to text input, and the cursor remains at the left of the textarea at all times, even after the text appears. Couldn't find an issue about this specifically.

Best,
Chiel

Capturing cmd-key combos on Opera on Mac

Safari, Chrome, and Firefox set the metaKey event object property for the cmd key, and ctrlKey for control. Opera seems to do this the other way around.

But the real problem is that Opera Mac does not seem to generate any key event at all for cmd-a, cmd-z, and probably a bunch of other keys. This means we can not intercept these to do the right thing. I'll have to see how/whether other projects (Ymacs, ACE) handle this.

Opera Linux (and probably Win) doesn't seem to have this problem.

Highlight current line

Hi,

I was just wondering if there's going to be support for highlighting the currently selected line in some fashion, at some point. Do you have any plans regarding this?

Keep up the awesome work!

Chiel.

Changing mode dynamically

This is probably a feature request, or is it possible to do it with current version?
What I want to achieve is to use one editor for different code without reloading, like for javascript and php. If editor is in php mode then user is free not to use <?php in front of code, e.t.c

Using forward slash when editing PHP crashes script.

In the PHP demo here : http://codemirror.net/2/mode/php/ the following things happen around typing a forward slash:

1. Outside of any code tags a forward slash will remove any indenting you have (tabs or spaces).
2. When inside a tag (not php) a forward slash will:
   IF:
   Indentation in the above line is only using the tab character:
   Apply the same indentation of the above line to the current line.
   ELSE IF:
   Indentation in the above line has either spaces or both spaces and tabs:
   Apply what seems to be a random indentation depending somewhat on the line above.
   END.
3. When inside a php tag if the auto indent tab character is already there and a forward slash is typed, indentation on that line is removed.
4. When inside a php tag if YOU indent the code (either spaces or tab character or both) then type a forward slash the script crashes the page.

Google Chrome 10.0.648.133 (Official Build 77742) beta
WebKit 534.16 (branches/chromium/648@80788)
V8 3.0.12.30
User Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.133 Safari/534.16

Cheers
Charlie
[email protected]

Giving the CodeMirror CSS class a border should not screw up mouse-selection

It seems to somehow not take the border in account when computing offset coordinates, currently.

See why huge lines are so slow

One possible reason is that charFromX does a full binary search of the whole line (should use heuristic to be faster). But that only comes into play on clicks, normal cursor movement should be fast.

indentation issue

On 8b5c31d , each time I return to the line the text is indented.

XHTML matching and unclosed tag highlighting

how difficult would it be to add X/HTML tag-matching similar to SynWeb? which in my opinion has the most useful matching bracket+tag highlight of any editing component.

you can see a demo of how it handles unmatched tags, self closed tags etc. by cursoring back and forth through "<img /><span></span><div><img >" in DevPHP Portable: http://devphp.sourceforge.net/

thanks,
Leon

Inserting text deletes other portions on Chromium 12.0.724.0 (80289) (Ubuntu 10.10)

Opening http://codemirror.net/demo/mustache.html in Chromium 12.0.724.0 (80289), clicking for example in the middle of the 3rd line and entering text, a big chunk of the initial text disappears.

node is null

node is null
[Break On This Error] return node.textContent || node.innerText || node.nodeValue || "";

codemirror.js (line 1813)

I am getting randomly this error.
Narrowed down to following (a bit awkward description, sorry):
It appears using setValue(xxxx), where xxx is some code,
To repeat:

1. setting relatively large code, which leads to scroll bar to appear;
2. scroll down a bit, lets say 50 lines of code;
3. set value to something small, let's say 3 lines of code, which of course don't lead to scrollbar;
4. at this moment error is triggered.

Change polling gives up too quickly

On some platforms, pressing and holding a key doesn't result in immediate visible cursor movement. Probably because the key fires more slowly than CodeMirror expects, and thus the polling has already stopped when something happens.

Cursor Misaligned in Firefox 3.6.13 on Mac

In Firefox 3.6.13 on Mac, the cursor appears to be misaligned. This happens in the examples at http://codemirror.net/2.

Small preview: http://img267.imageshack.us/img267/4179/screenshot20110215at259.png

The problem does not seem to exist in Windows on IE, Firefox, or Chrome. The problem also does not seem to exist on any other Mac browsers.

Right-click menu copy/cut/paste does not work

Because the visible CodeMirror selection is not the real document selection. It might be possible to work around this by either

• Setting the document selection to the CodeMirror selection on right click (scary if whole document isn't visible)
• Somehow unhide the hidden textarea for a few ms, making sure it sits under the mouse.

ctrl-a selects all content on os x

I would expect command-a to select the content and ctrl-a to move the cursor to the beginning of the current line.

The editor shouldn't stop highlighting as soon as it finds a highlighted line

The line's meaning might have changed because of changes above it (think adding a quote, causing the next line to be string).

"Active line demo" doesn't work well for long lines

If you make the active line long enough to trigger overflow, then only the initial portion of the line will be highlighted. See this: http://img801.imageshack.us/f/codemirror.png/

Support common syntax mode specs

As in https://github.com/mozilla/skywriter/wiki/Common-JavaScript-Syntax-Highlighting-Specification

I'm holding out on this until ACE starts seriously working with this spec, but eventually it would be awesome if modes were portable.

Release Date (info)

Hi,

First of all well done with CodeMirror one i really like the customizations available. I would like to know if there are any plans when this should be released.

Function to reident selected /whole code

In CodeMirror1 there was a useful function reindent(). How to achieve the same functionality in CM2? Would be handy to have such a feature.

XML mode does not handle implicit closing tags like: <img src="..." />

Beta 1.

In XML mode, try typing this in:

<div>
<img src=""/>
</div>

You can't type it. It hangs before you close the img tag after typing "/", and won't allow you to type any further.

Needs demos

To show people how to do

• Code completion
• Markers
• Auto-resizing editor
• ....

Line wrapping support

Is it possible to enable wrapping single long line to multiple lines instead of scrolling?

toTextArea and rmSubmit not working

toTextArea method does not work - it throws exception probably because instance.div is null in #1515. Next problem - when I made an workaround for this (by adding id to the div and selecting it by getElementById) it says that rmSubmit is not a function.

Slow on IE6

Version two seems to easily outperform version 1 on all platforms except IE6.

I don't really care about IE6 all that much, but if someone wants to do some profiling (how do you even do that on IE6?) and suggest improvements, I'm open to that.

Implement electric characters

(And find a better term for them.)

Accommodating kerned spans in WebKit

Firefox is OK, but WebKit re-spaces spans by its own rules which throws off cursor placement whenever lines contain variable-width text. The result is that CodeMirror 2 currently can't support variable-width fonts, which is a problem CodeMirror 1 didn't have.

I've started experimenting with this, and it looks like as long as charX and charFromX are rewritten to account for this the problem should go away. If possible though I think it might be better to position the cursor relative to individual spans rather than from the beginning of the line, which eliminates the kerning issue altogether.

HTML parser bug

<script type="text/javascript">//<!--
foo();
//--></script>
<p>
  bar
</p>

After //--> code doesn't highlight properly.

No highlighting in one case in HTML mode

Not sure whether this is a codemirror.js or xml.js bug but, in the HTML demo, if I press enter at the end of the first line, and type , that line does not get colored. Adding similar closing tags in other places does work as expected.

Need a test-suite

Nothing too elaborate, but a page that runs through the API sanity-checking each method would be a good way to catch regressions

saveFunction status?

Noticed that saveFunction isn't implemented in CM2 - is this a TODO, or should we be implementing this on a different level (on the page itself, for instance)?

multi-line selection starting at the end of a line isn't visible on its first line

(a selected-style phantom space should be visible in this case, but isn't)

Add the current mode to the API

It'd be nice if a CodeMirror object had an API method / property containing the current mode. Or does it and I'm missing it?

IE9 key handling problems

[from askival]

Also, CodeMirror 2.0 beta 1 does render, and appears to work perfectly
at first glance, but certain simple keystrokes cause erroneous
behavior. For example, focus on the editor and press the down arrow.
The cursor moves to the right and then continues to move to the right
all on its own (as if you were holding down the right arrow key).
Syntax highlighting, however, seems to work just fine on 2.0 beta 1.