codemirror / website

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.

website's Issues

Spelled theme wrong.

On the extensions docs page, if you go under the sub-heading "Presentation", then go on the line under the sub-sub-heading "Styling", theme is spelt wrong. In this file it is on line 60 just before the brackets.

This expects to be checked out inside a (installed) codemirror/dev repository (it needs access to the sources to build the reference docs).

This expects to be checked out inside a (installed) codemirror/dev repository (it needs access to the sources to build the reference docs).

Hi. Where, please? Git complains if you try to clone two things in the same physical location

Does this go in %/website ?

description in examples/collab hard to understand

LINK

The reason local updates are confirmed through the same mechanism as remote updates is that we want to handle the case where the push request successfully arrives at the authority, but the network fails before the response comes back to the peer. If confirming local changes only happened on pull, it would be hard to resynchronize with the authority after such an event.

In this "If confirming local changes only happened on pull" sentence, do you actually mean "push" rather than "pull"? "push" makes sense to me.

try editor: cmd+enter loses focus (minor)

It does reload the Codemirror instance but the editor loses focus.

JetBrains url in Sponsors has a typo

The URL for the JetBrains sponsor is:
https://www.jetbtrains.com/
when it should have been:
https://www.jetbrains.com/

Weirdly enough there's already a website at the wrong URL and that could be misleading.

Zebra Stripes Example is broken

Page:
https://codemirror.net/6/examples/zebra/

Console error:

codemirror.js:530 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.ͼ1 zebraStripe@light {background-color: #f4fafa;}'.
at StyleSet.mount (https://codemirror.net/6/codemirror.js:530:139)
at Function.mount (https://codemirror.net/6/codemirror.js:529:60)
at EditorView.mountStyles (https://codemirror.net/6/codemirror.js:1123:784)
at new EditorView (https://codemirror.net/6/codemirror.js:1093:803)
at https://codemirror.net/6/examples/zebra/zebra.js:7:218
at https://codemirror.net/6/examples/zebra/zebra.js:7:426

Some links in the Codemirror 5 to 6 migration guide are broken

Some of the links for the migration guide are broken, the broken links I've found so far are located in the Configuration section, specifically the reconfigure link.

Styling bug leads to non-visible text

The feature

In your collaborative editor example, <input> elements are transparent, allowing the bar's purple background to show through, and white text is used as accent.

 

 

 

The bug

The relevant <option>s are unstyled, and white backgrounded by default, meaning only the currently selected one is practically visible.

 

 

 

Proposed fix

I will deliver a PR which adds a rule in the site inline style block, to style the options to match the theme rather than to keep the transparent backgrounds.

Examples

These need to be written, at the very least:

• Creating a language mode
• Dynamic configuration
• Collaborative editing
• Internationalization
• Decorating
• Tooltip/panel use
• Autocompletion
• Linting
• Custom autocompletion
• Creating/using highlighters
• Writing a theme
• Nested parsing (including a template-style language)

Changelog link leads to examples

The "Changelog" link on https://codemirror.net/6/docs/ leads to https://codemirror.net/6/examples/

Theme docs need tweaking for $ syntax and extensions via state not view

The sample theme in the Styles and Themes section of the docs doesn't work for me with @codemirror/view v0.17.7. So far as I can tell it needs to pass the extension via state not directly to the view and be updated for the $ prefix.

I got it working with this code:

let view = new EditorView({
  state: EditorState.create({
    extensions: EditorView.theme({
      $content: { color: "orange" }
    }), 
  })
);

Some of the surrounding text might need tweaking to explain the $ prefix too.

Thanks for the really helpful overview docs 😄

typescript type in javascript code sample

website/site/docs/migration/index.md

Lines 414 to 416 in 04b40d1

	```javascript
	import {StateField, StateEffect} from "@codemirror/state"
	import {EditorView, Range, Decoration} from "@codemirror/view"

runtime error

SyntaxError: The requested module 'node_modules/.vite/deps/@codemirror_view.js' does not provide an export named 'Range'

Docs for CodeMirror 5

Are the docs for CodeMirror 5 still hosted somewhere? 6.0 is only four hours old so I haven’t yet had time to upgrade. :')

code { margin: 0 2px } in site.css breaks the alignment of the 1st line in pre > code

The code:

code { margin: 0 2px }

in:

https://github.com/codemirror/website/blob/master/site/style/site.css#L285

will also give a 2px margin to the start or the first and the end of the last line of pre > codes, or the code blocks.

---

Another line of the code:

pre > code { margin: 0 }

will fix it, but I suggest to remove the margin, as it is not very essensial, <code> won't kill the width of the blank characters.

The Try link is not on every page

Hi, I noticed that the link of the new Try page is not on the navigation of every page. I didn't find out how to do it so.

non-editable javascript editor at top of home page

At the moment, https://codemirror.net/ has this text near the top:

This is a CodeMirror field, configured for editing JavaScript code.

Is that text supposed to be in or under an editable field? On my platform there's nothing editable there. It's being rendered as:

<div id=editor></div>

<p>This is a CodeMirror field, configured for editing JavaScript code.</p>

Chrome 101.0.4951.54 on Linux

Live Demo/Playground on Codemirror.net

It would be nice.

Split View documentation - Typescript: Expected 0 type arguments, but got 1.

Typescript error:
TS2558: Expected 0 type arguments, but got 1.

let syncAnnotation = Annotation.define<boolean>()

removing <boolean> worked,
let syncAnnotation = Annotation.define()

I'm not sure how to put in a PR for the documentation, or if this is just specific to a certain tsconfig I'm running and might help someone in the future.

Split view example should discuss history handling

And implement a shared history.

minor: no favicon

The following may be sufficient.

<link rel="icon" href="/style/logo.svg">

update SEO docs so codemirror 5 is less prevalent in google searches

Steps to reproduce:

1. google 'CodeMirror docs'
2. press first link

Expected behavior:

Arrive at most recent up-to-date documentation

Resulted behavior:

Arrive at https://codemirror.net/5/doc/manual.html , the documentation pointing towards the previous version.

Comments:

It is unclear from reading the google search result to which CodeMirror the link is pointing to. As it is unclear from the docs which parts of the API are deprecated and which parts aren't, I have no valuable information to find on this link. So it is a bit a 50/50 chance everytime I google for the CodeMirror-docs.