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

.changeset/wet-baboons-serve.md

@@ -0,0 +1,5 @@
+---
+"@lblod/ember-rdfa-editor-lblod-plugins": minor
+---
+
+Ensure that variables are node-selected/focused after insertion

addon/commands/index.ts

@@ -0,0 +1 @@
+export { default as replaceSelectionWithAndSelectNode } from './replace-selection-and-select-node';

addon/commands/replace-selection-and-select-node.ts

@@ -0,0 +1,24 @@
+import { Command, NodeSelection, PNode } from '@lblod/ember-rdfa-editor';
+
+const replaceSelectionWithAndSelectNode = (node: PNode): Command => {
+  return (state, dispatch) => {
+    if (!node.type.spec.selectable) {
+      return false;
+    }
+
+    if (dispatch) {
+      const tr = state.tr;
+      tr.replaceSelectionWith(node);
+      if (tr.selection.$anchor.nodeBefore) {
+        const resolvedPos = tr.doc.resolve(
+          tr.selection.anchor - tr.selection.$anchor.nodeBefore?.nodeSize,
+        );
+        tr.setSelection(new NodeSelection(resolvedPos));
+      }
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+
+export default replaceSelectionWithAndSelectNode;

addon/components/variable-plugin/codelist/insert.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { SayController } from '@lblod/ember-rdfa-editor';
+import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import {
   CodeList,
@@ -16,6 +16,7 @@ import {
   EXT,
   RDF,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 export type CodelistInsertOptions = {
   publisher?: string;
@@ -141,13 +142,9 @@ export default class CodelistInsertComponent extends Component<Args> {
     );
 
     this.label = undefined;
-
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 
   @action

addon/components/variable-plugin/date/insert-variable.ts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import { SayController, Transaction } from '@lblod/ember-rdfa-editor';
+import { SayController } from '@lblod/ember-rdfa-editor';
 import { v4 as uuidv4 } from 'uuid';
 import IntlService from 'ember-intl/services/intl';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
@@ -12,6 +12,7 @@ import {
   RDF,
   XSD,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 type Args = {
   controller: SayController;
@@ -75,12 +76,8 @@ export default class DateInsertVariableComponent extends Component<Args> {
     });
 
     this.label = undefined;
-
-    this.controller.withTransaction(
-      (tr: Transaction) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

addon/components/variable-plugin/date/insert.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import { SayController, Transaction } from '@lblod/ember-rdfa-editor';
+import { SayController } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
 import { v4 as uuidv4 } from 'uuid';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
@@ -10,6 +10,7 @@ import {
   EXT,
   RDF,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 type Args = {
   controller: SayController;
@@ -65,13 +66,8 @@ export default class DateInsertComponent extends Component<Args> {
       ],
       backlinks: [],
     });
-    console.log(node);
-
-    this.controller.withTransaction(
-      (tr: Transaction) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

addon/components/variable-plugin/location/insert.ts

@@ -5,6 +5,7 @@ import { SayController } from '@lblod/ember-rdfa-editor';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { v4 as uuidv4 } from 'uuid';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 export type LocationInsertOptions = {
   endpoint: string;
@@ -63,12 +64,8 @@ export default class LocationInsertComponent extends Component<Args> {
     );
 
     this.label = undefined;
-
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

addon/components/variable-plugin/number/insert.ts

@@ -13,6 +13,7 @@ import {
   EXT,
   RDF,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 type Args = {
   controller: SayController;
@@ -134,11 +135,8 @@ export default class NumberInsertComponent extends Component<Args> {
     this.minimumValue = '';
     this.maximumValue = '';
 
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

addon/components/variable-plugin/text/insert.ts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import type { SayController } from '@lblod/ember-rdfa-editor';
+import { type SayController } from '@lblod/ember-rdfa-editor';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import { v4 as uuidv4 } from 'uuid';
 import IntlService from 'ember-intl/services/intl';
@@ -11,6 +11,7 @@ import {
   EXT,
   RDF,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 type Args = {
   controller: SayController;
@@ -81,11 +82,8 @@ export default class TextVariableInsertComponent extends Component<Args> {
 
     this.label = undefined;
 
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

addon/plugins/variable-plugin/variables/address.ts

@@ -351,6 +351,7 @@ const emberNodeConfig: EmberNodeConfig = {
   uriAttributes: ['variableInstance'],
   draggable: false,
   needsFFKludge: true,
+  selectable: true,
   attrs: {
     ...rdfaAttrSpec,
     value: {

addon/plugins/variable-plugin/variables/codelist.ts

@@ -166,6 +166,7 @@ const emberNodeConfig: EmberNodeConfig = {
   uriAttributes: ['variableInstance'],
   draggable: false,
   needsFFKludge: true,
+  selectable: true,
   attrs: {
     ...rdfaAttrSpec,
     selectionStyle: {

addon/plugins/variable-plugin/variables/location.ts

@@ -79,6 +79,7 @@ const emberNodeConfig: EmberNodeConfig = {
   content: 'inline*',
   atom: true,
   recreateUri: true,
+  selectable: true,
   uriAttributes: ['variableInstance'],
   draggable: false,
   needsFFKludge: true,

addon/plugins/variable-plugin/variables/number.ts

@@ -175,6 +175,7 @@ const emberNodeConfig: EmberNodeConfig = {
   editable: true,
   draggable: false,
   needsFFKludge: true,
+  selectable: true,
   attrs: {
     ...rdfaAttrSpec,
     writtenNumber: { default: false },

addon/plugins/variable-plugin/variables/text.ts

@@ -129,6 +129,7 @@ const emberNodeConfig: EmberNodeConfig = {
   draggable: false,
   needsFFKludge: true,
   editable: true,
+  selectable: true,
   attrs: {
     ...rdfaAttrSpec,
   },