@lblod/ember-rdfa-editor-lblod-plugins 23.0.0 → 23.1.0-dev.7bb598372e1d150f34e69ae52ed021a0f4f2fd7b

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,11 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 23.1.0
+
+### Minor Changes
+
+- [#483](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/483) [`2ac7d9a`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2ac7d9ae70a885fa7747df6e3a18eece2b06e910) Thanks [@piemonkey](https://github.com/piemonkey)! - Add property to hide template comments while publishing
+
 ## 23.0.0
 
 ### Major Changes

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

@@ -0,0 +1,224 @@
+import Component from '@glimmer/component';
+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>
+}

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

@@ -0,0 +1,100 @@
+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/utils/label-input.gts

@@ -0,0 +1,28 @@
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+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 { TemplateOnlyComponent } from '@ember/component/template-only';
+
+interface Sig {
+  Args: {
+    label: string;
+    updateLabel: (event: InputEvent) => void;
+  };
+}
+
+const LabelInput: TemplateOnlyComponent<Sig> = <template>
+  <AuLabel for='label'>
+    {{t 'variable-plugin.label'}}
+  </AuLabel>
+  <AuNativeInput
+    id='label'
+    placeholder={{t 'variable-plugin.labelPlaceholder'}}
+    @type='text'
+    @width='block'
+    value={{@label}}
+    {{on 'input' @updateLabel}}
+  />
+</template>;
+
+export default LabelInput;

package/addon/plugins/snippet-plugin/commands/insert-snippet.ts

@@ -60,7 +60,6 @@ const insertSnippet = ({
           );
         })
         .flat();
-
       tr = transactionCombinator(
         state,
         tr.replaceRangeWith(insertRange.start, insertRange.end, snippet),
@@ -72,6 +71,7 @@ const insertSnippet = ({
         tr.replaceRange(insertRange.start, insertRange.end, slice),
       )([recalculateNumbers]).transaction;
     }
+    tr.setMeta('insertSnippet', true);
     if (dispatch) {
       dispatch(tr);
     }

package/addon/plugins/template-comments-plugin/node.ts

@@ -7,6 +7,15 @@ import {
   createEmberNodeView,
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { dependencySatisfies, macroCondition } from '@embroider/macros';
+import { importSync } from '@embroider/macros';
+const HIDE_FOR_PUBLISH_ATTR = macroCondition(
+  dependencySatisfies('@lblod/ember-rdfa-editor', '>=10.6.0'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@lblod/ember-rdfa-editor/utils/strip-html-for-publish')
+      .HIDE_FOR_PUBLISH_ATTR
+  : 'data-say-hide-for-publish';
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 
 export const emberNodeConfig: () => EmberNodeConfig = () => {
@@ -30,6 +39,7 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
         {
           typeof: EXT('TemplateComment').prefixed,
           class: 'say-template-comment',
+          [HIDE_FOR_PUBLISH_ATTR]: true,
         },
         ['p', {}, ['strong', {}, heading]],
         ['div', { property: EXT('content').prefixed }, 0],

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

@@ -0,0 +1,98 @@
+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)) {
+        let isInsertSnippet = false;
+        for (const transaction of transactions) {
+          if (transaction.getMeta('insertSnippet')) {
+            isInsertSnippet = true;
+          }
+        }
+        if (!isInsertSnippet) return;
+        changedDescendants(
+          oldState.doc,
+          newState.doc,
+          0,
+          (node: PNode, pos: number) => {
+            if (
+              node.type.name === 'autofilled_variable' &&
+              !node.attrs.initialized
+            ) {
+              autofilledVariables.push({ node, pos });
+              return false;
+            }
+            return true;
+          },
+        );
+      } else {
+        newState.doc.descendants((node: PNode, pos: number) => {
+          if (
+            node.type.name === 'autofilled_variable' &&
+            !node.attrs.initialized
+          ) {
+            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) {
+      tr.replaceRangeWith(pos, pos + nodeSize, valueNode);
+    } else {
+      tr.replaceRangeWith(pos + 1, pos + nodeSize - 1, valueNode);
+      tr.setNodeAttribute(pos, 'initialized', true);
+    }
+  }
+}

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

@@ -0,0 +1,170 @@
+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 === 'true';
+        const initialized = node.dataset.initialized === 'true';
+        return {
+          ...attrs,
+          autofillKey,
+          convertToString,
+          initialized,
+        };
+      }
+
+      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 === 'true';
+        const initialized = node.dataset.initialized === 'true';
+        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,
+          initialized,
+        };
+      }
+
+      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,
+      'data-initialized': node.attrs.initialized,
+    },
+    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,
+    },
+    initialized: {
+      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/edit.js

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

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/variable-plugin/autofilled/edit.d.ts

@@ -0,0 +1,28 @@
+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;
+    convertToString: boolean;
+    autofillKey?: string;
+    label: string;
+    get selectedVariable(): {
+        node: import("prosemirror-model").Node;
+        pos: number;
+    } | null;
+    get autofillKeyAttr(): any;
+    get convertToStringAttr(): any;
+    get labelAttr(): string | undefined;
+    get showCard(): 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;
+    edit(): 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,22 @@
+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/utils/label-input.d.ts

@@ -1 +1,11 @@
-export {};
+/// <reference types=".pnpm/ember-source@4.12.0_@babel+core@7.24.7_@glimmer+component@1.1.2_@babel+core@7.24.7__@glint+template@1.4.0_webpack@5.92.1/node_modules/ember-source/types/stable/@ember/component/template-only" />
+/// <reference types="@glint/environment-ember-loose/-private/dsl/integration-declarations" />
+import { TemplateOnlyComponent } from '@ember/component/template-only';
+interface Sig {
+    Args: {
+        label: string;
+        updateLabel: (event: InputEvent) => void;
+    };
+}
+declare const LabelInput: TemplateOnlyComponent<Sig>;
+export default LabelInput;

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": "23.0.0",
+  "version": "23.1.0-dev.7bb598372e1d150f34e69ae52ed021a0f4f2fd7b",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -55,6 +55,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.28.3",
     "@curvenote/prosemirror-utils": "^1.0.5",
+    "@embroider/macros": "^1.16.5",
     "@lblod/marawa": "0.8.0-beta.6",
     "@rdfjs/data-model": "^2.0.2",
     "@rdfjs/dataset": "^2.0.2",

package/pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@curvenote/prosemirror-utils':
         specifier: ^1.0.5
         version: 1.0.5(prosemirror-model@1.21.3)(prosemirror-state@1.4.3)
+      '@embroider/macros':
+        specifier: ^1.16.5
+        version: 1.16.5(@glint/template@1.4.0)
       '@lblod/marawa':
         specifier: 0.8.0-beta.6
         version: 0.8.0-beta.6
@@ -2602,8 +2605,8 @@ packages:
   async@2.6.4:
     resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
 
-  async@3.2.5:
-    resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
   at-least-node@1.0.0:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
@@ -3891,8 +3894,8 @@ packages:
     resolution: {integrity: sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==}
     engines: {node: '>=0.4', npm: '>=1.2'}
 
-  dompurify@3.1.5:
-    resolution: {integrity: sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA==}
+  dompurify@3.1.7:
+    resolution: {integrity: sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==}
 
   dot-case@3.0.4:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
@@ -7267,8 +7270,8 @@ packages:
   property-expr@2.0.6:
     resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==}
 
