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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 16.1.0
+
+### Minor Changes
+
+- [#377](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/377) [`c383236`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/c38323626745e55671bcbc2afc01d91b17911dd3) Thanks [@elpoelma](https://github.com/elpoelma)! - - Addition of the `say-template-comment` class to the static version of template comments.
+
+  - Addition of some extra styles to the `say-template-comment` class.
+
+- [#378](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/378) [`7b53e51`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/7b53e514aac79286267da1f7f32b7179fea3fb7d) Thanks [@elpoelma](https://github.com/elpoelma)! - Add helper function to help with locale selection and add translation note to readme
+
+- [#376](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/376) [`301b4b3`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/301b4b3a9288ce53f7be4117e95526bf73be1534) Thanks [@dkozickis](https://github.com/dkozickis)! - GN-4650: Allows to set a "start number" for a structure.
+
+### Patch Changes
+
+- [#377](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/377) [`c383236`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/c38323626745e55671bcbc2afc01d91b17911dd3) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove `@import "ember-appuniversum"` statements from plugin sass modules in order to prevent style overrding.
+
+- [`4ddf16c`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/4ddf16c91959d77fda1cd7b033f7ca18d2857b70) Thanks [@elpoelma](https://github.com/elpoelma)! - Fix template-comment padding
+
 ## 16.0.1
 
 ### Patch Changes

package/README.md

@@ -859,6 +859,15 @@ To use `@lblod/ember-rdfa-editor-lblod-plugins` with Embroider some extra Webpac
 
 If you already provide some Webpack configuration, you can deep merge that with the config object we provide.
 
+## Translation
+
+Translations are provided for UI elements using ember-intl.
+Currently the only languages supported are English (en-US) and Dutch (nl-BE).
+Other languages can be added by copying the contents of the file `translations/en-us.yaml` into the relevant language file in your `translations` folder and translating all of the strings.
+
+A helper function is provided to assist with finding a reasonable fallback locale, for example providing `en-US` translations if `en` is requested.
+See [the test app](tests/dummy/app/routes/application.ts) for example of it's usage.
+
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

package/addon/components/article-structure-plugin/structure-card.hbs

@@ -79,6 +79,39 @@
 
           </AuButtonGroup>
         </Item>
+        <Item class="au-u-padding-left-small">
+          <AuFormRow>
+            {{#let (unique-id) as |id|}}
+              <AuLabel for={{id}}>
+                {{t 'article-structure-plugin.start-number.start-number'}}
+              </AuLabel>
+              <AuInput
+                id={{id}}
+                value={{this.startNumberInputValue}}
+                {{on "change" this.onStartNumberChange}}
+                placeholder={{t 'article-structure-plugin.start-number.start-number'}}
+                type="number"
+                min="1"
+              />
+          {{/let}}
+          </AuFormRow>
+          <AuButton
+            @iconAlignment="left"
+            class="au-u-margin-top-tiny"
+            {{on 'click' this.setStructureStartNumber}}
+          >
+            {{t 'article-structure-plugin.start-number.set'}}
+          </AuButton>
+          <AuButton
+            @iconAlignment="left"
+            @skin="secondary"
+            @disabled={{not this.structureStartNumber}}
+            class="au-u-margin-top-tiny"
+            {{on 'click' this.resetStructureStartNumber}}
+          >
+            {{t 'article-structure-plugin.start-number.reset'}}
+          </AuButton>
+        </Item>
       </AuList>
     </c.content>
   </AuCard>

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

@@ -5,6 +5,7 @@ import {
   moveSelectedStructure,
   removeStructure,
   unwrapStructure,
+  setStructureStartNumber,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands';
 import { ArticleStructurePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
 import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
@@ -20,6 +21,7 @@ type Args = {
 export default class EditorPluginsStructureCardComponent extends Component<Args> {
   @service declare intl: IntlService;
   @tracked removeStructureContent = false;
+  @tracked startNumber: number | null = null;
 
   get controller() {
     return this.args.controller;
@@ -34,6 +36,57 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
     this.controller.focus();
   }
 
+  @action
+  setStructureStartNumber() {
+    if (this.startNumber) {
+      this.controller.doCommand(
+        setStructureStartNumber(this.structureTypes, this.startNumber),
+      );
+
+      this.startNumber = null;
+    }
+  }
+
+  @action
+  resetStructureStartNumber() {
+    this.controller.doCommand(
+      setStructureStartNumber(this.structureTypes, null),
+    );
+
+    this.startNumber = null;
+  }
+
+  get structureNumber() {
+    if (this.structure && this.currentStructureType) {
+      return this.currentStructureType.getNumber({
+        pos: this.structure.pos,
+        transaction: this.controller.mainEditorState.tr,
+      });
+    }
+
+    return;
+  }
+
+  get structureStartNumber() {
+    if (this.structure && this.currentStructureType) {
+      return this.currentStructureType.getStartNumber({
+        pos: this.structure.pos,
+        transaction: this.controller.mainEditorState.tr,
+      });
+    }
+
+    return;
+  }
+
+  get startNumberInputValue() {
+    return this.startNumber ?? this.structureNumber ?? '';
+  }
+
+  onStartNumberChange = (event: InputEvent) => {
+    const target = event.target as HTMLInputElement;
+    this.startNumber = parseInt(target.value);
+  };
+
   @action
   removeStructure(withContent: boolean) {
     if (this.structure && this.currentStructureType) {

package/addon/plugins/article-structure-plugin/commands/index.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/addon/plugins/article-structure-plugin/commands/recalculate-structure-numbers.ts

@@ -17,6 +17,13 @@ export default function recalculateStructureNumbers(
           indices[i] = 1;
           contexts[i] = parent;
         }
+
+        const startNumber = spec.getStartNumber({ pos, transaction });
+
+        if (startNumber) {
+          indices[i] = startNumber;
+        }
+
         spec.updateNumber({ number: indices[i], pos, transaction });
         indices[i] += 1;
       }

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

@@ -0,0 +1,43 @@
+import { Command } from '@lblod/ember-rdfa-editor';
+
+import { findAncestorOfType } from '../utils/structure';
+import type { ArticleStructurePluginOptions } from '..';
+import recalculateStructureNumbers from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands/recalculate-structure-numbers';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+
+const setStructureStartNumber = (
+  options: ArticleStructurePluginOptions,
+  startNumber: number | null,
+): Command => {
+  return (state, dispatch) => {
+    const { selection, schema } = state;
+
+    const structureSpecs = options.map((type) => schema.nodes[type.name]);
+    const currentStructure = findAncestorOfType(selection, ...structureSpecs);
+
+    if (!currentStructure || currentStructure.pos === -1) {
+      return false;
+    }
+
+    const currentStructureSpec = unwrap(
+      options.find((spec) => spec.name === currentStructure.node.type.name),
+    );
+
+    if (dispatch) {
+      const transaction = state.tr;
+
+      currentStructureSpec.setStartNumber({
+        number: startNumber,
+        pos: currentStructure.pos,
+        transaction,
+      });
+
+      recalculateStructureNumbers(transaction, ...options);
+
+      dispatch(transaction);
+    }
+    return true;
+  };
+};
+
+export default setStructureStartNumber;

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

@@ -38,6 +38,16 @@ 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 }) => Fragment;
   continuous: boolean;
   limitTo?: string;

package/addon/plugins/article-structure-plugin/structures/article-paragraph.ts

@@ -4,10 +4,15 @@ import { v4 as uuid } from 'uuid';
 import {
   ELI,
   SAY,
-  XSD,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 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';
 
 const PLACEHOLDERS = {
   body: 'article-structure-plugin.placeholder.paragraph.body',
@@ -27,13 +32,12 @@ export const articleParagraphSpec: StructureSpec = {
   continuous: false,
   noUnwrap: true,
   constructor: ({ schema, number, intl, state }) => {
-    const numberConverted = number?.toString() ?? '1';
     const translationWithDocLang = getTranslationFunction(state);
     const node = schema.node(
       `article_paragraph`,
       {
         resource: `http://data.lblod.info/paragraphs/${uuid()}`,
-        number: numberConverted,
+        number,
       },
       schema.node(
         'paragraph',
@@ -48,10 +52,7 @@ export const articleParagraphSpec: StructureSpec = {
     );
     return { node, selectionConfig: { relativePos: 1, type: 'node' } };
   },
-  updateNumber: ({ number, pos, transaction }) => {
-    const numberConverted = number.toString();
-    return transaction.setNodeAttribute(pos, 'number', numberConverted);
-  },
+  ...getNumberUtils(),
 };
 
 const contentSelector = `span[property~='${SAY('body').prefixed}'],
@@ -71,7 +72,13 @@ export const article_paragraph: NodeSpec = {
     },
     resource: {},
     number: {
-      default: '1',
+      default: 1,
+    },
+    numberDisplayStyle: {
+      default: 'decimal', // decimal, roman
+    },
+    startNumber: {
+      default: null,
     },
   },
   toDOM(node) {
@@ -81,17 +88,10 @@ export const article_paragraph: NodeSpec = {
         property: node.attrs.property as string,
         typeof: node.attrs.typeof as string,
         resource: node.attrs.resource as string,
+        ...getNumberAttributesFromNode(node),
       },
       ['span', { contenteditable: false }, '§'],
-      [
-        'span',
-        {
-          property: ELI('number').prefixed,
-          datatype: XSD('integer').prefixed,
-          contenteditable: false,
-        },
-        node.attrs.number,
-      ],
+      getNumberDocSpecFromNode(node),
       ['span', { contenteditable: false }, '. '],
       ['span', { property: SAY('body').prefixed }, 0],
     ];
@@ -110,9 +110,14 @@ export const article_paragraph: NodeSpec = {
           element.querySelector(contentSelector) &&
           numberSpan
         ) {
+          const numberAttributes = getNumberAttributeFromElement(
+            element,
+            numberSpan,
+          );
+
           return {
             resource: element.getAttribute('resource'),
-            number: numberSpan.textContent,
+            ...numberAttributes,
           };
         }
         return false;

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

@@ -3,14 +3,15 @@ import { StructureSpec } from '..';
 import {
   constructStructureBodyNodeSpec,
   constructStructureNodeSpec,
+  getNumberDocSpecFromNode,
+  getNumberAttributesFromNode,
+  getNumberUtils,
   getStructureHeaderAttrs,
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
 import {
-  ELI,
   EXT,
   SAY,
-  XSD,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
@@ -32,7 +33,6 @@ export const articleSpec: StructureSpec = {
   },
   continuous: true,
   constructor: ({ schema, number, content, intl, state }) => {
-    const numberConverted = number?.toString() ?? '1';
     const translationWithDocLang = getTranslationFunction(state);
     const node = schema.node(
       `article`,
@@ -40,7 +40,7 @@ export const articleSpec: StructureSpec = {
       [
         schema.node(
           'article_header',
-          { level: 4, number: numberConverted },
+          { level: 4, number: number ?? 1 },
           schema.node('placeholder', {
             placeholderText: translationWithDocLang(
               PLACEHOLDERS.title,
@@ -76,10 +76,7 @@ export const articleSpec: StructureSpec = {
       selectionConfig,
     };
   },
-  updateNumber: ({ number, pos, transaction }) => {
-    const numberConverted = number.toString();
-    return transaction.setNodeAttribute(pos + 1, 'number', numberConverted);
-  },
+  ...getNumberUtils(1),
   content: ({ pos, state }) => {
     const node = unwrap(state.doc.nodeAt(pos));
     return node.child(1).content;
@@ -98,7 +95,13 @@ export const article_header: NodeSpec = {
   defining: true,
   attrs: {
     number: {
-      default: '1',
+      default: 1,
+    },
+    numberDisplayStyle: {
+      default: 'decimal', // decimal, roman
+    },
+    startNumber: {
+      default: null,
     },
     property: {
       default: SAY('heading').prefixed,
@@ -112,17 +115,12 @@ export const article_header: NodeSpec = {
   toDOM(node) {
     return [
       'div',
-      { property: node.attrs.property as string },
+      {
+        property: node.attrs.property as string,
+        ...getNumberAttributesFromNode(node),
+      },
       'Artikel ',
-      [
-        'span',
-        {
-          property: ELI('number').prefixed,
-          datatype: XSD('string').prefixed,
-          contenteditable: false,
-        },
-        node.attrs.number,
-      ],
+      getNumberDocSpecFromNode(node),
       ['span', { contenteditable: false }, ': '],
       [
         'span',
@@ -138,9 +136,11 @@ export const article_header: NodeSpec = {
       tag: 'div',
       getAttrs(element: HTMLElement) {
         const headerAttrs = getStructureHeaderAttrs(element);
+
         if (headerAttrs) {
           return headerAttrs;
         }
+
         return false;
       },
       contentElement: `span[property~='${EXT('title').prefixed}'],

package/addon/plugins/article-structure-plugin/structures/chapter.ts

@@ -2,7 +2,7 @@ import { StructureSpec } from '..';
 import {
   constructStructureBodyNodeSpec,
   constructStructureNodeSpec,
-  romanize,
+  getNumberUtils,
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
 import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
@@ -26,7 +26,6 @@ export const chapterSpec: StructureSpec = {
     removeWithContent: 'article-structure-plugin.remove-with-content.chapter',
   },
   constructor: ({ schema, number, content, intl, state }) => {
-    const numberConverted = romanize(number ?? 1);
     const translationWithDocLang = getTranslationFunction(state);
     const node = schema.node(
       `chapter`,
@@ -34,7 +33,7 @@ export const chapterSpec: StructureSpec = {
       [
         schema.node(
           'structure_header',
-          { level: 4, number: numberConverted },
+          { level: 4, number: number ?? 1, numberDisplayStyle: 'roman' },
           schema.node('placeholder', {
             placeholderText: translationWithDocLang(
               PLACEHOLDERS.title,
@@ -70,10 +69,7 @@ export const chapterSpec: StructureSpec = {
       selectionConfig,
     };
   },
-  updateNumber: ({ number, pos, transaction }) => {
-    const numberConverted = romanize(number);
-    return transaction.setNodeAttribute(pos + 1, 'number', numberConverted);
-  },
+  ...getNumberUtils(1),
   content: ({ pos, state }) => {
     const node = unwrap(state.doc.nodeAt(pos));
     return node.child(1).content;

package/addon/plugins/article-structure-plugin/structures/section.ts

@@ -1,7 +1,7 @@
 import {
   constructStructureBodyNodeSpec,
   constructStructureNodeSpec,
-  romanize,
+  getNumberUtils,
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
 import { StructureSpec } from '..';
@@ -26,7 +26,6 @@ export const sectionSpec: StructureSpec = {
     removeWithContent: 'article-structure-plugin.remove-with-content.section',
   },
   constructor: ({ schema, number, content, intl, state }) => {
-    const numberConverted = romanize(number || 1);
     const translationWithDocLang = getTranslationFunction(state);
     const node = schema.node(
       `section`,
@@ -34,7 +33,7 @@ export const sectionSpec: StructureSpec = {
       [
         schema.node(
           'structure_header',
-          { level: 5, number: numberConverted },
+          { level: 5, number: number ?? 1, numberDisplayStyle: 'roman' },
           schema.node('placeholder', {
             placeholderText: translationWithDocLang(
               PLACEHOLDERS.title,
@@ -70,10 +69,7 @@ export const sectionSpec: StructureSpec = {
       selectionConfig,
     };
   },
-  updateNumber: ({ number, pos, transaction }) => {
-    const numberConverted = romanize(number);
-    return transaction.setNodeAttribute(pos + 1, 'number', numberConverted);
-  },
+  ...getNumberUtils(1),
   content: ({ pos, state }) => {
     const node = unwrap(state.doc.nodeAt(pos));
     return node.child(1).content;

package/addon/plugins/article-structure-plugin/structures/structure-header.ts

@@ -1,11 +1,13 @@
 import { NodeSpec, PNode } from '@lblod/ember-rdfa-editor';
 import {
-  ELI,
   EXT,
   SAY,
-  XSD,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import { getStructureHeaderAttrs } from '../utils/structure';
+import {
+  getNumberDocSpecFromNode,
+  getNumberAttributesFromNode,
+  getStructureHeaderAttrs,
+} from '../utils/structure';
 
 const TAG_TO_LEVEL = new Map([
   ['h1', 1],
@@ -28,7 +30,13 @@ export const structure_header: NodeSpec = {
       default: SAY('heading').prefixed,
     },
     number: {
-      default: '1',
+      default: 1,
+    },
+    numberDisplayStyle: {
+      default: 'decimal', // decimal, roman
+    },
+    startNumber: {
+      default: null,
     },
     level: {
       default: 1,
@@ -41,16 +49,11 @@ export const structure_header: NodeSpec = {
   toDOM(node) {
     return [
       `h${node.attrs.level as number}`,
-      { property: node.attrs.property as string },
-      [
-        'span',
-        {
-          property: ELI('number').prefixed,
-          datatype: XSD('string').prefixed,
-          contenteditable: false,
-        },
-        node.attrs.number,
-      ],
+      {
+        property: node.attrs.property as string,
+        ...getNumberAttributesFromNode(node),
+      },
+      getNumberDocSpecFromNode(node),
       ['span', { contenteditable: false }, '. '],
       [
         'span',
@@ -67,8 +70,12 @@ export const structure_header: NodeSpec = {
       getAttrs(element: HTMLElement) {
         const level = TAG_TO_LEVEL.get(element.tagName.toLowerCase()) ?? 6;
         const headerAttrs = getStructureHeaderAttrs(element);
+
         if (headerAttrs) {
-          return { level, ...headerAttrs };
+          return {
+            level,
+            ...headerAttrs,
+          };
         }
 
         return false;

package/addon/plugins/article-structure-plugin/structures/subsection.ts

@@ -2,7 +2,7 @@ import { StructureSpec } from '..';
 import {
   constructStructureBodyNodeSpec,
   constructStructureNodeSpec,
-  romanize,
+  getNumberUtils,
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
 import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
@@ -28,7 +28,6 @@ export const subsectionSpec: StructureSpec = {
       'article-structure-plugin.remove-with-content.subsection',
   },
   constructor: ({ schema, number, intl, content, state }) => {
-    const numberConverted = romanize(number ?? 1);
     const translationWithDocLang = getTranslationFunction(state);
     const node = schema.node(
       `subsection`,
@@ -36,7 +35,7 @@ export const subsectionSpec: StructureSpec = {
       [
         schema.node(
           'structure_header',
-          { level: 6, number: numberConverted },
+          { level: 6, number: number ?? 1, numberDisplayStyle: 'roman' },
           schema.node('placeholder', {
             placeholderText: translationWithDocLang(
               PLACEHOLDERS.title,
@@ -72,10 +71,7 @@ export const subsectionSpec: StructureSpec = {
       selectionConfig,
     };
   },
-  updateNumber: ({ number, pos, transaction }) => {
-    const numberConverted = romanize(number);
-    return transaction.setNodeAttribute(pos + 1, 'number', numberConverted);
-  },
+  ...getNumberUtils(1),
   content: ({ pos, state }) => {
     const node = unwrap(state.doc.nodeAt(pos));
     return node.child(1).content;

package/addon/plugins/article-structure-plugin/structures/title.ts

@@ -2,7 +2,7 @@ import { StructureSpec } from '..';
 import {
   constructStructureBodyNodeSpec,
   constructStructureNodeSpec,
-  romanize,
+  getNumberUtils,
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
 import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
@@ -26,7 +26,6 @@ export const titleSpec: StructureSpec = {
     removeWithContent: 'article-structure-plugin.remove-with-content.title',
   },
   constructor: ({ schema, number, content, intl, state }) => {
-    const numberConverted = romanize(number ?? 1);
     const translationWithDocLang = getTranslationFunction(state);
     const node = schema.node(
       `title`,
@@ -34,7 +33,7 @@ export const titleSpec: StructureSpec = {
       [
         schema.node(
           'structure_header',
-          { level: 3, number: numberConverted },
+          { level: 3, number: number ?? 1, numberDisplayStyle: 'roman' },
           schema.node('placeholder', {
             placeholderText: translationWithDocLang(
               PLACEHOLDERS.heading,
@@ -70,10 +69,7 @@ export const titleSpec: StructureSpec = {
       selectionConfig,
     };
   },
-  updateNumber: ({ number, pos, transaction }) => {
-    const numberConverted = romanize(number);
-    return transaction.setNodeAttribute(pos + 1, 'number', numberConverted);
-  },
+  ...getNumberUtils(1),
   content: ({ pos, state }) => {
     const node = unwrap(state.doc.nodeAt(pos));
     return node.child(1).content;

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.1",
+  "version": "16.1.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

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[];