@lblod/ember-rdfa-editor-lblod-plugins 8.1.0 → 8.2.1

package/CHANGELOG.md

@@ -7,9 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.2.1] - 2023-06-28
+### Fixed
+ - GN-4200: Fixed bug with TOC scroll in GN and RB
+### Dependencies
+ - Bump `date-fns` from 2.29.3 to 2.30.0 
+
+## [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
@@ -497,7 +515,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.1.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.1...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
@@ -513,4 +531,6 @@ 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.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.0...v8.2.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/README.md

@@ -427,14 +427,17 @@ In order to enable the plugin you need to add the table of contents button to th
 ```
 ### Configuring the plugin with a custom config
 
-You can configure the nodeview with the hiearchy of the nodes
+You can configure the nodeview with the hierarchy of the nodes.  
+For very custom setups, the plugin might be unable to find your scrollContainer (htmlElement providing scroll to your document). You can pass the scrollContainer element via the `scrollContainer()` function in the plugin config options instead.
 
 ```js
 {
   nodeHierarchy: [
     'title|chapter|section|subsection|article',
-  'structure_header|article_header',
-],
+    'structure_header|article_header',
+  ],
+  scrollContainer: () =>
+    document.getElementsByClassName('say-container__main')[0],
 },
 ```
 

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/table-of-contents-plugin/ember-nodes/table-of-contents.ts

@@ -88,14 +88,28 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
           selection.from
         );
         const config = this.config[0];
+        let scrollContainer: HTMLElement | undefined;
         if (config.scrollContainer) {
-          const scrollContainer: HTMLElement = config.scrollContainer;
+          scrollContainer = config.scrollContainer();
+        } else {
+          scrollContainer = this.getScrollContainer();
+        }
+        if (scrollContainer) {
+          /*
+            coords.top = The distance from the top of the page to your element, this changes with the amount you
+            have scrolled so far
+            scrollContainerDistanceToTop = absolute y-coord of the start of the scroll container.
+            The difference between these two plus the alreadyScrolled distance is where we want to scroll
+          */
           const alreadyScrolled = scrollContainer.scrollTop;
-          const MAGIC_NUMBER_TOPBAR_HEIGHT: number =
-            config.scrollingPadding ?? 150;
+          const scrollContainerDistanceToTop =
+            scrollContainer.getBoundingClientRect().y;
+          const topPadding = 10; // We need top padding so the wanted position is not just on top of the page
           scrollContainer.scrollTo(
             0,
-            coords.top + alreadyScrolled - MAGIC_NUMBER_TOPBAR_HEIGHT
+            coords.top +
+              alreadyScrolled -
+              (scrollContainerDistanceToTop + topPadding)
           );
         } else {
           tr.scrollIntoView();
@@ -105,4 +119,22 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
     });
     this.controller.focus();
   }
+  getScrollContainer(): HTMLElement | undefined {
+    let currentElement = this.controller.mainEditorView.dom;
+    while (currentElement.parentElement) {
+      const parent = currentElement.parentElement;
+      if (this.isScrollable(parent)) {
+        return parent;
+      }
+      currentElement = parent;
+    }
+    return;
+  }
+  isScrollable(element: HTMLElement): boolean {
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    const overflowYStyle = window.getComputedStyle(element).overflowY;
+    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+
+    return hasScrollableContent && !isOverflowHidden;
+  }
 }

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

@@ -42,6 +42,13 @@
             {{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}}

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

@@ -11,14 +11,13 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import intlService from 'ember-intl/services/intl';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 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;
@@ -30,8 +29,9 @@ type Args = {
   contentDecorations?: DecorationSource;
 };
 export default class VariableNumberPluginNumberComponent extends Component<Args> {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   @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;
@@ -44,7 +44,16 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
     return this.args.node;
   }
   get formattedNumber() {
-    return this.node.attrs.value as string;
+    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() {
@@ -64,6 +73,11 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
     this.validateAndSave();
   }
 
+  @action
+  changeWrittenNumber() {
+    this.args.updateAttribute('writtenNumber', !this.writtenNumber);
+  }
+
   validateAndSave() {
     if (isBlank(this.inputNumber)) {
       this.errorMessage = '';

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

@@ -1,5 +1,4 @@
 export type TableOfContentsConfig = {
   nodeHierarchy: string[];
-  scrollContainer?: HTMLElement;
-  scrollingPadding?: number;
+  scrollContainer?: () => HTMLElement;
 }[];

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

@@ -14,8 +14,11 @@ 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 { Attrs, DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
+import n2words from 'n2words';
 
 export const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'],
                           span[property~='${EXT('content').full}']`;
