@lblod/ember-rdfa-editor-lblod-plugins 8.4.0 → 9.0.0

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

@@ -73,7 +73,7 @@ export default class RdfaDatePluginDateTimePicker extends Component<Args> {
 
 function getLocalizedMonths(
   intl: Intl,
-  monthFormat: 'long' | 'numeric' | '2-digit' | 'short' | 'narrow' = 'long'
+  monthFormat: 'long' | 'numeric' | '2-digit' | 'short' | 'narrow' = 'long',
 ) {
   const someYear = 2021;
   return [...Array(12).keys()].map((monthIndex) => {
@@ -84,7 +84,7 @@ function getLocalizedMonths(
 
 function getLocalizedDays(
   intl: Intl,
-  weekdayFormat: 'long' | 'short' | 'narrow' = 'long'
+  weekdayFormat: 'long' | 'short' | 'narrow' = 'long',
 ) {
   const someSunday = new Date('2021-01-03');
   return [...Array(7).keys()].map((index) => {

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

@@ -30,8 +30,8 @@ export default class VariableComponent extends Component<Args> {
     tr.setSelection(
       NodeSelection.create(
         this.args.controller.activeEditorState.doc,
-        this.args.getPos() as number
-      )
+        this.args.getPos() as number,
+      ),
     );
     this.args.controller.activeEditorView.dispatch(tr);
   }

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

@@ -38,11 +38,11 @@ export default class RdfaDatePluginInsertComponent extends Component<Args> {
           onlyDate: true,
           format: this.defaultDateFormat,
           value: new Date().toISOString(),
-        })
+        }),
       );
       if (tr.selection.$anchor.nodeBefore) {
         const resolvedPos = tr.doc.resolve(
-          tr.selection.anchor - tr.selection.$anchor.nodeBefore?.nodeSize
+          tr.selection.anchor - tr.selection.$anchor.nodeBefore?.nodeSize,
         );
         tr.setSelection(new NodeSelection(resolvedPos));
       }

package/addon/components/roadsign-regulation-plugin/expanded-measure.ts

@@ -15,7 +15,7 @@ type Args = {
   insert: (
     measure: Measure,
     zonalityValue?: string,
-    temporalValue?: string
+    temporalValue?: string,
   ) => void;
 };
 
@@ -35,7 +35,7 @@ export default class ExpandedMeasureComponent extends Component<Args> {
   changeZonality(event: InputEvent) {
     assert(
       'changeZonalityValue must be bound to an input element',
-      event.target instanceof HTMLInputElement
+      event.target instanceof HTMLInputElement,
     );
     this.zonalityValue = event.target.value;
   }
@@ -43,7 +43,7 @@ export default class ExpandedMeasureComponent extends Component<Args> {
   changeTemporality(event: InputEvent) {
     assert(
       'changeTemporality must be bound to an input element',
-      event.target instanceof HTMLInputElement
+      event.target instanceof HTMLInputElement,
     );
     this.temporalValue = event.target.value;
   }

package/addon/components/roadsign-regulation-plugin/measure-template.ts

@@ -27,12 +27,12 @@ export default class MeasureTemplateComponent extends Component<Args> {
     const instructions =
       await this.roadsignRegistry.getInstructionsForMeasure.perform(
         this.args.measure,
-        this.endpoint
+        this.endpoint,
       );
     const template = includeInstructions(
       this.args.template,
       instructions,
-      this.args.annotated
+      this.args.annotated,
     );
     this.template = template;
   });

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

@@ -52,7 +52,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
     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;

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

@@ -134,7 +134,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
   changeDescription(event: InputEvent) {
     assert(
       'changeDescriptionValue must be bound to an input element',
-      event.target instanceof HTMLInputElement
+      event.target instanceof HTMLInputElement,
     );
     this.descriptionFilter = event.target.value;
     this.search();
@@ -165,7 +165,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
       this.endpoint,
       term,
       category,
-      type
+      type,
     );
   }
 
@@ -183,7 +183,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
       undefined,
       undefined,
       undefined,
-      signs
+      signs,
     );
     this.codeCombinationOptions = codes;
   }
@@ -241,7 +241,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
             ? this.categorySelected.value
             : undefined,
           pageStart: this.pageStart,
-        }
+        },
       );
     this.tableData = measures;
     this.count = count;
