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

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) {
@@ -260,7 +268,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
           }</span>
           <span style="margin-left:0;margin-top:0;">${
             sign.zonality === POTENTIALLY_ZONAL_URI && zonality === ZONAL_URI
-              ? 'met zonale geldigheid'
+              ? ' met zonale geldigheid'
               : ''
           }
           </span>
@@ -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();
   }

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

@@ -6,10 +6,41 @@ import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
 import TemplateModel from '@lblod/ember-rdfa-editor-lblod-plugins/models/template';
 import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
 import instantiateUuids from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/standard-template-plugin/utils/instantiate-uuids';
+import { PNode, ResolvedPos } from '@lblod/ember-rdfa-editor';
+import { BESLUIT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import {
+  pnodeHasRdfaAttribute,
+  Resource,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
 type Args = {
   controller: ProseController;
 };
+
+const HACKY_LOOKUP: Record<string, Resource> = {
+  'http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt': BESLUIT(
+    'BehandelingVanAgendapunt'
+  ),
+  'http://data.vlaanderen.be/ns/besluit#Besluit': BESLUIT('Besluit'),
+  'http://data.vlaanderen.be/ns/besluit#Artikel': BESLUIT('Artikel'),
+};
+
+export function findAncestors(
+  pos: ResolvedPos,
+  predicate: (node: PNode) => boolean = () => true
+) {
+  const result: { node: PNode; pos: number }[] = [];
+  let depth = pos.depth;
+  while (depth >= 0) {
+    const parent = pos.node(depth);
+    if (predicate(parent)) {
+      result.push({ node: parent, pos: pos.before(depth) });
+    }
+    depth -= 1;
+  }
+  return result;
+}
+
 export default class TemplateProviderComponent extends Component<Args> {
   @service declare standardTemplatePlugin: StandardTemplatePluginService;
 
@@ -34,17 +65,29 @@ export default class TemplateProviderComponent extends Component<Args> {
   }
 
   templateIsApplicable(template: TemplateModel) {
-    const containsTypes = this.controller.datastore
-      .match(null, 'a')
-      .dataset.some((quad) => {
-        return template.contexts.includes(quad.object.value);
-      });
-
-    const containsDisabledTypes = this.controller.datastore
-      .match(null, 'a')
-      .dataset.some((quad) =>
-        template.disabledInContexts.includes(quad.object.value)
-      );
+    const { $from } = this.controller.state.selection;
+    const containsTypes =
+      this.controller.externalContextStore
+        .match(null, 'a')
+        .dataset.some((quad) => {
+          return template.contexts.includes(quad.object.value);
+        }) ||
+      findAncestors($from, (node) => {
+        return template.contexts.some((type) =>
+          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type])
+        );
+      }).length;
+    const containsDisabledTypes =
+      this.controller.externalContextStore
+        .match(null, 'a')
+        .dataset.some((quad) => {
+          return template.disabledInContexts.includes(quad.object.value);
+        }) ||
+      findAncestors($from, (node) => {
+        return template.disabledInContexts.some((type) =>
+          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type])
+        );
+      }).length;
 
     return containsTypes && !containsDisabledTypes;
   }

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

@@ -3,9 +3,8 @@ import Component from '@glimmer/component';
 import { PNode } from '@lblod/ember-rdfa-editor';
 import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { Selection } from '@lblod/ember-rdfa-editor';
