1

I'm playing with CodeMirror to check if I can use it in our site to allow the user to write c# scripts. I can made a sample easily but I can't find any documentation nabout to get the text value of the editor to send through a form post.

JS Source:

import {StreamLanguage} from "@codemirror/language"
import {csharp} from "@codemirror/legacy-modes/mode/clike"

import {EditorView, basicSetup} from "codemirror"

let editor = new EditorView({
  extensions: [basicSetup, StreamLanguage.define(csharp)],
  parent: document.getElementById('_formengine_script')
})

index.html:

<!doctype html>
<meta charset=utf8>
<h1>CodeMirror!</h1>
<div id="_formengine_script"></div>
<script src="editor.bundle.js"></script>

I think that there must be various ways to solve it but I can't any of them. I've found a lot of information on CodeVersion 5, but I would prefer to use the latest version.

Marc
  • 1,359
  • 1
  • 15
  • 39

2 Answers2

3

Ran into the same problem. The codemirror 6 documentation is odd. It contains lots of deep dives but lacks of the basics.

I ended up looking into the unit tests rather than the documentation. You find there a nice test in the history module, the test changes the document and then checks if the document contains the expected data.

Based on this, assuming editor is a reference to your EditorView, you endup with the following:

editor.state.doc.toString();

Update: Just after writing this I stumbled upon https://codemirror.net/docs/migration/ just go there to the "Getting the Document and Selection" chapter. It contains the examples your searched for.

Akash
  • 13,107
  • 1
  • 25
  • 19
user2468193
  • 31
  • 2
  • Thanks for yout contribution, but your code cannot help me to get the selection neither the link you provided. Note that I'm newbie in ES6 modules and I'm a bit lost. My goal will be to get the selection on the javascript console. – Marc Jul 18 '22 at 13:09
  • @user2468193 Interesting to know how you found the solution. – Akash Dec 04 '22 at 03:20
0

Editor allows to mark more than one selection range at once (example below) enter image description here

You can get all of the selected ranges using this piece of code

editor.state.selection.ranges

Here an example how to get first selected text from all ranges.

let firstRange = editor.state.selection.ranges.at(0);
let selectedText = editor.state.doc.toString().substring(firstRange.from,firstRange.to)
console.log(selectedText); //output: 'ECT * FR'

The multimode selection can be disabled, but the way which you access the selected range stay the same.

radekpakula
  • 99
  • 4