@lblod/ember-rdfa-editor-lblod-plugins 8.0.1 → 8.2.0

package/.woodpecker/{.test-scenarios.yml → .scenarios.yml}

@@ -2,16 +2,12 @@ matrix:
   scenario:
     - ember-lts-3.28
 
-pipeline:
-  ${scenario}:
+steps:
+  - name: ${scenario}
     image: danlynn/ember-cli:4.8.0
     commands:
       - npm ci
-      - npx ember try:one ${scenario}
+      - ember try:one ${scenario} --skip-cleanup=true
 
 when:
-  event:
-    - pull_request
-
-depends_on:
-  - test
+  branch: [ master ]

package/.woodpecker/.test.yml

@@ -1,23 +1,52 @@
-
-pipeline:
+steps:
+  changelog:
+    image: danlynn/ember-cli:4.8.0
+    commands:
+      - git fetch origin master
+      - git diff -wb --name-only origin/master..HEAD | grep CHANGELOG.md
+    when:
+      event: pull_request
   install:
     image: danlynn/ember-cli:4.8.0
     commands:
       - npm ci
+  # ember-try already runs ember test, so we don't need another test step
   lint-js:
     image: danlynn/ember-cli:4.8.0
-    group: lint
+    group: check
     commands:
       - npm run lint:js
   lint-hbs:
     image: danlynn/ember-cli:4.8.0
-    group: lint
+    group: check
     commands:
       - npm run lint:hbs
   test:
     image: danlynn/ember-cli:4.8.0
+    group: check
     commands:
-      - npm run test:ember
+      - ember test
+
+
+  release:
+    image: plugins/npm
+    settings:
+      token:
+        from_secret: npm_access_token
+    when:
+      event: tag
+      ref: refs/tags/v*
+
+  push-tagged-build:
+    image: plugins/docker
+    settings:
+      repo: lblod/ember-rdfa-editor-lblod-plugins
+      tags: "${CI_COMMIT_TAG##v}"
+      purge: true
+    secrets: [ docker_username, docker_password ]
+    when:
+      event: tag
+      ref: refs/tags/v*
+# according to docs, this also runs on prs targetting master
 when:
