@lblod/ember-rdfa-editor-lblod-plugins 21.0.0 → 22.0.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 22.0.0
+
+### Major Changes
+
+- [#448](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/448) [`e6fe1df`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e6fe1dfd89c0e7fba6d58c0f373438fdd7730403) Thanks [@piemonkey](https://github.com/piemonkey)! - Update ember-intl to v7, drops support for v5 and v6 due to API changes
+
+- [#448](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/448) [`e6fe1df`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e6fe1dfd89c0e7fba6d58c0f373438fdd7730403) Thanks [@piemonkey](https://github.com/piemonkey)! - Update ember-modifier to v4 and drop support for older versions
+
+- [#448](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/448) [`e6fe1df`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e6fe1dfd89c0e7fba6d58c0f373438fdd7730403) Thanks [@piemonkey](https://github.com/piemonkey)! - Update to ember-power-select v7.1, drops support for older versions
+
+- [#448](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/448) [`e6fe1df`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e6fe1dfd89c0e7fba6d58c0f373438fdd7730403) Thanks [@piemonkey](https://github.com/piemonkey)! - Update all dependencies to latest supported versions
+
+- [#448](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/448) [`e6fe1df`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e6fe1dfd89c0e7fba6d58c0f373438fdd7730403) Thanks [@piemonkey](https://github.com/piemonkey)! - Run pnpm up to update dependencies to latest supported versions
+
+- [#451](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/451) [`8f560c6`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8f560c688458eb6c143c20a6758749811871d78e) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove `nodeType`-based validation plugin. This validation plugin validated documents based on the presence of nodes with a specific node-type. This turned out not to be as useful/intuitive.
+
+### Minor Changes
+
+- [#455](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/455) [`0ae858b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/0ae858b4dd6bf8034024e312abc468e2bc1bc21f) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Added person variable
+
+- [#448](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/448) [`e6fe1df`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e6fe1dfd89c0e7fba6d58c0f373438fdd7730403) Thanks [@piemonkey](https://github.com/piemonkey)! - Update to ember-template-imports 4.1.1
+
+### Patch Changes
+
+- [#453](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/453) [`9ffbcae`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/9ffbcae60370a43d80e03887fc3f41473cd8b849) Thanks [@abeforgit](https://github.com/abeforgit)! - fix: allow basic templates to be inserted again
+
+- [#450](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/450) [`19d811d`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/19d811dfae52ff0dca37ddedcb0a141fbb3cb5b0) Thanks [@elpoelma](https://github.com/elpoelma)! - lbm-plugin: add support for inserting independent mandatees (who are not part of a fraction)
+
+- [#454](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/454) [`fdeb6cd`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/fdeb6cd7b9bfcf7f13ad3c4005f2179776d3ef41) Thanks [@piemonkey](https://github.com/piemonkey)! - Use icon classes in order to support embeddable editor
+
 ## 21.0.0
 
 ### Major Changes

package/Dockerfile

@@ -3,7 +3,7 @@ FROM node:20-slim AS builder
 LABEL maintainer="info@redpencil.io"
 
 RUN corepack enable
-RUN corepack prepare pnpm@latest-8 --activate
+RUN corepack prepare pnpm@9.4 --activate
 WORKDIR /app
 COPY package.json pnpm-lock.yaml ./
 RUN pnpm i --frozen-lockfile

package/README.md

@@ -30,7 +30,6 @@ This addon contains the following editor plugins:
 - [standard-template-plugin](#standard-template-plugin)
 - [table-of-contents-plugin](#table-of-contents-plugin)
 - [variable-plugin](#variable-plugin)
-- [validation-plugin](#validation-plugin)
 - [template-comments-plugin](#template-comments-plugin)
 
 You can configure your editor like this:
@@ -785,10 +784,6 @@ You can also add an insert component meant for use outside of `insert-variable-c
 <VariablePlugin::Address::Insert @controller={{this.controller}} />
 ```
 
-## validation-plugin
-
-see [the plugin docs](addon/plugins/validation/README.md)
-
 ## template-comments-plugin
 
 A plugin to insert a template comment anywhere in the document.  

package/addon/components/confidentiality-plugin/redact.gts

@@ -1,13 +1,21 @@
-import Mark from '@lblod/ember-rdfa-editor/components/toolbar/mark';
+import { TemplateOnlyComponent } from '@ember/component/template-only';
 import t from 'ember-intl/helpers/t';
 import { NotVisibleIcon } from '@appuniversum/ember-appuniversum/components/icons/not-visible';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import Mark from '@lblod/ember-rdfa-editor/components/toolbar/mark';
+
+interface Sig {
+  Args: {
+    controller: SayController;
+  };
+}
 
-<template>
+const Redact: TemplateOnlyComponent<Sig> = <template>
   <Mark
     @icon={{NotVisibleIcon}}
     @title={{t 'confidentiality-plugin.redact'}}
     @mark='redacted'
-    {{! @glint-expect-error: not typesafe yet }}
     @controller={{@controller}}
   />
-</template>
+</template>;
+export default Redact;

package/addon/components/decision-plugin/insert-article.gts

@@ -2,6 +2,7 @@ import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
 import insertArticle from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/commands/insert-article-command';
@@ -68,7 +69,7 @@ export default class InsertArticleComponent extends Component<Sig> {
   <template>
     <li class='au-csidebar-list__item'>
       <AuButton
-        @icon='add'
+        @icon={{AddIcon}}
         @iconAlignment='left'
         @skin='link'
         @disabled={{not this.canInsert}}

package/addon/components/hover-tooltip.gts

@@ -24,21 +24,18 @@ interface Sig {
 }
 
 export default class HoverTooltip extends Component<Sig> {
-  hover = modifier<HoverModifierSig>(
-    (element) => {
-      element.addEventListener('mouseenter', this.showTooltip);
-      element.addEventListener('mouseleave', this.hideTooltip);
-      element.addEventListener('focus', this.showTooltip);
-      element.addEventListener('blur', this.hideTooltip);
-      return () => {
-        element.removeEventListener('mouseenter', this.showTooltip);
-        element.removeEventListener('mouseleave', this.hideTooltip);
-        element.removeEventListener('focus', this.showTooltip);
-        element.removeEventListener('blur', this.hideTooltip);
-      };
-    },
-    { eager: false },
-  );
+  hover = modifier<HoverModifierSig>((element) => {
+    element.addEventListener('mouseenter', this.showTooltip);
+    element.addEventListener('mouseleave', this.hideTooltip);
+    element.addEventListener('focus', this.showTooltip);
+    element.addEventListener('blur', this.hideTooltip);
+    return () => {
+      element.removeEventListener('mouseenter', this.showTooltip);
+      element.removeEventListener('mouseleave', this.hideTooltip);
+      element.removeEventListener('focus', this.showTooltip);
+      element.removeEventListener('blur', this.hideTooltip);
+    };
+  });
   @tracked tooltipOpen = false;
 
   get placement(): Placement | undefined {
@@ -56,7 +53,7 @@ export default class HoverTooltip extends Component<Sig> {
     <Velcro @placement={{this.placement}} as |velcro|>
       {{#let velcro.loop as |loop|}}
         {{yield
-          (hash velcroHook=velcro.hook handleHover=(modifier this.hover))
+          (hash velcroHook=velcro.hook handleHover=this.hover)
           to='hover'
         }}
         {{#if this.tooltipOpen}}

package/addon/components/lmb-plugin/insert.ts

@@ -6,12 +6,16 @@ import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
 import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
-import { v4 as uuid } from 'uuid';
-import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import { v4 as uuidv4 } from 'uuid';
 import {
-  MANDAAT,
-  FOAF,
+  DCT,
+  EXT,
+  RDF,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 
 interface Args {
   controller: SayController;
@@ -19,6 +23,7 @@ interface Args {
 }
 
 export default class LmbPluginInsertComponent extends Component<Args> {
+  @service declare intl: IntlService;
   AddIcon = AddIcon;
 
   @tracked showModal = false;
@@ -40,82 +45,41 @@ export default class LmbPluginInsertComponent extends Component<Args> {
 
   @action
   onInsert(mandatee: Mandatee) {
-    const schema = this.controller.schema;
-    const firstNameUuid = uuid();
-    const firstNameNode = schema.node(
-      'inline_rdfa',
-      {
-        rdfaNodeType: 'literal',
-        __rdfaId: firstNameUuid,
-        backlinks: [
-          {
-            subject: sayDataFactory.literalNode(mandatee.personUri),
-            predicate: FOAF('gebruikteVoornaam').prefixed,
-          },
-        ],
-      },
-      [schema.text(mandatee.firstName)],
-    );
-    const lastNameUuid = uuid();
-    const lastNameNode = schema.node(
-      'inline_rdfa',
-      {
-        rdfaNodeType: 'literal',
-        __rdfaId: lastNameUuid,
-        backlinks: [
-          {
-            subject: sayDataFactory.literalNode(mandatee.personUri),
-            predicate: FOAF('familyName').prefixed,
-          },
-        ],
-      },
-      [schema.text(mandatee.lastName)],
-    );
+    const mappingSubject = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const variableId = uuidv4();
+
+    const label = this.intl.t('variable.person.label', {
+      locale: this.controller.documentLanguage,
+    });
+    const node = this.controller.schema.nodes.person_variable.create({
+      subject: mappingSubject,
+      rdfaNodeType: 'resource',
+      __rdfaId: variableId,
+      mandatee,
+      properties: [
+        {
+          predicate: RDF('type').full,
+          object: sayDataFactory.namedNode(EXT('Mapping').full),
+        },
+        {
+          predicate: EXT('instance').full,
+          object: sayDataFactory.namedNode(variableInstance),
+        },
+        {
+          predicate: EXT('label').full,
+          object: sayDataFactory.literal(label),
+        },
+        {
+          predicate: DCT('type').full,
+          object: sayDataFactory.literal('person'),
+        },
+      ],
+    });
 
-    const personNode = schema.node(
-      'inline_rdfa',
-      {
-        rdfaNodeType: 'resource',
-        subject: mandatee.personUri,
-        properties: [
-          {
-            predicate: FOAF('gebruikteVoornaam').prefixed,
-            object: sayDataFactory.literalNode(firstNameUuid),
-          },
-          {
-            predicate: FOAF('familyName').prefixed,
-            object: sayDataFactory.literalNode(lastNameUuid),
-          },
-        ],
-        backlinks: [
-          {
-            subject: sayDataFactory.literalNode(mandatee.mandateeUri),
-            predicate: MANDAAT('isBestuurlijkeAliasVan').prefixed,
-          },
-        ],
-      },
-      [firstNameNode, lastNameNode],
-    );
-    const mandateeNode = schema.node(
-      'inline_rdfa',
-      {
-        rdfaNodeType: 'resource',
-        subject: mandatee.mandateeUri,
-        properties: [
-          {
-            predicate: MANDAAT('isBestuurlijkeAliasVan').prefixed,
-            object: sayDataFactory.resourceNode(mandatee.personUri),
-          },
-        ],
-      },
-      [personNode],
-    );
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(mandateeNode);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
     this.closeModal();
   }
 }

package/addon/components/lmb-plugin/search-modal.ts

@@ -53,31 +53,33 @@ export default class LmbPluginSearchModalComponent extends Component<Args> {
       },
       body: JSON.stringify({
         query: `
-        PREFIX besluit: <http://data.vlaanderen.be/ns/besluit#> 
-        PREFIX skos: <http://www.w3.org/2004/02/skos/core#> 
+        PREFIX besluit: <http://data.vlaanderen.be/ns/besluit#>
+        PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
         PREFIX mandaat: <http://data.vlaanderen.be/ns/mandaat#>
         PREFIX foaf: <http://xmlns.com/foaf/0.1/>
         PREFIX persoon: <http://data.vlaanderen.be/ns/persoon#>
         PREFIX org: <http://www.w3.org/ns/org#>
         PREFIX regorg: <https://www.w3.org/ns/regorg#>
-        SELECT DISTINCT ?mandatee ?person ?firstName ?lastName ?statusLabel ?fractieLabel ?roleLabel WHERE { 
+        SELECT DISTINCT ?mandatee ?person ?firstName ?lastName ?statusLabel ?fractieLabel ?roleLabel WHERE {
             ?mandatee a mandaat:Mandataris;
               org:holds ?mandaat;
               mandaat:status ?status;
-              mandaat:isBestuurlijkeAliasVan ?person;
-              org:hasMembership ?membership.
+              mandaat:isBestuurlijkeAliasVan ?person.
             ?person foaf:familyName ?lastName;
               persoon:gebruikteVoornaam ?firstName.
             ?status skos:prefLabel ?statusLabel.
-            ?membership org:organisation ?fractie.
-            ?fractie regorg:legalName ?fractieLabel.
             ?mandaat org:role ?role.
             ?role skos:prefLabel ?roleLabel.
             OPTIONAL  {
               ?mandatee mandaat:einde ?endDate
             }
+            OPTIONAL {
+              ?mandatee org:hasMembership ?membership.
+              ?membership org:organisation ?fractie.
+              ?fractie regorg:legalName ?fractieLabel.
+            }
             filter (!bound(?endDate) || ?endDate > now()).
-        }        
+        }
         `,
       }),
     });

package/addon/components/snippet-plugin/nodes/placeholder.gts

@@ -11,9 +11,6 @@ interface Signature {
   Args: EmberNodeArgs;
 }
 
-// We don't have a way to type template only components without ember-source 5, so create an empty
-// class to allow for type checking
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class SnippetPluginPlaceholder extends Component<Signature> {
   @service declare intl: IntlService;
   get listNames() {

package/addon/components/snippet-plugin/nodes/snippet.gts

@@ -5,6 +5,9 @@ import { type EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/_private/embe
 import SearchModal from '../search-modal';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { SynchronizeIcon } from '@appuniversum/ember-appuniversum/components/icons/synchronize';
+import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 import {
   PNode,
   ProseParser,
@@ -29,9 +32,6 @@ interface Signature {
   };
 }
 
-// We don't have a way to type template only components without ember-source 5, so create an empty
-// class to allow for type checking
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class SnippetNode extends Component<Signature> {
   @tracked showModal: boolean = false;
   @tracked mode: string = '';
@@ -154,7 +154,7 @@ export default class SnippetNode extends Component<Signature> {
             type='button'
             {{on 'click' this.editFragment}}
           >
-            <AuIcon @icon='synchronize' @size='large' />
+            <AuIcon @icon={{SynchronizeIcon}} @size='large' />
             <div class='say-snippet-button-text'>
               {{t 'snippet-plugin.snippet-node.change-fragment'}}
             </div>
@@ -164,7 +164,7 @@ export default class SnippetNode extends Component<Signature> {
             type='button'
             {{on 'click' this.deleteFragment}}
           >
-            <AuIcon @icon='bin' />
+            <AuIcon @icon={{BinIcon}} />
             <div class='say-snippet-button-text'>
               {{t 'snippet-plugin.snippet-node.remove-fragment'}}
             </div>
@@ -174,7 +174,7 @@ export default class SnippetNode extends Component<Signature> {
             type='button'
             {{on 'click' this.addFragment}}
           >
-            <AuIcon @icon='add' />
+            <AuIcon @icon={{AddIcon}} />
             <div class='say-snippet-button-text'>
               {{t 'snippet-plugin.snippet-node.add-fragment'}}
             </div>

package/addon/components/standard-template-plugin/template-provider.ts

@@ -63,6 +63,7 @@ export default class TemplateProviderComponent extends Component<Args> {
   templateIsApplicable(template: StandardTemplate) {
     const { $from } = this.controller.mainEditorState.selection;
     const containsTypes =
+      template.contexts.length === 0 ||
       this.controller.externalContextStore
         .match(null, 'a')
         .dataset.some((quad) => {

package/addon/components/variable-plugin/date/edit.ts

@@ -175,14 +175,23 @@ export default class DateEditComponent extends Component<Args> {
   get humanError(): string | null {
     if (this.customDateFormatError) {
       const { error, payload } = this.customDateFormatError;
+      const locale = this.intl.primaryLocale ?? this.intl.locales[0];
       if (error === 'character') {
-        const msg = this.intl.lookup(`date-plugin.validation.${error}`) ?? '';
+        const msg =
+          this.intl.getTranslation(`date-plugin.validation.${error}`, locale) ??
+          '';
         const suggestion =
-          this.intl.lookup('date-plugin.validation.character-suggestion') ?? '';
+          this.intl.getTranslation(
+            'date-plugin.validation.character-suggestion',
+            locale,
+          ) ?? '';
         const chars = payload?.invalidCharacters ?? '';
         return `${msg}: ${chars}. ${suggestion}: '${chars}'`;
       }
-      return this.intl.lookup(`date-plugin.validation.${error}`) ?? null;
+      return (
+        this.intl.getTranslation(`date-plugin.validation.${error}`, locale) ??
+        null
+      );
     }
     return null;
   }

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

@@ -27,19 +27,13 @@ export default class NumberInsertComponent extends Component<Args> {
   @tracked validMinimum = true;
   @tracked validMaximum = true;
 
-  minimumInput = modifier(
-    (element: HTMLInputElement) => {
-      this.validMinimum = element.checkValidity();
-    },
-    { eager: false },
-  );
-
-  maximumInput = modifier(
-    (element: HTMLInputElement) => {
-      this.validMaximum = element.checkValidity();
-    },
-    { eager: false },
-  );
+  minimumInput = modifier((element: HTMLInputElement) => {
+    this.validMinimum = element.checkValidity();
+  });
+
+  maximumInput = modifier((element: HTMLInputElement) => {
+    this.validMaximum = element.checkValidity();
+  });
 
   get controller() {
     return this.args.controller;

package/addon/components/variable-plugin/person/edit.hbs

@@ -0,0 +1,31 @@
+{{! @glint-nocheck: not typesafe yet }}
+{{#if this.showCard}}
+  <AuCard
+    @flex={{true}}
+    @divided={{true}}
+    @shadow={{true}}
+    @size='small'
+    as |c|
+  >
+    <c.header>
+      <AuHeading @level='3' @skin='6'>
+        {{t 'variable-plugin.person.card-title'}}
+      </AuHeading>
+    </c.header>
+    <c.content>
+      <AuButton {{on 'click' this.openModal}}>
+        {{#if this.isEditing}}
+          {{t 'editor-plugins.utils.edit'}}
+        {{else}}
+          {{t 'editor-plugins.utils.insert'}}
+        {{/if}}
+      </AuButton>
+    </c.content>
+  </AuCard>
+  <LmbPlugin::SearchModal
+    @open={{this.showModal}}
+    @closeModal={{this.closeModal}}
+    @config={{@config}}
+    @onInsert={{this.onInsert}}
+  />
+{{/if}}

package/addon/components/variable-plugin/person/edit.ts

@@ -0,0 +1,74 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { SayController, PNode } from '@lblod/ember-rdfa-editor';
+import { NodeSelection } from '@lblod/ember-rdfa-editor';
+import { trackedFunction } from 'ember-resources/util/function';
+import { tracked } from '@glimmer/tracking';
+import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
+import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
+
+type Args = {
+  controller: SayController;
+  config: LmbPluginConfig;
+};
+
+type PersonNode = {
+  node: PNode;
+  pos: number;
+};
+
+export default class PersonEditComponent extends Component<Args> {
+  @tracked showModal = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  selectedPersonNode = trackedFunction(this, () => {
+    const { selection } = this.controller.mainEditorState;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === this.controller.schema.nodes.person_variable
+    ) {
+      const personNode: PersonNode = {
+        node: selection.node,
+        pos: selection.from,
+      };
+      return personNode;
+    }
+    return;
+  });
+
+  get showCard() {
+    return !!this.selectedPersonNode.value;
+  }
+
+  get isEditing() {
+    const personNode = this.selectedPersonNode.value;
+    return !!personNode?.node.attrs.mandatee;
+  }
+
+  @action
+  openModal() {
+    this.controller.focus();
+    this.showModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showModal = false;
+  }
+  @action
+  onInsert(mandatee: Mandatee) {
+    const personNode = this.selectedPersonNode.value as PersonNode;
+    this.controller.withTransaction((tr) => {
+      tr.setNodeAttribute(personNode.pos, 'mandatee', mandatee);
+      return tr.setNodeAttribute(
+        personNode.pos,
+        'content',
+        mandatee.mandateeUri,
+      );
+    });
+    this.closeModal();
+  }
+}

package/addon/components/variable-plugin/person/insert.hbs

@@ -0,0 +1,10 @@
+{{! @glint-nocheck: not typesafe yet }}
+<AuFormRow>
+  <VariablePlugin::Utils::LabelInput
+    @label={{this.label}}
+    @updateLabel={{this.updateLabel}}
+  />
+</AuFormRow>
+<AuButton {{on 'click' this.insert}}>
+  {{t 'variable-plugin.button'}}
+</AuButton>