-import { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
-import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
+import { NodeWithPos } from '@curvenote/prosemirror-utils';
+import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin';
 type OutlineEntry = {
   content: string;
   pos: number;
@@ -33,34 +32,32 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
   extractOutline({ node, pos }: { node: PNode; pos: number }): OutlineEntry[] {
     let result: OutlineEntry[] = [];
     let parent: OutlineEntry | undefined;
-    const properties = getRdfaAttribute(node, 'property').pop();
-    const resource = getRdfaAttribute(node, 'resource').pop();
-    if (properties && resource) {
-      for (const tocConfigEntry of this.config) {
-        if (
-          tocConfigEntry.sectionPredicate.some((pred) =>
-            properties.includes(pred)
-          )
-        ) {
-          if (typeof tocConfigEntry.value === 'string') {
-            parent = { content: tocConfigEntry.value, pos };
-            break;
-          } else {
-            const range = [
-              ...this.args.controller.datastore
-                .match(`>${resource}`, `>${tocConfigEntry.value.predicate}`)
-                .asPredicateNodeMapping()
-                .nodes(),
-            ][0];
-            if (range) {
-              const node = unwrap(this.controller.state.doc.nodeAt(range.from));
-              parent = {
-                content: node.textContent,
-                pos: range.from,
-              };
-              break;
+    for (const option of this.config) {
+      const { nodeHierarchy } = option;
+      if (RegExp(`^${nodeHierarchy[0]}$`).exec(node.type.name)) {
+        let i = 1;
+        let currentNode: NodeWithPos | undefined = { node, pos };
+        while (currentNode && i < nodeHierarchy.length) {
+          let newCurrentNode: NodeWithPos | undefined;
+          currentNode.node.forEach((child, offset) => {
+            if (RegExp(`^${nodeHierarchy[i]}$`).exec(child.type.name)) {
+              newCurrentNode = { pos: pos + offset, node: child };
+              return;
             }
-          }
+          });
+          currentNode = newCurrentNode;
+          i++;
+        }
+        if (currentNode) {
+          const outlineText = currentNode.node.type.spec.outlineText as
+            | ((node: PNode) => string)
+            | undefined;
+          const content =
+            outlineText?.(currentNode.node) ?? currentNode.node.textContent;
+          parent = {
+            pos: currentNode.pos,
+            content,
+          };
         }
       }
     }

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

@@ -0,0 +1,8 @@
+<label class="au-c-toggle-switch">
+  <input type="checkbox" 
+         checked={{this.toggled}} 
+         class="au-c-toggle-switch__input au-u-hidden-visually" 
+         {{on "input" this.toggle}}/>
+  <span class="au-c-toggle-switch__toggle"></span>
+  <span class="au-c-toggle-switch__label">{{t "table-of-contents-plugin.toggle" }}</span>
+</label>

package/addon/components/table-of-contents-plugin/{card.ts → toolbar-button.ts}

@@ -1,16 +1,9 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import {
-  TableOfContentsConfig,
-  TABLE_OF_CONTENTS_DEFAULT_CONFIG,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
 
 type Args = {
   controller: ProseController;
-  widgetArgs: {
-    config: TableOfContentsConfig;
-  };
 };
 
 export default class TableOfContentsCardComponent extends Component<Args> {
@@ -33,10 +26,6 @@ export default class TableOfContentsCardComponent extends Component<Args> {
     return result;
   }
 
-  get config() {
-    return this.args.widgetArgs.config ?? TABLE_OF_CONTENTS_DEFAULT_CONFIG;
-  }
-
   @action
   toggle() {
     if (this.tableOfContentsRange) {
@@ -47,13 +36,7 @@ export default class TableOfContentsCardComponent extends Component<Args> {
     } else {
       const { schema } = this.controller;
       this.controller.withTransaction((tr) => {
-        return tr.replaceRangeWith(
-          0,
-          0,
-          schema.node('table_of_contents', {
-            config: this.config,
-          })
-        );
+        return tr.replaceRangeWith(0, 0, schema.node('table_of_contents'));
       });
     }
   }

package/addon/components/{insert-variable-plugin → variable-plugin}/insert-variable-card.hbs

@@ -1,9 +1,8 @@
-<div {{did-update this.selectionChanged @controller.state}}>
 {{#if this.showCard}}
   <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
     <c.header>
       <AuHeading @level="3" @skin="6">
-        {{t "insert-variable-plugin.variable"}}
+        {{t "variable-plugin.insertVariable"}}
       </AuHeading>
     </c.header>
     <c.content>
@@ -27,8 +26,9 @@
           {{subtype.label}}
         </PowerSelect>
       {{/if}}
-      <AuButton {{on 'click' this.insert}} @disabled={{or (not this.selectedVariable) (and this.hasSubtype (not this.selectedSubtype))}}>{{t "insert-variable-plugin.button"}}</AuButton>
+      <AuButton {{on 'click' this.insert}} @disabled={{or (not this.selectedVariable)
+                                                          (and this.hasSubtype (not this.selectedSubtype))}}>{{t
+        "variable-plugin.button"}}</AuButton>
     </c.content>
   </AuCard>
 {{/if}}
-</div>

package/addon/components/{insert-variable-plugin → variable-plugin}/insert-variable-card.ts

@@ -2,14 +2,14 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
-import { v4 as uuidv4 } from 'uuid';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
-import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
 import {
   DEFAULT_VARIABLE_TYPES,
   VariableType,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/insert-variable-plugin/utils/constants';
-import { CodeList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/insert-variable-plugin/utils/fetch-data';
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
+import { CodeList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/fetch-data';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { NodeSelection } from '@lblod/ember-rdfa-editor';
 type Args = {
   controller: ProseController;
   widgetArgs: {
@@ -24,7 +24,6 @@ type Args = {
 export default class EditorPluginsInsertCodelistCardComponent extends Component<Args> {
   @tracked variablesArray: VariableType[];
   @tracked selectedVariable?: VariableType;
-  @tracked showCard = true;
   @tracked hasSubtype = false;
   @tracked selectedSubtype?: CodeList;
   @tracked subtypes?: CodeList[];
@@ -68,19 +67,14 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     if (!this.selectedVariable) {
       return;
     }
-    const uri = `http://data.lblod.info/mappings/${uuidv4()}`;
-    let variableContent;
-    if (typeof this.selectedVariable.template === 'function') {
-      variableContent = this.selectedVariable.template(
-        this.endpoint,
-        this.selectedSubtype
-      );
-    } else {
-      variableContent = this.selectedVariable.template;
-    }
-    const htmlToInsert = `<span resource="${uri}" typeof="ext:Mapping">${variableContent}</span>`;
-    const { from, to } = this.args.controller.state.selection;
-    this.args.controller.doCommand(insertHtml(htmlToInsert, from, to));
+    const node = this.selectedVariable.constructor(
+      this.args.controller.schema,
+      this.endpoint,
+      this.selectedSubtype
+    );
+    this.args.controller.withTransaction((tr) => {
+      return tr.replaceSelectionWith(node);
+    });
   }
 
   @action
@@ -111,24 +105,21 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     this.selectedSubtype = subtype;
   }
 
-  @action
-  selectionChanged() {
-    const currentSelection = this.args.controller.state.selection;
-    this.showCard = false;
-    const limitedDatastore = this.args.controller.datastore.limitToRange(
-      this.args.controller.state,
-      currentSelection.from,
-      currentSelection.to
-    );
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const quad = limitedDatastore
-      .match(null, 'a', 'ext:Mapping')
-      .asQuadResultSet()
-      .first();
-    if (quad) {
-      this.showCard = false;
+  get showCard() {
+    if (this.args.controller.inEmbeddedView) {
+      return false;
+    }
+    const { selection } = this.args.controller.state;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === this.args.controller.schema.nodes.variable
+    ) {
+      return false;
     } else {
-      this.showCard = true;
+      const variable = findParentNodeOfType(
+        this.args.controller.schema.nodes.variable
+      )(selection);
+      return !variable;
     }
   }
 }

package/addon/components/{template-variable-plugin → variable-plugin}/template-variable-card.hbs

@@ -3,7 +3,7 @@
   <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
     <c.header>
       <AuHeading @level="3" @skin="6">
-        Maatregel parameters
+        {{t "variable-plugin.enterVariableValue"}}
       </AuHeading>
     </c.header>
     <c.content>
@@ -12,8 +12,8 @@
           @allowClear={{false}}
           @searchEnabled={{false}}
           @options={{this.variableOptions}}
-          @selected={{this.selectedVariable}}
-          @onChange={{this.updateVariable}} as |variable|
+          @selected={{this.selectedVariableOption}}
+          @onChange={{this.updateVariableOption}} as |variable|
         >
           {{variable.label}}
         </PowerSelectMultiple>
@@ -22,13 +22,13 @@
           @allowClear={{false}}
           @searchEnabled={{false}}
           @options={{this.variableOptions}}
-          @selected={{this.selectedVariable}}
-          @onChange={{this.updateVariable}} as |variable|
+          @selected={{this.selectedVariableOption}}
+          @onChange={{this.updateVariableOption}} as |variable|
         >
           {{variable.label}}
         </PowerSelect>
       {{/if}}
-      <AuButton {{on 'click' this.insert}} @disabled={{not this.selectedVariable}}>Voeg in</AuButton>
+      <AuButton {{on 'click' this.insert}} @disabled={{not this.selectedVariableOption}}>Voeg in</AuButton>
     </c.content>
   </AuCard>
 {{/if}}