@@ -251,18 +251,18 @@ export default class RoadsignRegulationCard extends Component<Args> {
   async insertHtml(
     measure: Measure,
     zonalityValue: string,
-    temporalValue: string
+    temporalValue: string,
   ) {
     const instructions =
       await this.roadsignRegistry.fetchInstructionsForMeasure.perform(
         measure.uri,
-        this.endpoint
+        this.endpoint,
       );
     const zonality = zonalityValue ? zonalityValue : measure.zonality;
     const html = includeInstructions(
       measure.annotatedTemplate,
       instructions,
-      true
+      true,
     );
     const signsHTML = measure.signs
       .map((sign) => {
@@ -309,14 +309,14 @@ export default class RoadsignRegulationCard extends Component<Args> {
     const domParser = new DOMParser();
     const htmlNode = domParser.parseFromString(regulationHTML, 'text/html');
     const contentFragment = ProseParser.fromSchema(
-      this.args.controller.schema
+      this.args.controller.schema,
     ).parseSlice(htmlNode, {
       preserveWhitespace: false,
     }).content;
 
     this.args.controller.doCommand(
       insertStructure(besluitArticleStructure, this.intl, contentFragment),
-      { view: this.args.controller.mainEditorView }
+      { view: this.args.controller.mainEditorView },
     );
     this.args.closeModal();
   }

package/addon/components/snippet-plugin/search-modal.ts

@@ -38,7 +38,7 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
   setInputSearchText(event: InputEvent) {
     assert(
       'inputSearchText must be bound to an input element',
-      event.target instanceof HTMLInputElement
+      event.target instanceof HTMLInputElement,
     );
 
     this.inputSearchText = event.target.value;

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

@@ -42,8 +42,8 @@ export default class SnippetInsertComponent extends Component<Args> {
     this.controller.withTransaction((tr) => {
       return tr.replaceSelectionWith(
         ProseParser.fromSchema(this.controller.schema).parse(
-          domParser.parseFromString(content, 'text/html')
-        )
+          domParser.parseFromString(content, 'text/html'),
+        ),
       );
     });
   }

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

@@ -19,7 +19,7 @@ type Args = {
 
 const HACKY_LOOKUP: Record<string, Resource> = {
   'http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt': BESLUIT(
-    'BehandelingVanAgendapunt'
+    'BehandelingVanAgendapunt',
   ),
   'http://data.vlaanderen.be/ns/besluit#Besluit': BESLUIT('Besluit'),
   'http://data.vlaanderen.be/ns/besluit#Artikel': BESLUIT('Artikel'),
@@ -27,7 +27,7 @@ const HACKY_LOOKUP: Record<string, Resource> = {
 
 export function findAncestors(
   pos: ResolvedPos,
-  predicate: (node: PNode) => boolean = () => true
+  predicate: (node: PNode) => boolean = () => true,
 ) {
   const result: { node: PNode; pos: number }[] = [];
   let depth = pos.depth;
@@ -59,7 +59,7 @@ export default class TemplateProviderComponent extends Component<Args> {
   get applicableTemplates() {
     return (
       this.standardTemplatePlugin.fetchTemplates.last?.value?.filter(
-        (template) => this.templateIsApplicable(template)
+        (template) => this.templateIsApplicable(template),
       ) || []
     );
   }
@@ -74,7 +74,7 @@ export default class TemplateProviderComponent extends Component<Args> {
         }) ||
       findAncestors($from, (node) => {
         return template.contexts.some((type) =>
-          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type])
+          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type]),
         );
       }).length;
     const containsDisabledTypes =
@@ -85,7 +85,7 @@ export default class TemplateProviderComponent extends Component<Args> {
         }) ||
       findAncestors($from, (node) => {
         return template.disabledInContexts.some((type) =>
-          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type])
+          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type]),
         );
       }).length;
 
