codemirror/website

CodeMirror website

This repository holds the sources for the website for CodeMirror.

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

npm i
npm run build
ls output # ← the website is in there

website's Issues

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)

Split view example should discuss history handling

And implement a shared history.

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.

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'

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.

minor: no favicon

The following may be sufficient.

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

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.

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.

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

Could we have more extensive examples?

Getting started with CodeMirror is a significant learning curve.
There are some examples of things useful for extension development but not as many of the basics.
It would be great if we could have examples of all of the following, geared toward first-time users (like me):

• Creating an editor
• Deleting an editor (do we need to delete the view/state?)
• (Dynamically) changing the highlighting language
• Specifying/customizing the highlighting color theme
• Querying undo state to see if document has changed
• Resetting undo state when loading another document
• Having a function called on each change

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 ?

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.

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. :')

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.

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.

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 😄

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.

Live Demo/Playground on Codemirror.net

It would be nice.

Changelog link leads to examples

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

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.

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