How to change Code Mirror properties like line wrap, linenumbers

[holyman2k]

I recently come across this library, I want to know how to change Code Mirror properties like line wrap, linenumbers

[jaywcjlove]

Example: https://codemirror.net/6/examples/gutter/

https://codemirror.net/6/examples/config/

@holyman2k

[jaywcjlove]

Line numbers extension: https://codesandbox.io/embed/uiw-react-codemirror-line-numbers-extension-5sphhu?fontsize=14&hidenavigation=1&theme=dark

import { EditorState } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { gutter, GutterMarker } from "@codemirror/gutter";

// https://github.com/codemirror/gutter/blob/442b7b1202cbf21d9ca5815157805da911c0dd2d/src/index.ts#L394

class NumberMarker extends GutterMarker {
  constructor(number) {
    super();
    this.number = number;
  }

  eq(other) {
    return this.number === other.number;
  }

  toDOM(_view) {
    return document.createTextNode(this.number);
  }
}

const formatNumber = (view, linenumber) => {
  return String(linenumber);
};

function maxLineNumber(lines) {
  let last = 9;
  while (last < lines) last = last * 10 + 9;
  return last;
}

const lineNumbersExtension = gutter({
  class: "cm-lineNumbers",
  renderEmptyElements: false,
  // markers(view) {
  //   return view.state.facet(lineNumberMarkers)
  // },
  lineMarker(view, line, others) {
    if (others.some((m) => m.toDOM)) return null;
    return new NumberMarker(
      formatNumber(view, view.state.doc.lineAt(line.from).number)
    );
  },
  initialSpacer(view) {
    return new NumberMarker(
      formatNumber(view, maxLineNumber(view.state.doc.lines))
    );
  },
  updateSpacer(spacer, update) {
    let max = formatNumber(
      update.view,
      maxLineNumber(update.view.state.doc.lines)
    );
    return max === spacer.number ? spacer : new NumberMarker(max);
  },
  domEventHandlers: {
    click(view, line, event) {
      console.log(
        "line number click",
        line,
        view.state.doc.lineAt(line.from).number
      );
      return true;
    }
  }
});

new EditorView({
  state: EditorState.create({
    doc: "hello\nhello\nhello\n",
    extensions: [lineNumbersExtension]
  }),
  parent: document.getElementById("app")
});

[jaywcjlove]

• Expression (press Shift+Enter for newlines) #271
• how to highlight some lines using version 4 ?  #217 (comment)

[jaywcjlove]

#316 (comment)

@holyman2k