@@ -118,9 +118,9 @@ export default class TemplateProviderComponent extends Component<Args> {
       insertHtml(
         instantiateUuids(template.body),
         insertRange.from,
-        insertRange.to
+        insertRange.to,
       ),
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
   }
 }

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

@@ -65,7 +65,7 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
     const subResults: OutlineEntry[] = [];
     node.forEach((child, offset) => {
       subResults.push(
-        ...this.extractOutline({ node: child, pos: pos + 1 + offset })
+        ...this.extractOutline({ node: child, pos: pos + 1 + offset }),
       );
     });
     if (parent) {
@@ -85,7 +85,7 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
       if (selection) {
         tr.setSelection(selection);
         const coords = this.controller.mainEditorView.coordsAtPos(
-          selection.from
+          selection.from,
         );
         const config = this.config[0];
         let scrollContainer: HTMLElement | undefined;
@@ -109,7 +109,7 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
             0,
             coords.top +
               alreadyScrolled -
-              (scrollContainerDistanceToTop + topPadding)
+              (scrollContainerDistanceToTop + topPadding),
           );
         } else {
           tr.scrollIntoView();

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

@@ -34,7 +34,7 @@ export default class TableOfContentsCardComponent extends Component<Args> {
         (tr) => {
           return tr.deleteRange(from, to);
         },
-        { view: this.controller.mainEditorView }
+        { view: this.controller.mainEditorView },
       );
     } else {
       const { schema } = this.controller;
@@ -46,7 +46,7 @@ export default class TableOfContentsCardComponent extends Component<Args> {
           state.doc.canReplaceWith(
             index,
             index,
-            schema.nodes['table_of_contents']
+            schema.nodes['table_of_contents'],
           )
         ) {
           replacePosition = pos;
@@ -56,7 +56,7 @@ export default class TableOfContentsCardComponent extends Component<Args> {
           state.doc.canReplaceWith(
             index + 1,
             index + 1,
-            schema.nodes['table_of_contents']
+            schema.nodes['table_of_contents'],
           )
         ) {
           replacePosition = pos + node.nodeSize;
@@ -69,10 +69,10 @@ export default class TableOfContentsCardComponent extends Component<Args> {
             return transaction.replaceWith(
               replacePosition as number,
               replacePosition as number,
-              schema.node('table_of_contents')
+              schema.node('table_of_contents'),
             );
           },
-          { view: this.controller.mainEditorView }
+          { view: this.controller.mainEditorView },
         );
       }
     }

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

@@ -8,8 +8,7 @@ import {
   TextSelection,
 } from '@lblod/ember-rdfa-editor';
 import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-import { service } from '@ember/service';
