@lblod/ember-rdfa-editor-lblod-plugins 0.4.0 → 1.0.0-alpha.1

package/addon/commands/besluit-plugin/insert-article.ts

@@ -0,0 +1,94 @@
+import { v4 as uuid } from 'uuid';
+import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
+import { ProseController, TextSelection } from '@lblod/ember-rdfa-editor';
+import { Command } from '@lblod/ember-rdfa-editor';
+
+export default function insertArticle(
+  controller: ProseController,
+  articleContent: string,
+  articleNumber: string
+): Command {
+  return function (_state, dispatch) {
+    const selection = controller.state.selection;
+    const limitedDatastore = controller.datastore.limitToRange(
+      controller.state,
+      selection.from,
+      selection.to
+    );
+    const besluitSubject = limitedDatastore
+      .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
+      .asQuadResultSet()
+      .first()?.subject;
+
+    if (!besluitSubject) {
+      return false;
+    }
+    const containerRange = [
+      ...controller.datastore
+        .match(besluitSubject, 'prov:value')
+        .asPredicateNodeMapping(),
+    ][0].nodes[0];
+
+    if (!containerRange) {
+      return false;
+    }
+    if (dispatch) {
+      const range = {
+        from: containerRange.to - 1,
+        to: containerRange.to - 1,
+      };
+      const articleUri = `http://data.lblod.info/artikels/${uuid()}`;
+      const articleHtml = `
+      <div property="eli:has_part" prefix="mobiliteit: https://data.vlaanderen.be/ns/mobiliteit#" typeof="besluit:Artikel" resource="${articleUri}">
+        <div>
+          Artikel
+          <span property="eli:number" datatype="xsd:string">
+            ${articleNumber ? articleNumber : generateArticleNumber(controller)}
+          </span></div>
+        <span style="display:none;" property="eli:language" resource="http://publications.europa.eu/resource/authority/language/NLD" typeof="skos:Concept">&nbsp;</span>
+        <div property="prov:value" datatype="xsd:string">
+        ${
+          articleContent
+            ? articleContent
+            : '<span class="mark-highlight-manual">Voer inhoud in</span>'
+        }
+        </div>
+      </div>
+    `;
+      controller.doCommand(insertHtml(articleHtml, range.from, range.to));
+
+      controller.withTransaction((tr) => {
+        const selection = TextSelection.near(
+          controller.state.doc.resolve(range.from)
+        );
+        return tr.setSelection(selection).scrollIntoView();
+      });
+      controller.focus();
+    }
+    return true;
+  };
+}
+
+function generateArticleNumber(controller: ProseController) {
+  const numberQuads = [
+    ...controller.datastore
+      .match(null, '>http://data.europa.eu/eli/ontology#number')
+      .asQuads(),
+  ];
+  let biggerNumber;
+  for (const numberQuad of numberQuads) {
+    const number = Number(removeZeroWidthSpace(numberQuad.object.value));
+    if (!Number.isNaN(number) && (!biggerNumber || number > biggerNumber)) {
+      biggerNumber = number;
+    }
+  }
+  if (biggerNumber) {
+    return biggerNumber + 1;
+  } else {
+    return '<span class="mark-highlight-manual">nummer</span>';
+  }
+}
+
+function removeZeroWidthSpace(text: string) {
+  return text.replace(/[\u200B-\u200D\uFEFF]/g, '');
+}

package/addon/commands/besluit-plugin/insert-title.ts

@@ -0,0 +1,67 @@
+import {
+  Command,
+  ProseController,
+  TextSelection,
+} from '@lblod/ember-rdfa-editor';
+import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
+
+export default function insertTitle(
+  controller: ProseController,
+  title: string
+): Command {
+  return function (state, dispatch) {
+    const selection = controller.state.selection;
+    const limitedDatastore = controller.datastore.limitToRange(
+      controller.state,
+      selection.from,
+      selection.to
+    );
+
+    const besluit = [
+      ...limitedDatastore
+        .match(null, 'a', 'besluit:Besluit')
+        .asSubjectNodeMapping(),
+    ][0];
+
+    const besluitRange = besluit?.nodes[0];
+
+    if (!besluit || !besluitRange) {
+      return false;
+    }
+
+    const titleQuad = controller.datastore
+      .match(
+        `>${besluit.term.value}`,
+        '>http://data.europa.eu/eli/ontology#title'
+      )
+      .asQuadResultSet()
+      .first();
+    if (titleQuad) {
+      return false;
+    }
+
+    if (dispatch) {
+      const range = {
+        from: besluitRange.from + 1,
+        to: besluitRange.from + 1,
+      };
+      const articleHtml = `
+      <h4 class="h4" property="eli:title" datatype="xsd:string">${
+        title
+          ? title
+          : '<span class="mark-highlight-manual">Geef titel besluit op</span>'
+      }</h4>
+    `;
+      controller.doCommand(insertHtml(articleHtml, range.from, range.to));
+      controller.withTransaction((tr) => {
+        const selection = TextSelection.near(
+          controller.state.doc.resolve(range.from)
+        );
+        return tr.setSelection(selection).scrollIntoView();
+      });
+      dispatch(state.tr.scrollIntoView());
+    }
+
+    return true;
+  };
+}

package/addon/commands/besluit-plugin/move-article.ts

@@ -0,0 +1,69 @@
+import {
+  Command,
+  ProseController,
+  Selection,
+  TextSelection,
+} from '@lblod/ember-rdfa-editor';
+import { recalculateArticleNumbers } from '@lblod/ember-rdfa-editor-lblod-plugins/commands/besluit-plugin';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/plugins/datastore';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import getArticleNodesForBesluit from './get-article-nodes-for-besluit';
+
+export default function moveArticleCommand(
+  controller: ProseController,
+  besluitUri: string,
+  articleUri: string,
+  moveUp: boolean
+): Command {
+  return (_state, dispatch) => {
+    const articles = getArticleNodesForBesluit(controller, besluitUri);
+    if (!articles) {
+      return false;
+    }
+    const articleIndex = articles.findIndex(({ uri }) => uri === articleUri);
+
+    if (
+      articleIndex === -1 ||
+      (moveUp && articleIndex === 0) ||
+      (!moveUp && articleIndex === articles.length - 1)
+    ) {
+      return false;
+    }
+
+    if (dispatch) {
+      let articleA: ResolvedPNode;
+      let articleB: ResolvedPNode;
+
+      if (moveUp) {
+        articleA = unwrap(articles[articleIndex - 1]).range;
+        articleB = unwrap(articles[articleIndex]).range;
+      } else {
+        articleA = unwrap(articles[articleIndex]).range;
+        articleB = unwrap(articles[articleIndex + 1]).range;
+      }
+      const articleBNode = unwrap(controller.state.doc.nodeAt(articleB.from));
+      controller.withTransaction((tr) => {
+        tr.delete(articleB.from, articleB.to);
+        return tr.replaceRangeWith(articleA.from, articleA.from, articleBNode);
+      });
+      recalculateArticleNumbers(controller, besluitUri);
+      let selection: Selection;
+      if (moveUp) {
+        selection = TextSelection.near(
+          controller.state.doc.resolve(articleA.from)
+        );
+      } else {
+        selection = TextSelection.near(
+          controller.state.doc.resolve(
+            articleA.from + articleB.to - articleB.from
+          )
+        );
+      }
+      controller.withTransaction((tr) => {
+        return tr.setSelection(selection);
+      });
+      controller.focus();
+    }
+    return true;
+  };
+}

package/addon/commands/besluit-plugin/recalculate-article-numbers.ts

@@ -0,0 +1,44 @@
+import { ProseController } from '@lblod/ember-rdfa-editor';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import getArticleNodesForBesluit from './get-article-nodes-for-besluit';
+
+export default function recalculateArticleNumbers(
+  controller: ProseController,
+  besluitUri: string
+) {
+  const articles = getArticleNodesForBesluit(controller, besluitUri);
+  if (articles) {
+    for (let i = 0; i < articles.length; i++) {
+      const article = unwrap(articles[i]);
+      replaceNumberIfNeeded(controller, article, i);
+    }
+  }
+}
+
+function replaceNumberIfNeeded(
+  controller: ProseController,
+  article: { uri: string; range: { from: number; to: number } },
+  index: number
+) {
+  const articleNumberObject = [
+    ...controller.datastore
+      .match(`>${article.uri}`, '>http://data.europa.eu/eli/ontology#number')
+      .asObjectNodeMapping(),
+  ][0];
+  if (!articleNumberObject) {
+    return;
+  }
+  const articleNumber = Number(articleNumberObject.term.value);
+  const articleNumberRange = unwrap(articleNumberObject.nodes[0]);
+  const articleNumberExpected = index + 1;
+
+  if (articleNumber !== articleNumberExpected) {
+    controller.withTransaction((tr) => {
+      return tr.insertText(
+        articleNumberExpected.toString(),
+        articleNumberRange.from,
+        articleNumberRange.to
+      );
+    });
+  }
+}

package/addon/commands/modify-date-command.ts

@@ -0,0 +1,48 @@
+import { Command, Mark } from '@lblod/ember-rdfa-editor';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+
+function formatDate(date: Date, onlyDate: boolean) {
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    ...(!onlyDate && {
+      hour: '2-digit',
+      minute: '2-digit',
+    }),
+  };
+  return date.toLocaleString('nl-BE', options);
+}
+
+export default function modifyDate(
+  from: number,
+  to: number,
+  dateValue: Date,
+  onlyDate: boolean
+): Command {
+  return function (state, dispatch) {
+    if (dispatch) {
+      const transaction = state.tr;
+      const node = unwrap(transaction.doc.nodeAt(from));
+      const currentRdfaMark = node.marks
+        .filter((mark) => mark.type.name === 'inline_rdfa')
+        .at(-1);
+      if (currentRdfaMark) {
+        transaction.removeMark(from, to, currentRdfaMark);
+      }
+
+      const newMark: Mark = currentRdfaMark
+        ? state.schema.mark('inline_rdfa', {
+            ...currentRdfaMark.attrs,
+            content: dateValue.toISOString(),
+          })
+        : state.schema.mark('inline_rdfa', {
+            content: dateValue.toISOString(),
+          });
+      transaction.addMark(from, to, newMark);
+      transaction.insertText(formatDate(dateValue, onlyDate), from, to);
+      dispatch(transaction);
+    }
+    return true;
+  };
+}

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

@@ -0,0 +1,14 @@
+<div>
+{{#each this.structures.value as |structure|}}
+  <AuList::Item>
+    <AuButton
+      @icon="add"
+      @iconAlignment="left"
+      @skin="link"
+      @disabled={{not structure.canExecute}}
+      {{on 'click' (fn this.insertStructure structure.title)}}>
+      {{t structure.translation}}
+    </AuButton>
+  </AuList::Item>
+{{/each}}
+</div>

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

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { ProseController } from '@lblod/ember-rdfa-editor';
+import { insertArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/commands/article-structure-plugin';
+import IntlService from 'ember-intl/services/intl';
+import { trackedFunction } from 'ember-resources/util/function';
+import validateDatastore from '@lblod/ember-rdfa-editor-lblod-plugins/utils/article-structure-plugin/validate-datastore';
+import { ResolvedArticleStructurePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
+
+type Args = {
+  controller: ProseController;
+  widgetArgs: {
+    options: ResolvedArticleStructurePluginOptions;
+  };
+};
+export default class EditorPluginsArticleStructureCardComponent extends Component<Args> {
+  @service declare intl: IntlService;
+
+  structures = trackedFunction(this, async () => {
+    return Promise.all(
+      this.args.widgetArgs.options.structures.map(async (structure) => {
+        const shaclReport = await validateDatastore(
+          this.args.controller.datastore,
+          structure.shaclConstraint
+        );
+        const canExecute = this.args.controller.checkCommand(
+          insertArticleStructure(
+            this.args.controller,
+            structure.title,
+            this.args.widgetArgs.options,
+            shaclReport,
+            this.intl
+          )
+        );
+        return {
+          ...structure,
+          canExecute,
+        };
+      })
+    );
+  });
+
+  @action
+  async insertStructure(structureName: string) {
+    const structureToAdd = this.args.widgetArgs.options.structures.find(
+      (structure) => structure.title === structureName
+    );
+    if (structureToAdd) {
+      const shaclReport = await validateDatastore(
+        this.args.controller.datastore,
+        structureToAdd.shaclConstraint
+      );
+      this.args.controller.doCommand(
+        insertArticleStructure(
+          this.args.controller,
+          structureName,
+          this.args.widgetArgs.options,
+          shaclReport,
+          this.intl
+        )
+      );
+    }
+  }
+
+  get structureUri() {
+    const currentSelection = this.args.controller.state.selection;
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      this.args.controller.state,
+      currentSelection.from,
+      currentSelection.to
+    );
+
+    return limitedDatastore
+      .match(null, 'a', '>https://say.data.gift/ns/DocumentSubdivision')
+      .asQuadResultSet()
+      .first()?.subject.value;
+  }
+
+  get isOutsideStructure() {
+    return !this.structureUri;
+  }
+}

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

@@ -0,0 +1,42 @@
+{{#unless this.isOutsideStructure}}
+  <AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
+    <c.header class="au-u-hidden-visually">
+      <AuHeading @level="3" @skin="6">{{t "article-structure-plugin.title.structureCard"}}</AuHeading>
+    </c.header>
+    <c.content class="au-c-content--small">
+      <AuList @divider={{true}} class="au-u-padding-top-tiny au-u-padding-bottom-tiny" as |Item|>
+        <Item>
+          <AuButton
+            @icon="chevron-up"
+            @iconAlignment="left"
+            @skin="link"
+            @disabled={{not this.canMoveUp.value}}
+            {{on 'click' (fn this.moveStructure true)}}>
+            {{t this.structureTypeSelected.moveUp}}
+          </AuButton>
+        </Item>
+        <Item>
+          <AuButton
+            @icon="chevron-down"
+            @iconAlignment="left"
+            @skin="link"
+            @disabled={{not this.canMoveDown.value}}
+            {{on 'click' (fn this.moveStructure false)}}>
+            {{t this.structureTypeSelected.moveDown}}
+          </AuButton>
+        </Item>
+        <Item>
+          <AuButton
+            @icon="bin"
+            @iconAlignment="left"
+            @skin="link"
+            @alert={{true}}
+            @disabled={{this.isOutsideStructure}}
+            {{on 'click' this.removeStructure}}>
+            {{t "article-structure-plugin.remove.structure"}}
+          </AuButton>
+        </Item>
+      </AuList>
+    </c.content>
+  </AuCard>
+{{/unless}}

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

@@ -0,0 +1,140 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { ProseController } from '@lblod/ember-rdfa-editor';
+import { trackedFunction } from 'ember-resources/util/function';
+import {
+  deleteStructure,
+  moveStructure,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/commands/article-structure-plugin';
+import validateDatastore from '@lblod/ember-rdfa-editor-lblod-plugins/utils/article-structure-plugin/validate-datastore';
+import { ResolvedArticleStructurePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
+type Args = {
+  controller: ProseController;
+  widgetArgs: {
+    options: ResolvedArticleStructurePluginOptions;
+  };
+};
+
+export default class EditorPluginsStructureCardComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  async moveStructure(moveUp: boolean) {
+    const structureToMove = this.args.widgetArgs.options.structures.find(
+      (structure) => structure === this.structureTypeSelected
+    );
+    if (structureToMove && this.structure) {
+      const shaclReport = await validateDatastore(
+        this.controller.datastore,
+        structureToMove.shaclConstraint
+      );
+      this.controller.doCommand(
+        moveStructure(
+          this.controller,
+          this.structure.uri,
+          moveUp,
+          this.args.widgetArgs.options,
+          shaclReport
+        )
+      );
+    }
+  }
+
+  @action
+  removeStructure() {
+    if (this.structure) {
+      this.controller.doCommand(
+        deleteStructure(
+          this.controller,
+          this.structure.uri,
+          this.args.widgetArgs.options
+        )
+      );
+    }
+  }
+
+  get structure(): { uri: string; type: string } | undefined {
+    const currentSelection = this.controller.state.selection;
+    const limitedDatastore = this.controller.datastore.limitToRange(
+      this.controller.state,
+      currentSelection.from,
+      currentSelection.to
+    );
+
+    const quad = limitedDatastore
+      .match(null, 'a')
+      .transformDataset((dataset) => {
+        return dataset.filter((quad) => {
+          return this.args.widgetArgs.options.structureTypes.includes(
+            quad.object.value
+          );
+        });
+      })
+      .asQuadResultSet()
+      .first();
+    if (quad) {
+      return { uri: quad.subject.value, type: quad.object.value };
+    }
+    return;
+  }
+
+  get structureTypeSelected() {
+    const structureTypeof = this.structure?.type;
+    if (structureTypeof) {
+      return this.args.widgetArgs.options.structures.find((structure) =>
+        structureTypeof.includes(structure.type)
+      );
+    }
+    return;
+  }
+
+  get isOutsideStructure() {
+    return !this.structure?.uri;
+  }
+
+  canMoveDown = trackedFunction(this, async () => {
+    const structureToMove = this.args.widgetArgs.options.structures.find(
+      (structure) => structure === this.structureTypeSelected
+    );
+    if (structureToMove && this.structure) {
+      const shaclReport = await validateDatastore(
+        this.controller.datastore,
+        structureToMove.shaclConstraint
+      );
+      return this.controller.checkCommand(
+        moveStructure(
+          this.controller,
+          this.structure.uri,
+          false,
+          this.args.widgetArgs.options,
+          shaclReport
+        )
+      );
+    }
+    return false;
+  });
+
+  canMoveUp = trackedFunction(this, async () => {
+    const structureToMove = this.args.widgetArgs.options.structures.find(
+      (structure) => structure === this.structureTypeSelected
+    );
+    if (structureToMove && this.structure) {
+      const shaclReport = await validateDatastore(
+        this.controller.datastore,
+        structureToMove.shaclConstraint
+      );
+      return this.controller.checkCommand(
+        moveStructure(
+          this.controller,
+          this.structure.uri,
+          true,
+          this.args.widgetArgs.options,
+          shaclReport
+        )
+      );
+    }
+    return false;
+  });
+}

package/addon/components/au-native-input.hbs

@@ -0,0 +1,30 @@
+{{#if @icon}}
+  <span class='au-c-input-wrapper {{this.iconAlignment}} {{this.width}}'>
+    <input
+      type={{this.type}}
+      class='au-c-input
+        {{this.error}}
+        {{this.warning}}
+        {{this.width}}
+        {{this.disabled}}'
+      disabled={{@disabled}}
+      ...attributes
+    />
+    {{#if (eq @iconAlignment 'right')}}
+      <AuIcon @icon={{@icon}} @alignment='right' />
+    {{else}}
+      <AuIcon @icon={{@icon}} @alignment='left' />
+    {{/if}}
+  </span>
+{{else}}
+  <input
+    type={{this.type}}
+    class='au-c-input
+      {{this.error}}
+      {{this.warning}}
+      {{this.width}}
+      {{this.disabled}}'
+    disabled={{@disabled}}
+    ...attributes
+  />
+{{/if}}

package/addon/components/au-native-input.ts

@@ -0,0 +1,47 @@
+import Component from '@glimmer/component';
+
+interface Args {
+  width?: 'block';
+  iconAlignment?: 'left' | 'right';
+  error?: boolean;
+  warning?: boolean;
+  disabled?: boolean;
+  type?: string;
+  icon?: string;
+}
+
+export default class AuNativeInput extends Component<Args> {
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+  }
+
+  get width() {
+    if (this.args.width == 'block') return 'au-c-input--block';
+    else return '';
+  }
+
+  get iconAlignment() {
+    if (this.args.iconAlignment == 'left') return 'au-c-input-wrapper--left';
+    if (this.args.iconAlignment == 'right') return 'au-c-input-wrapper--right';
+    else return '';
+  }
+
+  get error() {
+    if (this.args.error) return 'au-c-input--error';
+    else return '';
+  }
+
+  get warning() {
+    if (this.args.warning) return 'au-c-input--warning';
+    else return '';
+  }
+
+  get disabled() {
+    if (this.args.disabled) return 'is-disabled';
+    else return '';
+  }
+
+  get type() {
+    return this.args.type || 'text';
+  }
+}