New config files editor exhibits jarring experience when navigating through code

[mdziekon]

Mainsail Version:

develop (f108545)

Browser:

Firefox

Device:

Desktop PC

Operating System:

Linux

What happened?

Current develop branch (commit f108545), which includes the recently introduced file structure sidebar exhibits quite jarring experience when navigating and modifying config files via the web interface.

When navigating through code, whether using mouse or keyboard, it looks like the editor immetiately selects the entire line, instead of just moving the cursor to selected place. With mouse navigation, this means just the selection of the entire pointed line. With keyboard navigation, it selects the line (same as above), which introduces the need of additional keypress to eg. navigate to the next line. But the worst thing is - since it selects the entire line, any actual "input" with lead to the removal of current line's content and replacement with the newly input character.

What did you expect to happen instead?

• When single clicking anywhere on the editor, my input cursor is moved to that location, but that's all

How to reproduce this bug?

Scenario no. 1 (mouse navigation):

• Example use case: I want to comment out a line in my printer's config
• Open printer.cfg file
• Click anywhere in the editor where an actual config entry is present (eg. [mcu] definition line), at the beginning of that line
• (The line should become automatically selected as a whole)
• Try to type the # character

What happens:

• Previous line's content gets removed

What should happen:

• The # character is put at the beginning of the line

Scenario no. 2 (keyboard navigation):

• Example use case: I'm a keyboard-first user, I want to navigate from one config section to another using keyboard only
• Open printer.cfg file
• Navigate to any config section using any means (eg. [mcu] section)
• Try to navigate to the next config section using keyboard only, so using "down" keys

What happens:

• For every "move line down" action, I have to press the "down" key twice, first time to move the cursor to the end of the line, next time to actually move the cursor to the next line

What should happen:

• For every "move line down" action, I have to press the "down" key only once, as any regular text editor would do

Additional information:

On every erroneous "text replacing input", there's also an error being thrown to the console:

Reveal error no. 1

[Vue warn]: Error in v-on handler: "RangeError: Invalid line number in 128-line document"

found in

--->

at src/components/ui/Panel.vue


at src/components/TheEditor.vue

at src/App.vue
vue.runtime.esm.js:4605:20

Reveal error no. 2 (warning, garbage code formatting in spoiler)

RangeError: Invalid line number in 128-line document line index.js:18 gotoLine Codemirror.vue:119 activeChanges TheEditor.vue:429 VueJS 4 emitNodeCache VTreeview.ts:279 emitActive VTreeview.ts:276 handleNodeCacheWatcher VTreeview.ts:289 active VTreeview.ts:145 VueJS 12 lineChanges TheEditor.vue:435 lineChanges TheEditor.vue:433 VueJS 4 get cmExtensions/extensions< Codemirror.vue:92 update index.js:7025 dispatchTransactions index.js:6910 dispatch index.js:6932 applyDOMChange index.js:6218 flush index.js:6705 observer index.js:6403 DOMObserver index.js:6386 _EditorView index.js:6917 initialize Codemirror.vue:65 mounted Codemirror.vue:53 VueJS 17 reload vueHotReload:252 reload vueHotReload:250 tryWrap vueHotReload:121 TheEditor.vue:298 accept client.ts:559 fetchUpdate client.ts:476 queueUpdate client.ts:323 queueUpdate client.ts:323 handleMessage client.ts:176 handleMessage client.ts:174 setupWebSocket client.ts:91 setupWebSocket client.ts:90 client.ts:67 vue.runtime.esm.js:3049:16

---

Problems occur both when using Firefox or Chrome-based browsers.

---

I suspect the problem is related to how "line change" event is being handled:

• Codemirror's "line change" event is handled here:

  mainsail/src/components/TheEditor.vue

  Lines 431 to 444 in f108545

  	lineChanges(line: number) {
  	this.configFileStructure?.map((item) => {
  	if (item.line == line) {
  	this.structureActive = [line]
  	} else {
  	item.children?.map((child) => {
  	if (child.line == line) {
  	this.structureActive = [line]
  	if (!this.structureOpen.includes(item.line)) this.structureOpen.push(item.line)
  	}
  	})
  	}
  	})
  	}

• As seen in the code, it triggers a change in this.structureActive object
• This object is used by the treeview component, here:

  mainsail/src/components/TheEditor.vue

  Lines 65 to 73 in f108545

  	<v-treeview
  	activatable
  	dense
  	:active="structureActive"
  	:open="structureOpen"
  	item-key="line"
  	:items="configFileStructure"
  	class="w-100"
  	@update:active="activeChanges">

• On active change, the activeChanges handler is being triggered
• activeChanges handler, when triggered, triggers a gotoLine call in the editor, here:

  mainsail/src/components/TheEditor.vue

  Lines 427 to 429 in f108545

  	activeChanges(key: any) {
  	this.editor?.gotoLine(key)
  	}

If my understanding of the situation is correct, it seems the activeChanges should be limited to treeview induced changes only.