Codemirror 6 / Single Line and/or avoid carriage return.

v6
1

Hi Marijn, please let me thank you for this great work!

Please, let me know if this source piece it’s OK or it’s a bad practice to avoid carriage return to simulate a single line input:

const Editor = new EditorView({
  state: EditorState.create({
    doc,
    extensions: [
      history(),
      oneDark,
      oneDarkHighlightStyle,
      basicSetup,
      keymap.of([defaultTabBinding]),
      css(),
      EditorView.updateListener.of(update => {
        const docString = Editor.state.doc.toString();
        // Avoid carriage return
        if (update.docChanged && (docString.match(/\n/g) || []).length) {
          // Undo changes
          undo(Editor);
        } else if (
          update.docChanged &&
          me.value !== docString &&
          window.CSS.supports("width", docString)
        ) {
          // Update Vue state
          me.value = docString;
        }
      })
    ]
  }),
  parent: this.$refs.editor
});

Many thanks! :slight_smile:
2

A better way to do this would be a transaction filter that forbids multiline changes. Something like…

EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr)
4 Likes
3

Thanks very much! it works!