@lblod/ember-rdfa-editor-lblod-plugins 16.4.0 → 17.0.0-dev.f473cdfb5868261b49cdae52ea2558970c082d01

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div>
   {{#if this.showCard}}
     <AuCard @shadow={{true}} @size="flush" as |c|>
@@ -14,17 +15,19 @@
           >
 
             <AuFormRow @alignment="inline">
-              <AuControlCheckbox
-                @label={{t 'date-plugin.card.include-time'}}
+              <AuCheckbox
+                @name="include-time"
                 @disabled={{eq this.dateFormatType "custom"}}
                 @checked={{not this.onlyDate}}
                 @onChange={{this.changeIncludeTime}}
-              />
+              >
+                {{t 'date-plugin.card.include-time'}}
+              </AuCheckbox>
               {{#if this.isCustom}}
                 <this.Velcro @placement="top" @offsetOptions={{hash mainAxis=10}} as |velcro|>
                   <AuBadge
                     @size="small"
-                    @icon="info-circle"
+                    @icon={{this.InfoCircleIcon}}
                     aria-describedby="date-plugin-time-info-tooltip"
                     {{velcro.hook}}
                     {{on "mouseenter" this.showTooltip }}
@@ -44,33 +47,26 @@
               {{/if}}
             </AuFormRow>
           </VariablePlugin::Date::DateTimePicker>
-          {{#each this.formats as |format|}}
-            <AuFormRow>
-              <AuControlRadio
-                @label={{if format.label format.label (if this.onlyDate format.dateFormat format.dateTimeFormat)}}
-                @identifier={{format.key}}
-                @name="dateFormat"
-                @value={{format.key}}
-                checked={{eq this.dateFormatType format.key}}
-                @onChange={{this.setDateFormatFromKey}}
-              />
-            </AuFormRow>
-          {{/each}}
-          {{#if this.isCustomAllowed}}
-            <AuFormRow>
-              <AuControlRadio
-                @label={{t "date-plugin.card.custom-date" }}
-                @identifier="custom"
-                @name="dateFormat"
-                @value="custom"
-                checked={{eq this.dateFormatType "custom"}}
-                @onChange={{this.setDateFormatFromKey}}
-              />
-            </AuFormRow>
-          {{/if}}
+          <AuRadioGroup
+            @name="dateFormat"
+            @selected={{this.dateFormatType}}
+            @onChange={{this.setDateFormatFromKey}}
+            as |Group|
+          >
+            {{#each this.formats as |format|}}
+              <Group.Radio @value={{format.key}}>
+                {{if format.label format.label (if this.onlyDate format.dateFormat format.dateTimeFormat)}}
+              </Group.Radio>
+            {{/each}}
+            {{#if this.isCustomAllowed}}
+              <Group.Radio @value="custom">
+                {{t "date-plugin.card.custom-date" }}
+              </Group.Radio>
+            {{/if}}
+          </AuRadioGroup>
           {{#if (eq this.dateFormatType "custom")}}
             <AuFormRow @alignment="post">
-              <AuButton @skin="secondary" @icon="info-circle"
+              <AuButton @skin="secondary" @icon={{this.InfoCircleIcon}}
                 {{on 'click' this.toggleHelpModal}}>
               </AuButton>
               <AuNativeInput
@@ -80,7 +76,7 @@
               />
             </AuFormRow>
             {{#if this.humanError}}
-              <AuPill @skin="error" @icon="cross">{{this.humanError}}</AuPill>
+              <AuPill @skin="error" @icon={{this.CrossIcon}}>{{this.humanError}}</AuPill>
             {{/if}}
           {{/if}}
         </div>
@@ -88,4 +84,4 @@
     </AuCard>
   {{/if}}
 </div>
-<VariablePlugin::Date::HelpModal @modalOpen={{this.helpModalOpen}} @closeModal={{this.toggleHelpModal}} />
+<VariablePlugin::Date::HelpModal @modalOpen={{this.helpModalOpen}} @closeModal={{this.toggleHelpModal}} />

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

@@ -1,8 +1,13 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { SayController } from '@lblod/ember-rdfa-editor';
+import {
+  SayController,
+  Selection,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
 import { NodeSelection, PNode } from '@lblod/ember-rdfa-editor';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import {
@@ -23,6 +28,14 @@ import {
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
 import { Velcro } from 'ember-velcro';
+import {
+  EXT,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
+import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { InfoCircleIcon } from '@appuniversum/ember-appuniversum/components/icons/info-circle';
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
 
 type Args = {
   controller: SayController;
@@ -30,6 +43,8 @@ type Args = {
 };
 const SECONDS_REGEX = new RegExp('[sStT]|p{2,}');
 export default class DateEditComponent extends Component<Args> {
+  CrossIcon = CrossIcon;
+  InfoCircleIcon = InfoCircleIcon;
   Velcro = Velcro;
 
   @service
@@ -47,7 +62,7 @@ export default class DateEditComponent extends Component<Args> {
     return this.args.controller;
   }
 
-  get selection() {
+  get selection(): Selection {
     return this.controller.activeEditorState.selection;
   }
 
@@ -63,11 +78,16 @@ export default class DateEditComponent extends Component<Args> {
   }
 
   get documentDate(): Option<Date> {
-    const dateVal = this.selectedDateNode?.attrs.value as Option<string>;
-    if (dateVal) {
-      return new Date(dateVal);
+    if (this.selectedDateNode) {
+      const dateVal = getOutgoingTriple(
+        this.selectedDateNode.attrs,
+        EXT('content'),
+      )?.object.value as Option<string>;
+      if (dateVal) {
+        return new Date(dateVal);
+      }
     }
-    return null;
+    return;
   }
 
   get documentDatePos(): Option<number> {
@@ -184,8 +204,27 @@ export default class DateEditComponent extends Component<Args> {
   changeDate(date: Date) {
     const pos = this.documentDatePos;
     if (pos) {
-      this.controller.withTransaction((tr) => {
-        return tr.setNodeAttribute(pos, 'value', date.toISOString());
+      this.controller.withTransaction((tr: Transaction) => {
+        const node = tr.doc.nodeAt(pos);
+        if (!node) {
+          return tr;
+        }
+        const properties = node.attrs.properties as OutgoingTriple[];
+        const newProperties = properties.filter((prop) => {
+          return !(
+            prop.object.termType === 'Literal' &&
+            EXT('content').matches(prop.predicate)
+          );
+        });
+        const datatype = this.onlyDate ? XSD('date') : XSD('dateTime');
+        newProperties.push({
+          predicate: EXT('content').full,
+          object: sayDataFactory.literal(
+            date.toISOString(),
+            datatype.namedNode,
+          ),
+        });
+        return tr.setNodeAttribute(pos, 'properties', newProperties);
       });
     }
   }

package/addon/components/variable-plugin/date/help-modal.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuModal
   @title={{t 'date-plugin.help.title'}}
   @closeModal={{@closeModal}}

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput
     @label={{this.label}}

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

@@ -5,6 +5,14 @@ import { service } from '@ember/service';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { v4 as uuidv4 } from 'uuid';
 import IntlService from 'ember-intl/services/intl';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import {
+  DCT,
+  EXT,
+  RDF,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 type Args = {
   controller: SayController;
@@ -34,24 +42,42 @@ export default class DateInsertVariableComponent extends Component<Args> {
   @action
   insert() {
     const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
 
     const defaultLabel = this.intl.t('variable.date.label', {
       locale: this.documentLanguage,
     });
+    const label = this.label ?? defaultLabel;
+    const variableId = uuidv4();
 
     const node = this.schema.nodes.date.create({
-      label: this.label ?? defaultLabel,
-      value: null,
-      mappingResource,
+      rdfaNodeType: 'resource',
+      subject: mappingResource,
+      __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('date', XSD('date').namedNode),
+        },
+      ],
+      backlinks: [],
     });
 
     this.label = undefined;
-
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

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

@@ -1,6 +1,7 @@
+{{! @glint-nocheck: not typesafe yet }}
 <li class="au-c-list__item">
   <AuButton
-    @icon="add"
+    @icon={{this.AddIcon}}
     @iconAlignment="left"
     @skin="link"
     {{on 'click' this.insert}}>

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

@@ -4,12 +4,22 @@ import { service } from '@ember/service';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
 import { v4 as uuidv4 } from 'uuid';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import {
+  DCT,
+  EXT,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
 };
 
 export default class DateInsertComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   @service declare intl: IntlService;
 
   get controller() {
@@ -28,21 +38,39 @@ export default class DateInsertComponent extends Component<Args> {
   insert() {
     const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
 
+    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
     const defaultLabel = this.intl.t('variable.date.label', {
       locale: this.documentLanguage,
     });
+    const label = defaultLabel;
 
+    const variableId = uuidv4();
     const node = this.schema.nodes.date.create({
-      label: defaultLabel,
-      value: null,
-      mappingResource,
+      rdfaNodeType: 'resource',
+      subject: mappingResource,
+      __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('date'),
+        },
+      ],
+      backlinks: [],
+    });
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
     });
-
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
   }
 }

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

@@ -1,9 +1,10 @@
-<AuPill @icon="pencil" @iconAlignment="right" class="variable atomic" {{on 'click' this.onClick}}>
+{{! @glint-nocheck: not typesafe yet }}
+<AuPill @icon={{this.PencilIcon}} @iconAlignment="right" class="variable atomic" {{on 'click' this.onClick}}>
 
   {{this.humanReadableDate}}
-  {{#if @node.attrs.label}}
+  {{#if this.label}}
     <span class="label">
-      ({{@node.attrs.label}})
+      ({{this.label}})
     </span>
   {{/if}}
 </AuPill>

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

@@ -13,6 +13,9 @@ import {
   formatDate,
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
+import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 type Args = {
   getPos: () => number | undefined;
@@ -25,6 +28,8 @@ type Args = {
 };
 
 export default class DateNodeviewComponent extends Component<Args> {
+  PencilIcon = PencilIcon;
+
   @service declare intl: IntlService;
 
   get controller() {
@@ -48,7 +53,8 @@ export default class DateNodeviewComponent extends Component<Args> {
   }
 
   get humanReadableDate() {
-    const value = this.args.node.attrs.value as string;
+    const value = getOutgoingTriple(this.args.node.attrs, EXT('content'))
+      ?.object.value;
     const format = this.args.node.attrs.format as string;
     if (value) {
       if (validateDateFormat(format).type === 'ok') {
@@ -66,4 +72,8 @@ export default class DateNodeviewComponent extends Component<Args> {
           });
     }
   }
+
+  get label() {
+    return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
+  }
 }

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.showCard}}
   <AuCard
     @flex={{true}}

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

@@ -1,14 +1,22 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { type ComponentLike } from '@glint/template';
 import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
 import { hasGroups } from '@lblod/ember-rdfa-editor/utils/node-utils';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 
+type VariableComponentArgs = {
+  Args: {
+    Named: {
+      controller: SayController;
+    };
+  };
+};
 export type VariableConfig = {
   label: string;
-  component: typeof Component;
+  component: ComponentLike<VariableComponentArgs>;
   options?: unknown;
 };
 

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.showCard}}
   <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
     <c.header>

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

@@ -98,7 +98,7 @@ export default class LocationEditComponent extends Component<Args> {
     );
     result.options = result.options.map((option) => ({
       label: option.label,
-      value: this.wrapInLocation(unwrap(option.value)),
+      value: unwrap(option.value),
     }));
     return result;
   });
@@ -111,12 +111,4 @@ export default class LocationEditComponent extends Component<Args> {
   updateLocationOption(locationOption: CodeListOption | CodeListOption[]) {
     this.selectedLocationOption = locationOption;
   }
-
-  wrapInLocation(value: string) {
-    return `
-      <span property="https://data.vlaanderen.be/ns/mobiliteit#plaatsbepaling">
-        ${value}
-      </span>
-    `;
-  }
 }

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput 
     @value={{this.label}} 

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

@@ -5,6 +5,7 @@ import { SayController } from '@lblod/ember-rdfa-editor';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { v4 as uuidv4 } from 'uuid';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 export type LocationInsertOptions = {
   endpoint: string;
@@ -63,12 +64,8 @@ export default class LocationInsertComponent extends Component<Args> {
     );
 
     this.label = undefined;
-
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

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

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

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

@@ -1,15 +1,43 @@
 import Component from '@glimmer/component';
-import { SayController, SayView } from '@lblod/ember-rdfa-editor';
+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 { addressView } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
+import { action } from '@ember/object';
+import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
+import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
 
-type Args = {
-  controller: SayController;
-};
+export default class LocationNodeViewComponent extends Component<EmberNodeArgs> {
+  PencilIcon = PencilIcon;
 
-export default class LocationNodeViewComponent extends Component<Args> {
-  @tracked nodeViews = {
-    address: addressView(this.args.controller),
-  };
   @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() {
+    return this.args.node.attrs.label as string;
+  }
 }

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

@@ -1,4 +1,5 @@
 
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput @label={{this.label}} @updateLabel={{this.updateLabel}}/>
 </AuFormRow>

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

@@ -7,6 +7,13 @@ import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { modifier } from 'ember-modifier';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+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;
@@ -85,17 +92,37 @@ export default class NumberInsertComponent extends Component<Args> {
     if (this.numberVariableError !== '') return;
 
     const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const subject = mappingResource;
     const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
 
     const defaultLabel = this.intl.t('variable.number.label', {
       locale: this.documentLanguage,
     });
+    const label = this.label ?? defaultLabel;
+    const variableId = uuidv4();
 
     const node = this.schema.nodes.number.create({
-      label: this.label ?? defaultLabel,
-      value: null,
-      mappingResource,
-      variableInstance,
+      subject,
+      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('number'),
+        },
+      ],
       ...(isNumber(this.minimumValue) && {
         minimumValue: Number(this.minimumValue),
       }),
@@ -108,11 +135,8 @@ export default class NumberInsertComponent extends Component<Args> {
     this.minimumValue = '';
     this.maximumValue = '';
 
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }