Making Codemirror 6 respect indent for wrapped lines

Mitcheljager · May 10, 2024, 1:48am

@fonsp Thanks for that! I adapted your version to not use any dependencies other than Codemirror itself. I removed the React bit and replaced the Lodash for loops.

Just in case anyone else comes along looking for a similar solution:

github.com

Mitcheljager/workshop.codes/blob/8b68d9c76f9d274055114dc7ed54594f78252681/app/javascript/src/utils/codemirror/indentedLineWrap.js

// Adapted from https://github.com/fonsp/Pluto.jl/blob/eb85b0d34b05ee02e61c0316e6f2ea901afe9ab4/frontend/components/CellInput/awesome_line_wrapping.js

import { EditorView, Decoration } from "@codemirror/view"
import { StateField } from "@codemirror/state"

export const getStartTabs = (line) => /^\t*/.exec(line)?.[0] ?? ""

const getDecorations = (state) => {
  const decorations = []

  for (let i = 0; i < state.doc.lines; i ++) {
    const line = state.doc.line(i + 1)
    const numberOfTabs = getStartTabs(line.text).length
    if (numberOfTabs === 0) continue

    const offset = numberOfTabs * state.tabSize

    const linerwapper = Decoration.line({
      attributes: {
        style: `--indented: ${offset}ch;`,

This file has been truncated. show original

Along with a little bit of (S)CSS. In my case I am using indent and active line markers, which both needed to have the indent size offset set back equal to negative the indent size, to account for the margin.

github.com

Mitcheljager/workshop.codes/blob/8b68d9c76f9d274055114dc7ed54594f78252681/app/javascript/scss/editor/_codemirror-6.scss#L275-L290


      
          .indented-wrapped-line {
            margin-left: calc(var(--indented));
            text-indent: calc(-1 * var(--indented));
          
            &.cm-activeLine {
              box-shadow: calc((-1 * var(--indented)) + 4px) 0 0 rgba($white, 0.025)
            }
          
            &.cm-indent-markers {
              &::before {
                left: calc(var(--indented) * -1);
              }
            }
          }