@lblod/ember-rdfa-editor-lblod-plugins 22.3.0 → 22.4.0-dev.488ef3259e12430c4bb92a2ce203e9d15a5c84d2

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,15 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 22.4.0
+
+### Minor Changes
+
+- [#471](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/471) [`8132a55`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8132a550124cf90b47c3d1c759ce43bd9f72cfab) Thanks [@elpoelma](https://github.com/elpoelma)! - Introduce opt-in option to `insert-article` component to allow for inserting decision articles everywhere in a document (not just to the article-container of a decision). Useful when e.g. creating snippets.
+
+### Patch Changes
+
+- [#470](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/470) [`fdfd8b8`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/fdfd8b80c58adc07e968d131dce7618b57b27e49) Thanks [@piemonkey](https://github.com/piemonkey)! - Correct CRS URI used in location plugin to correctly use http: instead of https:
+
 ## 22.3.0
 
 ### Minor Changes

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

@@ -3,36 +3,69 @@ 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 { PNode, 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';
 import { buildArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/utils/build-article-structure';
-import t from 'ember-intl/helpers/t';
 import { not } from 'ember-truth-helpers';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import { recalculateNumbers } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/structure-plugin/recalculate-structure-numbers';
+import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
 
 export interface InsertArticleOptions {
   uriGenerator?: () => string;
+  insertFreely?: boolean;
 }
 interface Sig {
-  Args: { controller: SayController; options?: InsertArticleOptions };
+  Args: {
+    controller: SayController;
+    label: string;
+    options?: InsertArticleOptions;
+  };
 }
 export default class InsertArticleComponent extends Component<Sig> {
+  @service declare intl: IntlService;
+
   get controller() {
     return this.args.controller;
   }
 
+  get options() {
+    return this.args.options;
+  }
+
+  get label() {
+    return this.args.label ?? this.intl.t('besluit-plugin.insert.article');
+  }
+
   get schema() {
     return this.controller.schema;
   }
+
   get decisionRange() {
     return getCurrentBesluitRange(this.controller);
   }
+
   get decisionLocation() {
     return this.decisionRange
       ? { pos: this.decisionRange.from, node: this.decisionRange.node }
       : null;
   }
+
   get canInsert() {
+    if (this.options?.insertFreely) {
+      return this.canInsertFreely;
+    } else {
+      return this.canInsertInDecision;
+    }
+  }
+
+  get canInsertFreely() {
+    return true;
+  }
+
+  get canInsertInDecision() {
     if (!this.decisionLocation) {
       return false;
     }
@@ -51,15 +84,32 @@ export default class InsertArticleComponent extends Component<Sig> {
       this.schema,
       this.args.options?.uriGenerator,
     );
-    if (!structureNode) {
-      return;
+    if (this.args.options?.insertFreely) {
+      this.insertFreely(structureNode);
+    } else {
+      this.insertInDecision(structureNode);
     }
+  }
+
+  @action
+  insertFreely(node: PNode) {
+    this.controller.withTransaction((tr) => {
+      return transactionCombinator(
+        this.controller.activeEditorState,
+        tr.replaceSelectionWith(node),
+      )([recalculateNumbers]).transaction;
+    });
+    this.controller.focus();
+  }
+
+  @action
+  insertInDecision(node: PNode) {
     if (!this.decisionLocation) {
       return;
     }
     this.controller.doCommand(
       insertArticle({
-        node: structureNode,
+        node,
         decisionLocation: this.decisionLocation,
       }),
     );
@@ -75,7 +125,7 @@ export default class InsertArticleComponent extends Component<Sig> {
         @disabled={{not this.canInsert}}
         {{on 'click' this.doInsert}}
       >
-        {{t 'besluit-plugin.insert.article'}}
+        {{this.label}}
       </AuButton>
     </li>
   </template>

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

@@ -0,0 +1,32 @@
+{{! @glint-nocheck: not typesafe yet }}
+<AuFormRow>
+  <VariablePlugin::Utils::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>

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

@@ -0,0 +1,105 @@
+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';
+
+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 ?? 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 = undefined;
+
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
+  }
+}

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

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

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

@@ -0,0 +1,49 @@
+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';
+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 AutoFilledVariableNodeViewComponent 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 getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
+  }
+}

package/addon/plugins/location-plugin/utils/geo-helpers.ts

@@ -110,7 +110,7 @@ export type GeoPos = {
 };
 
 export function constructLambert72GMLString({ x, y }: Lambert72Coordinates) {
-  return `<gml:Point srsName="https://www.opengis.net/def/crs/EPSG/0/31370" xmlns:gml="http://www.opengis.net/gml/3.2"><gml:pos>${x} ${y}</gml:pos></gml:Point>`;
+  return `<gml:Point srsName="http://www.opengis.net/def/crs/EPSG/0/31370" xmlns:gml="http://www.opengis.net/gml/3.2"><gml:pos>${x} ${y}</gml:pos></gml:Point>`;
 }
 /**
  * Use a regex to parse a simple point as a GML string and return the coordinates.
@@ -122,7 +122,7 @@ export function parseLambert72GMLString(gml: string): GeoPos {
   // which can be represented. Since we handle only simple points, it's much less complex to just
   // use a simple regex.
   const [_, crs, x, y] =
-    /<gml.Point .*srsName="https:\/\/www.opengis.net\/def\/crs\/([^"]+)".+<gml.pos>(\S+) ([^<]+)<\/gml:pos>/.exec(
+    /<gml.Point .*srsName="https?:\/\/www.opengis.net\/def\/crs\/([^"]+)".+<gml.pos>(\S+) ([^<]+)<\/gml:pos>/.exec(
       gml,
     ) || [];
   if (!crs || crs !== 'EPSG/0/31370') {
@@ -144,11 +144,11 @@ export function constructLambert72WKTString(
 ) {
   if (!Array.isArray(coords)) {
     const { x, y } = coords;
-    return `<https://www.opengis.net/def/crs/EPSG/0/31370> POINT(${x} ${y})`;
+    return `<http://www.opengis.net/def/crs/EPSG/0/31370> POINT(${x} ${y})`;
   } else {
     const points = coords.map(({ x, y }) => `${x} ${y}`).join(', ');
     // Double brackets are not a mistake...
-    return `<https://www.opengis.net/def/crs/EPSG/0/31370> POLYGON((${points}))`;
+    return `<http://www.opengis.net/def/crs/EPSG/0/31370> POLYGON((${points}))`;
   }
 }
 
@@ -171,7 +171,7 @@ export function parseLambert72WKTString(gml: string): GeoPos | GeoPos[] {
   // cases, it's much less complex to just use a simple regex.
 
   const [_, crs, shape, dimensions] =
-    /<https:\/\/www.opengis.net\/def\/crs\/([^"]+)> (POLYGON|POINT)\(\(?([\d,. ]+)\)\)?/.exec(
+    /<https?:\/\/www.opengis.net\/def\/crs\/([^"]+)> (POLYGON|POINT)\(\(?([\d,. ]+)\)\)?/.exec(
       gml,
     ) || [];
   if (crs && crs === 'EPSG/0/31370') {

package/addon/plugins/variable-plugin/plugins/autofiller.ts

@@ -0,0 +1,88 @@
+import {
+  EditorState,
+  PNode,
+  ProsePlugin,
+  Schema,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
+import { changedDescendants } from '@lblod/ember-rdfa-editor/utils/_private/changed-descendants';
+import { undoDepth } from '@lblod/ember-rdfa-editor/plugins/history';
+
+type AutofilledArgs = {
+  autofilledValues: {
+    [Key: string]: string;
+  };
+};
+
+export function variableAutofillerPlugin(config: AutofilledArgs): ProsePlugin {
+  return new ProsePlugin({
+    appendTransaction(
+      transactions: readonly Transaction[],
+      oldState: EditorState,
+      newState: EditorState,
+    ) {
+      const autofilledVariables: { node: PNode; pos: number }[] = [];
+      if (undoDepth(oldState)) {
+        changedDescendants(
+          oldState.doc,
+          newState.doc,
+          0,
+          (node: PNode, pos: number) => {
+            if (node.type.name === 'autofilled_variable') {
+              autofilledVariables.push({ node, pos });
+              return false;
+            }
+            return true;
+          },
+        );
+      } else {
+        newState.doc.descendants((node: PNode, pos: number) => {
+          if (node.type.name === 'autofilled_variable') {
+            autofilledVariables.push({ node, pos });
+            return false;
+          }
+          return true;
+        });
+      }
+      if (autofilledVariables.length) {
+        const tr = newState.tr;
+        autofilledVariables.reverse();
+        for (const { node, pos } of autofilledVariables) {
+          autofillVariable(
+            node,
+            pos,
+            config.autofilledValues,
+            tr,
+            newState.schema,
+          );
+        }
+        return tr;
+      }
+      return newState.tr;
+    },
+  });
+}
+
+function autofillVariable(
+  node: PNode,
+  pos: number,
+  values: { [Key: string]: string },
+  tr: Transaction,
+  schema: Schema,
+) {
+  const autofillKey = node.attrs.autofillKey as string;
+  const value = values[autofillKey];
+  if (value) {
+    const nodeSize = node.nodeSize;
+    const valueNode = schema.text(value);
+    if (
+      node.attrs.convertToString === true ||
+      node.attrs.convertToString === 'true'
+    ) {
+      tr.replaceRangeWith(pos, pos + nodeSize, valueNode);
+      return;
+    } else {
+      tr.replaceRangeWith(pos + 1, pos + nodeSize - 1, valueNode);
+    }
+  }
+}

package/addon/plugins/variable-plugin/utils/address-helpers.ts

@@ -342,7 +342,7 @@ export type Lambert72Coordinates = {
 };
 
 export function constructLambert72GMLString({ x, y }: Lambert72Coordinates) {
-  return `<gml:Point srsName="https://www.opengis.net/def/crs/EPSG/0/31370" xmlns:gml="http://www.opengis.net/gml/3.2"><gml:pos>${x} ${y}</gml:pos></gml:Point>`;
+  return `<gml:Point srsName="http://www.opengis.net/def/crs/EPSG/0/31370" xmlns:gml="http://www.opengis.net/gml/3.2"><gml:pos>${x} ${y}</gml:pos></gml:Point>`;
 }
 /**
  * Use a regex to parse a simple point as a GML string and return the coordinates.
@@ -354,7 +354,7 @@ export function parseLambert72GMLString(gml: string): Lambert72Coordinates {
   // which can be represented. Since we handle only simple points, it's much less complex to just
   // use a simple regex.
   const [_, crs, x, y] =
-    /<gml.Point .*srsName="https:\/\/www.opengis.net\/def\/crs\/([^"]+)".+<gml.pos>(\S+) ([^<]+)<\/gml:pos>/.exec(
+    /<gml.Point .*srsName="https?:\/\/www.opengis.net\/def\/crs\/([^"]+)".+<gml.pos>(\S+) ([^<]+)<\/gml:pos>/.exec(
       gml,
     ) || [];
   if (!crs || crs !== 'EPSG/0/31370') {
@@ -370,7 +370,7 @@ export function parseLambert72GMLString(gml: string): Lambert72Coordinates {
  * [the GeoSPARQL spec]{@link https://docs.ogc.org/is/22-047r1/22-047r1.html#10-8-1-%C2%A0-well-known-text}
  */
 export function constructLambert72WKTString({ x, y }: Lambert72Coordinates) {
-  return `<https://www.opengis.net/def/crs/EPSG/0/31370> POINT(${x} ${y})`;
+  return `<http://www.opengis.net/def/crs/EPSG/0/31370> POINT(${x} ${y})`;
 }
 /**
  * Use a regex to parse a simple point as a WKT string and return the coordinates.
@@ -382,7 +382,7 @@ export function parseLambert72WKTString(gml: string): Lambert72Coordinates {
   // which can be represented or within untyped libraries (e.g. wicket). Since we handle only simple
   // points, it's much less complex to just use a simple regex.
   const [_, crs, x, y] =
-    /<https:\/\/www.opengis.net\/def\/crs\/([^"]+)> POINT\((\S+) ([^)]+)\)/.exec(
+    /<https?:\/\/www.opengis.net\/def\/crs\/([^"]+)> POINT\((\S+) ([^)]+)\)/.exec(
       gml,
     ) || [];
   if (!crs || crs !== 'EPSG/0/31370') {

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

@@ -0,0 +1,162 @@
+import {
+  DCT,
+  EXT,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import {
+  createEmberNodeSpec,
+  createEmberNodeView,
+  EmberNodeConfig,
+} from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  DOMOutputSpec,
+  getRdfaAttrs,
+  PNode,
+  rdfaAttrSpec,
+} from '@lblod/ember-rdfa-editor';
+import {
+  hasRdfaVariableType,
+  isVariable,
+  parseLabel,
+  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 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';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+
+const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'],
+                          span[property~='${EXT('content').full}']`;
+const rdfaAware = true;
+const parseDOM = [
+  {
+    tag: 'span',
+    getAttrs: (node: HTMLElement) => {
+      const attrs = getRdfaAttrs(node, { rdfaAware });
+      if (!attrs) {
+        return false;
+      }
+      if (
+        hasOutgoingNamedNodeTriple(attrs, RDF('type'), EXT('Mapping')) &&
+        node.querySelector('[data-content-container="true"]') &&
+        hasRdfaVariableType(attrs, 'autofilled')
+      ) {
+        if (attrs.rdfaNodeType !== 'resource') {
+          return false;
+        }
+        const autofillKey = node.dataset.autofillKey;
+        const convertToString = node.dataset.convertToString;
+        return {
+          ...attrs,
+          autofillKey,
+          convertToString,
+        };
+      }
+
+      return false;
+    },
+    contentElement: '[data-content-container="true"]',
+  },
+  {
+    tag: 'span',
+    getAttrs: (node: HTMLElement) => {
+      if (
+        isVariable(node) &&
+        node.querySelector(CONTENT_SELECTOR) &&
+        parseVariableType(node) === 'autofilled'
+      ) {
+        const mappingSubject =
+          node.getAttribute('subject') ||
+          node.getAttribute('resource') ||
+          node.getAttribute('about');
+        if (!mappingSubject) {
+          return false;
+        }
+        const variableInstance = parseVariableInstance(node);
+        const label = parseLabel(node);
+        const autofillKey = node.dataset.autofillKey;
+        const convertToString = node.dataset.convertToString;
+        return {
+          __rdfaId: uuidv4(),
+          subject: mappingSubject,
+          rdfaNodeType: 'resource',
+          properties: [
+            {
+              predicate: RDF('type').full,
+              object: sayDataFactory.namedNode(EXT('Mapping').full),
+            },
+            {
+              predicate: EXT('instance').full,
+              object: sayDataFactory.namedNode(
+                variableInstance ??
+                  `http://data.lblod.info/variables/${uuidv4()}`,
+              ),
+            },
+            {
+              predicate: EXT('label').full,
+              object: sayDataFactory.literal(label || ''),
+            },
+            {
+              predicate: DCT('type').full,
+              object: sayDataFactory.literal('autofilled'),
+            },
+            {
+              predicate: EXT('content').full,
+              object: sayDataFactory.contentLiteral(),
+            },
+          ],
+          autofillKey,
+          convertToString,
+        };
+      }
+
+      return false;
+    },
+    contentElement: CONTENT_SELECTOR,
+  },
+];
+
+const toDOM = (node: PNode): DOMOutputSpec => {
+  return renderRdfaAware({
+    renderable: node,
+    tag: 'span',
+    attrs: {
+      ...node.attrs,
+      'data-autofill-key': node.attrs.autofillKey,
+      'data-convert-to-string': node.attrs.convertToString,
+    },
+    content: 0,
+  });
+};
+
+const emberNodeConfig: EmberNodeConfig = {
+  name: 'autofilled-variable',
+  component: AutofilledNodeViewComponent as unknown as ComponentLike,
+  inline: true,
+  group: 'inline variable',
+  content: 'inline*',
+  atom: true,
+  recreateUri: true,
+  uriAttributes: ['variableInstance'],
+  draggable: false,
+  needsFFKludge: true,
+  editable: true,
+  selectable: true,
+  attrs: {
+    ...rdfaAttrSpec({ rdfaAware }),
+    autofillKey: {
+      default: '',
+    },
+    convertToString: {
+      default: false,
+    },
+  },
+  toDOM,
+  parseDOM,
+};
+
+export const autofilled_variable = createEmberNodeSpec(emberNodeConfig);
+export const autofilledVariableView = createEmberNodeView(emberNodeConfig);

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

@@ -5,3 +5,4 @@ export * from './location';
 export * from './address';
 export * from './date';
 export * from './person';
+export * from './autofilled';

package/app/components/variable-plugin/autofilled/insert.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/autofilled/insert';

package/app/components/variable-plugin/autofilled/nodeview.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/autofilled/nodeview';

package/declarations/addon/components/decision-plugin/insert-article.d.ts

@@ -1,23 +1,33 @@
 import Component from '@glimmer/component';
-import { SayController } from '@lblod/ember-rdfa-editor';
+import { PNode, SayController } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
 export interface InsertArticleOptions {
     uriGenerator?: () => string;
+    insertFreely?: boolean;
 }
 interface Sig {
     Args: {
         controller: SayController;
+        label: string;
         options?: InsertArticleOptions;
     };
 }
 export default class InsertArticleComponent extends Component<Sig> {
+    intl: IntlService;
     get controller(): SayController;
+    get options(): InsertArticleOptions | undefined;
+    get label(): string;
     get schema(): import("prosemirror-model").Schema<any, any>;
     get decisionRange(): import("@lblod/ember-rdfa-editor/plugins/datastore").ElementPNode | undefined;
     get decisionLocation(): {
         pos: number;
-        node: import("prosemirror-model").Node;
+        node: PNode;
     } | null;
     get canInsert(): boolean;
+    get canInsertFreely(): boolean;
+    get canInsertInDecision(): boolean;
     doInsert(): void;
+    insertFreely(node: PNode): void;
+    insertInDecision(node: PNode): void;
 }
 export {};

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

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { type SayController } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
+type Args = {
+    controller: SayController;
+};
+export default class AutoFilledVariableInsertComponent extends Component<Args> {
+    intl: IntlService;
+    label?: string;
+    autofillKey?: string;
+    convertToString?: boolean;
+    get controller(): SayController;
+    get schema(): import("prosemirror-model").Schema<any, any>;
+    get documentLanguage(): string;
+    updateLabel(event: InputEvent): void;
+    updateAutofillKey(event: InputEvent): void;
+    updateConvertToString(value: boolean): void;
+    insert(): void;
+}
+export {};

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

@@ -0,0 +1,11 @@
+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 AutoFilledVariableNodeViewComponent 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;
+}

package/declarations/addon/plugins/variable-plugin/plugins/autofiller.d.ts

@@ -0,0 +1,8 @@
+import { ProsePlugin } from '@lblod/ember-rdfa-editor';
+type AutofilledArgs = {
+    autofilledValues: {
+        [Key: string]: string;
+    };
+};
+export declare function variableAutofillerPlugin(config: AutofilledArgs): ProsePlugin;
+export {};

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

@@ -0,0 +1,2 @@
+export declare const autofilled_variable: import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
+export declare const autofilledVariableView: (controller: import("@lblod/ember-rdfa-editor").SayController) => import("@lblod/ember-rdfa-editor/utils/ember-node").SayNodeViewConstructor;

package/declarations/addon/plugins/variable-plugin/variables/index.d.ts

@@ -5,3 +5,4 @@ export * from './location';
 export * from './address';
 export * from './date';
 export * from './person';
+export * from './autofilled';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "22.3.0",
+  "version": "22.4.0-dev.488ef3259e12430c4bb92a2ce203e9d15a5c84d2",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/translations/en-US.yaml

@@ -269,6 +269,10 @@ variable-plugin:
   person:
     card-title: Insert person
     nodeview-placeholder: Insert person
+  autofill:
+    autofillKey: Autofill Key
+    convertToString: Automatically convert to text
+    autofillKeyPlaceholder: Autofill Key
 
 table-of-contents-plugin:
   title: Table of Contents

package/translations/nl-BE.yaml

@@ -273,6 +273,10 @@ variable-plugin:
   person:
     card-title: Persoon invoegen
     nodeview-placeholder: Voeg persoon in
+  autofill:
+    autofillKey: Autovultoets
+    convertToString: Automatisch converteren naar tekst
+    autofillKeyPlaceholder: Autovultoets
 dummy:
   validation-card:
     title: Documentvalidatie