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

package/addon/components/standard-template-plugin/card.ts

@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import StandardTemplate from '@lblod/ember-rdfa-editor-lblod-plugins/models/template';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
   templates: StandardTemplate[];
 };
 export default class StandardTemplatePluginCardComponent extends Component<Args> {
+  AddIcon = AddIcon;
   get controller() {
     return this.args.controller;
   }

package/addon/components/standard-template-plugin/template-provider.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div>
 {{yield (hash
           applicableTemplates=this.applicableTemplates

package/addon/components/standard-template-plugin/template-provider.ts

@@ -5,9 +5,12 @@ import StandardTemplate from '@lblod/ember-rdfa-editor-lblod-plugins/models/temp
 import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
 import instantiateUuids from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/standard-template-plugin/utils/instantiate-uuids';
 import { PNode, ResolvedPos } from '@lblod/ember-rdfa-editor';
-import { BESLUIT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import {
-  pnodeHasRdfaAttribute,
+  BESLUIT,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import {
+  hasOutgoingNamedNodeTriple,
   Resource,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
@@ -67,7 +70,7 @@ export default class TemplateProviderComponent extends Component<Args> {
         }) ||
       findAncestors($from, (node) => {
         return template.contexts.some((type) =>
-          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type]),
+          hasOutgoingNamedNodeTriple(node, RDF('type'), HACKY_LOOKUP[type]),
         );
       }).length;
     const containsDisabledTypes =
@@ -78,7 +81,7 @@ export default class TemplateProviderComponent extends Component<Args> {
         }) ||
       findAncestors($from, (node) => {
         return template.disabledInContexts.some((type) =>
-          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type]),
+          hasOutgoingNamedNodeTriple(node, RDF('type'), HACKY_LOOKUP[type]),
         );
       }).length;
 
@@ -111,6 +114,9 @@ export default class TemplateProviderComponent extends Component<Args> {
         instantiateUuids(template.body),
         insertRange.from,
         insertRange.to,
+        undefined,
+        false,
+        true,
       ),
       { view: this.controller.mainEditorView },
     );

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div class='au-u-background-gray-100 au-u-padding-tiny table-of-contents'>
   <h3>{{this.title}}</h3>
   {{#if this.outline}}

package/addon/components/table-of-contents-plugin/toolbar-button.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <label class='au-c-toggle-switch' title={{t 'table-of-contents-plugin.toggle'}}>
   <input
     type='checkbox'

package/addon/components/template-comments-plugin/edit-card.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.isInsideComment}}
   <AuCard
     @flex={{true}}
@@ -13,7 +14,7 @@
       >
         <Item>
           <AuButton
-            @icon='chevron-up'
+            @icon={{this.ChevronUpIcon}}
             @iconAlignment='left'
             @skin='link'
             {{on 'click' this.moveUp}}
@@ -23,7 +24,7 @@
         </Item>
         <Item>
           <AuButton
-            @icon='chevron-down'
+            @icon={{this.ChevronDownIcon}}
             @iconAlignment='left'
             @skin='link'
             {{on 'click' this.moveDown}}
@@ -33,7 +34,7 @@
         </Item>
         <Item>
           <AuButton
-            @icon='bin'
+            @icon={{this.BinIcon}}
             @iconAlignment='left'
             @skin='link'
             @alert={{true}}

package/addon/components/template-comments-plugin/edit-card.ts

@@ -10,12 +10,19 @@ import {
   findContentMatchPosLeft,
   findContentMatchPosRight,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/find-insertion-contentmatch';
+import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
+import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
+import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
 
 type Args = {
   controller: SayController;
 };
 
 export default class TemplateCommentsPluginEditCardComponent extends Component<Args> {
+  BinIcon = BinIcon;
+  ChevronDownIcon = ChevronDownIcon;
+  ChevronUpIcon = ChevronUpIcon;
+
   get controller() {
     return this.args.controller;
   }

package/addon/components/template-comments-plugin/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'
     @disabled={{not this.canInsert}}

package/addon/components/template-comments-plugin/insert.ts

@@ -2,12 +2,15 @@ import { findParentNode } from '@curvenote/prosemirror-utils';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { Command, SayController } from '@lblod/ember-rdfa-editor';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
 };
 
 export default class TemplateCommentsPluginInsertCardComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   get controller() {
     return this.args.controller;
   }

package/addon/components/template-comments-plugin/template-comment.hbs

@@ -1,8 +1,9 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuAlert
   @size='small'
   @title={{this.translation.title}}
   @skin='info'
-  @icon='circle-info'
+  @icon={{this.CircleInfoIcon}}
   class='say-template-comment {{
     if this.selectionInside 'ProseMirror-selectednode'
   }} say-default-cursor'

package/addon/components/template-comments-plugin/template-comment.ts

