Making Codemirror 6 respect indent for wrapped lines

v6
1

Is there an analogous way to handle line-wrapping with indent in CodeMirror6, similar to how it’s done in the previous versions of CodeMirror? (As shown in this demo: CodeMirror: Indented wrapped line demo). What would be the analogous version of “renderLine”?

2

I made some progress and attempted to do this by applying the same styling changes as in the previous version to each line in the Viewport.

            EditorView.lineWrapping,
            EditorView.updateListener.of(update => {
              const view = update.view
              var charWidth = view.defaultCharacterWidth
              var basePadding = 4
              view.viewportLines(line => {
                // get the element for each line
                const domAtPos = view.domAtPos(line.from);
                
                // get the actual line
                const lineObj = view.state.doc.lineAt(line.from);

                const tabSize = view.state.tabSize;

                // get the offset width
                const off = countColumn(lineObj.text, 0, tabSize) * charWidth;
                
                // apply the styling changes
                domAtPos.node.style.textIndent = "-" + off + "px";
                domAtPos.node.style.paddingLeft = (basePadding + off) + "px";

                console.log(line);
                console.log("tabSize: " + tabSize)
                console.log("charWidth: " + charWidth)
                console.log(off)
              })
            }),

However, this seems to somehow cause the line-wrapping behavior to break completely. Do you have any suggestions?

3

Never mind, I’ve realized that the countColumn method from Text is not the same as the countColumn method in CodeMirror from the previous version. Using the old countColumn did the trick.

4

For people coming here from google for indented wrapped lines, I made a rough plugin that does it using a line decorator:

The imports might be wrong because my project doesn’t do normal bundling, let me know if that’s the case.

1 Like
5

I managed to retain the indent while doing line-wrapping by replacing the default break-word css prop on the .cm-lineWrapping class:

 ".cm-lineWrapping": {
      wordBreak: "break-all",
  }
7

(Heyy I work together with Michiel)

We found out that you can use the CSS unit ch so you don’t need to measure the font width. You can find our updated plugin here: