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

package/CHANGELOG.md

@@ -10,6 +10,54 @@
 
 
 
+
+
+## 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
+* [#27](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/27) Conversion of plugins to prosemirror based editor ([@elpoelma](https://github.com/elpoelma))
+* [#54](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/54) Move table-of-contents toggle to toolbar ([@elpoelma](https://github.com/elpoelma))
+* [#46](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/46) Update insert-structure command so it looks forward for the next best position to insert ([@elpoelma](https://github.com/elpoelma))
+
+#### :bug: Bug Fix
+* [#59](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/59) Rename verwijzing to citeeropschrift ([@elpoelma](https://github.com/elpoelma))
+* [#56](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/56) Add space before 'met zonale geldigheid' ([@elpoelma](https://github.com/elpoelma))
+
+#### :house: Internal
+* [#61](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/61) Update editor to 1.0.0-beta.2 ([@elpoelma](https://github.com/elpoelma))
+* [#60](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/60) Update editor to 1.0.0-beta.1 ([@elpoelma](https://github.com/elpoelma))
+
+#### Committers: 1
+- Elena Poelman ([@elpoelma](https://github.com/elpoelma))
+
 ## 1.0.0-alpha.3 (2023-01-09)
 
 #### :house: Internal

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.hbs

@@ -106,13 +106,13 @@
     </c.footer>
   </AuCard>
 {{/if}}
-
 <CitationPlugin::Citations::SearchModal
   @open={{this.showModal}}
   @closeModal={{this.closeModal}}
   @insertDecisionCitation={{this.insertDecisionCitation}}
   @insertArticleCitation={{this.insertArticleCitation}}
   @selectedDecision={{this.decision}}
-  @legislationTypeUri={{this.legislationTypeUri}}
+  @legislationTypeUri={{this.selectedLegislationTypeUri}}
+  @selectLegislationType={{this.selectLegislationType}}
   @text={{this.searchText}}
 />

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.hbs

@@ -15,6 +15,8 @@
   @closeModal={{this.closeModal}}
   @insertDecisionCitation={{this.insertDecisionCitation}}
   @insertArticleCitation={{this.insertArticleCitation}}
-  @legislationTypeUri={{this.legislationTypeUri}}
+  @legislationTypeUri={{this.selectedLegislationTypeUri}}
+
+  @selectLegislationType={{this.selectLegislationType}}
   @text={{this.text}}
 />

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

@@ -13,7 +13,11 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/vlaamse-codex';
 import { citedText } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/cited-text';
 import { CitationPlugin } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
-import { LEGISLATION_TYPES } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legislation-types';
+import {
+  LEGISLATION_TYPE_CONCEPTS,
+  LEGISLATION_TYPES,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legislation-types';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 interface Args {
   controller: ProseController;
@@ -24,9 +28,31 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
   @tracked showModal = false;
   @tracked legislationTypeUri = LEGISLATION_TYPES.decreet;
   @tracked text = '';
+  @tracked legislationType: string | null = null;
+
+  get selectedLegislationTypeUri(): string {
+    return this.selectedLegislationType.value;
+  }
+
+  get selectedLegislationType() {
+    const type = this.legislationType;
+    const found = LEGISLATION_TYPE_CONCEPTS.find((c) => c.value === type);
+    return found || unwrap(LEGISLATION_TYPE_CONCEPTS[0]);
+  }
+
+  @action
+  selectLegislationType(type: string) {
+    type = type.toLowerCase();
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.label.toLowerCase() === type
+    );
+    this.legislationType = found
+      ? found.value
+      : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).value;
+  }
 
   get disableInsert() {
-    if (!this.activeRanges) {
+    if (!this.activeRanges || this.controller.inEmbeddedView) {
       return true;
     }
     const { from } = this.controller.state.selection;

package/addon/components/citation-plugin/citations/search-modal.hbs

@@ -40,7 +40,7 @@
                 @searchMessage={{t 'citaten-plugin.search.placeholder'}}
                 @options={{this.legislationTypes}}
                 @selected={{this.legislationSelected}}
-                @onChange={{this.selectLegislationType}}
+                @onChange={{@selectLegislationType}}
                 as |type|
               >
                 {{type}}

package/addon/components/citation-plugin/citations/search-modal.ts

@@ -47,13 +47,12 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
   // Vlaamse Codex currently doesn't contain captions and content of decisions
   // @tracked isEnabledSearchCaption = false
   // @tracked isEnabledSearchContent = false
-  @tracked legislationTypeUri: string;
   @tracked pageNumber = 0;
   @tracked pageSize = 5;
   @tracked totalCount = 0;
   @tracked decisions = [];
   @tracked error: unknown;
-  @tracked selectedDecision: Decision | null;
+  @tracked selectedDecision: Decision | null = null;
   @tracked documentDateFrom: Date | null = null;
   @tracked documentDateTo: Date | null = null;
   @tracked publicationDateFrom: Date | null = null;
@@ -62,11 +61,8 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
   minDate = new Date('1930-01-01T12:00:00');
   maxDate = new Date(`${new Date().getFullYear() + 10}-01-01T12:00:00`);
 
-  constructor(owner: unknown, args: Args) {
-    super(owner, args);
-    this.selectedDecision = this.args.selectedDecision;
-    this.legislationTypeUri =
-      this.args.legislationTypeUri || LEGISLATION_TYPES['decreet'];
+  get legislationTypeUri() {
+    return this.args.legislationTypeUri || LEGISLATION_TYPES['decreet'];
   }
 
   get datePickerLocalization() {
@@ -174,17 +170,6 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     this.inputSearchText = (event.target as HTMLInputElement).value;
   }
 
-  @action
-  selectLegislationType(type: string) {
-    type = type.toLowerCase();
-    const found = LEGISLATION_TYPE_CONCEPTS.find(
-      (c) => c.label.toLowerCase() === type
-    );
-    this.legislationTypeUri = found
-      ? found.value
-      : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).value;
-  }
-
   @action
   updateDocumentDateFrom(_isoDate: unknown, date: Date) {
     this.documentDateFrom = date;

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);
   }
 }