-  event:
-    - pull_request
+  branch: [ master, hotfix/* ]

package/CHANGELOG.md

@@ -7,11 +7,47 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.2.0] - 2023-06-26
+### Added
+- Add a toggle to show the number as words in a number variable
+
+### Dependencies
+- Bumps `sass` from 1.56.1 to 1.63.6
+- Bumps `@types/ember` from 4.0.2 to 4.0.4
+- Bumps `@types/ember-data__store` from 4.0.2 to 4.0.3
+- Bumps `@types/ember__template` from 4.0.1 to 4.0.2
+- Bumps `@types/rdfjs__parser-n3` from 1.1.5 to 2.0.1
+
+## [8.1.0] - 2023-06-22
+### Added
+- Numbers inputted into a number variable are validated on defined min/max and if it is a number
+- Add toggle for the user to show number variable as words
+
+### Fixed
+- Fixed woodpecker builds crashing on syntax errors
+- Use dutch language in static version of table of contents
+- fix typo "Vlaams Codex" → "Vlaamse Codex"
+- add missing argument to citation card in dummy app
+- correct erroneous arguments to AuAlert
+
+### Changed
+- remove the unnecessary type and add the html-safe tag at the rendering site
+
+### Removed
+- remove ensure-changelog github action
+
+### Dependencies
+- Bumps `@types/rdfjs__dataset` from 2.0.0 to 2.0.2
+- Bumps `@types/ember__array` from 4.0.3 to 4.0.4
+- Bumps `@typescript-eslint/parser` from 5.45.0 to 5.60.0
+- Bumps `@types/ember__engine` from 4.0.4 to 4.0.5
+- Bumps `typescript` to 5.0.4
+- Bumps `prosemirror-dev-tools` from 3.1.0 to 4.0.0
+
 ## [8.0.1] - 2023-06-15
 ### Fixed
 - Change problematic type in citation that made it to break with new ember
 
-
 ## [8.0.0] - 2023-06-15
 ### Fixed
 - Bump `@lblod/ember-rdfa-editor` package to fix annotation not present for some structures
@@ -473,7 +509,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.1...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.0...HEAD
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
 [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
@@ -489,3 +525,5 @@ add onclick handler to pencil icon in variable plugin
 [3.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...v3.0.0
 [2.1.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.0...v2.1.1
+[8.2.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.1.0...v8.2.0
+[8.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.1...v8.1.0

package/addon/components/citation-plugin/citations/article-preview.hbs

@@ -3,7 +3,7 @@
   {{@article.number}} ({{@article.dateInForce}} - {{if @article.dateNoLongerInForce @article.dateNoLongerInForce "…"}})
   </AuHeading>
   <p>
-    {{@article.content}}
+    {{html-safe @article.content}}
   </p>
   <AuButton
     @skin="primary"

package/addon/components/citation-plugin/helpers/alert-load-error.hbs

@@ -1,8 +1,8 @@
 <AuAlert
-  @alertTitle="{{t "citaten-plugin.alert.error-title"}}"
-  @alertSkin="error"
-  @alertIcon="alert-triangle"
-  @alertSize="{{if @fullSize "default" "small"}}"
+  @title="{{t "citaten-plugin.alert.error-title"}}"
+  @skin="error"
+  @icon="alert-triangle"
+  @size="{{if @fullSize "default" "small"}}"
   @closable={{false}}
   ...attributes>
   <p>{{t "citaten-plugin.alert.error-intro"}}</p>

package/addon/components/citation-plugin/helpers/alert-no-items.hbs

@@ -1,8 +1,8 @@
 <AuAlert
-  @alertTitle="{{t "citaten-plugin.alert.no-results"}}"
-  @alertSkin="warning"
-  @alertIcon="cross"
-  @alertSize="{{if @fullSize "default" "small"}}"
+  @title="{{t "citaten-plugin.alert.no-results"}}"
+  @skin="warning"
+  @icon="cross"
+  @size="{{if @fullSize "default" "small"}}"
   @closable={{false}}
   class="{{unless @fullSize "au-u-margin-small"}}"
   ...attributes>

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

@@ -1,8 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { localCopy } from 'tracked-toolbox';
 import Intl from 'ember-intl/services/intl';
 
@@ -13,7 +11,6 @@ type Args = {
 
 export default class RdfaDatePluginDateTimePicker extends Component<Args> {
   @service declare intl: Intl;
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   @localCopy('args.value') declare date?: Date;
 
   get hours() {

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

@@ -0,0 +1,61 @@
+<Velcro
+  @placement='bottom-start'
+  @offsetOptions={{hash mainAxis=3}} as |velcro|
+>
+  <AuPill
+    @icon='pencil'
+    @iconAlignment='right'
+    class='variable'
+    {{velcro.hook}}
+    {{on 'click' this.selectThisNode}}
+  >
+    {{#if this.formattedNumber}}
+      {{this.formattedNumber}}
+    {{else}}
+      <span class='mark-highlight-manual'>
+        {{t 'variable.number.placeholder'}}
+      </span>
+    {{/if}}
+    {{#if @node.attrs.label}}
+      <span class='label'>
+        ({{@node.attrs.label}})
+      </span>
+    {{/if}}
+  </AuPill>
+  {{#if this.selected}}
+    <div class='say-tooltip say-number-tooltip' {{velcro.loop}}>
+      {{! AuCard gives weird behaviour when using velcro without div (cause is position:fixed in css)}}
+      <AuCard
+        @shadow={{true}}
+        @size='small'
+        id='number-input-tooltip'
+        @standOut={{true}} as |card|
+      >
+        <card.content>
+          {{!-- template-lint-disable no-down-event-binding --}}
+          <AuInput
+            @value={{this.inputNumber}}
+            placeholder={{t 'variable.number.type-number'}}
+            {{did-insert this.focus}}
+            {{on 'input' this.onInputNumberChange}}
+            {{on 'keyup' this.leaveOnEnter}}
+            {{on 'keyup' this.leaveWithArrows}}
+            {{on 'keydown' this.setPosBeforeKeypress}}
+          />
+          <AuToggleSwitch
+            @identifier="writtenNumber"
+            @name="writtenNumber"
+            @checked={{this.writtenNumber}}
+            @onChange={{this.changeWrittenNumber}}
+            @label={{t 'variable.number.written-number-label'}}
+          />
+          {{#if this.errorMessage}}
+            <AuHelpText @small={{true}} @error={{true}}>
+              {{this.errorMessage}}
+            </AuHelpText>
+          {{/if}}
+        </card.content>
+      </AuCard>
+    </div>
+  {{/if}}
+</Velcro>

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

@@ -0,0 +1,173 @@
+import Component from '@glimmer/component';
+import {
+  DecorationSource,
+  NodeSelection,
+  PNode,
+  SayController,
+  SayView,
+  TextSelection,
+} from '@lblod/ember-rdfa-editor';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+import intlService from 'ember-intl/services/intl';
+import { localCopy } from 'tracked-toolbox';
+import {
+  MAXIMUM_VALUE_PNODE_KEY,
+  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';
+
+type Args = {
+  getPos: () => number | undefined;
+  node: PNode;
+  updateAttribute: (attr: string, value: unknown) => void;
+  controller: SayController;
+  view: SayView;
+  selected: boolean;
+  contentDecorations?: DecorationSource;
+};
+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;
+
+  focus(element: HTMLInputElement) {
+    element.focus();
+  }
+
+  get node() {
+    return this.args.node;
+  }
+  get formattedNumber() {
+    const value = this.node.attrs.value as string;
+
+    if (Number.isNaN(Number(value)) || value === null || value === '') {
+      return value;
+    }
+    if (!this.writtenNumber) {
+      return value;
+    } else {
+      return n2words(Number(value), { lang: 'nl' });
+    }
+  }
+
+  get selected() {
+    return this.args.selected;
+  }
+
+  get minValue() {
+    return this.node.attrs[MINIMUM_VALUE_PNODE_KEY] as number;
+  }
+
+  get maxValue() {
+    return this.node.attrs[MAXIMUM_VALUE_PNODE_KEY] as number;
+  }
+
+  @action onInputNumberChange(event: InputEvent) {
+    this.inputNumber = (event.target as HTMLInputElement).value;
+    this.validateAndSave();
+  }
+
+  @action
+  changeWrittenNumber() {
+    this.args.updateAttribute('writtenNumber', !this.writtenNumber);
+  }
+
+  validateAndSave() {
+    if (isBlank(this.inputNumber)) {
+      this.errorMessage = '';
+      this.args.updateAttribute('value', '');
+      return;
+    }
+
+    const number = Number(this.inputNumber);
+    if (Number.isNaN(number)) {
+      this.errorMessage = this.intl.t('variable.number.error-not-number');
+      return;
+    }
+    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 }
+        );
+      } else if (this.minValue) {
+        this.errorMessage = 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', {
+          maxValue: this.maxValue,
+        });
+      }
+      return;
+    }
+
+    this.errorMessage = '';
+    this.args.updateAttribute('value', this.inputNumber);
+  }
+
+  @action
+  selectThisNode() {
+    const tr = this.args.controller.activeEditorState.tr;
+    tr.setSelection(
+      NodeSelection.create(
+        this.args.controller.activeEditorState.doc,
+        this.args.getPos() as number
+      )
+    );
+    this.args.controller.activeEditorView.dispatch(tr);
+  }
+
+  @action
+  leaveOnEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.selectAfterNode();
+    }
+  }
+
+  @action setPosBeforeKeypress(event: KeyboardEvent) {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      this.cursorPositionKeyDown = (
+        event.target as HTMLInputElement
+      ).selectionStart;
+    }
+  }
+  @action leaveWithArrows(event: KeyboardEvent) {
+    const finalPos = (event.target as HTMLInputElement).value.length;
+    if (event.key === 'ArrowRight' && this.cursorPositionKeyDown === finalPos) {
+      this.selectAfterNode();
+    }
+    if (event.key === 'ArrowLeft' && this.cursorPositionKeyDown === 0) {
+      this.selectBeforeNode();
+    }
+    this.cursorPositionKeyDown = null;
+  }
+
+  setSelectionAt(pos: number) {
+    const tr = this.args.controller.activeEditorState.tr;
+    tr.setSelection(
+      TextSelection.create(this.args.controller.activeEditorState.doc, pos)
+    );
+    this.args.controller.focus();
+    this.args.controller.activeEditorView.dispatch(tr);
+  }
+
+  selectAfterNode() {
+    this.setSelectionAt(
+      (this.args.getPos() as number) + this.args.node.nodeSize
+    );
+  }
+
+  selectBeforeNode() {
+    this.setSelectionAt(this.args.getPos() as number);
+  }
+}

package/addon/plugins/citation-plugin/utils/vlaamse-codex.ts

@@ -1,11 +1,9 @@
 import { LEGISLATION_TYPE_CONCEPTS } from './legislation-types';
 import { warn } from '@ember/debug';
-import { htmlSafe } from '@ember/template';
 import {
   Option,
   optionMapOr,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-type SafeString = ReturnType<typeof htmlSafe>;
 
 interface DecisionArgs {
   uri: string;
@@ -54,7 +52,7 @@ interface ArticleArgs {
 export class Article {
   uri: string;
   number?: number;
-  content: SafeString | null;
+  content: string | null;
   dateInForce: string | null;
   dateNoLongerInForce: string | null;
 
@@ -67,7 +65,7 @@ export class Article {
   }: ArticleArgs) {
     this.uri = uri;
     this.number = number;
-    this.content = optionMapOr(null, htmlSafe, content);
+    this.content = content;
     this.dateInForce = dateInForce;
     this.dateNoLongerInForce = dateNoLongerInForce;
   }

package/addon/plugins/table-of-contents-plugin/nodes/table-of-contents.ts

@@ -33,14 +33,14 @@ export const emberNodeConfig: (
             'data-ember-node': 'table-of-contents',
             class: 'table-of-contents',
           },
-          ['h3', {}, 'Table Of Contents'],
+          ['h3', {}, 'Inhoudstafel'],
         ];
       }
 
       return [
         'div',
         { 'data-ember-node': 'table-of-contents', class: 'table-of-contents' },
-        ['h3', {}, 'Table Of Contents'],
+        ['h3', {}, 'Inhoudstafel'],
         createTableOfContents(entries),
       ];
     },

package/addon/plugins/variable-plugin/nodes.ts

@@ -14,10 +14,13 @@ import {
   MAXIMUM_VALUE_PNODE_KEY,
   MINIMUM_VALUE_HTML_ATTRIBUTE_KEY,
   MINIMUM_VALUE_PNODE_KEY,
+  WRITTEN_NUMBER_HTML_ATTRIBUTE_KEY,
+  WRITTEN_NUMBER_PNODE_KEY,
 } from './utils/constants';
-import { PNode } from '@lblod/ember-rdfa-editor';
+import { Attrs, DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
+import n2words from 'n2words';
 
-const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'],
+export const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'],
                           span[property~='${EXT('content').full}']`;
 
 export const getHTMLNodeExtraAttributes = ({
@@ -33,6 +36,10 @@ export const getHTMLNodeExtraAttributes = ({
         node.getAttribute(MINIMUM_VALUE_HTML_ATTRIBUTE_KEY) ?? null,
       [MAXIMUM_VALUE_PNODE_KEY]:
         node.getAttribute(MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY) ?? null,
+      [WRITTEN_NUMBER_PNODE_KEY]:
+        node.getAttribute(WRITTEN_NUMBER_HTML_ATTRIBUTE_KEY) === 'true'
+          ? true
+          : false,
     };
   }
 
@@ -52,13 +59,145 @@ export const getPNodeExtraAttributes = ({
         (node.attrs[MINIMUM_VALUE_PNODE_KEY] as string) ?? null,
       [MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY]:
         (node.attrs[MAXIMUM_VALUE_PNODE_KEY] as string) ?? null,
+      [WRITTEN_NUMBER_HTML_ATTRIBUTE_KEY]: String(
+        node.attrs[WRITTEN_NUMBER_PNODE_KEY] ?? false
+      ),
     };
   }
 
   return {};
 };
 
-const emberNodeConfig: EmberNodeConfig = {
+export const contentToDom = ({
+  content,
+  type,
+  node,
+}: {
+  content: string;
+  type: string;
+  node: PNode;
+}) => {
+  if (type === 'number') {
+    if (
+      node.attrs[WRITTEN_NUMBER_PNODE_KEY] ||
+      Number.isNaN(Number(content)) ||
+      content === null ||
+      content === ''
+    ) {
+      return n2words(Number(content), { lang: 'nl' });
+    } else {
+      return content;
+    }
+  } else {
+    return content;
+  }
+};
+
+export const parseAttributes = (node: HTMLElement): false | Attrs => {
+  if (
+    hasRDFaAttribute(node, 'typeof', EXT('Mapping')) &&
+    node.querySelector(CONTENT_SELECTOR)
+  ) {
+    const variableInstance = [...node.children]
+      .find((el) => hasRDFaAttribute(el, 'property', EXT('instance')))
+      ?.getAttribute('resource');
+    const mappingResource = node.getAttribute('resource');
+    const codelistSpan = [...node.children].find((el) =>
+      hasRDFaAttribute(el, 'property', EXT('codelist'))
+    );
+    const codelistResource =
+      codelistSpan?.getAttribute('resource') ??
+      codelistSpan?.getAttribute('content');
+    const source = [...node.children]
+      .find((el) => hasRDFaAttribute(el, 'property', DCT('source')))
+      ?.getAttribute('resource');
+    const type = [...node.children]
+      .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
+      ?.getAttribute('content');
+    const label = node.getAttribute('data-label') || type;
+    const datatype = [...node.children]
+      .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
+      ?.getAttribute('datatype');
+    if (!mappingResource || !type) {
+      return false;
+    }
+    return {
+      variableInstance:
+        variableInstance ?? `http://data.lblod.info/variables/${uuidv4()}`,
+      mappingResource,
+      codelistResource,
+      source,
+      type,
+      datatype,
+      label,
+      ...getHTMLNodeExtraAttributes({ type, node }),
+    };
+  }
+
+  return false;
+};
+
+export const attributesToDOM = (node: PNode, content = null): DOMOutputSpec => {
+  const {
+    mappingResource,
+    codelistResource,
+    variableInstance,
+    type,
+    datatype,
+    source,
+    label,
+  } = node.attrs;
+
+  const sourceSpan = source
+    ? [
+        [
+          'span',
+          {
+            property: DCT('source').prefixed,
+            resource: source as string,
+          },
+        ],
+      ]
+    : [];
+  const codelistResourceSpan = codelistResource
+    ? [
+        [
+          'span',
+          {
+            property: EXT('codelist').prefixed, //becomes EXT('instance')
+            resource: codelistResource as string,
+          },
+        ],
+      ]
+    : [];
+  return [
+    'span',
+    {
+      resource: mappingResource as string,
+      typeof: EXT('Mapping').prefixed,
+      'data-label': label as string,
+      ...getPNodeExtraAttributes({ node, type: type as string }),
+    },
+    [
+      'span',
+      { property: EXT('instance'), resource: variableInstance as string },
+    ],
+    ['span', { property: DCT('type').prefixed, content: type as string }],
+    ...sourceSpan,
+    ...codelistResourceSpan,
+    [
+      'span',
+      {
+        property: EXT('content').prefixed,
+        content: content ? content : '',
+        ...(!!datatype && { datatype: datatype as string }),
+      },
+      content ? contentToDom({ content, type: type as string, node }) : 0,
+    ],
+  ];
+};
+
+export const emberNodeConfig: EmberNodeConfig = {
   name: 'variable',
   componentPath: 'variable-plugin/variable',
   inline: true,
@@ -93,111 +232,23 @@ const emberNodeConfig: EmberNodeConfig = {
     maximumValue: {
       default: null,
     },
+    writtenNumber: {
+      default: false,
+    },
   },
   toDOM: (node) => {
-    const {
-      mappingResource,
-      codelistResource,
-      variableInstance,
-      type,
-      datatype,
-      source,
-      label,
-    } = node.attrs;
-
-    const sourceSpan = source
-      ? [
-          [
-            'span',
-            {
-              property: DCT('source').prefixed,
-              resource: source as string,
-            },
-          ],
-        ]
-      : [];
-    const codelistResourceSpan = codelistResource
-      ? [
-          [
-            'span',
-            {
-              property: EXT('codelist').prefixed, //becomes EXT('instance')
-              resource: codelistResource as string,
-            },
-          ],
-        ]
-      : [];
-    return [
-      'span',
-      {
-        resource: mappingResource as string,
-        typeof: EXT('Mapping').prefixed,
-        'data-label': label as string,
-        ...getPNodeExtraAttributes({ node, type: type as string }),
-      },
-      [
-        'span',
-        { property: EXT('instance'), resource: variableInstance as string },
-      ],
-      ['span', { property: DCT('type').prefixed, content: type as string }],
-      ...sourceSpan,
-      ...codelistResourceSpan,
-      [
-        'span',
-        {
-          property: EXT('content').prefixed,
-          ...(!!datatype && { datatype: datatype as string }),
-        },
-        0,
-      ],
-    ];
+    return attributesToDOM(node);
   },
   parseDOM: [
     {
       tag: 'span',
       getAttrs: (node: HTMLElement) => {
-        if (
-          hasRDFaAttribute(node, 'typeof', EXT('Mapping')) &&
-          node.querySelector(CONTENT_SELECTOR)
-        ) {
-          const variableInstance = [...node.children]
-            .find((el) => hasRDFaAttribute(el, 'property', EXT('instance')))
-            ?.getAttribute('resource');
-          const mappingResource = node.getAttribute('resource');
-          const codelistSpan = [...node.children].find((el) =>
-            hasRDFaAttribute(el, 'property', EXT('codelist'))
-          );
-          const codelistResource =
-            codelistSpan?.getAttribute('resource') ??
-            codelistSpan?.getAttribute('content');
-          const source = [...node.children]
-            .find((el) => hasRDFaAttribute(el, 'property', DCT('source')))
-            ?.getAttribute('resource');
-          const type = [...node.children]
-            .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
-            ?.getAttribute('content');
-          const label = node.getAttribute('data-label') || type;
-          const datatype = [...node.children]
-            .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
-            ?.getAttribute('datatype');
-          if (!mappingResource || !type) {
-            return false;
-          }
-          return {
-            variableInstance:
-              variableInstance ??
-              `http://data.lblod.info/variables/${uuidv4()}`,
-            mappingResource,
-            codelistResource,
-            source,
-            type,
-            datatype,
-            label,
-            ...getHTMLNodeExtraAttributes({ type, node }),
-          };
+        const attr = parseAttributes(node);
+        if (attr && attr.type !== 'number') {
+          return attr;
+        } else {
+          return false;
         }
-
-        return false;
       },
       contentElement: CONTENT_SELECTOR,
     },

package/addon/plugins/variable-plugin/number.ts

@@ -0,0 +1,50 @@
+import {
+  createEmberNodeSpec,
+  createEmberNodeView,
+  EmberNodeConfig,
+} from '@lblod/ember-rdfa-editor/utils/ember-node';
+import {
+  attributesToDOM,
+  emberNodeConfig as baseVariableConfig,
+  CONTENT_SELECTOR,
+  parseAttributes,
+} from './nodes';
+import { PNode } from '@lblod/ember-rdfa-editor';
+import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+const emberNodeConfig = (): EmberNodeConfig => {
+  const { attrs, ...baseConfig } = baseVariableConfig;
+  return {
+    ...baseConfig,
+    attrs: { ...attrs, value: { default: null } },
+    componentPath: 'variable-number/number',
+    leafText: (node: PNode) => {
+      const { value } = node.attrs;
+      return value as string;
+    },
+    parseDOM: [
+      {
+        tag: 'span',
+        getAttrs: (node: HTMLElement) => {
+          const attrs = parseAttributes(node);
+          if (attrs && attrs.type === 'number') {
+            const content = [...node.children]
+              .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
+              ?.getAttribute('content');
+            return { ...attrs, value: content };
+          } else {
+            return false;
+          }
+        },
+        contentElement: CONTENT_SELECTOR,
+      },
+    ],
+    toDOM: (node) => {
+      return attributesToDOM(node, node.attrs.value);
+    },
+  };
+};
+
+export const number = createEmberNodeSpec(emberNodeConfig());
+export const numberView = createEmberNodeView(emberNodeConfig());

package/addon/plugins/variable-plugin/utils/constants.ts

@@ -42,17 +42,15 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
       const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
       const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
 
-      return schema.node(
-        'variable',
-        {
+      return unwrap(
+        schema.nodes.number.createAndFill({
           mappingResource: mappingURI,
           variableInstance,
           type: 'number',
           datatype: XSD('integer').prefixed,
           label,
           ...attributes,
-        },
-        schema.node('placeholder', { placeholderText: 'number' })
+        })
       );
     },
   },
@@ -117,6 +115,8 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
 
 export const MINIMUM_VALUE_PNODE_KEY = 'minimumValue';
 export const MAXIMUM_VALUE_PNODE_KEY = 'maximumValue';
+export const WRITTEN_NUMBER_PNODE_KEY = 'writtenNumber';
 
 export const MINIMUM_VALUE_HTML_ATTRIBUTE_KEY = 'data-minimum-value';
 export const MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY = 'data-maximum-value';
+export const WRITTEN_NUMBER_HTML_ATTRIBUTE_KEY = 'data-written-number';

package/app/components/variable-number/number.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-number/number';

package/app/styles/variable-plugin.scss

@@ -99,3 +99,17 @@
     width: 100%;
   }
 }
+
+// show tooltips above everything else
+.say-tooltip {
+ z-index: 3;
+}
+
+.say-number-tooltip {
+  width: 200px;
+
+  // AuInput @type='number' overrides width to be 100px, we have to override it again
+  input[type='number'] {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { DecorationSource, PNode, SayController, SayView } from '@lblod/ember-rdfa-editor';
+import intlService from 'ember-intl/services/intl';
+type Args = {
+    getPos: () => number | undefined;
+    node: PNode;
+    updateAttribute: (attr: string, value: unknown) => void;
+    controller: SayController;
+    view: SayView;
+    selected: boolean;
+    contentDecorations?: DecorationSource;
+};
+export default class VariableNumberPluginNumberComponent extends Component<Args> {
+    inputNumber: string;
+    writtenNumber: boolean;
+    errorMessage: string;
+    intl: intlService;
+    cursorPositionKeyDown: number | null;
+    focus(element: HTMLInputElement): void;
+    get node(): PNode;
+    get formattedNumber(): string;
+    get selected(): boolean;
+    get minValue(): number;
+    get maxValue(): number;
+    onInputNumberChange(event: InputEvent): void;
+    changeWrittenNumber(): void;
+    validateAndSave(): void;
+    selectThisNode(): void;
+    leaveOnEnter(event: KeyboardEvent): void;
+    setPosBeforeKeypress(event: KeyboardEvent): void;
+    leaveWithArrows(event: KeyboardEvent): void;
+    setSelectionAt(pos: number): void;
+    selectAfterNode(): void;
+    selectBeforeNode(): void;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "8.0.1",
+  "version": "8.2.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -39,7 +39,7 @@
     "@rdfjs/dataset": "^2.0.1",
     "@rdfjs/parser-n3": "^2.0.1",
     "@types/rdf-validate-shacl": "^0.4.0",
-    "@types/rdfjs__parser-n3": "^1.1.5",
+    "@types/rdfjs__parser-n3": "^2.0.1",
     "buffer": "^6.0.3",
     "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
@@ -53,6 +53,7 @@
     "ember-resources": "^5.6.2",
     "ember-velcro": "^1.1.0",
     "fetch-sparql-endpoint": "^3.0.0",
+    "n2words": "^1.16.4",
     "process": "0.11.10",
     "rdf-ext": "^2.1.0",
     "rdf-validate-shacl": "^0.4.5",
@@ -137,12 +138,12 @@
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
-    "prosemirror-dev-tools": "^3.1.0",
+    "prosemirror-dev-tools": "^4.0.0",
     "qunit": "^2.19.2",
     "qunit-dom": "^2.0.0",
     "release-it": "^15.5.0",
     "sass": "^1.49.7",
-    "typescript": "^4.9.3",
+    "typescript": "~5.0.4",
     "webpack": "^5.74.0"
   },
   "peerDependencies": {
@@ -150,6 +151,11 @@
     "@lblod/ember-rdfa-editor": "^3.8.0",
     "ember-concurrency": "^2.3.7"
   },
+  "overrides": {
+    "ember-intl": {
+      "typescript": "^5.0.4"
+    }
+  },
   "engines": {
     "node": ">= 18"
   },

package/plugins/citation-plugin/utils/vlaamse-codex.d.ts

@@ -1,6 +1,4 @@
-import { htmlSafe } from '@ember/template';
 import { Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-type SafeString = ReturnType<typeof htmlSafe>;
 interface DecisionArgs {
     uri: string;
     legislationTypeUri: Option<string>;
@@ -30,7 +28,7 @@ interface ArticleArgs {
 export declare class Article {
     uri: string;
     number?: number;
-    content: SafeString | null;
+    content: string | null;
     dateInForce: string | null;
     dateNoLongerInForce: string | null;
     constructor({ uri, number, content, dateInForce, dateNoLongerInForce, }: ArticleArgs);

package/plugins/variable-plugin/nodes.d.ts

@@ -1,13 +1,17 @@
-import { PNode } from '@lblod/ember-rdfa-editor';
+import { EmberNodeConfig } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { Attrs, DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
+export declare const CONTENT_SELECTOR: string;
 export declare const getHTMLNodeExtraAttributes: ({ node, type, }: {
     node: HTMLElement;
     type: string;
 }) => {
     minimumValue: string | null;
     maximumValue: string | null;
+    writtenNumber: boolean;
 } | {
     minimumValue?: undefined;
     maximumValue?: undefined;
+    writtenNumber?: undefined;
 };
 export declare const getPNodeExtraAttributes: ({ node, type, }: {
     node: PNode;
@@ -15,9 +19,19 @@ export declare const getPNodeExtraAttributes: ({ node, type, }: {
 }) => {
     "data-minimum-value": string;
     "data-maximum-value": string;
+    "data-written-number": string;
 } | {
     "data-minimum-value"?: undefined;
     "data-maximum-value"?: undefined;
+    "data-written-number"?: undefined;
 };
+export declare const contentToDom: ({ content, type, node, }: {
+    content: string;
+    type: string;
+    node: PNode;
+}) => string;
+export declare const parseAttributes: (node: HTMLElement) => false | Attrs;
+export declare const attributesToDOM: (node: PNode, content?: null) => DOMOutputSpec;
+export declare const emberNodeConfig: EmberNodeConfig;
 export declare const variable: import("prosemirror-model").NodeSpec;
 export declare const variableView: (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;

package/plugins/variable-plugin/number.d.ts

@@ -0,0 +1,2 @@
+export declare const number: import("prosemirror-model").NodeSpec;
+export declare const numberView: (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;

package/plugins/variable-plugin/utils/constants.d.ts

@@ -14,5 +14,7 @@ export type VariableType = {
 export declare const DEFAULT_VARIABLE_TYPES: Record<string, VariableType>;
 export declare const MINIMUM_VALUE_PNODE_KEY = "minimumValue";
 export declare const MAXIMUM_VALUE_PNODE_KEY = "maximumValue";
+export declare const WRITTEN_NUMBER_PNODE_KEY = "writtenNumber";
 export declare const MINIMUM_VALUE_HTML_ATTRIBUTE_KEY = "data-minimum-value";
 export declare const MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY = "data-maximum-value";
+export declare const WRITTEN_NUMBER_HTML_ATTRIBUTE_KEY = "data-written-number";

package/translations/en-US.yaml

@@ -179,6 +179,16 @@ date-plugin:
     required: 'This field cannot be empty'
     fractions: 'Fractions of a second, such as S or T, are not supported.'
     unknown: 'Invalid format'
+variable:
+  number:
+    placeholder: number
+    type-number: Type a number...
+    error-not-integer: Only integers are allowed
+    error-not-number: Only numbers are allowed
+    error-number-between: The number should be between {minValue} and {maxValue} 
+    error-number-above: The number should be bigger than {minValue}
+    error-number-below: The number should be smaller than {maxValue}
+    written-number-label: Show as words
 variable-plugin:
   insert-variable: Insert variable
   button: Insert

package/translations/nl-BE.yaml

@@ -94,7 +94,7 @@ citaten-plugin:
     details: Details
     refer-whole: Verwijs naar volledig document
     refer-article: Verwijs naar artikel
-    lookup-codex: Bekijk in Vlaams Codex
+    lookup-codex: Bekijk in Vlaamse Codex
   alert:
     loading: Laden…
     no-results: Geen resultaten gevonden
@@ -191,7 +191,16 @@ table-of-contents-plugin:
   title: Inhoudstafel
   toggle: Toon Inhoudstafel
 
-
+variable:
+  number:
+    placeholder: nummer
+    type-number: typ een nummer...
+    error-not-integer: Enkel gehele getallen zijn toegelaten
+    error-not-number: Enkel getallen zijn toegelaten
+    error-number-between: Het getal moet tussen {minValue} en {maxValue} liggen 
+    error-number-above: Het getal moet groter dan {minValue} zijn
+    error-number-below: Het getal moet kleiner dan {maxValue} zijn
+    written-number-label: Getal voluit schrijven
 variable-plugin:
   insert-variable: Voeg variabele in
   button: Voeg in
@@ -223,4 +232,4 @@ generic-rdfa-variable:
     insert: RDFA invoegen
   modal:
     insert: Invoegen
-    cancel: Terug
+    cancel: Terug

package/types/global.d.ts

@@ -5,3 +5,16 @@ declare module '@lblod/ember-rdfa-editor-lblod-plugins/templates/*' {
   const tmpl: TemplateFactory;
   export default tmpl;
 }
+declare module 'n2words' {
+  export default function n2words(
+    number: number,
+    options: { lang: string }
+  ): string;
+}
+
+declare module 'tracked-toolbox' {
+  export function localCopy<C extends Component = Component, T = unknown>(
+    memo: UsefulPropsOf<C>,
+    initializer?: T | (() => T)
+  ): PropertyDecorator;
+}

package/.woodpecker/.release.yml

@@ -1,22 +0,0 @@
-pipeline:
-  install:
-    image: danlynn/ember-cli:4.8.0
-    commands:
-      - npm ci
-  release:
-    image: plugins/npm
-    settings:
-      token:
-        from_secret: npm_access_token
-  push-tagged-build:
-    image: plugins/docker
-    settings:
-      repo: lblod/ember-rdfa-editor-lblod-plugins
-      tags: "${CI_COMMIT_TAG##v}"
-      purge: true
-    secrets: [ docker_username, docker_password ]
-    # Pipeline level conditions aren't supported yet:
-    # https://github.com/woodpecker-ci/woodpecker/issues/283
-when:
-  event: tag
-  tag: v*