-  prosemirror-commands@1.5.2:
-    resolution: {integrity: sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==}
+  prosemirror-commands@1.6.0:
+    resolution: {integrity: sha512-xn1U/g36OqXn2tn5nGmvnnimAj/g1pUx2ypJJIe8WkVX83WyJVC5LTARaxZa2AtQRwntu9Jc5zXs9gL9svp/mg==}
 
   prosemirror-dev-tools@4.1.0:
     resolution: {integrity: sha512-TqMyXLiY8EUoq4f4LV+8dQVuRejwGfeOJdJWjrHNXR9ttKy3MVYBCqmiu3CDULgjv8gtLsqoZY6+ab6BZRmr1g==}
@@ -7280,8 +7283,8 @@ packages:
   prosemirror-dropcursor@1.8.1:
     resolution: {integrity: sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==}
 
-  prosemirror-history@1.4.0:
-    resolution: {integrity: sha512-UUiGzDVcqo1lovOPdi9YxxUps3oBFWAIYkXLu3Ot+JPv1qzVogRbcizxK3LhHmtaUxclohgiOVesRw5QSlMnbQ==}
+  prosemirror-history@1.4.1:
+    resolution: {integrity: sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==}
 
   prosemirror-inputrules@1.4.0:
     resolution: {integrity: sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==}
@@ -7292,11 +7295,11 @@ packages:
   prosemirror-model@1.21.3:
     resolution: {integrity: sha512-nt2Xs/RNGepD9hrrkzXvtCm1mpGJoQfFSPktGa0BF/aav6XsnmVGZ9sTXNWRLupAz5SCLa3EyKlFeK7zJWROKg==}
 
-  prosemirror-schema-basic@1.2.2:
-    resolution: {integrity: sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==}
+  prosemirror-schema-basic@1.2.3:
+    resolution: {integrity: sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==}
 
-  prosemirror-schema-list@1.4.0:
-    resolution: {integrity: sha512-nZOIq/AkBSzCENxUyLm5ltWE53e2PLk65ghMN8qLQptOmDVixZlPqtMeQdiNw0odL9vNpalEjl3upgRkuJ/Jyw==}
+  prosemirror-schema-list@1.4.1:
+    resolution: {integrity: sha512-jbDyaP/6AFfDfu70VzySsD75Om2t3sXTOdl5+31Wlxlg62td1haUpty/ybajSfJ1pkGadlOfwQq9kgW5IMo1Rg==}
 
   prosemirror-state@1.4.3:
     resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==}
