@lblod/ember-rdfa-editor-lblod-plugins 16.0.0 → 16.1.0

package/addon/plugins/article-structure-plugin/utils/romanize.ts

@@ -0,0 +1,85 @@
+export function romanize(num: number) {
+  if (isNaN(num)) throw new Error('Provided number is NaN');
+  const digits = String(+num).split('');
+  const key = [
+    '',
+    'C',
+    'CC',
+    'CCC',
+    'CD',
+    'D',
+    'DC',
+    'DCC',
+    'DCCC',
+    'CM',
+    '',
+    'X',
+    'XX',
+    'XXX',
+    'XL',
+    'L',
+    'LX',
+    'LXX',
+    'LXXX',
+    'XC',
+    '',
+    'I',
+    'II',
+    'III',
+    'IV',
+    'V',
+    'VI',
+    'VII',
+    'VIII',
+    'IX',
+  ];
+  let roman = '';
+  let i = 3;
+  while (i--) {
+    const digit = digits.pop();
+    if (digit) {
+      roman = (key[Number(digit) + i * 10] || '') + roman;
+    }
+  }
+  return Array(+digits.join('') + 1).join('M') + roman;
+}
+
+const subs: Record<string, string> = {
+  V: 'I',
+  X: 'I',
+  L: 'X',
+  C: 'X',
+  D: 'C',
+  M: 'C',
+};
+
+const lookup: Record<string, number> = {
+  I: 1,
+  V: 5,
+  X: 10,
+  L: 50,
+  C: 100,
+  D: 500,
+  M: 1000,
+};
+
+/**
+ * @link https://gist.github.com/briansunter/ec7af91065d79a2f790fcd76a2a08a84
+ */
+export function romanToInt(romanString: string) {
+  let total = 0;
+
+  for (let x = 0; x < romanString.length; x++) {
+    const fst = romanString[x];
+    const snd = romanString[x + 1];
+    if (fst === subs[snd]) {
+      total = total + lookup[snd] - lookup[fst];
+      x++;
+    } else if (!snd) {
+      total = total + lookup[fst];
+    } else {
+      total = total + lookup[fst];
+    }
+  }
+  return total;
+}

package/addon/plugins/article-structure-plugin/utils/structure.ts

