Pressing [tab] does not align to next tab position

v6
1

Hi,

Wondering if there is any way to achieve tab alignment to next tab position.

-- expected:
  |
s |
ss  |
sss |
ssss  |

-- expected:
   |
1  |
12 |
123   |
1234  |

-- status quo:
   |
1   |
12   |
123   |
1234   |
2

By default, pressing tab moves focus out of the editor. If you bound something else to tab, you’ll have to look into what your code is doing there.

3

Hi @marijn,

I hope you’re doing well.
I’m using the example here - CodeMirror Language Config Example

4

That binds tab to indentMore, which inserts an indent unit at the start of the line, but your screenshots show space added to the end of the lines.

5

OK my bad, sorry for incomplete information.

This is command which we’ve added based on existing codemirror code. It essentially will indent the complete line only if selection exists. Otherwise add add indent at cursor.

function insertTabWithUnit({ state, dispatch }) {
  if (state.selection.ranges.some(r => !r.empty))
    return indentMore({ state, dispatch });
  dispatch(state.update(state.replaceSelection(state.facet(indentUnit)), { scrollIntoView: true, userEvent: 'input' }));
  return true;
}

And in using keymap I’ve bind:

{
    key: 'Tab',
    preventDefault: true,
    run: insertTabWithUnit,
    shift: indentLess,
 }
6

CodeMirror 5 used to work as expected. What do you suggest?

7

Hi, Any suggestions please?

8

Hi @marijn,

Is there any update on this please?

9

No. The problem is with your own code, as evident from the command you pasted, and I’m not providing support for that.

10

Hi @marijn,

Can you give me an example from CodeMirror for using tabs with correct indentation for reference?

11

No, sorry, I cannot. Figure out what ‘correct indentation’ means for you, and then design code that produces the effect you’re looking for. I am not available to write your code for you for free.

12

No problem. Thank you for your support.

13

Late post, but I managed to get it working with:

function insertTabWithUnit({ state, dispatch }) {
  if (state.selection.ranges.some(r => !r.empty))
    return indentMore({ state, dispatch });

  // If indent is space based, then calc the number of spaces required.
  let indentVal = state.facet(indentUnit);
  if(indentVal != '\t') {
    const line = state.doc.lineAt(state.selection.main.head);
    indentVal =  ' '.repeat(indentVal.length - (state.selection.main.head - line.from) % indentVal.length);
  }
  dispatch(state.update(state.replaceSelection(indentVal), { scrollIntoView: true, userEvent: 'input' }));
  return true;
}