@@ -10749,7 +10752,7 @@ snapshots:
       common-tags: 1.8.2
       crypto-browserify: 3.12.0
       debug: 4.3.5
-      dompurify: 3.1.5
+      dompurify: 3.1.7
       ember-auto-import: 2.7.4(@glint/template@1.4.0)(webpack@5.92.1)
       ember-changeset: 4.1.2(@glint/template@1.4.0)(webpack@5.92.1)
       ember-cli-babel: 8.2.0(@babel/core@7.24.7)
@@ -10769,14 +10772,14 @@ snapshots:
       linkifyjs: 4.1.3
       mdn-polyfills: 5.20.0
       process: 0.11.10
-      prosemirror-commands: 1.5.2
+      prosemirror-commands: 1.6.0
       prosemirror-dropcursor: 1.8.1
-      prosemirror-history: 1.4.0
+      prosemirror-history: 1.4.1
       prosemirror-inputrules: 1.4.0
       prosemirror-keymap: 1.2.2
       prosemirror-model: 1.21.3
-      prosemirror-schema-basic: 1.2.2
-      prosemirror-schema-list: 1.4.0
+      prosemirror-schema-basic: 1.2.3
+      prosemirror-schema-list: 1.4.1
       prosemirror-state: 1.4.3
       prosemirror-transform: 1.9.0
       prosemirror-view: 1.33.8
@@ -12105,7 +12108,7 @@ snapshots:
     dependencies:
       lodash: 4.17.21
 
-  async@3.2.5: {}
+  async@3.2.6: {}
 
   at-least-node@1.0.0: {}
 
@@ -13778,7 +13781,7 @@ snapshots:
 
   domain-browser@1.2.0: {}
 
-  dompurify@3.1.5: {}
+  dompurify@3.1.7: {}
 
   dot-case@3.0.4:
     dependencies:
@@ -16134,7 +16137,7 @@ snapshots:
 
   handlebars-loader@1.7.3(handlebars@4.7.8):
     dependencies:
-      async: 3.2.5
+      async: 3.2.6
       fastparse: 1.1.2
       handlebars: 4.7.8
       loader-utils: 1.4.2
@@ -18253,7 +18256,7 @@ snapshots:
 
   property-expr@2.0.6: {}
 
-  prosemirror-commands@1.5.2:
+  prosemirror-commands@1.6.0:
     dependencies:
       prosemirror-model: 1.21.3
       prosemirror-state: 1.4.3
@@ -18293,7 +18296,7 @@ snapshots:
       prosemirror-transform: 1.9.0
       prosemirror-view: 1.33.8
 
-  prosemirror-history@1.4.0:
+  prosemirror-history@1.4.1:
     dependencies:
       prosemirror-state: 1.4.3
       prosemirror-transform: 1.9.0
@@ -18314,11 +18317,11 @@ snapshots:
     dependencies:
       orderedmap: 2.1.1
 
-  prosemirror-schema-basic@1.2.2:
+  prosemirror-schema-basic@1.2.3:
     dependencies:
       prosemirror-model: 1.21.3
 
-  prosemirror-schema-list@1.4.0:
+  prosemirror-schema-list@1.4.1:
     dependencies:
       prosemirror-model: 1.21.3
       prosemirror-state: 1.4.3

package/translations/en-US.yaml

@@ -254,6 +254,8 @@ variable:
     label: address
   person:
     label: person
+  autofilled:
+    label: autofilled
 variable-plugin:
   insert-variable: Insert variable
   button: Insert
@@ -269,6 +271,10 @@ variable-plugin:
   person:
     card-title: Insert person
     nodeview-placeholder: Insert person
+  autofill:
+    autofillKey: Autofill Key
+    convertToString: Replace variable node with plain text on text insertion
+    autofillKeyPlaceholder: Autofill Key
 
 table-of-contents-plugin:
   title: Table of Contents

package/translations/nl-BE.yaml

@@ -258,6 +258,8 @@ variable:
     label: adres
   person:
     label: persoon
+  autofilled:
+    label: automatisch ingevuld
 variable-plugin:
   insert-variable: Voeg variabele in
   button: Voeg in
@@ -273,6 +275,10 @@ variable-plugin:
   person:
     card-title: Persoon invoegen
     nodeview-placeholder: Voeg persoon in
+  autofill:
+    autofillKey: Sleutelwaarde
+    convertToString: Vervang variabele door platte tekst bij invoegen
+    autofillKeyPlaceholder: Sleutelwaarde
 dummy:
   validation-card:
     title: Documentvalidatie

package/addon/components/variable-plugin/utils/label-input.hbs

@@ -1,11 +0,0 @@
-<AuLabel for='label'>
-  {{t 'variable-plugin.label'}}
-</AuLabel>
-<AuNativeInput
-  id='label'
-  placeholder={{t 'variable-plugin.labelPlaceholder'}}
-  @type='text'
-  @width='block'
-  value={{@label}}
-  {{on 'input' @updateLabel}}
-/>