Feature request: Replace "Go to line" panel with custom component

v6
1

Hi! I have successfully customized the search panel with my own component thanks to the guidance at Replace default search panel with my own component

I am hoping to do the same thing with the “Go to line” panel. I am able to style it mostly well enough with pure CSS, but to meet my organization’s style guide we need a slightly different DOM structure.

Would it be possible to do as was done for the search panel, and expose a createPanel option or something to that effect? Even if I had just a mount option, that would be enough to adjust the DOM as needed. I would also prefer a top option as well so it can be aligned to the top just like I have the search panel.

Thanks for all you do!

2

I would recommend you just fork it. It’s only some 80-odd lines. Since the only interface it exposes at the moment is a single command, there’s not a lot of surface for passing in options anyway.

1 Like
3

Thanks! I have attempted this and almost have it fully working. My issue is I can’t seem to get the dialogEffect.of( false ) to work, and so I can’t hide the panel after it is shown.

Is the StateEffectType supposed to be in the same scope as the EditorView, or something? I noticed the update() method of the StateField searches for effects in the transaction object, but in my case it never finds a match:

update( value, transaction ) {
	for ( let e of transaction.effects ) {
		if ( e.is( this.myStateEffectType ) ) {
			console.log( 'found', e.value );
			value = e.value;
		}
	}

	return value;
},

“found” is never printed to the console in my testing.

I also went off of the CodeMirror Panel Example in my implementation. The example code has create: () => false on the StateField definition, while the gotoLine implementation has create: () => true. I had to use the latter in order for the panel to actually show.

Any ideas?

4

You can now see what I’m talking about by reviewing this demo. After hitting Alt+g, you see the panel (never mind the bad styling), and indeed it works as expected. However, after hitting “Go”, Enter, or Escape, the panel is not hidden. See also the Log for some helpful output.

5

I figured it out! The CodeMirror Panel Example sets the update method of StateField.define() like the following:

update(value, tr) {
  for (let e of tr.effects) if (e.is(toggleHelp)) value = e.value
  return value
},

I had to change this to:

update: (value, tr) {
  for (let e of tr.effects) if (e.is(toggleHelp)) value = e.value
  return value
},

If anyone reading this wants a fully working demo, here it is.

Thanks again for your help, and apologies for the flurry of comments in what essentially amounted to rubber duck debugging :slight_smile: