@lblod/ember-rdfa-editor-lblod-plugins 25.2.0 → 25.2.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 25.2.1
+
+### Patch Changes
+
+- [#497](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/497) [`2b4b401`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2b4b4011e3d66c23f232bf6690ca80a5b0a90298) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Redesign variable pills
+
+- [#497](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/497) [`2b4b401`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2b4b4011e3d66c23f232bf6690ca80a5b0a90298) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Bump ember-rdfa-editor to 10.7.3
+
 ## 25.2.0
 
 ### Minor Changes

package/addon/components/location-plugin/nodeview.gts

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { on } from '@ember/modifier';
 import IntlService from 'ember-intl/services/intl';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 import AuPill, {
   type AuPillSignature,
 } from '@appuniversum/ember-appuniversum/components/au-pill';
@@ -25,14 +24,6 @@ type Signature = {
 export default class AddressNodeviewComponent extends Component<Signature> {
   @service declare intl: IntlService;
 
-  get translations() {
-    return {
-      placeholder: this.intl.t('editor-plugins.address.nodeview.placeholder', {
-        locale: this.args.controller.documentLanguage,
-      }),
-    };
-  }
-
   get address() {
     return this.args.node.attrs.value as Address | null;
   }
@@ -42,26 +33,23 @@ export default class AddressNodeviewComponent extends Component<Signature> {
     return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 
+  get filled() {
+    return !!this.address;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.address?.formatted;
+    } else {
+      return this.label;
+    }
+  }
+
   <template>
-    <AuPill
-      class='variable atomic'
-      @icon={{PencilIcon}}
-      @iconAlignment='right'
-      ...attributes
-      {{on 'click' @selectNode}}
-    >
-      {{#if this.address}}
-        {{this.address.formatted}}
-      {{else}}
-        <span class='mark-highlight-manual'>
-          {{this.translations.placeholder}}
-        </span>
-      {{/if}}
-      {{#if this.label}}
-        <span class='label'>
-          ({{this.label}})
-        </span>
-      {{/if}}
+    <AuPill class='say-pill atomic' ...attributes {{on 'click' @selectNode}}>
+      <span class='{{unless this.filled "unfilled-variable"}}'>
+        {{this.content}}
+      </span>
     </AuPill>
   </template>
 }

package/addon/components/variable-plugin/address/nodeview.hbs

@@ -1,20 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{#if this.address}}
-    {{this.address.formatted}}
-  {{else}}
-    <span class='mark-highlight-manual'>
-      {{this.translations.placeholder}}
-    </span>
-  {{/if}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.content}}
+  </span>
 </AuPill>

package/addon/components/variable-plugin/address/nodeview.ts

@@ -1,7 +1,4 @@
 import Component from '@glimmer/component';
-import { service } from '@ember/service';
-import IntlService from 'ember-intl/services/intl';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/address-helpers';
@@ -15,26 +12,6 @@ type Args = {
 };
 
 export default class AddressNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @service declare intl: IntlService;
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get documentLanguage() {
-    return this.controller.documentLanguage;
-  }
-
-  get translations() {
-    return {
-      placeholder: this.intl.t('editor-plugins.address.nodeview.placeholder', {
-        locale: this.documentLanguage,
-      }),
-    };
-  }
-
   get node() {
     return this.args.node;
   }
@@ -47,4 +24,16 @@ export default class AddressNodeviewComponent extends Component<Args> {
     if (this.address) return '';
     return getOutgoingTriple(this.node.attrs, EXT('label'))?.object.value;
   }
+
+  get filled() {
+    return !!this.address;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.address?.formatted;
+    } else {
+      return this.label;
+    }
+  }
 }

package/addon/components/variable-plugin/autofilled/insert.gts

@@ -68,7 +68,8 @@ export default class AutoFilledVariableInsertComponent extends Component<Args> {
       locale: this.documentLanguage,
     });
 
-    const label = this.label != '' ? this.label : placeholder;
+    const label =
+      this.label != '' ? this.label : this.autofillKey || placeholder;
     const node = this.schema.nodes.autofilled_variable.create(
       {
         subject: mappingSubject,
@@ -101,7 +102,7 @@ export default class AutoFilledVariableInsertComponent extends Component<Args> {
       },
 
       this.schema.node('placeholder', {
-        placeholderText: `Autofill ${this.autofillKey}`,
+        placeholderText: label,
       }),
     );
     this.label = '';

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

@@ -137,7 +137,7 @@ export default class CodelistInsertComponent extends Component<Args> {
         ],
       },
       this.schema.node('placeholder', {
-        placeholderText: this.selectedCodelist?.label,
+        placeholderText: label,
       }),
     );
 

package/addon/components/variable-plugin/date/nodeview.hbs

@@ -1,14 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{this.humanReadableDate}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.humanReadableDate}}
+  </span>
 </AuPill>

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

@@ -5,15 +5,12 @@ import {
   SayController,
   SayView,
 } from '@lblod/ember-rdfa-editor';
-import IntlService from 'ember-intl/services/intl';
-import { service } from '@ember/service';
 import {
   formatDate,
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 type Args = {
   getPos: () => number | undefined;
@@ -26,16 +23,10 @@ type Args = {
 };
 
 export default class DateNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @service declare intl: IntlService;
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get documentLanguage() {
-    return this.controller.documentLanguage;
+  get filled() {
+    const value = getOutgoingTriple(this.args.node.attrs, EXT('content'))
+      ?.object.value;
+    return !!value;
   }
 
   get humanReadableDate() {
@@ -49,20 +40,11 @@ export default class DateNodeviewComponent extends Component<Args> {
         return 'Ongeldig formaat';
       }
     } else {
-      return (this.args.node.attrs.onlyDate as boolean)
-        ? this.intl.t('date-plugin.insert.date', {
-            locale: this.documentLanguage,
-          })
-        : this.intl.t('date-plugin.insert.datetime', {
-            locale: this.documentLanguage,
-          });
+      return this.label;
     }
   }
 
   get label() {
-    const value = getOutgoingTriple(this.args.node.attrs, EXT('content'))
-      ?.object.value;
-    if (value) return '';
     return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 }

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

@@ -51,15 +51,17 @@ export default class LocationInsertComponent extends Component<Args> {
       locale: this.documentLanguage,
     });
 
+    const label = this.label ?? placeholder;
+
     const node = this.schema.nodes.location.create(
       {
         mappingResource,
         variableInstance,
-        label: this.label ?? placeholder,
+        label: label,
         source: this.endpoint,
       },
       this.schema.node('placeholder', {
-        placeholderText: placeholder,
+        placeholderText: label,
       }),
     );
 

package/addon/components/variable-plugin/number/nodeview.hbs

@@ -4,25 +4,10 @@
   @offsetOptions={{hash mainAxis=3}}
   as |velcro|
 >
-  <AuPill
-    @icon={{this.PencilIcon}}
-    @iconAlignment='right'
-    class='variable atomic'
-    {{velcro.hook}}
-    {{on 'click' @selectNode}}
-  >
-    {{#if this.formattedNumber}}
-      {{this.formattedNumber}}
-    {{else}}
-      <span class='mark-highlight-manual'>
-        {{this.translations.placeholder}}
-      </span>
-    {{/if}}
-    {{#if this.label}}
-      <span class='label'>
-        ({{this.label}})
-      </span>
-    {{/if}}
+  <AuPill class='say-pill atomic' {{velcro.hook}} {{on 'click' @selectNode}}>
+    <span class='{{unless this.filled "unfilled-variable"}}'>
+      {{this.content}}
+    </span>
   </AuPill>
   {{#if this.selected}}
     <div class='say-tooltip say-number-tooltip' {{velcro.loop}}>

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

@@ -17,7 +17,6 @@ import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { numberToWords } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/number-to-words';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 type Args = {
   getPos: () => number | undefined;
@@ -31,7 +30,6 @@ type Args = {
 };
 
 export default class NumberNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
   Velcro = Velcro;
 
   @localCopy('number', '') declare inputNumber: string;
@@ -52,14 +50,6 @@ export default class NumberNodeviewComponent extends Component<Args> {
     return this.controller.documentLanguage;
   }
 
-  get translations() {
-    return {
-      placeholder: this.intl.t('variable.number.placeholder', {
-        locale: this.documentLanguage,
-      }),
-    };
-  }
-
   get node() {
     return this.args.node;
   }
@@ -80,6 +70,18 @@ export default class NumberNodeviewComponent extends Component<Args> {
     }
   }
 
+  get filled() {
+    return !!this.formattedNumber;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.formattedNumber;
+    } else {
+      return this.label;
+    }
+  }
+
   get selected() {
     return this.args.selected;
   }

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

@@ -1,20 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{#if this.mandatee}}
-    {{this.mandatee.fullName}}
-  {{else}}
-    <span class='mark-highlight-manual'>
-      {{this.translations.placeholder}}
-    </span>
-  {{/if}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.content}}
+  </span>
 </AuPill>

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

@@ -1,7 +1,4 @@
 import Component from '@glimmer/component';
-import { service } from '@ember/service';
-import IntlService from 'ember-intl/services/intl';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
@@ -15,26 +12,10 @@ type Args = {
 };
 
 export default class PersonNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @service declare intl: IntlService;
-
   get controller() {
     return this.args.controller;
   }
 
-  get documentLanguage() {
-    return this.controller.documentLanguage;
-  }
-
-  get translations() {
-    return {
-      placeholder: this.intl.t('variable-plugin.person.nodeview-placeholder', {
-        locale: this.documentLanguage,
-      }),
-    };
-  }
-
   get node() {
     return this.args.node;
   }
@@ -47,4 +28,16 @@ export default class PersonNodeviewComponent extends Component<Args> {
     if (this.mandatee) return '';
     return getOutgoingTriple(this.node.attrs, EXT('label'))?.object.value;
   }
+
+  get filled() {
+    return !!this.mandatee;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.mandatee?.fullName;
+    } else {
+      return this.label;
+    }
+  }
 }

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

@@ -78,7 +78,7 @@ export default class TextVariableInsertComponent extends Component<Args> {
         ],
       },
       this.schema.node('placeholder', {
-        placeholderText: 'text',
+        placeholderText: label,
       }),
     );
 

package/addon/components/variable-plugin/variable/nodeview.hbs

@@ -1,9 +1,8 @@
 {{! @glint-nocheck: not typesafe yet }}
 <AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable'
+  class='say-pill'
   {{on 'click' this.onClick}}
+  {{on 'focusout' this.resetVariable}}
 >
   <EmberNode::EmbeddedEditor
     @controller={{@controller}}
@@ -17,9 +16,4 @@
     @decorations={{@decorations}}
     @contentDecorations={{@contentDecorations}}
   />
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
 </AuPill>

package/addon/components/variable-plugin/variable/nodeview.ts

@@ -3,15 +3,12 @@ import { NodeSelection, ProsePlugin, SayView } from '@lblod/ember-rdfa-editor';
 import { editableNodePlugin } from '@lblod/ember-rdfa-editor/plugins/editable-node';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 export default class VariableNodeViewComponent extends Component<EmberNodeArgs> {
-  PencilIcon = PencilIcon;
-
   @tracked innerView?: SayView;
 
   get plugins(): ProsePlugin[] {
@@ -39,11 +36,23 @@ export default class VariableNodeViewComponent extends Component<EmberNodeArgs>
   initEditor(view: SayView) {
     this.innerView = view;
   }
-
+  @action
+  resetVariable() {
+    if (this.innerView && this.innerView.state.doc.childCount === 0) {
+      const tr = this.innerView.state.tr;
+      const placeholderNode = this.innerView.state.schema.node('placeholder', {
+        placeholderText: this.label,
+      });
+      tr.insert(0, placeholderNode);
+      this.innerView?.dispatch(tr);
+    }
+  }
   get label() {
-    if (this.innerView?.state.doc.firstChild?.type.name !== 'placeholder') {
-      return '';
+    const labelTriple = getOutgoingTriple(this.args.node.attrs, EXT('label'));
+    if (labelTriple) {
+      return labelTriple.object.value;
+    } else {
+      return this.args.node.attrs.label;
     }
-    return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 }

package/addon/plugins/variable-plugin/variables/autofilled.ts

@@ -22,7 +22,7 @@ import {
   parseVariableInstance,
   parseVariableType,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/variable-attribute-parsers';
-import AutofilledNodeViewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/autofilled/nodeview';
+import NodeViewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/variable/nodeview';
 import type { ComponentLike } from '@glint/template';
 import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { renderRdfaAware } from '@lblod/ember-rdfa-editor/core/schema';
@@ -139,7 +139,7 @@ const toDOM = (node: PNode): DOMOutputSpec => {
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'autofilled-variable',
-  component: AutofilledNodeViewComponent as unknown as ComponentLike,
+  component: NodeViewComponent as unknown as ComponentLike,
   inline: true,
   group: 'inline variable',
   content: 'inline*',

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

@@ -20,7 +20,7 @@ import {
   typeSpan,
 } from '../utils/dom-constructors';
 import { contentSpan } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/dom-output-spec-helpers';
-import LocationNodeViewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/location/nodeview';
+import NodeViewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/variable/nodeview';
 import type { ComponentLike } from '@glint/template';
 
 const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'],
@@ -35,7 +35,6 @@ const parseDOM = [
         node.querySelector(CONTENT_SELECTOR) &&
         parseVariableType(node) === 'location'
       ) {
-        console.log('Parse location: ', node);
         const mappingResource = node.getAttribute('resource');
         if (!mappingResource) {
           return false;
@@ -74,7 +73,7 @@ const toDOM = (node: PNode): DOMOutputSpec => {
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'location',
-  component: LocationNodeViewComponent as unknown as ComponentLike,
+  component: NodeViewComponent as unknown as ComponentLike,
   inline: true,
   group: 'inline variable',
   content: 'inline*',

package/addon/utils/namespace.ts

@@ -68,7 +68,10 @@ export function hasOutgoingNamedNodeTriple(
   });
 }
 
-export function getOutgoingTriple(rdfaAttrs: Attrs, predicate: Resource) {
+export function getOutgoingTriple(
+  rdfaAttrs: Attrs,
+  predicate: Resource,
+): Option<OutgoingTriple> {
   return (isRdfaAttrs(rdfaAttrs) &&
     rdfaAttrs.rdfaNodeType === 'resource' &&
     rdfaAttrs.properties.find((prop) =>

package/app/styles/variable-plugin.scss

@@ -49,39 +49,34 @@
   }
 }
 
+.ember-node.say-active:has(> .say-pill) {
+  outline: none;
+}
+
 .ember-node {
   white-space: normal !important;
-  .variable {
-    min-height: 30px;
-    [contenteditable] {
-      white-space: break-spaces;
-      word-break: break-all;
-      word-wrap: break-word;
-      outline: 0px;
-      padding: 2px;
-    }
-    .label {
-      font-size: var(--au-tiny);
-      color: var(--au-blue-700);
-      user-select: none;
-      margin: 0.3rem;
-    }
-    .au-c-icon {
-      margin: 0;
+  .say-pill [contenteditable].mark-highlight-manual {
+    color: var(--au-orange-700);
+    &.ProseMirror-selectednode {
+      background-color: var(--au-blue-300);
+      outline: none;
     }
   }
+  .unfilled-variable {
+    color: var(--au-orange-700);
+    background-color: var(--au-orange-300);
+    font-style: italic;
+    line-height: 1.2rem;
+    padding: 0.3rem;
+  }
 }
 
 .ember-node.ProseMirror-selectednode {
-  > .variable {
-    &.atomic {
-      background-color: var(--au-blue-200);
-    }
-    outline: 2px solid var(--au-blue-500);
-
-    ::selection {
-      background-color: var(--au-blue-300);
-    }
+  > .say-pill.atomic {
+    background-color: var(--au-blue-200);
+  }
+  .unfilled-variable {
+    background-color: var(--au-blue-200);
   }
 }
 

package/declarations/addon/components/location-plugin/nodeview.d.ts

@@ -14,10 +14,9 @@ type Signature = {
 };
 export default class AddressNodeviewComponent extends Component<Signature> {
     intl: IntlService;
-    get translations(): {
-        placeholder: string;
-    };
     get address(): Address | null;
     get label(): string | undefined;
+    get filled(): boolean;
+    get content(): string | undefined;
 }
 export {};

package/declarations/addon/components/variable-plugin/address/nodeview.d.ts

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import IntlService from 'ember-intl/services/intl';
 import { PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/address-helpers';
 type Args = {
@@ -8,15 +7,10 @@ type Args = {
     controller: SayController;
 };
 export default class AddressNodeviewComponent extends Component<Args> {
-    PencilIcon: TOC<import("@appuniversum/ember-appuniversum/components/icons/pencil").PencilIconSignature>;
-    intl: IntlService;
-    get controller(): SayController;
-    get documentLanguage(): string;
-    get translations(): {
-        placeholder: string;
-    };
     get node(): PNode;
     get address(): Address | null;
     get label(): string | undefined;
+    get filled(): boolean;
+    get content(): string | undefined;
 }
 export {};

package/declarations/addon/components/variable-plugin/date/nodeview.d.ts

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { DecorationSource, PNode, SayController, SayView } from '@lblod/ember-rdfa-editor';
-import IntlService from 'ember-intl/services/intl';
 type Args = {
     getPos: () => number | undefined;
     node: PNode;
@@ -11,11 +10,8 @@ type Args = {
     contentDecorations?: DecorationSource;
 };
 export default class DateNodeviewComponent extends Component<Args> {
-    PencilIcon: TOC<import("@appuniversum/ember-appuniversum/components/icons/pencil").PencilIconSignature>;
-    intl: IntlService;
-    get controller(): SayController;
-    get documentLanguage(): string;
-    get humanReadableDate(): string;
+    get filled(): boolean;
+    get humanReadableDate(): string | undefined;
     get label(): string | undefined;
 }
 export {};

package/declarations/addon/components/variable-plugin/number/nodeview.d.ts

@@ -13,7 +13,6 @@ type Args = {
     selectNode: () => void;
 };
 export default class NumberNodeviewComponent extends Component<Args> {
-    PencilIcon: TOC<import("@appuniversum/ember-appuniversum/components/icons/pencil").PencilIconSignature>;
     Velcro: typeof Velcro;
     inputNumber: string;
     writtenNumber: boolean;
@@ -22,12 +21,11 @@ export default class NumberNodeviewComponent extends Component<Args> {
     focus(element: HTMLInputElement): void;
     get controller(): SayController;
     get documentLanguage(): string;
-    get translations(): {
-        placeholder: string;
-    };
     get node(): PNode;
     get number(): string | null | undefined;
     get formattedNumber(): string | null | undefined;
+    get filled(): boolean;
+    get content(): string | null | undefined;
     get selected(): boolean;
     get minValue(): number;
     get maxValue(): number;

package/declarations/addon/components/variable-plugin/person/nodeview.d.ts

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import IntlService from 'ember-intl/services/intl';
 import { PNode, SayController } from '@lblod/ember-rdfa-editor';
 import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
 type Args = {
@@ -8,15 +7,11 @@ type Args = {
     controller: SayController;
 };
 export default class PersonNodeviewComponent extends Component<Args> {
-    PencilIcon: TOC<import("@appuniversum/ember-appuniversum/components/icons/pencil").PencilIconSignature>;
-    intl: IntlService;
     get controller(): SayController;
-    get documentLanguage(): string;
-    get translations(): {
-        placeholder: string;
-    };
     get node(): PNode;
     get mandatee(): Mandatee | null;
     get label(): string | undefined;
+    get filled(): boolean;
+    get content(): string | undefined;
 }
 export {};

package/declarations/addon/components/variable-plugin/variable/nodeview.d.ts

@@ -2,10 +2,10 @@ import Component from '@glimmer/component';
 import { ProsePlugin, SayView } from '@lblod/ember-rdfa-editor';
 import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
 export default class VariableNodeViewComponent extends Component<EmberNodeArgs> {
-    PencilIcon: TOC<import("@appuniversum/ember-appuniversum/components/icons/pencil").PencilIconSignature>;
     innerView?: SayView;
     get plugins(): ProsePlugin[];
     onClick(): void;
     initEditor(view: SayView): void;
-    get label(): string | undefined;
+    resetVariable(): void;
+    get label(): any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "25.2.0",
+  "version": "25.2.1",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -105,7 +105,7 @@
     "@glint/template": "^1.4.0",
     "@graphy/content.ttl.write": "^4.3.7",
     "@graphy/memory.dataset.fast": "4.3.3",
-    "@lblod/ember-rdfa-editor": "10.7.2",
+    "@lblod/ember-rdfa-editor": "10.7.3",
     "@rdfjs/types": "^1.1.0",
     "@release-it/keep-a-changelog": "^4.0.0",
     "@tsconfig/ember": "^3.0.8",
@@ -192,7 +192,7 @@
     "@appuniversum/ember-appuniversum": "^3.4.1",
     "@ember/string": "3.x",
     "@glint/template": "^1.4.0",
-    "@lblod/ember-rdfa-editor": "^10.7.2",
+    "@lblod/ember-rdfa-editor": "10.7.3",
     "ember-concurrency": "^3.1.0",
     "ember-element-helper": "^0.8.6",
     "ember-intl": "^7.0.0",

package/pnpm-lock.yaml

@@ -169,8 +169,8 @@ importers:
         specifier: 4.3.3
         version: 4.3.3
       '@lblod/ember-rdfa-editor':
-        specifier: 10.7.2
-        version: 10.7.2(2ef3gpurqxbttnmniw6grhzpuy)
+        specifier: 10.7.3
+        version: 10.7.3(2ef3gpurqxbttnmniw6grhzpuy)
       '@rdfjs/types':
         specifier: ^1.1.0
         version: 1.1.0
@@ -1595,8 +1595,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  '@lblod/ember-rdfa-editor@10.7.2':
-    resolution: {integrity: sha512-PSkYAAFqhl7+wpPtSlX0cO4sFG8Gk+/Fic1ORuMr2hltYUx0BIZB/3JeTmnr0UAiUAmMZG7XXM1nDbcTPnlfYg==}
+  '@lblod/ember-rdfa-editor@10.7.3':
+    resolution: {integrity: sha512-8VsatXPiST7AM4Ruf/DT0BvX5gotcL5DSTP9HZGmxZQV7QIp3XQyiey7zwGHaD0c/ZHneq/h+vbvg0/r08RIlw==}
     engines: {node: 16.* || 18.* || >= 20}
     peerDependencies:
       '@appuniversum/ember-appuniversum': ^3.4.2
@@ -4974,7 +4974,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: Upgrade to fsevents v2 to mitigate potential security issues
+    deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
 
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
@@ -7276,8 +7276,8 @@ packages:
   property-expr@2.0.6:
     resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==}
 
-  prosemirror-commands@1.6.0:
-    resolution: {integrity: sha512-xn1U/g36OqXn2tn5nGmvnnimAj/g1pUx2ypJJIe8WkVX83WyJVC5LTARaxZa2AtQRwntu9Jc5zXs9gL9svp/mg==}
+  prosemirror-commands@1.6.2:
+    resolution: {integrity: sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==}
 
   prosemirror-dev-tools@4.1.0:
     resolution: {integrity: sha512-TqMyXLiY8EUoq4f4LV+8dQVuRejwGfeOJdJWjrHNXR9ttKy3MVYBCqmiu3CDULgjv8gtLsqoZY6+ab6BZRmr1g==}
@@ -7310,6 +7310,9 @@ packages:
   prosemirror-state@1.4.3:
     resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==}
 
+  prosemirror-transform@1.10.2:
+    resolution: {integrity: sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==}
+
   prosemirror-transform@1.9.0:
     resolution: {integrity: sha512-5UXkr1LIRx3jmpXXNKDhv8OyAOeLTGuXNwdVfg8x27uASna/wQkr9p6fD3eupGOi4PLJfbezxTyi/7fSJypXHg==}
 
@@ -10735,7 +10738,7 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  '@lblod/ember-rdfa-editor@10.7.2(2ef3gpurqxbttnmniw6grhzpuy)':
+  '@lblod/ember-rdfa-editor@10.7.3(2ef3gpurqxbttnmniw6grhzpuy)':
     dependencies:
       '@appuniversum/ember-appuniversum': 3.4.2(yenc6o4wruytt4u2jbwlbsqcl4)
       '@babel/core': 7.24.7
@@ -10778,7 +10781,7 @@ snapshots:
       linkifyjs: 4.1.3
       mdn-polyfills: 5.20.0
       process: 0.11.10
-      prosemirror-commands: 1.6.0
+      prosemirror-commands: 1.6.2
       prosemirror-dropcursor: 1.8.1
       prosemirror-history: 1.4.1
       prosemirror-inputrules: 1.4.0
@@ -10787,7 +10790,7 @@ snapshots:
       prosemirror-schema-basic: 1.2.3
       prosemirror-schema-list: 1.4.1
       prosemirror-state: 1.4.3
-      prosemirror-transform: 1.9.0
+      prosemirror-transform: 1.10.2
       prosemirror-view: 1.33.8
       rdf-data-factory: 1.1.2
       relative-to-absolute-iri: 1.0.7
@@ -11181,7 +11184,7 @@ snapshots:
       prosemirror-keymap: 1.2.2
       prosemirror-model: 1.21.3
       prosemirror-state: 1.4.3
-      prosemirror-transform: 1.9.0
+      prosemirror-transform: 1.10.2
       prosemirror-view: 1.33.8
 
   '@simple-dom/document@1.4.0':
@@ -18266,11 +18269,11 @@ snapshots:
 
   property-expr@2.0.6: {}
 
-  prosemirror-commands@1.6.0:
+  prosemirror-commands@1.6.2:
     dependencies:
       prosemirror-model: 1.21.3
       prosemirror-state: 1.4.3
-      prosemirror-transform: 1.9.0
+      prosemirror-transform: 1.10.2
 
   prosemirror-dev-tools@4.1.0(@babel/core@7.24.7)(@babel/template@7.24.7)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
@@ -18303,20 +18306,20 @@ snapshots:
   prosemirror-dropcursor@1.8.1:
     dependencies:
       prosemirror-state: 1.4.3
-      prosemirror-transform: 1.9.0
+      prosemirror-transform: 1.10.2
       prosemirror-view: 1.33.8
 
   prosemirror-history@1.4.1:
     dependencies:
       prosemirror-state: 1.4.3
-      prosemirror-transform: 1.9.0
+      prosemirror-transform: 1.10.2
       prosemirror-view: 1.33.8
       rope-sequence: 1.3.4
 
   prosemirror-inputrules@1.4.0:
     dependencies:
       prosemirror-state: 1.4.3
-      prosemirror-transform: 1.9.0
+      prosemirror-transform: 1.10.2
 
   prosemirror-keymap@1.2.2:
     dependencies:
@@ -18335,7 +18338,7 @@ snapshots:
     dependencies:
       prosemirror-model: 1.21.3
       prosemirror-state: 1.4.3
-      prosemirror-transform: 1.9.0
+      prosemirror-transform: 1.10.2
 
   prosemirror-state@1.4.3:
     dependencies:
@@ -18343,6 +18346,10 @@ snapshots:
       prosemirror-transform: 1.9.0
       prosemirror-view: 1.33.8
 
+  prosemirror-transform@1.10.2:
+    dependencies:
+      prosemirror-model: 1.21.3
+
   prosemirror-transform@1.9.0:
     dependencies:
       prosemirror-model: 1.21.3

package/translations/en-US.yaml

@@ -201,8 +201,8 @@ date-plugin:
     long-month-content: January, February, ..., December
     long-year: Long year
   insert:
-    date: 'Insert date'
-    datetime: 'Insert date and time'
+    date: 'Date'
+    datetime: 'Date and time'
   card:
     title: 'Date'
     insert-date: 'Insert date'
@@ -232,7 +232,7 @@ document-title-plugin:
 
 variable:
   number:
-    placeholder: Insert number
+    placeholder: Number
     label: number
     type-number: Type a number...
     error-not-integer: Only integers are allowed
@@ -272,7 +272,7 @@ variable-plugin:
     to: to
   person:
     card-title: Insert person
-    nodeview-placeholder: Insert person
+    nodeview-placeholder: Person
   autofill:
     autofillKey: Autofill Key
     convertToString: Replace variable node with plain text on text insertion
@@ -430,7 +430,7 @@ editor-plugins:
         projection-error: 'Unable to convert location coordinates: {coords}'
         contact: In case of persisting issues, contact <a href="mailto:{email}">{email}</a>.
     nodeview:
-      placeholder: Insert address
+      placeholder: Address
 
 confidentiality-plugin:
   redact: Redact

package/translations/nl-BE.yaml

@@ -201,8 +201,8 @@ date-plugin:
     long-month-content: Januari, Februari, ..., December
     long-year: Jaar
   insert:
-    date: 'Datum invoegen'
-    datetime: 'Datum en tijd invoegen'
+    date: 'Datum'
+    datetime: 'Datum en tijd'
   card:
     title: 'Datum'
     insert-date: 'Datum invoegen'
@@ -236,7 +236,7 @@ table-of-contents-plugin:
 
 variable:
   number:
-    placeholder: Voeg getal in
+    placeholder: Getal
     label: nummer
     type-number: typ een nummer...
     error-not-integer: Enkel gehele getallen zijn toegelaten
@@ -276,7 +276,7 @@ variable-plugin:
     to: tot
   person:
     card-title: Persoon invoegen
-    nodeview-placeholder: Voeg persoon in
+    nodeview-placeholder: Persoon
   autofill:
     autofillKey: Sleutelwaarde
     convertToString: Vervang variabele door platte tekst bij invoegen
@@ -429,7 +429,7 @@ editor-plugins:
         projection-error: 'Kan locatiecoördinaten niet converteren: {coords}'
         contact: Bij blijvende problemen, contacteer <a href="mailto:{email}">{email}</a>.
     nodeview:
-      placeholder: Voeg adres in
+      placeholder: Adres
 
 confidentiality-plugin:
   redact: Redigeren

package/addon/components/variable-plugin/autofilled/nodeview.gts

@@ -1,100 +0,0 @@
-import Component from '@glimmer/component';
-import {
-  NodeSelection,
-  PNode,
-  ProsePlugin,
-  SayController,
-  SayView,
-} from '@lblod/ember-rdfa-editor';
-import { editableNodePlugin } from '@lblod/ember-rdfa-editor/plugins/editable-node';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
-
-import {
-  EmberNodeArgs,
-  SayNodeViewConstructor,
-} from '@lblod/ember-rdfa-editor/utils/ember-node';
-import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
-import { on } from '@ember/modifier';
-import EmbeddedEditor from '@lblod/ember-rdfa-editor/components/ember-node/embedded-editor';
-
-type Args = EmberNodeArgs & {
-  getPos: () => number | undefined;
-  node: PNode;
-  updateAttribute: (attr: string, value: unknown) => void;
-  controller: SayController;
-  view: SayView;
-  selected: boolean;
-  selectNode: () => void;
-  nodeViews: Record<string, SayNodeViewConstructor>;
-};
-
-export default class AutoFilledVariableNodeViewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @tracked innerView?: SayView;
-
-  get plugins(): ProsePlugin[] {
-    return [editableNodePlugin(this.args.getPos)];
-  }
-  @action
-  onClick() {
-    if (this.innerView) {
-      if (this.innerView.state.doc.firstChild?.type.name === 'placeholder') {
-        this.innerView.focus();
-        // Use request animation frame to only change the selection when the focus has been established
-        window.requestAnimationFrame(() => {
-          if (this.innerView) {
-            const tr = this.innerView.state.tr;
-            tr.setSelection(NodeSelection.create(this.innerView?.state.doc, 0));
-            this.innerView?.dispatch(tr);
-          }
-        });
-      } else {
-        this.innerView.focus();
-      }
-    }
-  }
-  @action
-  initEditor(view: SayView) {
-    this.innerView = view;
-  }
-
-  get label() {
-    if (this.innerView?.state.doc.firstChild?.type.name !== 'placeholder') {
-      return '';
-    }
-    return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
-  }
-  <template>
-    <AuPill
-      @icon={{this.PencilIcon}}
-      @iconAlignment='right'
-      class='variable'
-      {{on 'click' this.onClick}}
-    >
-      <EmbeddedEditor
-        @controller={{@controller}}
-        @view={{@view}}
-        @getPos={{@getPos}}
-        @node={{@node}}
-        @selected={{@selected}}
-        @initEditor={{this.initEditor}}
-        @nodeViews={{@nodeViews}}
-        @plugins={{this.plugins}}
-        @updateAttribute={{@updateAttribute}}
-        @selectNode={{@selectNode}}
-        @placeholder=''
-        @contentDecorations={{@contentDecorations}}
-      />
-      {{#if this.label}}
-        <span class='label'>
-          ({{this.label}})
-        </span>
-      {{/if}}
-    </AuPill>
-  </template>
-}

package/addon/components/variable-plugin/location/nodeview.hbs

@@ -1,24 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable'
-  {{on 'click' this.onClick}}
->
-  <EmberNode::EmbeddedEditor
-    @controller={{@controller}}
-    @node={{@node}}
-    @view={{@view}}
-    @getPos={{@getPos}}
-    @selected={{@selected}}
-    @initEditor={{this.initEditor}}
-    @plugins={{this.plugins}}
-    @decorations={{@decorations}}
-    @contentDecorations={{@contentDecorations}}
-  />
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
-</AuPill>

package/addon/components/variable-plugin/location/nodeview.ts

@@ -1,46 +0,0 @@
-import Component from '@glimmer/component';
-import { NodeSelection, ProsePlugin, SayView } from '@lblod/ember-rdfa-editor';
-import { editableNodePlugin } from '@lblod/ember-rdfa-editor/plugins/editable-node';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
-import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
-
-export default class LocationNodeViewComponent extends Component<EmberNodeArgs> {
-  PencilIcon = PencilIcon;
-
-  @tracked innerView?: SayView;
-
-  get plugins(): ProsePlugin[] {
-    return [editableNodePlugin(this.args.getPos)];
-  }
-  @action
-  onClick() {
-    if (this.innerView) {
-      if (this.innerView.state.doc.firstChild?.type.name === 'placeholder') {
-        this.innerView.focus();
-        // Use request animation frame to only change the selection when the focus has been established
-        window.requestAnimationFrame(() => {
-          if (this.innerView) {
-            const tr = this.innerView.state.tr;
-            tr.setSelection(NodeSelection.create(this.innerView?.state.doc, 0));
-            this.innerView?.dispatch(tr);
-          }
-        });
-      } else {
-        this.innerView.focus();
-      }
-    }
-  }
-  @action
-  initEditor(view: SayView) {
-    this.innerView = view;
-  }
-
-  get label() {
-    if (this.innerView?.state.doc.firstChild?.type.name !== 'placeholder') {
-      return '';
-    }
-    return this.args.node.attrs.label as string;
-  }
-}

package/declarations/addon/components/variable-plugin/autofilled/nodeview.d.ts

@@ -1,22 +0,0 @@
-import Component from '@glimmer/component';
-import { PNode, ProsePlugin, SayController, SayView } from '@lblod/ember-rdfa-editor';
-import { EmberNodeArgs, SayNodeViewConstructor } from '@lblod/ember-rdfa-editor/utils/ember-node';
-type Args = EmberNodeArgs & {
-    getPos: () => number | undefined;
-    node: PNode;
-    updateAttribute: (attr: string, value: unknown) => void;
-    controller: SayController;
-    view: SayView;
-    selected: boolean;
-    selectNode: () => void;
-    nodeViews: Record<string, SayNodeViewConstructor>;
-};
-export default class AutoFilledVariableNodeViewComponent extends Component<Args> {
-    PencilIcon: TOC<import("@appuniversum/ember-appuniversum/components/icons/pencil").PencilIconSignature>;
-    innerView?: SayView;
-    get plugins(): ProsePlugin[];
-    onClick(): void;
-    initEditor(view: SayView): void;
-    get label(): string | undefined;
-}
-export {};

package/declarations/addon/components/variable-plugin/location/nodeview.d.ts

@@ -1,11 +0,0 @@
-import Component from '@glimmer/component';
-import { ProsePlugin, SayView } from '@lblod/ember-rdfa-editor';
-import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
-export default class LocationNodeViewComponent extends Component<EmberNodeArgs> {
-    PencilIcon: TOC<import("@appuniversum/ember-appuniversum/components/icons/pencil").PencilIconSignature>;
-    innerView?: SayView;
-    get plugins(): ProsePlugin[];
-    onClick(): void;
-    initEditor(view: SayView): void;
-    get label(): string;
-}