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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @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
+
+- [#375](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/375) [`93d3f7b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/93d3f7b63bc0e720e9f6f328ffa9a384947ca31f) Thanks [@elpoelma](https://github.com/elpoelma)! - Widen support for `ember-intl` to include version 5.7.2 due to outstanding issues with the 6.x releases.
+
 ## 16.0.0
 
 ### Major 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;