+import { inject as service } from '@ember/service';
 import intlService from 'ember-intl/services/intl';
 import { localCopy } from 'tracked-toolbox';
 import {
@@ -17,7 +16,8 @@ import {
   MINIMUM_VALUE_PNODE_KEY,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
 import { isBlank } from '@ember/utils';
-import n2words from 'n2words';
+import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
+import { numberToWords } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/number-to-words';
 
 type Args = {
   getPos: () => number | undefined;
@@ -32,7 +32,6 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
   @localCopy('args.node.attrs.value', '') declare inputNumber: string;
   @localCopy('args.node.attrs.writtenNumber', false)
   declare writtenNumber: boolean;
-  @tracked errorMessage = '';
   @service declare intl: intlService;
   cursorPositionKeyDown: number | null = null;
 
@@ -46,13 +45,13 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
   get formattedNumber() {
     const value = this.node.attrs.value as string;
 
-    if (Number.isNaN(Number(value)) || value === null || value === '') {
+    if (!isNumber(value)) {
       return value;
     }
     if (!this.writtenNumber) {
       return value;
     } else {
-      return n2words(Number(value), { lang: 'nl' });
+      return numberToWords(Number(value), { lang: 'nl' });
     }
   }
 
@@ -78,41 +77,41 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
     this.args.updateAttribute('writtenNumber', !this.writtenNumber);
   }
 
-  validateAndSave() {
+  get errorMessage() {
     if (isBlank(this.inputNumber)) {
-      this.errorMessage = '';
-      this.args.updateAttribute('value', '');
-      return;
+      return '';
     }
-
     const number = Number(this.inputNumber);
     if (Number.isNaN(number)) {
-      this.errorMessage = this.intl.t('variable.number.error-not-number');
-      return;
+      return this.intl.t('variable.number.error-not-number');
     }
     const validMinimum = !this.minValue || number >= this.minValue;
     const validMaximum = !this.maxValue || number <= this.maxValue;
 
     if (!validMinimum || !validMaximum) {
       if (this.minValue && this.maxValue) {
-        this.errorMessage = this.intl.t(
-          'variable.number.error-number-between',
-          { minValue: this.minValue, maxValue: this.maxValue }
-        );
+        return this.intl.t('variable.number.error-number-between', {
+          minValue: this.minValue,
+          maxValue: this.maxValue,
+        });
       } else if (this.minValue) {
-        this.errorMessage = this.intl.t('variable.number.error-number-above', {
+        return this.intl.t('variable.number.error-number-above', {
           minValue: this.minValue,
         });
       } else if (this.maxValue) {
-        this.errorMessage = this.intl.t('variable.number.error-number-below', {
+        return this.intl.t('variable.number.error-number-below', {
           maxValue: this.maxValue,
         });
       }
-      return;
     }
+    return '';
+  }
 
-    this.errorMessage = '';
-    this.args.updateAttribute('value', this.inputNumber);
+  @action
+  validateAndSave() {
+    if (!this.errorMessage) {
+      this.args.updateAttribute('value', this.inputNumber);
+    }
   }
 
   @action
@@ -121,8 +120,8 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
     tr.setSelection(
       NodeSelection.create(
         this.args.controller.activeEditorState.doc,
-        this.args.getPos() as number
-      )
+        this.args.getPos() as number,
+      ),
     );
     this.args.controller.activeEditorView.dispatch(tr);
   }
@@ -155,7 +154,7 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
   setSelectionAt(pos: number) {
     const tr = this.args.controller.activeEditorState.tr;
     tr.setSelection(
-      TextSelection.create(this.args.controller.activeEditorState.doc, pos)
+      TextSelection.create(this.args.controller.activeEditorState.doc, pos),
     );
     this.args.controller.focus();
     this.args.controller.activeEditorView.dispatch(tr);
@@ -163,7 +162,7 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
 
   selectAfterNode() {
     this.setSelectionAt(
-      (this.args.getPos() as number) + this.args.node.nodeSize
+      (this.args.getPos() as number) + this.args.node.nodeSize,
     );
   }
 

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

@@ -53,6 +53,7 @@
         <VariablePlugin::NumberSettings
           @minimumValue={{this.extraAttributes.minimumValue}}
           @maximumValue={{this.extraAttributes.maximumValue}}
+          @error={{this.numberVariableError}}
         />
       {{/if}}
       <AuButton
@@ -60,6 +61,7 @@
         @disabled={{or
           (not this.selectedVariable)
           (and this.hasSubtype (not this.selectedSubtype))
+          this.numberVariableError
         }}
       >{{t 'variable-plugin.button'}}</AuButton>
     </c.content>

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

@@ -10,6 +10,10 @@ import {
 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';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
+
 type Args = {
   controller: SayController;
   options: {
@@ -19,6 +23,28 @@ type Args = {
   };
 };
 
+type minMaxObj = { minimumValue?: number; maximumValue?: number };
+class ExtraAttributes {
+  @tracked minimumValue = '';
+  @tracked maximumValue = '';
+
+  asObject(): minMaxObj {
+    const obj: minMaxObj = {};
+    if (isNumber(this.minimumValue)) {
+      obj.minimumValue = Number(this.minimumValue);
+    }
+    if (isNumber(this.maximumValue)) {
+      obj.maximumValue = Number(this.maximumValue);
+    }
+    return obj;
+  }
+
+  reset() {
+    this.minimumValue = '';
+    this.maximumValue = '';
+  }
+}
+
 export default class EditorPluginsInsertCodelistCardComponent extends Component<Args> {
   @tracked variablesArray: VariableType[];
   @tracked selectedVariable?: VariableType;
@@ -26,10 +52,12 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
   @tracked selectedSubtype?: CodeList;
   @tracked subtypes?: CodeList[];
   @tracked variableLabel?: string;
-  @tracked extraAttributes: Record<string, unknown> = {};
+  @tracked extraAttributes = new ExtraAttributes();
   publisher: string;
   endpoint: string;
 
+  @service declare intl: IntlService;
+
   constructor(parent: unknown, args: Args) {
     super(parent, args);
     const { publisher, variableTypes, defaultEndpoint } =
@@ -52,7 +80,7 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
           variablesArray.push(variableType);
         } else {
           console.warn(
-            `Template Variable Plugin: variable type ${type} not found in the default variable types`
+            `Template Variable Plugin: variable type ${type} not found in the default variable types`,
           );
         }
       } else {
@@ -66,6 +94,20 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     return this.args.controller;
   }
 
+  get numberVariableError() {
+    const minVal = this.extraAttributes.minimumValue;
+    const maxVal = this.extraAttributes.maximumValue;
+    if (
+      isNumber(minVal) &&
+      isNumber(maxVal) &&
+      Number(minVal) > Number(maxVal)
+    ) {
+      return this.intl.t('variable.number.error-min-bigger-than-max');
+    }
+
+    return '';
+  }
+
   @action
   updateVariableLabel(event: InputEvent) {
     this.variableLabel = (event.target as HTMLInputElement).value;
@@ -73,7 +115,7 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
 
   @action
   insert() {
-    if (!this.selectedVariable) {
+    if (!this.selectedVariable || this.numberVariableError) {
       return;
     }
 
@@ -83,18 +125,18 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
       label: this.variableLabel !== '' ? this.variableLabel : undefined,
       attributes: {
         source: this.endpoint,
-        ...this.extraAttributes,
+        ...this.extraAttributes.asObject(),
       },
     });
 
     this.variableLabel = '';
-    this.extraAttributes = {};
+    this.extraAttributes.reset();
 
     this.controller.withTransaction(
       (tr) => {
         return tr.replaceSelectionWith(node);
       },
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
   }
 
@@ -113,18 +155,18 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     async (
       fetchFunction: (
         endpoint: string,
-        publisher: string
-      ) => Promise<CodeList[]>
+        publisher: string,
+      ) => Promise<CodeList[]>,
     ) => {
       const subtypes = await fetchFunction(this.endpoint, this.publisher);
       this.subtypes = subtypes;
-    }
+    },
   );
 
   @action
   updateSubtype(subtype: CodeList) {
     this.selectedSubtype = subtype;
-    this.extraAttributes = {};
+    this.extraAttributes.reset();
   }
 
   get type() {
@@ -143,7 +185,7 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
       return false;
     } else {
       const variable = findParentNodeOfType(
-        this.args.controller.schema.nodes.variable
+        this.args.controller.schema.nodes.variable,
       )(selection);
       return !variable;
     }

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

@@ -28,4 +28,9 @@
       />
     {{/let}}
   </AuFormRow>
+  {{#if @error}}
+    <AuHelpText @error={{true}}>
+      {{@error}}
+    </AuHelpText>
+  {{/if}}
 </div>