@lblod/ember-rdfa-editor-lblod-plugins 22.5.2 → 23.0.0-dev.0459b40ac0bfac80168828d9ab8afa7c1418c4fa

package/.changeset/mean-deers-call.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Add autofill variable

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 23.0.0
+
+### Major Changes
+
+- [#478](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/478) [`b3cf324`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/b3cf324e6b959a50ba354e1563b04a0e12f41f67) Thanks [@abeforgit](https://github.com/abeforgit)! - Run recalculate numbers after inserting a snippet
+
+### Minor Changes
+
+- [#480](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/480) [`789180f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/789180fde786000756c2880dca9591866bf7132f) Thanks [@piemonkey](https://github.com/piemonkey)! - Internal: update to latest ember-resources 7.0.2. Requires an upgrade only if consumer app uses
+  ember dependency-lint to maintain matching versions.
+
 ## 22.5.2
 
 ### Patch Changes

package/addon/components/besluit-topic-plugin/besluit-topic-toolbar-dropdown.ts

@@ -2,7 +2,7 @@ import { tracked } from '@glimmer/tracking';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
-import { trackedFunction } from 'ember-resources/util/function';
+import { trackedFunction } from 'reactiveweb/function';
 import { ELI } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
 import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';

package/addon/components/besluit-type-plugin/toolbar-dropdown.ts

@@ -7,7 +7,7 @@ import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import fetchBesluitTypes, {
   BesluitType,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
-import { trackedFunction } from 'ember-resources/util/function';
+import { trackedFunction } from 'reactiveweb/function';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
 import { RDF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';

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

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { action } from '@ember/object';
 import { capitalize } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
-import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 import {
   Option,
   unwrap,

package/addon/components/citation-plugin/citations/legal-document-detail.ts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 import { CalendarIcon } from '@appuniversum/ember-appuniversum/components/icons/calendar';
 import { PlusTextIcon } from '@appuniversum/ember-appuniversum/components/icons/plus-text';
 import { LinkExternalIcon } from '@appuniversum/ember-appuniversum/components/icons/link-external';

package/addon/components/citation-plugin/citations/search-modal.ts

@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { service } from '@ember/service';
 import { capitalize } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
-import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 import {
   isGemeenteBesluitType,
   LEGISLATION_TYPE_CONCEPTS,

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

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 import { restartableTask } from 'ember-concurrency';
-import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
 
 import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';

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

@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import { restartableTask, timeout } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
 import { trackedReset } from 'tracked-toolbox';
-import { trackedTask } from 'ember-resources/util/ember-concurrency';
+import { trackedTask } from 'reactiveweb/ember-concurrency';
 import { service } from '@ember/service';
 import { on } from '@ember/modifier';
 import type { SafeString } from '@ember/template/-private/handlebars';

package/addon/components/lpdc-plugin/lpdc-modal.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { restartableTask, timeout } from 'ember-concurrency';
-import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 
 import { tracked } from '@glimmer/tracking';
 

package/addon/components/roadsign-regulation-plugin/measure-template.ts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import includeInstructions from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/includeInstructions';
 import RoadsignRegistryService from '@lblod/ember-rdfa-editor-lblod-plugins/services/roadsign-registry';
-import { trackedFunction } from 'ember-resources/util/function';
+import { trackedFunction } from 'reactiveweb/function';
 
 type Args = {
   template: string;

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

@@ -25,7 +25,10 @@ import {
   RDF,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import { createAndInsertSnippet } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/nodes/snippet';
+import insertSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/commands/insert-snippet';
+import { isNone } from '@lblod/ember-rdfa-editor/utils/_private/option';
+import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
+import { recalculateNumbers } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/structure-plugin/recalculate-structure-numbers';
 
 interface ButtonSig {
   Args: {
@@ -93,7 +96,10 @@ export default class SnippetNode extends Component<Signature> {
     const position = this.args.getPos();
     if (position !== undefined) {
       this.controller.withTransaction((tr) => {
-        return tr.deleteRange(position, position + this.node.nodeSize);
+        return transactionCombinator(
+          this.controller.mainEditorState,
+          tr.deleteRange(position, position + this.node.nodeSize),
+        )([recalculateNumbers]).transaction;
       });
     }
   }
@@ -121,46 +127,32 @@ export default class SnippetNode extends Component<Signature> {
   }
   @action
   onInsert(content: string, title: string) {
-    let rangeStart = 0;
-    let rangeEnd = 0;
-    if (this.args.getPos() === undefined) return;
+    this.closeModal();
+    const assignedSnippetListsIds = this.node.attrs.assignedSnippetListsIds;
+    let start = 0;
+    let end = 0;
+    const pos = this.args.getPos();
+    if (isNone(pos)) {
+      return;
+    }
     if (this.mode === 'add') {
       // Add new snippet
-      rangeStart = (this.args.getPos() as number) + this.node.nodeSize;
-      rangeEnd = (this.args.getPos() as number) + this.node.nodeSize;
+      start = pos + this.node.nodeSize;
+      end = pos + this.node.nodeSize;
     } else {
       //Replace current snippet
-      rangeStart = this.args.getPos() as number;
-      rangeEnd = (this.args.getPos() as number) + this.node.nodeSize;
-    }
-
-    const domParser = new DOMParser();
-    const parsed = domParser.parseFromString(content, 'text/html').body;
-    const documentDiv = parsed.querySelector('div[data-say-document="true"]');
-
-    this.closeModal();
-
-    if (documentDiv) {
-      return createAndInsertSnippet(
-        {
-          controller: this.controller,
-          content,
-          title,
-          snippetListIds: this.node.attrs.assignedSnippetListsIds,
-          importedResources: this.node.attrs.importedResources,
-        },
-        (tr, snippet) => tr.replaceRangeWith(rangeStart, rangeEnd, snippet),
-      );
+      start = pos;
+      end = pos + this.node.nodeSize;
     }
-
-    this.controller.withTransaction((tr) =>
-      tr.replaceRange(
-        rangeStart,
-        rangeEnd,
-        this.createSliceFromElement(parsed),
-      ),
+    this.controller.doCommand(
+      insertSnippet({
+        content,
+        title,
+        assignedSnippetListsIds,
+        importedResources: this.node.attrs.importedResources,
+        range: { start, end },
+      }),
     );
-    this.closeModal();
   }
 
   <template>

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

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 import { restartableTask, timeout } from 'ember-concurrency';
-import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 
 import { tracked } from '@glimmer/tracking';
 

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

@@ -11,8 +11,8 @@ import {
   Slice,
 } from '@lblod/ember-rdfa-editor';
 import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
-import { createAndInsertSnippet } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/nodes/snippet';
 import { type ImportedResourceMap } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import insertSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/commands/insert-snippet';
 import SearchModal from './search-modal';
 
 interface Sig {
@@ -56,29 +56,15 @@ export default class SnippetInsertComponent extends Component<Sig> {
 
   @action
   onInsert(content: string, title: string) {
-    const domParser = new DOMParser();
-    const parsed = domParser.parseFromString(content, 'text/html').body;
-    const documentDiv = parsed.querySelector('div[data-say-document="true"]');
-
     this.closeModal();
-    const assignedSnippetListProperties = this.args.snippetListProperties;
-
-    if (documentDiv && assignedSnippetListProperties) {
-      return createAndInsertSnippet(
-        {
-          controller: this.controller,
-          content,
-          title,
-          snippetListIds: assignedSnippetListProperties.listIds,
-          importedResources: assignedSnippetListProperties.importedResources,
-        },
-        (tr, snippet) => tr.replaceSelectionWith(snippet),
-      );
-    } else {
-      return this.controller.withTransaction((tr) =>
-        tr.replaceSelection(this.createSliceFromElement(parsed)),
-      );
-    }
+    this.controller.doCommand(
+      insertSnippet({
+        content,
+        title,
+        assignedSnippetListsIds: this.args.snippetListProperties?.listIds || [],
+        importedResources: this.args.snippetListProperties?.importedResources,
+      }),
+    );
   }
 
   get disabled() {

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

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { restartableTask, timeout } from 'ember-concurrency';
-import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 
 import { tracked } from '@glimmer/tracking';
 

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

@@ -11,7 +11,7 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/address-helpers';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { trackedReset } from 'tracked-toolbox';
-import { trackedTask } from 'ember-resources/util/ember-concurrency';
+import { trackedTask } from 'reactiveweb/ember-concurrency';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';

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

@@ -0,0 +1,225 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { NodeSelection, type SayController } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
+import AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import AuCheckbox from '@appuniversum/ember-appuniversum/components/au-checkbox';
+import AuNativeInput from '@lblod/ember-rdfa-editor-lblod-plugins/components/au-native-input';
+import AuCard from '@appuniversum/ember-appuniversum/components/au-card';
+import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
+import t from 'ember-intl/helpers/t';
+import { on } from '@ember/modifier';
+import { trackedReset } from 'tracked-toolbox';
+import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory/data-factory';
+import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import LabelInput from '../utils/label-input';
+import {
+  ContentLiteralTerm,
+  SayLiteral,
+  SayNamedNode,
+} from '@lblod/ember-rdfa-editor/core/say-data-factory';
+type Args = {
+  controller: SayController;
+};
+
+type nodeProperty =
+  | {
+      predicate: string;
+      object: SayNamedNode<string>;
+    }
+  | {
+      predicate: string;
+      object: SayLiteral;
+    }
+  | {
+      predicate: string;
+      object: ContentLiteralTerm;
+    };
+
+export default class AutoFilledVariableInsertComponent extends Component<Args> {
+  @service declare intl: IntlService;
+
+  // memo is the path to the trigger, which calls update
+  // see https://github.com/tracked-tools/tracked-toolbox?tab=readme-ov-file#trackedreset
+  // it's sort of badly explained in the docs, but it's a more generic version
+  // of localCopy, which we can't use here cause our derived state from the args
+  // is too complex to express as a string path
+  @trackedReset({
+    memo: 'args.controller.mainEditorState',
+    // using this as the first arg is special typescript syntax
+    // which allows you to explicitly type the this context, cause
+    // ts is not smart enough to know that
+    update(this: AutoFilledVariableInsertComponent) {
+      return this.convertToStringAttr;
+    },
+  })
+  convertToString: boolean = false;
+
+  @trackedReset({
+    memo: 'args.controller.mainEditorState',
+    update(this: AutoFilledVariableInsertComponent) {
+      return this.autofillKeyAttr;
+    },
+  })
+  autofillKey?: string;
+
+  @trackedReset({
+    memo: 'args.controller.mainEditorState',
+    update(this: AutoFilledVariableInsertComponent) {
+      return this.labelAttr;
+    },
+  })
+  label!: string;
+
+  get selectedVariable() {
+    const { selection } = this.controller.mainEditorState;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === this.controller.schema.nodes.autofilled_variable
+    ) {
+      return {
+        node: selection.node,
+        pos: selection.from,
+      };
+    } else {
+      return null;
+    }
+  }
+  get autofillKeyAttr() {
+    return this.selectedVariable?.node.attrs.autofillKey;
+  }
+  get convertToStringAttr() {
+    return this.selectedVariable?.node.attrs.convertToString;
+  }
+  get labelAttr() {
+    if (!this.selectedVariable) return '';
+    return getOutgoingTriple(this.selectedVariable.node.attrs, EXT('label'))
+      ?.object.value;
+  }
+
+  get showCard() {
+    return !!this.selectedVariable;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.args.controller.schema;
+  }
+
+  get documentLanguage() {
+    return this.controller.documentLanguage;
+  }
+
+  @action
+  updateLabel(event: InputEvent) {
+    this.label = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  updateAutofillKey(event: InputEvent) {
+    this.autofillKey = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  updateConvertToString(value: boolean) {
+    this.convertToString = value;
+  }
+
+  @action
+  edit() {
+    if (this.selectedVariable) {
+      this.controller.withTransaction(
+        (tr) => {
+          const position = this.selectedVariable?.pos as number;
+          tr.setNodeAttribute(position, 'autofillKey', this.autofillKey);
+          tr.setNodeAttribute(
+            position,
+            'convertToString',
+            this.convertToString,
+          );
+          const oldProperties = this.selectedVariable?.node.attrs.properties;
+          const newProperties = oldProperties.filter(
+            (property: nodeProperty) =>
+              property.predicate !== EXT('label').full,
+          );
+          newProperties.push({
+            predicate: EXT('label').full,
+            object: sayDataFactory.literal(this.label || ''),
+          });
+          tr.setNodeAttribute(position, 'properties', newProperties);
+          return tr;
+        },
+        // because the variable pill contains a nested editor, when it's
+        // selected, the currentEditorView is the nested one. When you run
+        // withTransaction without the optional second argument, it defaults to using
+        // the current view.
+        //
+        // Here, we don't want that, cause we want to edit the outside node, not
+        // any node in the nested editor.
+        { view: this.controller.mainEditorView },
+      );
+    }
+  }
+  <template>
+    {{#if this.showCard}}
+      <AuCard
+        @flex={{true}}
+        @divided={{true}}
+        @isOpenInitially={{true}}
+        @expandable={{true}}
+        @shadow={{true}}
+        @size='small'
+        as |c|
+      >
+        <c.header>
+          <AuHeading @level='3' @skin='6'>
+            {{t 'variable-plugin.enter-variable-value'}}
+          </AuHeading>
+        </c.header>
+        <c.content>
+          <AuFormRow>
+            <LabelInput
+              @label={{this.label}}
+              @updateLabel={{this.updateLabel}}
+            />
+          </AuFormRow>
+          <AuFormRow>
+            <AuLabel for='autofill_key'>
+              {{t 'variable-plugin.autofill.autofillKey'}}
+            </AuLabel>
+            <AuNativeInput
+              id='autofill_key'
+              placeholder={{t
+                'variable-plugin.autofill.autofillKeyPlaceholder'
+              }}
+              @type='text'
+              @width='block'
+              value={{this.autofillKey}}
+              {{on 'input' this.updateAutofillKey}}
+            />
+          </AuFormRow>
+          <AuFormRow>
+            <AuCheckbox
+              id='convert_to_string'
+              @checked={{this.convertToString}}
+              @onChange={{this.updateConvertToString}}
+            >
+              {{t 'variable-plugin.autofill.convertToString'}}
+            </AuCheckbox>
+          </AuFormRow>
+          <AuButton {{on 'click' this.edit}}>
+            {{t 'variable-plugin.button'}}
+          </AuButton>
+        </c.content>
+      </AuCard>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,143 @@
+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 { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import { v4 as uuidv4 } from 'uuid';
+import IntlService from 'ember-intl/services/intl';
+import {
+  DCT,
+  EXT,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
+import AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import AuCheckbox from '@appuniversum/ember-appuniversum/components/au-checkbox';
+import AuNativeInput from '@lblod/ember-rdfa-editor-lblod-plugins/components/au-native-input';
+import t from 'ember-intl/helpers/t';
+import { on } from '@ember/modifier';
+import LabelInput from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/utils/label-input';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class AutoFilledVariableInsertComponent extends Component<Args> {
+  @service declare intl: IntlService;
+  @tracked label: string = '';
+  @tracked autofillKey?: string;
+  @tracked convertToString?: boolean;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.args.controller.schema;
+  }
+
+  get documentLanguage() {
+    return this.controller.documentLanguage;
+  }
+
+  @action
+  updateLabel(event: InputEvent) {
+    this.label = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  updateAutofillKey(event: InputEvent) {
+    this.autofillKey = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  updateConvertToString(value: boolean) {
+    this.convertToString = value;
+  }
+
+  @action
+  insert() {
+    const mappingSubject = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const variableId = uuidv4();
+
+    const placeholder = this.intl.t('variable.autofilled.label', {
+      locale: this.documentLanguage,
+    });
+
+    const label = this.label != '' ? this.label : placeholder;
+    const node = this.schema.nodes.autofilled_variable.create(
+      {
+        subject: mappingSubject,
+        rdfaNodeType: 'resource',
+        __rdfaId: variableId,
+        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('autofilled'),
+          },
+          {
+            predicate: EXT('content').full,
+            object: sayDataFactory.contentLiteral(),
+          },
+        ],
+        autofillKey: this.autofillKey,
+        convertToString: this.convertToString,
+      },
+
+      this.schema.node('placeholder', {
+        placeholderText: `Autofill ${this.autofillKey}`,
+      }),
+    );
+    this.label = '';
+
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
+  }
+  <template>
+    <AuFormRow>
+      <LabelInput @label={{this.label}} @updateLabel={{this.updateLabel}} />
+    </AuFormRow>
+    <AuFormRow>
+      <AuLabel for='autofill_key'>
+        {{t 'variable-plugin.autofill.autofillKey'}}
+      </AuLabel>
+      <AuNativeInput
+        id='autofill_key'
+        placeholder={{t 'variable-plugin.autofill.autofillKeyPlaceholder'}}
+        @type='text'
+        @width='block'
+        value={{this.autofillKey}}
+        {{on 'input' this.updateAutofillKey}}
+      />
+    </AuFormRow>
+    <AuFormRow>
+      <AuCheckbox
+        id='convert_to_string'
+        @checked={{this.convertToString}}
+        @onChange={{this.updateConvertToString}}
+      >
+        {{t 'variable-plugin.autofill.convertToString'}}
+      </AuCheckbox>
+    </AuFormRow>
+    <AuButton {{on 'click' this.insert}}>
+      {{t 'variable-plugin.button'}}
+    </AuButton>
+  </template>
+}