@lblod/ember-rdfa-editor-lblod-plugins 1.0.0-beta.1 → 1.0.0-beta.2

package/CHANGELOG.md

@@ -11,6 +11,35 @@
 
 
 
+
+## 1.0.0-beta.2 (2023-01-23)
+
+#### :boom: Breaking Change
+* [#67](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/67) New version of the variable plugin ([@elpoelma](https://github.com/elpoelma))
+* [#62](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/62) feat(citation): make citation plugin datastore-independent ([@abeforgit](https://github.com/abeforgit))
+
+#### :rocket: Enhancement
+* [#69](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/69) Add enter handler to variable editor view ([@elpoelma](https://github.com/elpoelma))
+* [#66](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/66) make the template plugin independent of the datastore ([@abeforgit](https://github.com/abeforgit))
+* [#43](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/43) Feature/template nodes ([@lagartoverde](https://github.com/lagartoverde))
+* [#62](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/62) feat(citation): make citation plugin datastore-independent ([@abeforgit](https://github.com/abeforgit))
+* [#49](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/49) Avoid using the datastore on the besluit type plugin ([@lagartoverde](https://github.com/lagartoverde))
+* [#47](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/47) Implement besluit articles using article-structure plugin ([@elpoelma](https://github.com/elpoelma))
+* [#48](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/48) Roadsign regulation plugin rework ([@elpoelma](https://github.com/elpoelma))
+
+#### :bug: Bug Fix
+* [#63](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/63) Preserve date format across reloads ([@elpoelma](https://github.com/elpoelma))
+
+#### :house: Internal
+* [#68](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/68) Update editor to 1.0.0-beta.5 ([@elpoelma](https://github.com/elpoelma))
+* [#65](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/65) Update editor to 1.0.0-beta.4 ([@elpoelma](https://github.com/elpoelma))
+
+#### Committers: 3
+- Arne Bertrand ([@abeforgit](https://github.com/abeforgit))
+- Elena Poelman ([@elpoelma](https://github.com/elpoelma))
+- Oscar Rodriguez Villalobos ([@lagartoverde](https://github.com/lagartoverde))
+
+
 ## 1.0.0-beta.1 (2023-01-17)
 
 #### :rocket: Enhancement

package/addon/components/article-structure-plugin/article-structure-card.hbs

@@ -1,3 +1,4 @@
+{{#unless @controller.inEmbeddedView}}
 <div>
   {{#each this.structureTypes as |structureType|}}
   <AuList::Item>
@@ -7,4 +8,5 @@
     </AuButton>
   </AuList::Item>
   {{/each}}
-</div>
+</div>
+{{/unless}}

package/addon/components/au-dropdown-pill.hbs

@@ -0,0 +1,32 @@
+<div class="au-c-dropdown" ...attributes>
+  <AuPill
+    @skin={{this.skin}}
+    @size={{@size}}
+    @actionIcon={{this.icon}}
+    @iconAlignment={{this.iconAlignment}}
+    @hideText={{@hideText}}
+    aria-haspopup="true"
+    aria-expanded="{{if this.dropdownOpen 'true' 'false'}}"
+    @onClickAction={{this.toggleDropdown}}
+    data-test-dropdown-button
+    data-au-dropdown-toggle
+  >
+    <span class="au-c-dropdown__name" data-test-dropdown-title>
+      {{@title}}
+    </span>
+  </AuPill>
+  <div
+    class="au-c-dropdown__menu {{this.alignment}} {{if this.dropdownOpen 'is-visible'}}"
+    role="menu"
+    tabindex="-1"
+    {{focus-trap
+      isActive=this.dropdownOpen
+      shouldSelfFocus=true
+      focusTrapOptions=(hash
+        clickOutsideDeactivates=this.clickOutsideDeactivates
+      )
+    }}
+  >
+    {{yield}}
+  </div>
+</div>

package/addon/components/au-dropdown-pill.ts

@@ -0,0 +1,65 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+type Args = {
+  alignment: 'left' | 'right';
+  icon: string;
+  iconAlignment: 'left' | 'right';
+  skin?: string;
+};
+export default class AuDropdownPill extends Component<Args> {
+  @tracked dropdownOpen = false;
+
+  @action
+  openDropdown() {
+    this.dropdownOpen = true;
+  }
+
+  @action
+  closeDropdown() {
+    this.dropdownOpen = false;
+  }
+
+  @action
+  toggleDropdown() {
+    this.dropdownOpen = !this.dropdownOpen;
+  }
+
+  @action
+  clickOutsideDeactivates(event: InputEvent) {
+    const toggleButton = document.querySelector('[data-au-dropdown-toggle]');
+    const isClosedByToggleButton = toggleButton?.contains(
+      event.target as HTMLInputElement
+    );
+
+    if (!isClosedByToggleButton) {
+      this.closeDropdown();
+    }
+
+    return true;
+  }
+
+  // Dropdown alignment
+  get alignment() {
+    if (this.args.alignment == 'left') return 'au-c-dropdown__menu--left';
+    if (this.args.alignment == 'right') return 'au-c-dropdown__menu--right';
+    return '';
+  }
+
+  get skin() {
+    return this.args.skin || 'default';
+  }
+
+  // Set default button icon
+  get icon() {
+    if (this.args.icon) return this.args.icon;
+    else return 'chevron-down';
+  }
+
+  // Set default icon alignment
+  get iconAlignment() {
+    if (this.args.iconAlignment) return this.args.iconAlignment;
+    else return 'right';
+  }
+}

package/addon/components/besluit-type-plugin/toolbar-dropdown.ts

@@ -16,6 +16,7 @@ import { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
 import fetchBesluitTypes, {
   BesluitType,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 declare module 'ember__owner' {
   export default interface Owner {
     resolveRegistration(name: string): unknown;
@@ -73,14 +74,18 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
 
   get currentBesluitRange(): ResolvedPNode | undefined {
     const selection = this.controller.state.selection;
-    const currentBesluitRange = [
-      ...this.controller.datastore
-        .limitToRange(this.controller.state, selection.from, selection.to)
-        .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
-        .asSubjectNodeMapping()
-        .nodes(),
-    ][0];
-    return currentBesluitRange;
+    const besluit = findAncestorOfType(
+      selection,
+      this.controller.schema.nodes['besluit']
+    );
+    if (!besluit) {
+      return undefined;
+    }
+    return {
+      node: besluit.node,
+      from: besluit.start - 1,
+      to: besluit.start + besluit.node.nodeSize - 1,
+    };
   }
 
   get currentBesluitURI() {
@@ -100,10 +105,12 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     if (!this.currentBesluitURI) {
       return;
     }
-    const besluitTypes = this.controller.datastore
-      .match(`>${this.currentBesluitURI}`, 'a', undefined)
-      .asQuads();
-    const besluitTypesUris = [...besluitTypes].map((quad) => quad.object.value);
+    const besluit = findAncestorOfType(
+      this.controller.state.selection,
+      this.controller.schema.nodes['besluit']
+    );
+    const besluitTypeof = besluit?.node.attrs.typeof as string;
+    const besluitTypesUris = besluitTypeof.split(' ');
     const besluitTypeRelevant = besluitTypesUris.find((type) =>
       type.includes('https://data.vlaanderen.be/id/concept/BesluitType/')
     );

package/addon/components/citation-plugin/citation-card.ts

@@ -50,7 +50,7 @@ export default class CitationCardComponent extends Component<Args> {
   }
 
   get showCard() {
-    return this.activeDecoration;
+    return !this.controller.inEmbeddedView && this.activeDecoration;
   }
 
   get plugin() {

package/addon/components/citation-plugin/citation-insert.ts

@@ -52,7 +52,7 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
   }
 
   get disableInsert() {
-    if (!this.activeRanges) {
+    if (!this.activeRanges || this.controller.inEmbeddedView) {
       return true;
     }
     const { from } = this.controller.state.selection;

package/addon/components/import-snippet-plugin/card.ts

@@ -5,6 +5,7 @@ import { ProseParser } from '@lblod/ember-rdfa-editor';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
 import ImportRdfaSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/services/import-rdfa-snippet';
 import { RdfaSnippet } from '@lblod/ember-rdfa-editor-lblod-plugins/services/import-rdfa-snippet';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 
 type Args = {
   controller: ProseController;
@@ -21,19 +22,14 @@ export default class ImportSnippetPluginCard extends Component<Args> {
   }
 
   get insertRange() {
-    const selection = this.controller.state.selection;
-    const besluitRange = [
-      ...this.controller.datastore
-        .limitToRange(this.controller.state, selection.from, selection.to)
-        .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
-        .asSubjectNodeMapping()
-        .nodes(),
-    ][0];
-    if (besluitRange) {
-      const { to } = besluitRange;
+    const { selection } = this.controller.state;
+    const besluit = findParentNodeOfType(this.controller.schema.nodes.besluit)(
+      selection
+    );
+    if (besluit) {
       return {
-        from: to - 1,
-        to: to - 1,
+        from: besluit.pos + besluit.node.nodeSize - 1,
+        to: besluit.pos + besluit.node.nodeSize - 1,
       };
     } else {
       return selection;

package/addon/components/rdfa-date-plugin/card.hbs

@@ -10,6 +10,34 @@
           @onChange={{this.changeDate}}
           @value={{this.dateValue}}
           @onlyDate={{this.onlyDate}}/>
+        {{#each @widgetArgs.options.formats as |format|}}
+        <AuFormRow>
+          <AuControlRadio
+            @label={{format.label}}
+            @identifier={{format.key}}
+            @name="dateFormat"
+            @value={{format.key}}
+            checked={{eq this.dateFormat format.key}}
+            @onChange={{this.setDateFormat}}
+          />
+        </AuFormRow>
+        {{/each}}
+        <AuFormRow>
+          <AuControlRadio
+            @label="Custom Date"
+            @identifier="custom"
+            @name="dateFormat"
+            @value="custom"
+            checked={{eq this.dateFormat "custom"}}
+            @onChange={{this.setDateFormat}}
+          />
+          {{#if (eq this.dateFormat "custom")}}
+            <AuInput
+              @value={{this.customDateFormat}}
+              {{on "input" this.setCustomDateFormat}}
+            />
+          {{/if}}
+        </AuFormRow>
         {{#unless this.dateInDocument}}
           <AuFormRow class="au-u-margin-top">
             <AuButton {{on 'click' this.modifyDate}}>

package/addon/components/rdfa-date-plugin/card.ts

@@ -1,18 +1,33 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { modifyDate } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin/commands';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
-import { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
+import { NodeSelection } from '@lblod/ember-rdfa-editor';
+import { DateFormat } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin';
+
 type Args = {
   controller: ProseController;
+  widgetArgs: {
+    options: {
+      formats: [DateFormat];
+      allowCustomFormat: boolean;
+    };
+  };
 };
 export default class RdfaDatePluginCardComponent extends Component<Args> {
   @tracked dateValue?: Date;
-  @tracked dateRange?: { from: number; to: number };
+  @tracked datePos?: number;
   @tracked dateInDocument = false;
   @tracked onlyDate = false;
-  @tracked showCard = false;
+  @tracked dateFormat = '';
+  @tracked customDateFormat = 'dd/MM/yyyy';
+
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+    const formats = this.args.widgetArgs.options.formats;
+    const firstKey = [...formats.keys()][0];
+    this.dateFormat = formats[firstKey].key;
+  }
 
   get controller() {
     return this.args.controller;
@@ -20,15 +35,13 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
 
   @action
   modifyDate() {
-    if (this.dateValue && this.dateRange) {
-      this.controller.checkAndDoCommand(
-        modifyDate(
-          this.dateRange.from,
-          this.dateRange.to,
-          this.dateValue,
-          this.onlyDate
-        )
-      );
+    if (this.datePos && this.dateValue) {
+      const pos = this.datePos;
+      const value = this.dateValue;
+      this.controller.withTransaction((tr) => {
+        tr.setNodeAttribute(pos, 'format', this.customDateFormat);
+        return tr.setNodeAttribute(pos, 'value', value.toISOString());
+      }, true);
     }
   }
 
@@ -39,34 +52,55 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
   }
 
   @action
-  onSelectionChanged() {
-    const selection = this.controller.state.selection;
-    const from = selection.$from;
-    const currentNode = from.parent.maybeChild(from.index());
-    if (!currentNode) {
-      return;
-    }
-    const datatype = getRdfaAttribute(currentNode, 'datatype').pop();
-    if (!datatype) {
-      this.showCard = false;
-      this.dateRange = undefined;
-      return;
+  setDateFormat(dateFormat: string) {
+    this.dateFormat = dateFormat;
+    if (dateFormat !== 'custom') {
+      const format = this.args.widgetArgs.options.formats.find(
+        (format) => format.key === dateFormat
+      );
+      if (format) {
+        if (this.onlyDate) {
+          this.customDateFormat = format.dateFormat;
+        } else {
+          this.customDateFormat = format.dateTimeFormat;
+        }
+      }
     }
-    // const { node: selectionParent, pos: parentPos } = ancestor;
+    if (this.dateInDocument) this.modifyDate();
+  }
+  @action
+  setCustomDateFormat(event: InputEvent) {
+    this.customDateFormat = (event.target as HTMLInputElement).value;
+    if (this.dateInDocument) this.modifyDate();
+  }
 
-    if (datatype === 'xsd:dateTime' || datatype === 'xsd:date') {
-      this.dateRange = {
-        from: from.pos - from.textOffset,
-        to: from.pos - from.textOffset + currentNode.nodeSize,
-      };
-      const dateContent = getRdfaAttribute(currentNode, 'content').pop();
-      this.dateValue = dateContent ? new Date(dateContent) : new Date();
-      this.dateInDocument = !!dateContent;
-      this.onlyDate = datatype === 'xsd:date';
-      this.showCard = true;
+  get showCard() {
+    return this.datePos !== undefined && this.datePos !== null;
+  }
+
+  @action
+  onSelectionChanged() {
+    const selection = this.controller.getState(true).selection;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === this.args.controller.schema.nodes['date']
+    ) {
+      this.dateInDocument = !!selection.node.attrs.value;
+      this.onlyDate = selection.node.attrs.onlyDate as boolean;
+      this.dateValue = this.dateInDocument
+        ? new Date(selection.node.attrs.value)
+        : new Date();
+      if (this.dateInDocument) {
+        this.dateValue = new Date(selection.node.attrs.value);
+      } else {
+        this.dateValue = new Date();
+        if (this.onlyDate) {
+          this.dateValue.setHours(0, 0, 0, 0);
+        }
+      }
+      this.datePos = selection.from;
     } else {
-      this.dateRange = undefined;
-      this.showCard = false;
+      this.datePos = undefined;
     }
   }
 }

package/addon/components/rdfa-date-plugin/date-time-picker.ts

@@ -46,6 +46,7 @@ export default class RdfaDatePluginDateTimePicker extends Component<Args> {
     if (!wasDateInputCleared) {
       if (!this.date) {
         this.date = new Date();
+        this.date.setHours(0, 0, 0, 0);
       }
       this.date.setDate(date.getDate());
       this.date.setMonth(date.getMonth());

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

@@ -3,7 +3,7 @@
     @icon="add"
     @iconAlignment="left"
     @skin="link"
-    {{on 'click' this.insertDate}}>
+    {{on 'click' (fn this.insertDate true)}}>
     {{t "date-plugin.insert.date"}}
   </AuButton>
 </AuList::Item>
@@ -12,7 +12,7 @@
     @icon="add"
     @iconAlignment="left"
     @skin="link"
-    {{on 'click' this.insertDateTime}}>
+    {{on 'click' (fn this.insertDate false)}}>
     {{t "date-plugin.insert.datetime"}}
   </AuButton>
 </AuList::Item>

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

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { NodeSelection } from '@lblod/ember-rdfa-editor';
 
 type Args = {
   controller: ProseController;
@@ -16,30 +17,20 @@ export default class RdfaDatePluginInsertComponent extends Component<Args> {
   }
 
   @action
-  insertDate() {
+  insertDate(onlyDate: boolean) {
     this.controller.withTransaction((tr) => {
-      const dateNode = this.schema.text('${date}', [
-        this.schema.mark('inline_rdfa', {
-          datatype: 'xsd:date',
-          property: 'ext:content',
-        }),
-      ]);
-      return tr.replaceSelectionWith(dateNode, false);
-    });
-  }
-
-  @action
-  insertDateTime() {
-    this.controller.withTransaction((tr) => {
-      return tr.replaceSelectionWith(
-        this.schema.text('${date and time}', [
-          this.schema.mark('inline_rdfa', {
-            datatype: 'xsd:dateTime',
-            property: 'ext:content',
-          }),
-        ]),
-        false
+      tr.replaceSelectionWith(
+        this.schema.node('date', {
+          onlyDate,
+        })
       );
-    });
+      if (tr.selection.$anchor.nodeBefore) {
+        const resolvedPos = tr.doc.resolve(
+          tr.selection.anchor - tr.selection.$anchor.nodeBefore?.nodeSize
+        );
+        tr.setSelection(new NodeSelection(resolvedPos));
+      }
+      return tr;
+    }, true);
   }
 }

package/addon/components/roadsign-regulation-plugin/roadsign-regulation-card.ts

@@ -1,3 +1,4 @@
+import { findParentNode } from '@curvenote/prosemirror-utils';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -11,13 +12,13 @@ import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
  * @extends Ember.Component
  */
 const acceptedTypes = [
-  '>https://data.vlaanderen.be/id/concept/BesluitType/4d8f678a-6fa4-4d5f-a2a1-80974e43bf34',
-  '>https://data.vlaanderen.be/id/concept/BesluitType/7d95fd2e-3cc9-4a4c-a58e-0fbc408c2f9b',
-  '>https://data.vlaanderen.be/id/concept/BesluitType/3bba9f10-faff-49a6-acaa-85af7f2199a3',
-  '>https://data.vlaanderen.be/id/concept/BesluitType/0d1278af-b69e-4152-a418-ec5cfd1c7d0b',
-  '>https://data.vlaanderen.be/id/concept/BesluitType/e8afe7c5-9640-4db8-8f74-3f023bec3241',
-  '>https://data.vlaanderen.be/id/concept/BesluitType/256bd04a-b74b-4f2a-8f5d-14dda4765af9',
-  '>https://data.vlaanderen.be/id/concept/BesluitType/67378dd0-5413-474b-8996-d992ef81637a',
+  'https://data.vlaanderen.be/id/concept/BesluitType/4d8f678a-6fa4-4d5f-a2a1-80974e43bf34',
+  'https://data.vlaanderen.be/id/concept/BesluitType/7d95fd2e-3cc9-4a4c-a58e-0fbc408c2f9b',
+  'https://data.vlaanderen.be/id/concept/BesluitType/3bba9f10-faff-49a6-acaa-85af7f2199a3',
+  'https://data.vlaanderen.be/id/concept/BesluitType/0d1278af-b69e-4152-a418-ec5cfd1c7d0b',
+  'https://data.vlaanderen.be/id/concept/BesluitType/e8afe7c5-9640-4db8-8f74-3f023bec3241',
+  'https://data.vlaanderen.be/id/concept/BesluitType/256bd04a-b74b-4f2a-8f5d-14dda4765af9',
+  'https://data.vlaanderen.be/id/concept/BesluitType/67378dd0-5413-474b-8996-d992ef81637a',
 ];
 
 type Args = {
@@ -36,25 +37,23 @@ export default class RoadsignRegulationCard extends Component<Args> {
     return this.args.controller;
   }
 
+  get schema() {
+    return this.args.controller.schema;
+  }
+
   get showCard() {
     const selection = this.controller.state.selection;
-    const limitedDatastore = this.controller.datastore.limitToRange(
-      this.controller.state,
-      selection.from,
-      selection.to
-    );
-    const besluit = [
-      ...limitedDatastore
-        .match(undefined, 'a')
-        .transformDataset((dataset, termConverter) => {
-          return dataset.filter((quad) =>
-            acceptedTypes
-              .map((type) => termConverter(type).value)
-              .includes(quad.object.value)
-          );
-        })
-        .asQuadResultSet(),
-    ][0];
-    return !!besluit;
+    const besluitNode = findParentNode((node) => {
+      if (node.type === this.schema.nodes['besluit']) {
+        const rdfTypes = (node.attrs['typeof'] as string | undefined)?.split(
+          ' '
+        );
+        if (rdfTypes?.some((t) => acceptedTypes.includes(t))) {
+          return true;
+        }
+      }
+      return false;
+    })(selection);
+    return !!besluitNode;
   }
 }

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.ts

@@ -16,7 +16,10 @@ import { assert } from '@ember/debug';
 import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
 import Measure from '@lblod/ember-rdfa-editor-lblod-plugins/models/measure';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
-import { insertArticle } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-plugin/commands';
+import { insertStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands';
+import { besluitArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/standard-template-plugin/utils/nodes';
+import IntlService from 'ember-intl/services/intl';
+import { ProseParser } from '@lblod/ember-rdfa-editor';
 
 const PAGE_SIZE = 10;
 const SIGN_TYPE_URI =
@@ -47,6 +50,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
 
   pageSize = PAGE_SIZE;
   @service declare roadsignRegistry: RoadsignRegistryService;
+  @service declare intl: IntlService;
 
   @tracked typeSelected?: TypeOption;
 
@@ -91,6 +95,10 @@ export default class RoadsignRegulationCard extends Component<Args> {
     this.search();
   }
 
+  get schema() {
+    return this.args.controller.schema;
+  }
+
   @action
   selectTypeOrCategory(option: Option) {
     if (!option) {
@@ -270,24 +278,35 @@ export default class RoadsignRegulationCard extends Component<Args> {
       })
       .join('\n');
     const regulationHTML = `<div property="mobiliteit:heeftVerkeersmaatregel" typeof="mobiliteit:Mobiliteitsmaatregel" resource="http://data.lblod.info/mobiliteitsmaatregels/${uuid()}">
-    <span style="display:none;" property="prov:wasDerivedFrom" resource="${
-      measure.uri
-    }">&nbsp;</span>
-    <span style="display:none;" property="ext:zonality" resource="${zonality}"></span>
-    <span style="display:none;" property="ext:temporal" value="${measure.temporal.toString()}"></span>
-      <div property="dct:description">
-        ${html}
-        <p>Dit wordt aangeduid door verkeerstekens:</p>
-        <ul style="list-style:none;">
-          ${signsHTML}
-        </ul>
-        ${temporalValue === 'true' ? 'Deze signalisatie is dynamisch.' : ''}
-      </div>
-    </div>
-  `;
+                            <span style="display:none;" property="prov:wasDerivedFrom" resource="${
+                              measure.uri
+                            }">&nbsp;</span>
+                            <span style="display:none;" property="ext:zonality" resource="${zonality}"></span>
+                            <span style="display:none;" property="ext:temporal" value="${measure.temporal.toString()}"></span>
+                              <div property="dct:description">
+                                ${html}
+                                <p>Dit wordt aangeduid door verkeerstekens:</p>
+                                <ul style="list-style:none;">
+                                  ${signsHTML}
+                                </ul>
+                                ${
+                                  temporalValue === 'true'
+                                    ? 'Deze signalisatie is dynamisch.'
+                                    : ''
+                                }
+                              </div>
+                            </div>
+                          `;
+    const domParser = new DOMParser();
+    const htmlNode = domParser.parseFromString(regulationHTML, 'text/html');
+    const contentFragment = ProseParser.fromSchema(
+      this.args.controller.schema
+    ).parseSlice(htmlNode, {
+      preserveWhitespace: false,
+    }).content;
 
     this.args.controller.doCommand(
-      insertArticle(this.args.controller, regulationHTML)
+      insertStructure(besluitArticleStructure, this.intl, contentFragment)
     );
     this.args.closeModal();
   }