@@ -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,12 +59,40 @@ 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 {};
 };
 
+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')) &&
@@ -154,9 +189,10 @@ export const attributesToDOM = (node: PNode, content = null): DOMOutputSpec => {
       'span',
       {
         property: EXT('content').prefixed,
+        content: content ? content : '',
         ...(!!datatype && { datatype: datatype as string }),
       },
-      content ? content : 0,
+      content ? contentToDom({ content, type: type as string, node }) : 0,
     ],
   ];
 };
@@ -196,6 +232,9 @@ export const emberNodeConfig: EmberNodeConfig = {
     maximumValue: {
       default: null,
     },
+    writtenNumber: {
+      default: false,
+    },
   },
   toDOM: (node) => {
     return attributesToDOM(node);

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

@@ -29,9 +29,9 @@ const emberNodeConfig = (): EmberNodeConfig => {
         getAttrs: (node: HTMLElement) => {
           const attrs = parseAttributes(node);
           if (attrs && attrs.type === 'number') {
-            const content = [...node.children].find((el) =>
-              hasRDFaAttribute(el, 'property', EXT('content'))
-            )?.innerHTML;
+            const content = [...node.children]
+              .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
+              ?.getAttribute('content');
             return { ...attrs, value: content };
           } else {
             return false;

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

@@ -115,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/styles/variable-plugin.scss

@@ -106,7 +106,7 @@
 }
 
 .say-number-tooltip {
-  width: 140px;
+  width: 200px;
 
   // AuInput @type='number' overrides width to be 100px, we have to override it again
   input[type='number'] {

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

@@ -18,5 +18,7 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
         pos: number;
     }): OutlineEntry[];
     moveToPosition(pos: number): void;
+    getScrollContainer(): HTMLElement | undefined;
+    isScrollable(element: HTMLElement): boolean;
 }
 export {};

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

@@ -12,6 +12,7 @@ type Args = {
 };
 export default class VariableNumberPluginNumberComponent extends Component<Args> {
     inputNumber: string;
+    writtenNumber: boolean;
     errorMessage: string;
     intl: intlService;
     cursorPositionKeyDown: number | null;
@@ -22,6 +23,7 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
     get minValue(): number;
     get maxValue(): number;
     onInputNumberChange(event: InputEvent): void;
+    changeWrittenNumber(): void;
     validateAndSave(): void;
     selectThisNode(): void;
     leaveOnEnter(event: KeyboardEvent): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "8.1.0",
+  "version": "8.2.1",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -39,10 +39,10 @@
     "@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",
+    "date-fns": "^2.30.0",
     "ember-auto-import": "^2.4.3",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.1.1",
@@ -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",

package/plugins/table-of-contents-plugin/index.d.ts

@@ -1,5 +1,4 @@
 export type TableOfContentsConfig = {
     nodeHierarchy: string[];
-    scrollContainer?: HTMLElement;
-    scrollingPadding?: number;
+    scrollContainer?: () => HTMLElement;
 }[];

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

@@ -7,9 +7,11 @@ export declare const getHTMLNodeExtraAttributes: ({ node, type, }: {
 }) => {
     minimumValue: string | null;
     maximumValue: string | null;
+    writtenNumber: boolean;
 } | {
     minimumValue?: undefined;
     maximumValue?: undefined;
+    writtenNumber?: undefined;
 };
 export declare const getPNodeExtraAttributes: ({ node, type, }: {
     node: PNode;
@@ -17,10 +19,17 @@ 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;

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

@@ -183,11 +183,12 @@ variable:
   number:
     placeholder: number
     type-number: Type a number...
-    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
+    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

@@ -195,11 +195,12 @@ variable:
   number:
     placeholder: nummer
     type-number: typ een nummer...
-    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}
+    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

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