CodeMirror 6 set indentation unit

1

I want to set indentUnit to four spaces instead of the default two in CM 6 using just the defaultHighlightStyle with no additional syntax highlighting.

Can anyone provide an example setup for that to help a beginner?

Let me just add that I did go through the documentation and tried to wrap my head around the facet concept and how to mod a value like this. The solution escapes me, and googling didn’t bring many clues regarding CM6.

… so take this as a humble question as well as an anecdote about a beginners experience diving into CM6 (which is an amazing product in so many ways).

1 Like
2

You need to add indentUnit.of(" ") (four space, which the forum seems to collapse) from @codemirror/language to your configuration.

3 Likes
3

It works, thanks, I appreciate it!

4

@larsp @marijn

You need to add indentUnit .of(" ") (four space, which the forum seems to collapse) from @codemirror/language to your configuration.

Does “add to my configuration” mean add another extension to my EditorStateConfig?

If so, where do I get indentUnit from? Do I import it from somewhere?

Some places I have tried to find it:

import {Indentation} from '@codemirror/language'
Indentation.indentUnit

import {LanguageDescription} from '@codemirror/language'
LanguageDescription.indentUnit
5

Yes.

Yes, from @codemirror/language. There’s no Indentation export, just import indentUnit directly.

1 Like
6

@larsp @marijn can you please provide an example about how you have solved this issue?

I tried using reactjs:

import {indentUnit} from '@codemirror/language';


<CodeMirror            
            value={jsonText}            
            width="100%"                        
            extensions={ [ json({ jsx: true }, indentUnit.of(8)) ] }            
          />

and I tried directly using the doc example:

let state = EditorState.create({
          extensions: [
            basicSetup,       
            json({ jsx: true }),     
            indentUnit.of("          "),
            tabSize.of(EditorState.tabSize.of(10))
          ]
        })
        
        let view = new EditorView({
          state,
          parent: document.body
        })

but it does not work… I want to view only json value, and I want to set the ident to values like 2, 4, 8, 10, or 0

7

This solved it for me:

import { indentUnit } from “@codemirror/language”;
…
<CodeMirror
extensions={[python(),…, indentUnit.of(" ")]}
…