@lblod/ember-rdfa-editor-lblod-plugins 12.0.0 → 13.0.0

package/addon/components/{rdfa-date-plugin/date.ts → variable-plugin/date/nodeview.ts}

@@ -7,11 +7,12 @@ import {
   SayView,
 } from '@lblod/ember-rdfa-editor';
 import { action } from '@ember/object';
+import IntlService from 'ember-intl/services/intl';
+import { service } from '@ember/service';
 import {
   formatDate,
   validateDateFormat,
-} from '../../plugins/rdfa-date-plugin/utils';
-import { DateOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin';
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
 
 type Args = {
   getPos: () => number | undefined;
@@ -23,7 +24,17 @@ type Args = {
   contentDecorations?: DecorationSource;
 };
 
-export default class VariableComponent extends Component<Args> {
+export default class DateNodeviewComponent extends Component<Args> {
+  @service declare intl: IntlService;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get documentLanguage() {
+    return this.controller.documentLanguage;
+  }
+
   @action
   onClick() {
     const tr = this.args.controller.activeEditorState.tr;
@@ -46,10 +57,13 @@ export default class VariableComponent extends Component<Args> {
         return 'Ongeldig formaat';
       }
     } else {
-      const options = this.args.node.type.spec.options as DateOptions;
       return (this.args.node.attrs.onlyDate as boolean)
-        ? options.placeholder.insertDate
-        : options.placeholder.insertDateTime;
+        ? this.intl.t('date-plugin.insert.date', {
+            locale: this.documentLanguage,
+          })
+        : this.intl.t('date-plugin.insert.datetime', {
+            locale: this.documentLanguage,
+          });
     }
   }
 }

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

@@ -28,6 +28,10 @@ export default class LocationInsertComponent extends Component<Args> {
     return this.controller.schema;
   }
 
+  get documentLanguage() {
+    return this.controller.documentLanguage;
+  }
+
   get endpoint() {
     return this.args.options.endpoint;
   }
@@ -41,15 +45,20 @@ export default class LocationInsertComponent extends Component<Args> {
   insert() {
     const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
     const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+
+    const placeholder = this.intl.t('variable.location.label', {
+      locale: this.documentLanguage,
+    });
+
     const node = this.schema.nodes.location.create(
       {
         mappingResource,
         variableInstance,
-        label: this.label,
+        label: this.label ?? placeholder,
         source: this.endpoint,
       },
       this.schema.node('placeholder', {
-        placeholderText: 'location',
+        placeholderText: placeholder,
       }),
     );
 

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

@@ -0,0 +1,8 @@
+<VariablePlugin::Variable::Nodeview 
+  @controller={{@controller}} 
+  @node={{@node}} 
+  @view={{@view}} 
+  @getPos={{@getPos}} 
+  @selected={{@selected}}
+  @nodeViews={{this.nodeViews}}
+/>

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

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { SayController, SayView } from '@lblod/ember-rdfa-editor';
+import { tracked } from '@glimmer/tracking';
+import { addressView } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class LocationNodeViewComponent extends Component<Args> {
+  @tracked nodeViews = {
+    address: addressView(this.args.controller),
+  };
+  @tracked innerView?: SayView;
+}

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

@@ -2,7 +2,7 @@
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput @label={{this.label}} @updateLabel={{this.updateLabel}}/>
 </AuFormRow>
-<div class='number-settings'>
+<div class='say-number-settings'>
   <AuFormRow>
     {{#let (unique-id) as |id|}}
       <AuLabel for={{id}}>

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

@@ -42,6 +42,10 @@ export default class NumberInsertComponent extends Component<Args> {
     return this.args.controller.schema;
   }
 
+  get documentLanguage() {
+    return this.controller.documentLanguage;
+  }
+
   get numberVariableError() {
     if (!this.validMinimum || !this.validMaximum) {
       return this.intl.t('variable.number.error-not-number');
@@ -83,8 +87,12 @@ export default class NumberInsertComponent extends Component<Args> {
     const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
     const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
 
+    const defaultLabel = this.intl.t('variable.number.label', {
+      locale: this.documentLanguage,
+    });
+
     const node = this.schema.nodes.number.create({
-      label: this.label,
+      label: this.label ?? defaultLabel,
       value: null,
       mappingResource,
       variableInstance,

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

@@ -5,7 +5,7 @@
   <AuPill
     @icon='pencil'
     @iconAlignment='right'
-    class='variable'
+    class='variable atomic'
     {{velcro.hook}}
     {{select-node-on-click @controller @getPos}}
   >
@@ -13,7 +13,7 @@
       {{this.formattedNumber}}
     {{else}}
       <span class='mark-highlight-manual'>
-        {{t 'variable.number.placeholder'}}
+        {{this.translations.placeholder}}
       </span>
     {{/if}}
     {{#if @node.attrs.label}}

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

@@ -22,6 +22,7 @@ type Args = {
   selected: boolean;
   contentDecorations?: DecorationSource;
 };
+
 export default class NumberNodeviewComponent extends Component<Args> {
   @localCopy('args.node.attrs.value', '') declare inputNumber: string;
   @localCopy('args.node.attrs.writtenNumber', false)
@@ -33,6 +34,22 @@ export default class NumberNodeviewComponent extends Component<Args> {
     element.focus();
   }
 
+  get controller() {
+    return this.args.controller;
+  }
+
+  get documentLanguage() {
+    return this.controller.documentLanguage;
+  }
+
+  get translations() {
+    return {
+      placeholder: this.intl.t('variable.number.placeholder', {
+        locale: this.documentLanguage,
+      }),
+    };
+  }
+
   get node() {
     return this.args.node;
   }

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

@@ -1,14 +1,17 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+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';
 
 type Args = {
   controller: SayController;
 };
 
 export default class TextVariableInsertComponent extends Component<Args> {
+  @service declare intl: IntlService;
   @tracked label?: string;
 
   get controller() {
@@ -19,6 +22,10 @@ export default class TextVariableInsertComponent extends Component<Args> {
     return this.args.controller.schema;
   }
 
+  get documentLanguage() {
+    return this.controller.documentLanguage;
+  }
+
   @action
   updateLabel(event: InputEvent) {
     this.label = (event.target as HTMLInputElement).value;
@@ -28,13 +35,18 @@ export default class TextVariableInsertComponent extends Component<Args> {
   insert() {
     const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
     const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+
+    const placeholder = this.intl.t('variable.text.label', {
+      locale: this.documentLanguage,
+    });
+
     const node = this.schema.nodes.text_variable.create(
       {
-        label: this.label,
+        label: this.label ?? placeholder,
         mappingResource,
         variableInstance,
       },
-      this.schema.node('placeholder', { placeholderText: 'text' }),
+      this.schema.node('placeholder', { placeholderText: placeholder }),
     );
 
     this.label = undefined;

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

@@ -6,6 +6,7 @@
     @getPos={{@getPos}} 
     @selected={{@selected}}
     @initEditor={{this.initEditor}}
+    @nodeViews={{@nodeViews}}
   />
   {{#if @node.attrs.label}}
     <span class="label">

package/addon/plugins/citation-plugin/index.ts

@@ -140,6 +140,7 @@ export type CitationPluginConfig =
 export type CitationPluginEmberComponentConfig = CitationPluginConfig & {
   endpoint: string;
   decisionsEndpoint?: string;
+  defaultDecisionsGovernmentName?: string;
 };
 
 export function citationPlugin(config: CitationPluginConfig): CitationPlugin {

package/addon/plugins/citation-plugin/utils/legal-documents.ts

@@ -65,6 +65,7 @@ export interface LegalDocumentsQueryFilter {
   documentDateTo?: Option<string>;
   publicationDateFrom?: Option<string>;
   publicationDateTo?: Option<string>;
+  governmentName?: Option<string>;
 }
 
 export type LegalDocumentsQueryConfig = {
@@ -94,6 +95,7 @@ export async function fetchLegalDocuments({
     documentDateTo: filter.documentDateTo || null,
     publicationDateFrom: filter.publicationDateFrom || null,
     publicationDateTo: filter.publicationDateTo || null,
+    governmentName: filter.governmentName || null,
   };
   const stringArguments = JSON.stringify({
     words,

package/addon/plugins/citation-plugin/utils/public-decisions.ts

@@ -42,6 +42,12 @@ const getFilters = ({
     );
   }
 
+  const governmentNameFilter = filter.governmentName?.trim()
+    ? `FILTER (CONTAINS(LCASE(?administrativeUnitName), "${replaceDiacriticsInWord(
+        filter.governmentName?.trim(),
+      ).toLowerCase()}"))`
+    : '';
+
   return `
     ${words
       .map(
@@ -51,7 +57,10 @@ const getFilters = ({
           ).toLowerCase()}"))`,
       )
       .join('\n')}
-    ${documentDateFilter.join('\n')}`;
+    ${documentDateFilter.join('\n')}
+    ${governmentNameFilter}
+    FILTER(BOUND(?decisionTitle))
+    `;
 };
 
 const getCountQuery = ({
@@ -69,25 +78,31 @@ const getCountQuery = ({
     PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
     PREFIX eli: <http://data.europa.eu/eli/ontology#>
     PREFIX prov: <http://www.w3.org/ns/prov#>
-    PREFIX schema: <http://schema.org/>
     PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
     PREFIX mandaat: <http://data.vlaanderen.be/ns/mandaat#>
-    PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
     PREFIX mu: <http://mu.semte.ch/vocabularies/core/>
+    PREFIX dct: <http://purl.org/dc/terms/>
 
     SELECT (COUNT(DISTINCT(?decision)) as ?count) WHERE {
       ?session rdf:type besluit:Zitting;
         mu:uuid ?zittingUuid;
-        (besluit:isGehoudenDoor/mandaat:isTijdspecialisatieVan/skos:prefLabel) ?governmentName;
-        ext:besluitenlijst ?decisionList.
-      ?decisionList ext:besluitenlijstBesluit ?decision.
-      ?decision eli:title ?decisionTitle.
+        (besluit:isGehoudenDoor/mandaat:isTijdspecialisatieVan) ?administrativeUnit.
+      ?administrativeUnit skos:prefLabel ?administrativeUnitFullName;
+        besluit:bestuurt ?bestuurseenheid.
+      ?bestuurseenheid skos:prefLabel ?administrativeUnitName;
+        (besluit:classificatie/skos:prefLabel) ?administrativeUnitTypeName.
       OPTIONAL {
-        ?agenda rdf:type besluit:BehandelingVanAgendapunt;
+        ?session besluit:behandelt ?agendaPoint.
+        ?agendaPointTreatment dct:subject ?agendaPoint;
           prov:generated ?decision.
-        ?treatment rdf:type ext:Uittreksel;
-          ext:uittrekselBvap ?agenda;
-          mu:uuid ?treatmentUuida.
+        ?decision eli:title ?decisionTitle.
+      }
+      OPTIONAL {
+        ?session ext:uittreksel ?treatment.
+        ?treatment mu:uuid ?treatmentUuid.
+        ?treatment ext:uittrekselBvap ?agendaPointTreatment.
+        ?agendaPointTreatment prov:generated ?decision.
+        ?decision eli:title ?decisionTitle.
       }
       ${filterString}
     }
@@ -113,25 +128,31 @@ const getQuery = ({
     PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
     PREFIX eli: <http://data.europa.eu/eli/ontology#>
     PREFIX prov: <http://www.w3.org/ns/prov#>
-    PREFIX schema: <http://schema.org/>
     PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
     PREFIX mandaat: <http://data.vlaanderen.be/ns/mandaat#>
-    PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
     PREFIX mu: <http://mu.semte.ch/vocabularies/core/>
+    PREFIX dct: <http://purl.org/dc/terms/>
 
-    SELECT DISTINCT ?governmentName ?decision ?decisionTitle ?documentDate ?zittingUuid ?treatmentUuid WHERE {
+    SELECT DISTINCT ?administrativeUnitFullName ?administrativeUnitTypeName ?administrativeUnitName ?documentDate ?decision ?decisionTitle ?zittingUuid ?treatmentUuid WHERE {
       ?session rdf:type besluit:Zitting;
         mu:uuid ?zittingUuid;
-        (besluit:isGehoudenDoor/mandaat:isTijdspecialisatieVan/skos:prefLabel) ?governmentName;
-        ext:besluitenlijst ?decisionList.
-      ?decisionList ext:besluitenlijstBesluit ?decision.
-      ?decision eli:title ?decisionTitle.
+        (besluit:isGehoudenDoor/mandaat:isTijdspecialisatieVan) ?administrativeUnit.
+      ?administrativeUnit skos:prefLabel ?administrativeUnitFullName;
+        besluit:bestuurt ?bestuurseenheid.
+      ?bestuurseenheid skos:prefLabel ?administrativeUnitName;
+        (besluit:classificatie/skos:prefLabel) ?administrativeUnitTypeName.
       OPTIONAL {
-        ?agenda rdf:type besluit:BehandelingVanAgendapunt;
+        ?session besluit:behandelt ?agendaPoint.
+        ?agendaPointTreatment dct:subject ?agendaPoint;
           prov:generated ?decision.
-        ?treatment rdf:type ext:Uittreksel;
-          ext:uittrekselBvap ?agenda;
-          mu:uuid ?treatmentUuid.
+        ?decision eli:title ?decisionTitle.
+      }
+      OPTIONAL {
+        ?session ext:uittreksel ?treatment.
+        ?treatment mu:uuid ?treatmentUuid.
+        ?treatment ext:uittrekselBvap ?agendaPointTreatment.
+        ?agendaPointTreatment prov:generated ?decision.
+        ?decision eli:title ?decisionTitle.
       }
       ${filterString}
     }
@@ -142,7 +163,9 @@ const getQuery = ({
 };
 
 interface PublicDecisionLegalDocumentBinding {
-  governmentName: Binding<string>;
+  administrativeUnitName: Binding<string>;
+  administrativeUnitTypeName: Binding<string>;
+  administrativeUnitFullName: Binding<string>;
   decision: Binding<string>;
   decisionTitle: Binding<string>;
   documentDate?: Binding<string>;
@@ -176,7 +199,7 @@ export async function fetchPublicDecisions({
 
     const legalDocuments = response.results.bindings.map((binding) => {
       const escapedGovernmentName =
-        escapeValue(binding.governmentName.value) ?? '';
+        escapeValue(binding.administrativeUnitFullName.value) ?? '';
 
       const escapedTitle = escapeValue(binding.decisionTitle.value) ?? '';
 
@@ -198,8 +221,12 @@ export async function fetchPublicDecisions({
           publicationLink:
             binding.zittingUuid.value && binding.treatmentUuid?.value
               ? getPublicationLink({
+                  administrativeUnitName: binding.administrativeUnitName.value,
+                  administrativeUnitTypeName:
+                    binding.administrativeUnitTypeName.value,
                   zittingUuid: binding.zittingUuid.value,
                   treatmentUuid: binding.treatmentUuid.value,
+                  decisionsEndpoint: config.endpoint,
                 })
               : null,
         },
@@ -219,10 +246,19 @@ export async function fetchPublicDecisions({
 }
 
 const getPublicationLink = ({
+  administrativeUnitName,
+  administrativeUnitTypeName,
   zittingUuid,
   treatmentUuid,
+  decisionsEndpoint,
 }: {
+  administrativeUnitName: string;
+  administrativeUnitTypeName: string;
   zittingUuid: string;
   treatmentUuid: string;
-}) =>
-  `https://publicatie.gelinkt-notuleren.lblod.info/Edegem/Gemeente/zittingen/${zittingUuid}/uittreksels/${treatmentUuid}`;
+  decisionsEndpoint: string;
+}) => {
+  return `https://${
+    new URL(decisionsEndpoint).host
+  }/${administrativeUnitName}/${administrativeUnitTypeName}/zittingen/${zittingUuid}/uittreksels/${treatmentUuid}`;
+};

package/addon/plugins/table-of-contents-plugin/nodes/table-of-contents.ts

@@ -8,15 +8,16 @@ import {
   createTableOfContents,
   extractOutline,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils';
-import { emberApplicationPluginKey } from '@lblod/ember-rdfa-editor/plugins/ember-application';
-import IntlService from 'ember-intl/services/intl';
+import TableOfContentsComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/table-of-contents-plugin/ember-nodes/table-of-contents';
+import type { ComponentLike } from '@glint/template';
+import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 
 export const emberNodeConfig: (
   config: TableOfContentsConfig,
 ) => EmberNodeConfig = (config) => {
   return {
     name: 'table-of-contents',
-    componentPath: 'table-of-contents-plugin/ember-nodes/table-of-contents',
+    component: TableOfContentsComponent as unknown as ComponentLike,
     inline: false,
     group: 'table_of_contents',
     atom: true,
@@ -26,23 +27,17 @@ export const emberNodeConfig: (
       },
     },
     serialize(node, state) {
-      const intl = emberApplicationPluginKey
-        .getState(state)
-        ?.application.lookup('service:intl') as IntlService | undefined;
-      const lang = state.doc.attrs.lang as string;
+      const t = getTranslationFunction(state);
+
       const { config } = node.attrs;
       const entries = extractOutline({
         node: state.doc,
         pos: -1,
         config: config as TableOfContentsConfig,
+        state,
       });
 
-      const title = intl
-        ? intl.t('table-of-contents-plugin.title', {
-            locale: lang,
-          })
-        : 'Inhoudstafel';
-
+      const title = t('table-of-contents-plugin.title', 'Inhoudstafel');
       return [
         'div',
         { 'data-ember-node': 'table-of-contents', class: 'table-of-contents' },

package/addon/plugins/table-of-contents-plugin/utils/index.ts

@@ -1,4 +1,4 @@
-import { DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
+import { DOMOutputSpec, EditorState, PNode } from '@lblod/ember-rdfa-editor';
 import { NodeWithPos } from '@curvenote/prosemirror-utils';
 
 export type OutlineEntry = {
@@ -49,10 +49,12 @@ export function extractOutline({
   node,
   pos,
   config,
+  state,
 }: {
   node: PNode;
   pos: number;
   config: Config;
+  state: EditorState;
 }): OutlineEntry[] {
   let result: OutlineEntry[] = [];
   let parent: OutlineEntry | undefined;
@@ -74,10 +76,11 @@ export function extractOutline({
       }
       if (currentNode) {
         const outlineText = currentNode.node.type.spec.outlineText as
-          | ((node: PNode) => string)
+          | ((node: PNode, state: EditorState) => string)
           | undefined;
         const content =
-          outlineText?.(currentNode.node) ?? currentNode.node.textContent;
+          outlineText?.(currentNode.node, state) ??
+          currentNode.node.textContent;
         parent = {
           pos: currentNode.pos,
           content,
@@ -88,7 +91,7 @@ export function extractOutline({
   const subResults: OutlineEntry[] = [];
   node.forEach((child, offset) => {
     subResults.push(
-      ...extractOutline({ node: child, pos: pos + 1 + offset, config }),
+      ...extractOutline({ node: child, pos: pos + 1 + offset, config, state }),
     );
   });
   if (parent) {

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

@@ -1,3 +1,5 @@
+import type { ComponentLike } from '@glint/template';
+import TemplateCommentsComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/template-comments-plugin/template-comment';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import {
@@ -5,11 +7,12 @@ import {
   createEmberNodeView,
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 
 export const emberNodeConfig: () => EmberNodeConfig = () => {
   return {
     name: 'template-comment',
-    componentPath: 'template-comments-plugin/template-comment',
+    component: TemplateCommentsComponent as unknown as ComponentLike,
     inline: false,
     group: 'block',
     content: '(paragraph|list)+',
@@ -18,13 +21,19 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
     isolating: true,
     atom: false,
     attrs: {},
-    toDOM() {
+    serialize(_, state) {
+      const t = getTranslationFunction(state);
+      const heading = t(
+        'template-comments-plugin.heading',
+        'toelichtingsbepaling',
+      );
+
       return [
         'div',
         {
           typeof: EXT('TemplateComment').prefixed,
         },
-        ['h3', {}, 'toelichtingsbepaling'],
+        ['h3', {}, heading],
         ['div', { property: EXT('content').prefixed }, 0],
       ];
     },

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

@@ -10,7 +10,7 @@ import {
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { v4 as uuidv4 } from 'uuid';
-import { DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
+import { DOMOutputSpec, EditorState, PNode } from '@lblod/ember-rdfa-editor';
 import {
   isVariable,
   parseLabel,
@@ -28,6 +28,9 @@ import {
   mappingSpan,
   typeSpan,
 } from '../utils/dom-constructors';
+import AddressNodeviewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/address/nodeview';
+import type { ComponentLike } from '@glint/template';
+import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 
 export class Address {
   declare id?: string;
@@ -245,13 +248,19 @@ const parseDOM = [
   },
 ];
 
-const toDOM = (node: PNode): DOMOutputSpec => {
+const serialize = (node: PNode, state: EditorState): DOMOutputSpec => {
+  const t = getTranslationFunction(state);
+
   const { mappingResource, variableInstance, label, value } = node.attrs;
   let contentNode: DOMOutputSpec;
   if (value) {
     contentNode = constructAddressNode(value);
   } else {
-    contentNode = contentSpan({}, 'Voeg adres in');
+    const placeholder = t(
+      'editor-plugins.address.nodeview.placeholder',
+      'Voeg adres in',
+    );
+    contentNode = contentSpan({}, placeholder);
   }
   return mappingSpan(
     mappingResource,
@@ -266,7 +275,7 @@ const toDOM = (node: PNode): DOMOutputSpec => {
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'address',
-  componentPath: 'variable-plugin/address/nodeview',
+  component: AddressNodeviewComponent as unknown as ComponentLike,
   inline: true,
   group: 'inline variable',
   content: 'inline*',
@@ -278,14 +287,12 @@ const emberNodeConfig: EmberNodeConfig = {
   attrs: {
     mappingResource: {},
     variableInstance: {},
-    label: {
-      default: 'adres',
-    },
+    label: { default: null },
     value: {
       default: null,
     },
   },
-  toDOM,
+  serialize,
   parseDOM,
 };
 

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

@@ -23,6 +23,8 @@ import {
   typeSpan,
 } from '../utils/dom-constructors';
 import { span } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/dom-output-spec-helpers';
+import VariableNodeViewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/variable/nodeview';
+import type { ComponentLike } from '@glint/template';
 
 const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'],
                           span[property~='${EXT('content').full}']`;
@@ -100,7 +102,7 @@ const toDOM = (node: PNode): DOMOutputSpec => {
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'codelist',
-  componentPath: 'variable-plugin/variable/nodeview',
+  component: VariableNodeViewComponent as unknown as ComponentLike,
   inline: true,
   group: 'inline variable',
   content: 'inline*',
@@ -118,9 +120,7 @@ const emberNodeConfig: EmberNodeConfig = {
     source: {
       default: null,
     },
-    label: {
-      default: 'codelijst',
-    },
+    label: { default: null },
     selectionStyle: {
       default: null,
     },