@@ -2,8 +2,11 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { CircleInfoIcon } from '@appuniversum/ember-appuniversum/components/icons/circle-info';
 
 export default class TemplateCommentsPluginTemplateCommentComponent extends Component<EmberNodeArgs> {
+  CircleInfoIcon = CircleInfoIcon;
+
   @service declare intl: IntlService;
 
   get controller() {

package/addon/components/validation-plugin/validation-card.hbs

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

package/addon/components/validation-plugin/validation-item.hbs

@@ -1,2 +1,3 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuAlert @size='small' @icon={{this.icon}} @title={{this.message}} @skin={{this.skin}} @closable={{false}}>
 </AuAlert>

package/addon/components/validation-plugin/validation-item.ts

@@ -3,6 +3,9 @@ import { SayController } from '@lblod/ember-rdfa-editor';
 import { ValidationResult } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { InfoCircleIcon } from '@appuniversum/ember-appuniversum/components/icons/info-circle';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
 
 interface Args {
   icon?: string;
@@ -39,13 +42,13 @@ export default class ValidationItem extends Component<Args> {
   get icon() {
     switch (this.result.severity) {
       case 'info':
-        return 'info-circle';
+        return InfoCircleIcon;
       case 'warning':
-        return 'alert-triangle';
+        return AlertTriangleIcon;
       case 'violation':
-        return 'cross';
+        return CrossIcon;
       default:
-        return 'info-circle';
+        return InfoCircleIcon;
     }
   }
 

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

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

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

@@ -14,6 +14,8 @@ import { trackedReset } from 'tracked-toolbox';
 import { trackedTask } from 'ember-resources/util/ember-concurrency';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { CheckIcon } from '@appuniversum/ember-appuniversum/components/icons/check';
 
 type Args = {
   controller: SayController;
@@ -68,7 +70,7 @@ export default class AddressEditComponent extends Component<Args> {
     ) {
       return {
         skin: 'success',
-        icon: 'check',
+        icon: CheckIcon,
         title: this.intl.t('editor-plugins.address.edit.success.address-found'),
         body: value.formatted,
       };
@@ -83,7 +85,7 @@ export default class AddressEditComponent extends Component<Args> {
       if (this.newAddress.error.alternativeAddress) {
         return {
           skin: 'warning',
-          icon: 'alert-triangle',
+          icon: AlertTriangleIcon,
           title: this.intl.t(
             'editor-plugins.address.edit.errors.address-not-found-short',
           ),
@@ -96,7 +98,7 @@ export default class AddressEditComponent extends Component<Args> {
 
       return {
         skin: 'warning',
-        icon: 'alert-triangle',
+        icon: AlertTriangleIcon,
         title: this.intl.t(error.translation, { status: error.status }),
         body: this.intl.t('editor-plugins.address.edit.errors.contact', {
           htmlSafe: true,

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

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

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

@@ -1,10 +1,11 @@
+{{! @glint-nocheck: not typesafe yet }}
 <li class="au-c-list__item">
   <AuButton
-    @icon="add"
+    @icon={{this.AddIcon}}
     @iconAlignment="left"
     @skin="link"
     {{on 'click' (fn this.insertAddress true)}}
     @disabled={{not this.canInsertAddress}}>
     {{t "editor-plugins.address.insert"}}
   </AuButton>
-</li>
+</li>

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

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 import { replaceSelectionWithAddress } from './utils';
 
@@ -11,6 +12,8 @@ type Args = {
 };
 
 export default class InsertAddressComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   @service declare intl: IntlService;
 
   get controller() {

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

@@ -1,5 +1,6 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuPill
-  @icon='pencil'
+  @icon={{this.PencilIcon}}
   @iconAlignment='right'
   class='variable atomic'
   {{on 'click' this.selectThisNode}}
@@ -11,9 +12,9 @@
       {{this.translations.placeholder}}
     </span>
   {{/if}}
-  {{#if @node.attrs.label}}
+  {{#if this.label}}
     <span class='label'>
-      ({{@node.attrs.label}})
+      ({{this.label}})
     </span>
   {{/if}}
 </AuPill>

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

@@ -2,9 +2,12 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { NodeSelection, PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables/address';
+import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 type Args = {
   getPos: () => number | undefined;
@@ -13,6 +16,8 @@ type Args = {
 };
 
 export default class AddressNodeviewComponent extends Component<Args> {
+  PencilIcon = PencilIcon;
+
   @service declare intl: IntlService;
 
   get controller() {
@@ -39,6 +44,10 @@ export default class AddressNodeviewComponent extends Component<Args> {
     return this.node.attrs.value as Address | null;
   }
 
+  get label() {
+    return getOutgoingTriple(this.node.attrs, EXT('label'))?.object.value;
+  }
+
   @action
   selectThisNode() {
     const tr = this.args.controller.activeEditorState.tr;

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

@@ -1,4 +1,10 @@
 import { SayController, NodeSelection } from '@lblod/ember-rdfa-editor';
+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 { v4 as uuidv4 } from 'uuid';
 
 export function replaceSelectionWithAddress(
@@ -7,12 +13,31 @@ export function replaceSelectionWithAddress(
 ) {
   const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
   const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+
   controller.withTransaction((tr) => {
     tr.replaceSelectionWith(
       controller.schema.node('address', {
-        label: label,
-        mappingResource,
-        variableInstance,
+        subject: mappingResource,
+        rdfaNodeType: 'resource',
+        __rdfaId: uuidv4(),
+        properties: [
+          {
+            predicate: RDF('type').full,
+            object: sayDataFactory.namedNode(EXT('Mapping').full),
+          },
+          {
+            predicate: EXT('instance').full,
+            object: sayDataFactory.namedNode(variableInstance),
+          },
+          {
+            predicate: DCT('type').full,
+            object: sayDataFactory.literal('address'),
+          },
+          {
+            predicate: EXT('label').full,
+            object: sayDataFactory.literal(label || ''),
+          },
+        ],
       }),
     );
     if (tr.selection.$anchor.nodeBefore) {

package/addon/components/variable-plugin/codelist/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/codelist/edit.ts

@@ -10,6 +10,12 @@ import { NodeSelection } from '@lblod/ember-rdfa-editor';
 import { trackedFunction } from 'ember-resources/util/function';
 import { trackedReset } from 'tracked-toolbox';
 import { updateCodelistVariable } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/codelist-utils';
+import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import {
+  DCT,
+  EXT,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 export type CodelistEditOptions = {
   endpoint: string;
 };
@@ -43,16 +49,27 @@ export default class CodelistEditComponent extends Component<Args> {
   });
 
   get source() {
-    return (
-      (this.selectedCodelist.value?.node.attrs.source as string | undefined) ??
-      this.args.options.endpoint
-    );
+    if (this.selectedCodelist.value) {
+      const { node } = this.selectedCodelist.value;
+      const source = getOutgoingTriple(node.attrs, DCT('source'))?.object
+        .value as Option<string>;
+      if (source) {
+        return source;
+      }
+    }
+    return this.args.options.endpoint;
   }
 
   get codelistUri() {
-    return this.selectedCodelist.value?.node.attrs.codelistResource as
-      | string
-      | undefined;
+    if (this.selectedCodelist.value) {
+      const { node } = this.selectedCodelist.value;
+      const codelistUri = getOutgoingTriple(node.attrs, EXT('codelist'))?.object
+        .value as Option<string>;
+      if (codelistUri) {
+        return codelistUri;
+      }
+    }
+    return;
   }
 
   get showCard() {

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <PowerSelect
   @allowClear={{false}}
   @searchEnabled={{false}}

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

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import {
   CodeList,
   fetchCodeListsByPublisher,
@@ -10,6 +11,12 @@ import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { trackedFunction } from 'ember-resources/util/function';
 import { v4 as uuidv4 } from 'uuid';
+import {
+  DCT,
+  EXT,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 export type CodelistInsertOptions = {
   publisher?: string;
@@ -83,19 +90,51 @@ export default class CodelistInsertComponent extends Component<Args> {
   insert() {
     const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
     const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const codelistResource = this.selectedCodelist?.uri;
+    const label =
+      this.label ??
+      this.selectedCodelist?.label ??
+      this.intl.t('variable.codelist.label', {
+        locale: this.documentLanguage,
+      });
+    const source = this.endpoint;
+    const variableId = uuidv4();
     const node = this.schema.nodes.codelist.create(
       {
-        mappingResource,
-        variableInstance,
-        codelistResource: this.selectedCodelist?.uri,
-        label:
-          this.label ??
-          this.selectedCodelist?.label ??
-          this.intl.t('variable.codelist.label', {
-            locale: this.documentLanguage,
-          }),
-        source: this.endpoint,
         selectionStyle: this.selectedStyleValue,
+        subject: mappingResource,
+        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: EXT('codelist').full,
+            object: sayDataFactory.namedNode(codelistResource || ''),
+          },
+          {
+            predicate: DCT('source').full,
+            object: sayDataFactory.namedNode(source),
+          },
+          {
+            predicate: DCT('type').full,
+            object: sayDataFactory.literal('codelist'),
+          },
+          {
+            predicate: EXT('content').full,
+            object: sayDataFactory.contentLiteral(),
+          },
+        ],
       },
       this.schema.node('placeholder', {
         placeholderText: this.selectedCodelist?.label,
@@ -103,13 +142,9 @@ export default class CodelistInsertComponent 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,
+    });
   }
 
   @action

package/addon/components/variable-plugin/date/date-time-picker.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <AuDatePicker
     @onChange={{this.onChangeDate}}