`lineWrapping: true,` fails with TS error and does not work

v6
1

image
image852×718 68.2 KB

Have above code. Here in text:

      const currentView = new EditorView({
        lineWrapping: true,
        state,
        parent: ref,

Get error:

Argument of type '{ lineWrapping: boolean; state: EditorState; parent: HTMLElement | undefined; dispatch: (transaction: Transaction, editorView: EditorView) => void; }' is not assignable to parameter of type 'EditorViewConfig'.
  Object literal may only specify known properties, and 'lineWrapping' does not exist in type 'EditorViewConfig'.

I try activate it here.

Not sure what I am doing wrong. I thought that’s how you can add line wrapping to CodeMirror v6.

Thanks for all the help. :heart:

2

As the type error tells you, lineWrapping isn’t an option that exists here. The way you enable line wrapping in CodeMirror 6 is to include EditorView.lineWrapping in your set of extensions.

1 Like
3

Just tried it

image
image1072×366 39.5 KB

and it doesn’t line wrap

CleanShot 2023-11-12 at 16.41.17@2x
CleanShot 2023-11-12 at 16.41.17@2x2512×1152 194 KB

unless i miss something

I made sure to refresh the browser too

4

Make sure the editor is in an element that has a limited width. In horizontal flexboxes you sometimes have to add a wrapping element.

5

Did not help sadly

      <div style={{ "max-width": "100%" }}>
        <div
          ref={editorRef}
          class="dark:bg-neutral-900 bg-white flex flex-col gap-4 py-10 pr-10 pl-2 h-full"
          style={{ width: "100%" }}
        />
      </div>

editorRef is the CodeMirror.

image
image2248×926 237 KB

Still no line wrapping.