@lblod/ember-rdfa-editor-lblod-plugins 25.1.0 → 25.2.0-dev.e4ae2274de089de459ac3b495a3e5b00b7cb4279

package/.changeset/afraid-pianos-visit.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Redesign variable pills

package/.changeset/olive-parrots-crash.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Bump ember-rdfa-editor to 10.7.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 25.2.0
+
+### Minor Changes
+
+- [#496](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/496) [`2e3c09f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2e3c09f95db40967caaceaa791e7eefd6187c5e4) Thanks [@piemonkey](https://github.com/piemonkey)! - Redesign snippet placeholder to have more intuitive UX
+
+- [#503](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/503) [`37ba9c3`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/37ba9c3ecd2c0452fb49ea1d0bb2704e6e716d05) Thanks [@elpoelma](https://github.com/elpoelma)! - Extension of configuration options of `citation-plugin`.
+  The `CitationPluginNodeConfig` is extended to allow for a `activeInNode` condition.
+  This allows you to specify a condition which an active/context node needs to satisfy.
+
+  ```ts
+  interface CitationPluginNodeConditionConfig {
+    type: 'nodes';
+    regex?: RegExp;
+
+    activeInNode(node: PNode, state?: EditorState): boolean;
+  }
+  ```
+
+  The previously expected `activeInNodeTypes` option is marked as deprecated and will be removed in a future release.
+
+- [#501](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/501) [`997fa98`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/997fa986a7094349ad368d291cb8364e5c50a140) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Add snippet list names to the modal title
+
 ## 25.1.0
 
 ### Minor Changes

package/README.md

@@ -335,9 +335,11 @@ Make `this.citationPlugin` a tracked reference to the plugin created with the fu
 
 Configuration:
 
-- type: it can be 'nodes' or 'ranges' if nodes is selected you are expected to pass the `activeInNodeTypes` function, otherwise you should pass the `activeInRanges` function
-- activeInNodeTypes: it's a function that gets the prosemirror schema and the state of the actual instance of the editor and returns a `Set` of nodetypes where the plugin should be active
-- activeInRanges: it's a function that gets the state of the actual instance of the editor and returns an array of ranges for the plugin to be active in, for example `[[0,50], [70,100]]`
+- type (optional): it can either be 'nodes', or 'ranges'
+  * if 'nodes' is selected, you are expected to pass the `activeInNode` function. It's a function which expects an instance of a prosemirror node and returns whether it should be active in that node. The previously expected `activeInNodeTypes` is marked as deprecated and will be removed in a future release.
+  * if 'ranges' is selected, you are expected to pass the `activeInRanges` function. It's a function that gets the state of the actual instance of the editor and returns an array of ranges for the plugin to be active in, for example `[[0,50], [70,100]]`
+  * if no type is provided, the citation plugin will be activated document-wide
+
 - regex: you can provide your custom regex to detect citations, if not the default one will be used
 
 A common usecase is to have the plugin active in the entire document. Here's how to do that using each configuration type:
@@ -347,9 +349,8 @@ import { citationPlugin } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/c
 
 const configA = {
   type: 'nodes',
-  activeInNodeTypes(schema) {
-    // the root node of the document should always have the doc type
-    return new Set([schema.nodes.doc]);
+  activeInNode(node, state) {
+    return node.type === state.schema.nodes.doc;
   },
 };
 

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

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import {
   Fragment,
+  PNode,
   SayController,
   Slice,
   Transaction,
@@ -14,7 +15,7 @@ import {
   LEGISLATION_TYPES,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/types';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { findParentNode } from '@curvenote/prosemirror-utils';
 import { Article } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/article';
 import { LegalDocument } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
 import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
@@ -62,10 +63,13 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
       return true;
     }
     const { selection } = this.controller.mainEditorState;
-    if (this.config.type === 'ranges') {
-      const ranges = this.config.activeInRanges(
-        this.controller.mainEditorState,
-      );
+    const config = this.config;
+    if (!('type' in config)) {
+      // Enable plugin document wide
+      return false;
+    }
+    if (config.type === 'ranges') {
+      const ranges = config.activeInRanges(this.controller.mainEditorState);
       for (const range of ranges) {
         if (selection.from > range[0] && selection.from < range[1]) {
           return false;
@@ -73,17 +77,22 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
       }
       return true;
     } else {
-      const nodeTypes = this.config.activeInNodeTypes(
-        this.controller.schema,
-        this.controller.mainEditorState,
-      );
-      // if the doc node is included, the button should always be active
-      // the findParentNodeOfType util we import does NOT consider the doc node
-      // in its search.
-      if (nodeTypes.has(this.controller.schema.nodes.doc)) {
+      let condition: (node: PNode) => boolean;
+      if ('activeInNodeTypes' in config) {
+        const nodeTypes = config.activeInNodeTypes(
+          this.controller.schema,
+          this.controller.mainEditorState,
+        );
+        condition = (node) => nodeTypes.has(node.type);
+      } else {
+        condition = (node) =>
+          config.activeInNode(node, this.controller.mainEditorState);
+      }
+
+      if (condition(this.controller.mainEditorState.doc)) {
         return false;
       }
-      return !findParentNodeOfType([...nodeTypes])(selection);
+      return !findParentNode(condition)(selection);
     }
   }
 

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/snippet-plugin/nodes/placeholder.gts

@@ -1,21 +1,32 @@
 import Component from '@glimmer/component';
+import { service } from '@ember/service';
 import { on } from '@ember/modifier';
+import IntlService from 'ember-intl/services/intl';
 import t from 'ember-intl/helpers/t';
-import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
 import { PlusTextIcon } from '@appuniversum/ember-appuniversum/components/icons/plus-text';
+import AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import { type EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
-import { service } from '@ember/service';
-import IntlService from 'ember-intl/services/intl';
+import { type SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 
 interface Signature {
-  Args: Pick<EmberNodeArgs, 'node' | 'selectNode'>;
+  Args: Pick<EmberNodeArgs, 'node' | 'selectNode'> & {
+    insertSnippet: () => void;
+  };
 }
 
 export default class SnippetPluginPlaceholder extends Component<Signature> {
   @service declare intl: IntlService;
+
+  get node() {
+    return this.args.node;
+  }
   get listNames() {
     return this.args.node.attrs.snippetListNames;
   }
+  get config(): SnippetPluginConfig {
+    return this.node.attrs.config;
+  }
   get isSingleList() {
     return this.listNames.length === 1;
   }
@@ -28,24 +39,32 @@ export default class SnippetPluginPlaceholder extends Component<Signature> {
       return this.intl.t('snippet-plugin.placeholder.title-multiple');
     }
   }
+
   <template>
-    <AuAlert
-      @title={{this.alertTitle}}
-      @skin='warning'
-      @icon={{PlusTextIcon}}
-      @size='small'
-      class='say-snippet-placeholder'
-      {{on 'click' @selectNode}}
-    >
-      {{#unless this.isSingleList}}
-        {{t 'snippet-plugin.placeholder.active-lists'}}
-        <ul>
-          {{#each this.listNames as |listName|}}
-            <li>{{listName}}</li>
-          {{/each}}
-        </ul>
-      {{/unless}}
-      {{t 'snippet-plugin.placeholder.text'}}
-    </AuAlert>
+    {{! template-lint-disable no-invalid-interactive }}
+    <div class='say-snippet-placeholder' {{on 'click' @selectNode}}>
+      <div class='say-snippet-placeholder__icon'>
+        <AuIcon @icon={{PlusTextIcon}} />
+      </div>
+      <div class='say-snippet-placeholder__content'>
+        <p class='say-snippet-placeholder__title'>{{this.alertTitle}}</p>
+        {{#unless this.isSingleList}}
+          <ul class='say-snippet-placeholder__list'>
+            {{#each this.listNames as |listName|}}
+              <li>{{listName}}</li>
+            {{/each}}
+          </ul>
+        {{/unless}}
+        {{#unless this.config.hidePlaceholderInsertButton}}
+          <AuButton
+            @skin='link'
+            class='say-snippet-placeholder__button'
+            {{on 'click' @insertSnippet}}
+          >
+            {{t 'snippet-plugin.placeholder.button'}}
+          </AuButton>
+        {{/unless}}
+      </div>
+    </div>
   </template>
 }

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

@@ -13,6 +13,7 @@ import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
 import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 import { type EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
 import {
+  NodeSelection,
   type PNode,
   ProseParser,
   type Selection,
@@ -30,6 +31,8 @@ import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transactio
 import { recalculateNumbers } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/structure-plugin/recalculate-structure-numbers';
 import { createSnippetPlaceholder } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/nodes/snippet-placeholder';
 import { hasDecendant } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/has-descendant';
+import SnippetPlaceholder from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/nodes/placeholder';
+import { getSnippetListIdsFromNode } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
 
 interface ButtonSig {
   Args: {
@@ -76,6 +79,13 @@ export default class SnippetNode extends Component<Signature> {
   get node() {
     return this.args.node;
   }
+  get isPlaceholder() {
+    return this.node.content.size === 0;
+  }
+  get allowMultipleSnippets() {
+    return this.node.attrs.allowMultipleSnippets as boolean;
+  }
+
   @action
   closeModal() {
     this.showModal = false;
@@ -85,10 +95,6 @@ export default class SnippetNode extends Component<Signature> {
     this.showModal = true;
   }
 
-  get allowMultipleSnippets() {
-    return this.node.attrs.allowMultipleSnippets as boolean;
-  }
-
   @action
   addFragment() {
     if (this.allowMultipleSnippets) {
@@ -123,7 +129,7 @@ export default class SnippetNode extends Component<Signature> {
         const node = createSnippetPlaceholder({
           listProperties: {
             placeholderId: this.node.attrs.placeholderId,
-            listIds: this.node.attrs.snippetListIds,
+            listIds: getSnippetListIdsFromNode(this.node),
             names: this.node.attrs.snippetListNames,
             importedResources: this.node.attrs.importedResources,
           },
@@ -155,6 +161,12 @@ export default class SnippetNode extends Component<Signature> {
     return this.controller.mainEditorState.selection;
   }
   get isActive(): boolean {
+    if (
+      this.selection instanceof NodeSelection &&
+      this.selection.node === this.node
+    ) {
+      return true;
+    }
     const ancestor = findAncestors(this.selection.$from, (node: PNode) => {
       return hasOutgoingNamedNodeTriple(
         node.attrs,
@@ -188,7 +200,7 @@ export default class SnippetNode extends Component<Signature> {
         title,
         listProperties: {
           placeholderId: this.node.attrs.placeholderId,
-          listIds: this.node.attrs.snippetListIds,
+          listIds: getSnippetListIdsFromNode(this.node),
           names: this.node.attrs.snippetListNames,
           importedResources: this.node.attrs.importedResources,
         },
@@ -199,40 +211,49 @@ export default class SnippetNode extends Component<Signature> {
   }
 
   <template>
-    <div class='say-snippet-card'>
-      <div class='say-snippet-title'>{{this.node.attrs.title}}</div>
-      <div class='say-snippet-content'>{{yield}}</div>
-      <div class='say-snippet-icons' contenteditable='false'>
-        <SnippetButton
-          @icon={{SynchronizeIcon}}
-          @helpText='snippet-plugin.snippet-node.change-fragment'
-          {{on 'click' this.editFragment}}
-          @isActive={{this.isActive}}
-        />
-        <SnippetButton
-          @icon={{BinIcon}}
-          @helpText='snippet-plugin.snippet-node.remove-fragment'
-          {{on 'click' this.deleteFragment}}
-          @isActive={{this.isActive}}
-          class='say-snippet-remove-button'
-        />
-        {{#if this.allowMultipleSnippets}}
+    {{#if this.isPlaceholder}}
+      <SnippetPlaceholder
+        @node={{@node}}
+        @selectNode={{@selectNode}}
+        @insertSnippet={{this.editFragment}}
+      />
+    {{else}}
+      <div class='say-snippet-card'>
+        <div class='say-snippet-title'>{{this.node.attrs.title}}</div>
+        <div class='say-snippet-content'>{{yield}}</div>
+        <div class='say-snippet-icons' contenteditable='false'>
           <SnippetButton
-            @icon={{AddIcon}}
-            @helpText='snippet-plugin.snippet-node.add-fragment'
-            {{on 'click' this.addFragment}}
+            @icon={{SynchronizeIcon}}
+            @helpText='snippet-plugin.snippet-node.change-fragment'
+            {{on 'click' this.editFragment}}
             @isActive={{this.isActive}}
           />
-        {{/if}}
-      </div>
+          <SnippetButton
+            @icon={{BinIcon}}
+            @helpText='snippet-plugin.snippet-node.remove-fragment'
+            {{on 'click' this.deleteFragment}}
+            @isActive={{this.isActive}}
+            class='say-snippet-remove-button'
+          />
+          {{#if this.allowMultipleSnippets}}
+            <SnippetButton
+              @icon={{AddIcon}}
+              @helpText='snippet-plugin.snippet-node.add-fragment'
+              {{on 'click' this.addFragment}}
+              @isActive={{this.isActive}}
+            />
+          {{/if}}
+        </div>
 
-    </div>
+      </div>
+    {{/if}}
     <SearchModal
       @open={{this.showModal}}
       @closeModal={{this.closeModal}}
       @config={{this.node.attrs.config}}
       @onInsert={{this.onInsert}}
-      @snippetListIds={{this.node.attrs.snippetListIds}}
+      @snippetListIds={{getSnippetListIdsFromNode this.node}}
+      @snippetListNames={{this.node.attrs.snippetListNames}}
     />
   </template>
 }

package/addon/components/snippet-plugin/search-modal.hbs

@@ -3,7 +3,10 @@
   class='snippet-modal'
   @modalOpen={{@open}}
   @closeModal={{this.closeModal}}
-  @title={{t 'snippet-plugin.modal.title'}}
+  @title={{t
+    'snippet-plugin.modal.title'
+    snippetListNames=this.snippetListNames
+  }}
   @size='large'
   @padding='none'
   as |modal|

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

@@ -12,6 +12,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
 interface Args {
   config: SnippetPluginConfig;
   snippetListIds: string[] | undefined;
+  snippetListNames: string[] | undefined;
   closeModal: () => void;
   open: boolean;
   onInsert: (content: string, title: string) => void;
@@ -37,6 +38,10 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
     return this.inputSearchText;
   }
 
+  get snippetListNames() {
+    return this.args.snippetListNames?.map((name) => `"${name}"`).join(', ');
+  }
+
   @action
   setInputSearchText(event: InputEvent) {
     assert(

package/addon/components/snippet-plugin/snippet-insert-rdfa.gts

@@ -7,10 +7,7 @@ import {
   type SnippetPluginConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 import { findParentNodeClosestToPos } from '@curvenote/prosemirror-utils';
-import {
-  getAssignedSnippetListsIdsFromProperties,
-  getSnippetListIdsProperties,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
+import { getSnippetListIdsFromNode } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
 import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 import SnippetInsert from './snippet-insert';
 
@@ -25,13 +22,11 @@ interface Sig {
 export default class SnippetInsertRdfaComponent extends Component<Sig> {
   get listProperties(): SnippetListProperties | undefined {
     const activeNode = this.args.node.value;
-    const activeNodeSnippetListIds = getSnippetListIdsProperties(activeNode);
+    const listIds = getSnippetListIdsFromNode(activeNode);
 
-    if (activeNodeSnippetListIds.length > 0) {
+    if (listIds.length > 0) {
       return {
-        listIds: getAssignedSnippetListsIdsFromProperties(
-          activeNodeSnippetListIds,
-        ),
+        listIds,
         placeholderId: activeNode.attrs.placeholderId,
         names: activeNode.attrs.snippetListNames,
         importedResources: activeNode.attrs.importedResources,
@@ -49,11 +44,11 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
       isResourceNode(node),
     );
     while (parentNode) {
-      const properties = getSnippetListIdsProperties(parentNode.node);
+      const listIds = getSnippetListIdsFromNode(parentNode.node);
 
-      if (properties.length > 0) {
+      if (listIds.length > 0) {
         return {
-          listIds: getAssignedSnippetListsIdsFromProperties(properties),
+          listIds,
           placeholderId: parentNode.node.attrs.placeholderId,
           names: parentNode.node.attrs.snippetListNames,
           importedResources: parentNode.node.attrs.importedResources,

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

@@ -89,6 +89,7 @@ export default class SnippetInsertComponent extends Component<Sig> {
       @config={{@config}}
       @onInsert={{this.onInsert}}
       @snippetListIds={{@listProperties.listIds}}
+      @snippetListNames={{@listProperties.names}}
     />
   </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>