GN-4732: ensure variables are selected/focused after insertion

[elpoelma]

Overview

This PR introduces some changes into what happens after inserting a variable node.

Before this PR:

• A text-cursor is set just after the inserted variable (the variable is not focused)
• This causes different issues on both chromium and firefox
  • On chromium: no text-cursor is shown
  • On firefox: a text-cursor is shown, but does not act as a real selection (typing does not work)

Modifications introduced in this PR:

• After variable insertion, the variables is selected/focused, allowing users to directly interact with them
• Similar to how addresses/links behave
• Works on both firefox and chromium

connected issues and PRs:

Solves GN-4732

How to test/reproduce

• pnpm start
• Insert a variable (text, number, codelist, location or date)
• Notice that the variable is selected/focused after insertion, you can directly interact with them

Challenges/uncertainties

I can also add this fix to the stable version of the plugins package, to ensure we can release this fix when releasing to prod.

Checks PR readiness

• UI: works on smaller screen sizes
• UI: feedback for any loading/error states
• Check if dummy app is correctly updated
• Check cancel/go-back flows
• changelog
• npm lint
• no new deprecations

[dkozickis]

One non-blocking comment. Otherwise works 🙏

[abeforgit]

would be even better if the placeholder inside the variables that have one would be selected, you think that's doable?

[elpoelma]

would be even better if the placeholder inside the variables that have one would be selected, you think that's doable?

That would be nice indeed:

• At the moment, this is quite hard to do, as the selection/state of the embedded editor/main editor are quite seperated
• I have some ideas to improve the integration of embedded editor, in order to ensure that selections/states are shared in a better way. In this case the selection of the main editor would also be updated when changing the selection in the embedded editor. The developer using our editor would not even need to care/be aware of the embedded editors. This approach would be similar to https://prosemirror.net/examples/codemirror/

[abeforgit]

sounds good, lets merge for now then since it's already an improvement