API for getting editor code div's and span's


#1

I’m trying to fetch the editor content only for the code written in the editor (excluding the gutter content) on each change in editor.

For example if I have a code written in editor as below :
code

The corresponding HTML content will be :
html

Now I want to get each of the span text (from all codemirror lines) along with its classes. i.e. the output I want (taking example of 1st line):

output = [{text: "VARIABLE1", class: "cm-dimension"},{text: "+", class: "cm-operator"},{text: "VARIABLE2", class: "cm-dimension"}]

Just wanted to know if there a way i can access this div’s content (along with its textNode and class) using the codemirror instance api.


#2

The editor’s DOM structure isn’t something that it exposes through its interface. You can of course just query the DOM inside the editor, but it’s probably cleaner to write something on top of getLineTokens.


#3

Thanks. I think getLineTokens suits my requirements. I’m assuming the first argument is the line number from which we want to fetch the tokens right?
I want to fetch the tokens from all the lines again, every time there’s a change in editor (because the change might be in any of the previous lines too). However, I tried using this and observed some unexpected behaviour. Here’s what my code looks like :

editor.on("change", function (cm, event) {

        console.log("line1",cm.getLineTokens(1));
        console.log("line2",cm.getLineTokens(2));
    })

Taking an example, if I type something like this in editor :
code1

The corresponding console.log looks like this (the two red areas denote the console log when each line is completely typed):

The first red area is not an issue because there i’m trying to fetch content of 2nd line even though it doesn’t exist (this could be solved using getLineCount).

However, when the cursor is on the 2nd line (2nd red area) both console logs give the same tokens output i.e. from the 2nd line. Ideally it should give 2 different outputs(1st console should give tokens in 1st line and 2nd console should give tokens in 2nd line).It is not able to fetch the tokens from 1st line.

Could you please tell me If i’m doing something wrong here?


#4

Line numbers are 0-based in the current interface, so try asking for 0 and 1. (They are also clipped, so asking for a line past the end gives you the last line.)


#5

Got it. Working perfectly now.