@@ -1,4 +1,5 @@
 import {
+  DOMOutputSpec,
   NodeSpec,
   NodeType,
   PNode,
@@ -10,11 +11,18 @@ import {
   ELI,
   RDF,
   SAY,
+  XSD,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import {
   hasRDFaAttribute,
   Resource,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { StructureSpec } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
+import {
+  romanize,
+  romanToInt,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/romanize';
 
 export function constructStructureNodeSpec(config: {
   type: Resource;
@@ -120,63 +128,59 @@ export function findAncestorOfType(selection: Selection, ...types: NodeType[]) {
   return;
 }
 
-export function getStructureHeaderAttrs(element: HTMLElement) {
-  const numberNode = element.querySelector(
-    `[property~="${ELI('number').prefixed}"],
-     [property~="${ELI('number').full}"]`,
-  );
-  if (hasRDFaAttribute(element, 'property', SAY('heading')) && numberNode) {
+export function getNumberAttributeFromElement(
+  containerElement: Element,
+  numberElement: Element,
+): {
+  number: number;
+  numberDisplayStyle: string;
+  startNumber: number | null;
+} {
+  // Storing the number in the content attribute was not introduced straight away,
+  // so we need to check for both the content attribute and the textContent.
+  const contentAttribute = numberElement.getAttribute('content');
+
+  // If the content attribute is present, we can assume it is the correct number.
+  if (contentAttribute) {
     return {
-      number: numberNode.textContent,
+      number: parseInt(contentAttribute, 10),
+      ...getNodeNumberAttrsFromElement(containerElement),
     };
   }
-  return false;
+
+  const textContentNumber = numberElement.textContent;
+
+  if (!textContentNumber) {
+    return { number: 1, ...getNodeNumberAttrsFromElement(containerElement) };
+  }
+
+  // If the textContent is a number, we can assume it is the correct number.
+  if (/^[0-9]+$/.exec(textContentNumber)) {
+    return {
+      number: parseInt(textContentNumber, 10),
+      ...getNodeNumberAttrsFromElement(containerElement),
+    };
+  }
+
+  // Otherwise, we assume it is a roman number.
+  return {
+    number: romanToInt(textContentNumber),
+    ...getNodeNumberAttrsFromElement(containerElement),
+    numberDisplayStyle: 'roman',
+  };
 }
 
-export function romanize(num: number) {
-  if (isNaN(num)) throw new Error('Provided number is NaN');
-  const digits = String(+num).split('');
-  const key = [
-    '',
-    'C',
-    'CC',
-    'CCC',
-    'CD',
-    'D',
-    'DC',
-    'DCC',
-    'DCCC',
-    'CM',
-    '',
-    'X',
-    'XX',
-    'XXX',
-    'XL',
-    'L',
-    'LX',
-    'LXX',
-    'LXXX',
-    'XC',
-    '',
-    'I',
-    'II',
-    'III',
-    'IV',
-    'V',
-    'VI',
-    'VII',
-    'VIII',
-    'IX',
-  ];
-  let roman = '';
-  let i = 3;
-  while (i--) {
-    const digit = digits.pop();
-    if (digit) {
-      roman = (key[Number(digit) + i * 10] || '') + roman;
-    }
+export function getStructureHeaderAttrs(element: HTMLElement) {
+  const numberElement = element.querySelector(
+    `[property~="${ELI('number').prefixed}"],
+     [property~="${ELI('number').full}"]`,
+  );
+
+  if (hasRDFaAttribute(element, 'property', SAY('heading')) && numberElement) {
+    return getNumberAttributeFromElement(element, numberElement);
   }
-  return Array(+digits.join('') + 1).join('M') + roman;
+
+  return false;
 }
 
 export function containsOnlyPlaceholder(schema: Schema, node: PNode) {
@@ -186,3 +190,81 @@ export function containsOnlyPlaceholder(schema: Schema, node: PNode) {
     node.firstChild.firstChild?.type === schema.nodes['placeholder']
   );
 }
+
+export const getNumberAttributesFromNode = (node: PNode) => ({
+  ['data-start-number']: node.attrs.startNumber
+    ? `${node.attrs.startNumber}`
+    : null,
+  ['data-number-display-style']: node.attrs.numberDisplayStyle as string,
+});
+
+export const getNumberDocSpecFromNode = (node: PNode): DOMOutputSpec => [
+  'span',
+  {
+    property: ELI('number').prefixed,
+    datatype: XSD('integer').prefixed,
+    content: node.attrs.number as string,
+    contenteditable: false,
+  },
+  node.attrs.numberDisplayStyle === 'roman'
+    ? romanize(node.attrs.number ?? '1')
+    : `${node.attrs.number ?? '1'}`,
+];
+
+const getNodeNumberAttrsFromElement = (element: Element) => {
+  const startNumber = element.getAttribute('data-start-number');
+  const numberDisplayStyle = element.getAttribute('data-number-display-style');
+
+  return {
+    numberDisplayStyle: numberDisplayStyle ?? 'decimal',
+    startNumber: startNumber ? parseInt(startNumber, 10) : null,
+  };
+};
+
+export const getNumberUtils = (
+  // Offset for the position of the node where the starting number is stored.
+  // For structures with `structure_header` it will usually be +1,
+  // for `articleParagraph` it is 0.
+  offset = 0,
+): Pick<
+  StructureSpec,
+  'setStartNumber' | 'getStartNumber' | 'getNumber' | 'updateNumber'
+> => ({
+  updateNumber: ({ number, pos, transaction }) => {
+    return transaction.setNodeAttribute(pos + offset, 'number', number);
+  },
+  getNumber: ({ pos, transaction }) => {
+    const node = unwrap(transaction.doc.nodeAt(pos + offset));
+    const number = node.attrs.number as string | number | undefined | null;
+
+    if (typeof number === 'string' && number.length > 0) {
+      return parseInt(number, 10);
+    }
+
+    if (typeof number === 'number') {
+      return number;
+    }
+
+    return null;
+  },
+  getStartNumber: ({ pos, transaction }) => {
+    const node = unwrap(transaction.doc.nodeAt(pos + offset));
+    const startNumber = node.attrs.startNumber as
+      | string
+      | number
+      | undefined
+      | null;
+
+    if (typeof startNumber === 'string' && startNumber.length > 0) {
+      return parseInt(startNumber, 10);
+    }
+
+    if (typeof startNumber === 'number') {
+      return startNumber;
+    }
+
+    return null;
+  },
+  setStartNumber: ({ number, pos, transaction }) =>
+    transaction.setNodeAttribute(pos + offset, 'startNumber', number),
+});

package/addon/plugins/standard-template-plugin/utils/nodes.ts

@@ -1,21 +1,21 @@
-import {
-  getRdfaAttrs,
-  NodeSpec,
-  rdfaAttrs,
-  Transaction,
-} from '@lblod/ember-rdfa-editor';
+import { getRdfaAttrs, NodeSpec, rdfaAttrs } from '@lblod/ember-rdfa-editor';
 import {
   BESLUIT,
   ELI,
   PROV,
   SKOS,
-  XSD,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { StructureSpec } from '../../article-structure-plugin';
 import { v4 as uuid } from 'uuid';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
+import {
+  getNumberAttributeFromElement,
+  getNumberAttributesFromNode,
+  getNumberDocSpecFromNode,
+  getNumberUtils,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 
 export const besluit_title: NodeSpec = {
   content: 'paragraph+',
@@ -183,7 +183,6 @@ export const besluitArticleStructure: StructureSpec = {
   limitTo: 'besluit',
   constructor: ({ schema, number, content, intl, state }) => {
     const translationWithDocLang = getTranslationFunction(state);
-    const numberConverted = number?.toString() ?? '1';
     const node = schema.node(
       `besluit_article`,
       {
@@ -191,7 +190,7 @@ export const besluitArticleStructure: StructureSpec = {
       },
       [
         schema.node('besluit_article_header', {
-          number: numberConverted,
+          number: number ?? 1,
         }),
         schema.node(
           `besluit_article_content`,
@@ -223,10 +222,7 @@ export const besluitArticleStructure: StructureSpec = {
       selectionConfig,
     };
   },
-  updateNumber: function ({ number, pos, transaction }): Transaction {
-    transaction.setNodeAttribute(pos + 1, 'number', number.toString());
-    return transaction;
-  },
+  ...getNumberUtils(1),
   content: ({ pos, state }) => {
     const node = unwrap(state.doc.nodeAt(pos));
     return unwrap(node.lastChild).content;
@@ -240,7 +236,13 @@ export const besluit_article_header: NodeSpec = {
   attrs: {
     ...rdfaAttrs,
     number: {
-      default: '1',
+      default: 1,
+    },
+    numberDisplayStyle: {
+      default: 'decimal', // decimal, roman
+    },
+    startNumber: {
+      default: null,
     },
   },
   toDOM(node) {
@@ -249,29 +251,35 @@ export const besluit_article_header: NodeSpec = {
     delete toplevelAttrs.datatype;
     return [
       'div',
-      { ...toplevelAttrs, contenteditable: false },
+      {
+        ...toplevelAttrs,
+        contenteditable: false,
+        ...getNumberAttributesFromNode(node),
+      },
       'Artikel ',
-      [
-        'span',
-        { property: ELI('number').prefixed, datatype: XSD('string').prefixed },
-        node.attrs.number,
-      ],
+      getNumberDocSpecFromNode(node),
     ];
   },
   parseDOM: [
     {
       tag: 'p,div',
       getAttrs(element: HTMLElement) {
-        const numberNode = element.querySelector(
+        const numberElement = element.querySelector(
           `span[property~='${ELI('number').prefixed}'],
            span[property~='${ELI('number').full}']`,
         );
-        if (numberNode) {
+
+        const numberAttributes =
+          numberElement &&
+          getNumberAttributeFromElement(element, numberElement);
+
+        if (numberAttributes) {
           return {
             ...getRdfaAttrs(element),
-            number: numberNode.textContent,
+            ...numberAttributes,
           };
         }
+
         return false;
       },
     },

package/addon/plugins/template-comments-plugin/node.ts

@@ -24,16 +24,17 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
     serialize(_, state) {
       const t = getTranslationFunction(state);
       const heading = t(
-        'template-comments-plugin.heading',
-        'toelichtingsbepaling',
+        'template-comments-plugin.long-title',
+        'Toelichtings- of voorbeeldbepaling',
       );
 
       return [
         'div',
         {
           typeof: EXT('TemplateComment').prefixed,
+          class: 'say-template-comment',
         },
-        ['h3', {}, heading],
+        ['p', {}, ['strong', {}, heading]],
         ['div', { property: EXT('content').prefixed }, 0],
       ];
     },

package/addon/utils/translation.ts

@@ -21,3 +21,38 @@ export const getTranslationFunction = (state?: EditorState) => {
     return intl.t(key, { ...options, htmlSafe: false, locale });
   };
 };
+
+/**
+ * Helper function to help pick supported locales for ember-intl.
+ * Returns exact matches first, then language matches, then the default.
+ **/
+export function decentLocaleMatch(
+  userLocales: string[] | readonly string[],
+  supportedLocales: string[],
+  defaultLocale: string,
+) {
+  // Ember-intl lowercases locales so we can make comparisons easier by doing the same
+  const userLocs = userLocales.map((locale) => locale.toLowerCase());
+  const supportedLocs = supportedLocales.map((locale) => locale.toLowerCase());
+
+  // First find exact matches. Use a set to avoid duplicates while preserving insert order.
+  const matches = new Set(
+    userLocs.filter((locale) => supportedLocs.includes(locale)),
+  );
+
+  // Then look for locales that just match based on language,
+  // e.g. match en or en-US if looking for en-GB
+  const languageMap: Record<string, string[] | undefined> = {};
+  supportedLocs.forEach((locale) => {
+    const lang = locale.split('-')[0];
+    languageMap[lang] = [...(languageMap[lang] || []), locale];
+  });
+  userLocs.forEach((locale) => {
+    const looseMatches = languageMap[locale.split('-')[0]] ?? [];
+    looseMatches.forEach((match) => matches.add(match));
+  });
+
+  // Add the default so we always have something
+  matches.add(defaultLocale.toLowerCase());
+  return [...matches];
+}

package/app/styles/citaten-plugin.scss

@@ -1,5 +1,3 @@
-@import "ember-appuniversum";
-
 .citaten--decision-list {
   max-height: 35vh;
   overflow: auto;

package/app/styles/confidentiality-plugin.scss

@@ -1,5 +1,3 @@
-@import 'ember-appuniversum';
-
 .rdfa-annotations {
   [property='ext:redacted'] {
     background-color: var(--au-red-200);

package/app/styles/template-comments-plugin.scss

@@ -1,7 +1,8 @@
-@import "ember-appuniversum";
-
 .say-template-comment {
   color: var(--au-blue-900);
+  padding: $au-unit-small;
+  border-radius: var(--au-radius);
+  border: 0.1rem solid var(--au-gray-300);
 
   .au-c-alert__content {
     margin-top: 0;

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

@@ -9,8 +9,15 @@ type Args = {
 export default class EditorPluginsStructureCardComponent extends Component<Args> {
     intl: IntlService;
     removeStructureContent: boolean;
+    startNumber: number | null;
     get controller(): SayController;
     moveStructure(direction: 'up' | 'down'): void;
+    setStructureStartNumber(): void;
+    resetStructureStartNumber(): void;
+    get structureNumber(): number | null | undefined;
+    get structureStartNumber(): number | null | undefined;
+    get startNumberInputValue(): number | "";
+    onStartNumberChange: (event: InputEvent) => void;
     removeStructure(withContent: boolean): void;
     setRemoveStructureContent(value: boolean): void;
     get structureTypes(): ArticleStructurePluginOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -71,7 +71,7 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@glint/template": "1.1.0",
-    "@lblod/ember-rdfa-editor": "9.0.0",
+    "@lblod/ember-rdfa-editor": "9.0.2",
     "@rdfjs/types": "^1.1.0",
     "@release-it/keep-a-changelog": "^3.1.0",
     "@tsconfig/ember": "^3.0.0",
@@ -113,7 +113,7 @@
     "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript": "^5.2.1",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-intl": "6.1.0",
+    "ember-intl": "5.7.2",
     "ember-load-initializers": "^2.1.2",
     "ember-modifier": "3.2.7",
     "ember-page-title": "^8.0.0",
@@ -148,7 +148,7 @@
     "@glint/template": "^1.1.0",
     "@lblod/ember-rdfa-editor": "^9.0.0",
     "ember-concurrency": "^2.3.7 || ^3.1.0",
-    "ember-intl": "^6.1.0",
+    "ember-intl": "^5.7.2 || ^6.1.0",
     "ember-modifier": "^3.2.7",
     "ember-power-select": "6.x || 7.x",
     "ember-source": "^4.12.0"

package/plugins/article-structure-plugin/commands/index.d.ts

@@ -4,3 +4,4 @@ export { default as recalculateStructureNumbers } from './recalculate-structure-
 export { default as removeStructure } from './remove-structure';
 export { default as unwrapStructure } from './unwrap-structure';
 export { default as wrapStructureContent } from './wrap-structure-content';
+export { default as setStructureStartNumber } from './set-structure-start-number';

package/plugins/article-structure-plugin/commands/set-structure-start-number.d.ts

@@ -0,0 +1,4 @@
+import { Command } from '@lblod/ember-rdfa-editor';
+import type { ArticleStructurePluginOptions } from '..';
+declare const setStructureStartNumber: (options: ArticleStructurePluginOptions, startNumber: number | null) => Command;
+export default setStructureStartNumber;

package/plugins/article-structure-plugin/index.d.ts

@@ -30,6 +30,19 @@ export type StructureSpec = {
         pos: number;
         transaction: Transaction;
     }) => Transaction;
+    getNumber: (args: {
+        pos: number;
+        transaction: Transaction;
+    }) => number | null;
+    setStartNumber: (args: {
+        number: number | null;
+        pos: number;
+        transaction: Transaction;
+    }) => Transaction;
+    getStartNumber: (args: {
+        pos: number;
+        transaction: Transaction;
+    }) => number | null;
     content?: (args: {
         pos: number;
         state: EditorState;

package/plugins/article-structure-plugin/utils/romanize.d.ts

@@ -0,0 +1,5 @@
+export declare function romanize(num: number): string;
+/**
+ * @link https://gist.github.com/briansunter/ec7af91065d79a2f790fcd76a2a08a84
+ */
+export declare function romanToInt(romanString: string): number;

package/plugins/article-structure-plugin/utils/structure.d.ts

@@ -1,5 +1,6 @@
-import { NodeSpec, NodeType, PNode, Schema, Selection } from '@lblod/ember-rdfa-editor';
+import { DOMOutputSpec, NodeSpec, NodeType, PNode, Schema, Selection } from '@lblod/ember-rdfa-editor';
 import { Resource } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { StructureSpec } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
 export declare function constructStructureNodeSpec(config: {
     type: Resource;
     content: string;
@@ -16,8 +17,20 @@ export declare function findAncestorOfType(selection: Selection, ...types: NodeT
     depth: number;
     node: PNode;
 } | undefined;
+export declare function getNumberAttributeFromElement(containerElement: Element, numberElement: Element): {
+    number: number;
+    numberDisplayStyle: string;
+    startNumber: number | null;
+};
 export declare function getStructureHeaderAttrs(element: HTMLElement): false | {
-    number: string | null;
+    number: number;
+    numberDisplayStyle: string;
+    startNumber: number | null;
 };
-export declare function romanize(num: number): string;
 export declare function containsOnlyPlaceholder(schema: Schema, node: PNode): boolean;
+export declare const getNumberAttributesFromNode: (node: PNode) => {
+    "data-start-number": string | null;
+    "data-number-display-style": string;
+};
+export declare const getNumberDocSpecFromNode: (node: PNode) => DOMOutputSpec;
+export declare const getNumberUtils: (offset?: number) => Pick<StructureSpec, 'setStartNumber' | 'getStartNumber' | 'getNumber' | 'updateNumber'>;

package/translations/en-US.yaml

@@ -22,6 +22,10 @@ article-structure-plugin:
     chapter: Move chapter down
     section: Move section down
     subsection: Move subsection down
+  start-number:
+    start-number: Start number
+    set: Set start number
+    reset: Reset
   title:
     structure-card: Structure Card
   remove:

package/translations/nl-BE.yaml

@@ -22,6 +22,10 @@ article-structure-plugin:
     section: Afdeling naar beneden verplaatsen
     subsection: Onderafdeling naar beneden verplaatsen
     default: Structuur naar beneden verplaatsen
+  start-number:
+    start-number: Startnummer
+    set: Startnummer instellen
+    reset: Resetten
   title:
     structure-card: Structuur card
   remove:

package/utils/translation.d.ts

@@ -1,3 +1,8 @@
 import type { EditorState } from '@lblod/ember-rdfa-editor';
 import { type TOptions } from 'ember-intl/services/intl';
 export declare const getTranslationFunction: (state?: EditorState) => (key: string, fallback: string, options?: TOptions) => string;
+/**
+ * Helper function to help pick supported locales for ember-intl.
+ * Returns exact matches first, then language matches, then the default.
+ **/
+export declare function decentLocaleMatch(userLocales: string[] | readonly string[], supportedLocales: string[], defaultLocale: string): string[];