@lblod/ember-rdfa-editor-lblod-plugins 8.4.1 → 9.0.0

package/CHANGELOG.md

@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [9.0.0] - 2023-07-24
+
+### Added
+- Addition of documentation on the article-structure plugin
+
+### Fixed
+- When a number is too big to be converted to words, display it numerically.
+- Can only insert a number variable with a minimum that is smaller than its maximum
+- Fetch public snippets
+### Changed
+- Make `errorMessage` of number input modal reactive to attribute changes
+- Number variable input box has a cleaner UI by adjusting the top margins.
+- Demo uses `initialize` and `docWithConfig` introduced in `ember-rdfa-editor@4.0.0`
+### Dependencies
+- Bumps `@lblod/ember-rdfa-editor` from 3.10.0 to 4.0.0
+- Bumps `@typescript-eslint/parser` from 5.60.0 to 5.61.0
+- Bumps `@tsconfig/ember` from 1.0.1 to 3.0.0
+- Bumps `fetch-sparql-endpoint` from 3.1.1 to 3.3.3
+- Bumps `eslint` from 7.32.0 to 8.44.0
+- Bumps `semver` from 5.7.1 to 5.7.2
+- Bumps `prettier` from 2.8.8 to 3.0.0
+- Bumps `eslint-plugin-prettier` to 5.0.0
+- Bumps `@types/ember__utils` from 4.0.2 to 4.0.3
+- Bumps `@types/ember__controller` from 4.0.3 to 4.0.5
+- Bumps `tracked-built-ins` from 3.1.0 to 3.1.1
+- Bumps `word-wrap` from 1.2.3 to 1.2.4
+- Pin `ember-auto-import` to 2.5.x
+
+
 ## [8.4.1] - 2023-07-06
 
 ### Fixed
@@ -553,7 +582,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.1...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.0...HEAD
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
 [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
@@ -569,6 +598,7 @@ 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
+[9.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.1...v9.0.0
 [8.4.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.0...v8.4.1
 [8.4.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.3.0...v8.4.0
 [8.3.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.2...v8.3.0

package/README.md

@@ -19,6 +19,7 @@ ember install ember-rdfa-editor-lblod-plugins
 
 This addon contains the following editor plugins:
 
+* [article-structure-plugin](#article-structure-plugin)
 * [besluit-type-plugin](#besluit-type-plugin)
 * [citaten-plugin](#citaten-plugin)
 * [decision-plugin](#decision-plugin)
@@ -62,6 +63,137 @@ You can configure your editor like this:
 
 You will have 2 anchor points where to put your plugins: `top` for a toolbar, and `aside` for plugin cards.
 
+## article-structure plugin
+
+Plugin which allows a user to insert different types of structures, like chapters, sections, articles etc.
+
+This plugin provides two widgets which can be added to the sidebar.
+### The structure insertion widget
+
+This widget displays a series of buttons which allows the user to insert the configured widgets.
+
+You can add this widget to the sidebar using the following syntax:
+```hbs
+<ArticleStructurePlugin::ArticleStructureCard
+  @controller={{this.controller}}
+  @options={{this.config.structures}}
+/>
+```
+The widgets accepts two properties:
+- `controller`: an instance of a `SayController` which the widgets uses two insert structures into a document
+- `options`: a list of structure configurations which are supported.
+
+### The structure context widget
+
+This widget displays a context card in the sidebar when a structure is selected by the user. The card displays controls which allow users to move a structure around or remove it alltogether.
+
+You can add this widget to the sidebar using the following syntax:
+```hbs
+<ArticleStructurePlugin::StructureCard
+  @controller={{this.controller}}
+  @options={{this.config.structures}}
+/>
+```
+
+Just like the insertion widget, this widget also accepts the same two properties.
+
+### Configuring the plugin
+Both widgets require an `options` property which allows you to configure which type of structures are supported, which is a list of `StructureSpec` objects.
+
+E.g. a regulatory statement document will typically have the following configuration of structures:
+
+```js
+export const STRUCTURE_SPECS: ArticleStructurePluginOptions = [
+  titleSpec,
+  chapterSpec,
+  sectionSpec,
+  subsectionSpec,
+  articleSpec,
+  articleParagraphSpec,
+];
+```
+
+Each of these entries is a seperate `StructureSpec` object. The `StructureSpec` interface is defined as:
+```js
+export type StructureSpec = {
+  name: SpecName; // the name of the corresponding structure node-spec
+  translations: { // the ember-intl translation keys which are to be used in the widgets 
+    insert: string;
+    move?: {
+      up?: string;
+      down?: string;
+    };
+    remove?: string;
+    removeWithContent?: string;
+  };
+  constructor: (args: { // a `constructor` method which creates an instance of the structure node
+    schema: Schema;
+    number?: number;
+    intl?: IntlService;
+    content?: PNode | Fragment;
+  }) => {
+    node: PNode;
+    selectionConfig: {
+      relativePos: number;
+      type: 'node' | 'text';
+    };
+  };
+  updateNumber: (args: { // a method which produces a transaction which updates the number of a structure when it is moved around
+    number: number;
+    pos: number;
+    transaction: Transaction;
+  }) => Transaction;
+  content?: (args: { pos: number; state: EditorState }) => Fragment;
+  continuous: boolean; // boolean which indicates whether the numbering of this structure type is continuous or should restart with each different parent
+  limitTo?: string; // string which indicates a node-spec name to which the insertion of the structure should be limited to
+  noUnwrap?: boolean; // disable unwrapping of the structure when it is removed and just remove it with it content alltogether
+};
+```
+
+Note: for each structure you configure, the corresponding node-spec also needs to be added to the schema.
+
+By default, this plugin already exports some structure-specs and their corresponding node-specs:
+
+```js
+const STRUCTURE_SPECS: ArticleStructurePluginOptions = [
+  titleSpec,
+  chapterSpec,
+  sectionSpec,
+  subsectionSpec,
+  articleSpec,
+  articleParagraphSpec,
+];
+
+const STRUCTURE_NODES = {
+  structure_header,
+  title,
+  title_body,
+  chapter,
+  chapter_body,
+  section,
+  section_body,
+  subsection,
+  subsection_body,
+  article,
+  article_header,
+  article_body,
+  article_paragraph,
+};
+
+```
+
+You can import these using:
+```js
+import {
+  STRUCTURE_NODES,
+  STRUCTURE_SPECS,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/structures';
+```
+
+
+Additional examples can be found in the two controllers (besluit-sample and regulatory-statement-sample) of the dummy-app contained in this repository.
+
+
 ## besluit-type-plugin
 
 Plugin which allows a user to change the type of a [besluit](https://data.vlaanderen.be/ns/besluit#Besluit).

package/addon/components/address-plugin/insert.ts

@@ -77,8 +77,8 @@ export default class AddressPluginInsertComponent extends Component<Args> {
             },
             this.schema.node('paragraph', null, [
               this.schema.text(address.volledigAdres.geografischeNaam.spelling),
-            ])
-          )
+            ]),
+          ),
         );
 
         return tr;

package/addon/components/address-plugin/utils.ts

@@ -9,11 +9,11 @@ export const replaceAccents = (string: string) =>
 export async function getSuggestedLocations(query: string) {
   const result = await fetch(
     `${LOC_GEOPUNT_ENDPOINT}?q=${encodeURIComponent(
-      query.replace(/^"(.*)"$/, '$1')
+      query.replace(/^"(.*)"$/, '$1'),
     )}&c=10&type=Housenumber`,
     {
       method: 'GET',
-    }
+    },
   );
 
   const jsonResult = (await result.json()) as {

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

@@ -29,7 +29,7 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
   moveStructure(direction: 'up' | 'down') {
     this.controller.doCommand(
       moveSelectedStructure(this.structureTypes, direction, this.intl),
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
     this.controller.focus();
   }
@@ -40,7 +40,7 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
       if (withContent || this.currentStructureType.noUnwrap) {
         this.controller.doCommand(
           removeStructure(this.structure, this.structureTypes),
-          { view: this.controller.mainEditorView }
+          { view: this.controller.mainEditorView },
         );
       } else {
         this.controller.doCommand(
@@ -49,9 +49,9 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
               ...this.structure,
               type: this.currentStructureType,
             },
-            this.structureTypes
+            this.structureTypes,
           ),
-          { view: this.controller.mainEditorView }
+          { view: this.controller.mainEditorView },
         );
       }
     }
@@ -69,7 +69,7 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
 
   get structureNodeSpecs() {
     return this.structureTypes.map(
-      (type) => this.controller.schema.nodes[type.name]
+      (type) => this.controller.schema.nodes[type.name],
     );
   }
 
@@ -82,7 +82,7 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
     if (this.structure) {
       const { node: structureNode } = this.structure;
       return this.structureTypes.find(
-        (spec) => spec.name === structureNode.type.name
+        (spec) => spec.name === structureNode.type.name,
       );
     }
     return;
@@ -104,7 +104,7 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
       return this.intl.t(translation);
     } else {
       return this.intl.t(
-        'article-structure-plugin.remove-with-content.default'
+        'article-structure-plugin.remove-with-content.default',
       );
     }
   }
@@ -116,14 +116,14 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
   get canMoveDown() {
     return this.controller.checkCommand(
       moveSelectedStructure(this.structureTypes, 'down', this.intl),
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
   }
 
   get canMoveUp() {
     return this.controller.checkCommand(
       moveSelectedStructure(this.structureTypes, 'up', this.intl),
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
   }
 
@@ -138,9 +138,9 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
               ...this.structure,
               type: this.currentStructureType,
             },
-            this.structureTypes
+            this.structureTypes,
           ),
-          { view: this.controller.mainEditorView }
+          { view: this.controller.mainEditorView },
         );
       }
     }

package/addon/components/besluit-type-plugin/besluit-type-select.ts

@@ -11,7 +11,7 @@ export default class BesluitTypePluginBesluitTypeSelectComponent extends Compone
   constructor(parent: unknown, args: Args) {
     super(parent, args);
     this.besluitTypes = this.args.besluitTypes.sort((a, b) =>
-      a.label > b.label ? 1 : -1
+      a.label > b.label ? 1 : -1,
     );
   }
 
@@ -19,7 +19,7 @@ export default class BesluitTypePluginBesluitTypeSelectComponent extends Compone
   search(term: string) {
     const lowerTerm = term.toLowerCase();
     return this.args.besluitTypes.filter((besluitType) =>
-      besluitType.label.toLowerCase().includes(lowerTerm)
+      besluitType.label.toLowerCase().includes(lowerTerm),
     );
   }
 }

package/addon/components/besluit-type-plugin/toolbar-dropdown.ts

@@ -66,7 +66,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     const classificatie = await bestuurseenheid.get('classificatie');
     const types = await fetchBesluitTypes(
       classificatie.uri,
-      this.args.options.endpoint
+      this.args.options.endpoint,
     );
     return types;
   });
@@ -75,7 +75,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     const selection = this.controller.mainEditorState.selection;
     const besluit = findAncestorOfType(
       selection,
-      this.controller.schema.nodes['besluit']
+      this.controller.schema.nodes['besluit'],
     );
     if (!besluit) {
       return undefined;
@@ -106,12 +106,12 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     }
     const besluit = findAncestorOfType(
       this.controller.mainEditorState.selection,
-      this.controller.schema.nodes['besluit']
+      this.controller.schema.nodes['besluit'],
     );
     const besluitTypeof = besluit?.node.attrs.typeof as string;
     const besluitTypesUris = besluitTypeof.split(' ');
     const besluitTypeRelevant = besluitTypesUris.find((type) =>
-      type.includes('https://data.vlaanderen.be/id/concept/BesluitType/')
+      type.includes('https://data.vlaanderen.be/id/concept/BesluitType/'),
     );
     if (besluitTypeRelevant) {
       this.previousBesluitType = besluitTypeRelevant;
@@ -168,7 +168,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
   findBesluitTypeParent(
     besluitType?: BesluitType,
     array: BesluitType[] | null = this.types.value,
-    parent?: BesluitType
+    parent?: BesluitType,
   ): BesluitType | undefined {
     if (!besluitType || !array) {
       return;
@@ -186,7 +186,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
 
   findBesluitTypeByURI(
     uri: string,
-    types = this.types.value
+    types = this.types.value,
   ): BesluitType | undefined {
     if (uri && types) {
       for (const besluitType of types) {
@@ -209,12 +209,12 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
       if (this.previousBesluitType) {
         this.controller.doCommand(
           removeType(this.currentBesluitRange.from, this.previousBesluitType),
-          { view: this.controller.mainEditorView }
+          { view: this.controller.mainEditorView },
         );
       }
       this.controller.doCommand(
         addType(this.currentBesluitRange.from, this.besluitType.uri),
-        { view: this.controller.mainEditorView }
+        { view: this.controller.mainEditorView },
       );
     }
   }

package/addon/components/citation-plugin/citation-card.ts

@@ -51,7 +51,7 @@ export default class CitationCardComponent extends Component<Args> {
   @action
   update() {
     if (this.activeDecoration) {
-      const { legislationTypeUri, searchText } = this.activeDecoration?.spec;
+      const { legislationTypeUri, searchText } = this.activeDecoration.spec;
       if (legislationTypeUri !== this.documentLegislationType) {
         this.documentLegislationType = legislationTypeUri;
       }
@@ -159,7 +159,7 @@ export default class CitationCardComponent extends Component<Args> {
   selectLegislationType(type: string) {
     type = type.toLowerCase();
     const found = LEGISLATION_TYPE_CONCEPTS.find(
-      (c) => c.label.toLowerCase() === type
+      (c) => c.label.toLowerCase() === type,
     );
     this.cardLegislationType = found
       ? found.value
@@ -205,10 +205,10 @@ export default class CitationCardComponent extends Component<Args> {
           .replaceRangeWith(
             from,
             to,
-            citedText(this.controller.schema, title, uri)
+            citedText(this.controller.schema, title, uri),
           )
           .scrollIntoView(),
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
     this.controller.focus();
   }
@@ -227,10 +227,10 @@ export default class CitationCardComponent extends Component<Args> {
           .replaceRangeWith(
             from,
             to,
-            citedText(this.controller.schema, title, uri)
+            citedText(this.controller.schema, title, uri),
           )
           .scrollIntoView(),
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
   }
 

package/addon/components/citation-plugin/citation-insert.ts

@@ -49,7 +49,7 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
   selectLegislationType(type: string) {
     type = type.toLowerCase();
     const found = LEGISLATION_TYPE_CONCEPTS.find(
-      (c) => c.label.toLowerCase() === type
+      (c) => c.label.toLowerCase() === type,
     );
     this.legislationType = found
       ? found.value
@@ -63,7 +63,7 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
     const { selection } = this.controller.mainEditorState;
     if (this.config.type === 'ranges') {
       const ranges = this.config.activeInRanges(
-        this.controller.mainEditorState
+        this.controller.mainEditorState,
       );
       for (const range of ranges) {
         if (selection.from > range[0] && selection.from < range[1]) {
@@ -74,7 +74,7 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
     } else {
       const nodeTypes = this.config.activeInNodeTypes(
         this.controller.schema,
-        this.controller.mainEditorState
+        this.controller.mainEditorState,
       );
       // if the doc node is included, the button should always be active
       // the findParentNodeOfType util we import does NOT consider the doc node
@@ -120,11 +120,11 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
                 citedText(this.controller.schema, title, uri),
               ]),
               0,
-              0
-            )
+              0,
+            ),
           )
           .scrollIntoView(),
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
   }
 
@@ -143,7 +143,7 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
           this.controller.schema.text(`${type} `),
           citedText(this.controller.schema, title, uri),
         ]),
-      { view: this.controller.mainEditorView }
+      { view: this.controller.mainEditorView },
     );
   }
 }

package/addon/components/citation-plugin/citations/search-modal.ts

@@ -89,10 +89,10 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
 
   get legislationSelected() {
     const found = LEGISLATION_TYPE_CONCEPTS.find(
-      (c) => c.value === this.legislationTypeUri
+      (c) => c.value === this.legislationTypeUri,
     );
     return capitalize(
-      found ? found.label : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).label
+      found ? found.label : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).label,
     );
   }
 
@@ -223,7 +223,7 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
 
 function getLocalizedMonths(
   intl: IntlService,
-  monthFormat: Intl.DateTimeFormatOptions['month'] = 'long'
+  monthFormat: Intl.DateTimeFormatOptions['month'] = 'long',
 ) {
   const someYear = 2021;
   return [...Array(12).keys()].map((monthIndex) => {
@@ -234,7 +234,7 @@ function getLocalizedMonths(
 
 function getLocalizedDays(
   intl: IntlService,
-  weekdayFormat: Intl.DateTimeFormatOptions['weekday'] = 'long'
+  weekdayFormat: Intl.DateTimeFormatOptions['weekday'] = 'long',
 ) {
   const someSunday = new Date('2021-01-03');
   return [...Array(7).keys()].map((index) => {

package/addon/components/document-title-plugin/insert-title-card.ts

@@ -16,12 +16,12 @@ export default class InsertTitleCardComponent extends Component<Args> {
     this.args.controller.doCommand(
       insertDocumentTitle({
         placeholder: this.intl.t(
-          'document-title-plugin.document-title-placeholder'
+          'document-title-plugin.document-title-placeholder',
         ),
       }),
       {
         view: this.args.controller.mainEditorView,
-      }
+      },
     );
     this.args.controller.focus();
   }
@@ -30,12 +30,12 @@ export default class InsertTitleCardComponent extends Component<Args> {
     return this.args.controller.checkCommand(
       insertDocumentTitle({
         placeholder: this.intl.t(
-          'document-title-plugin.document-title-placeholder'
+          'document-title-plugin.document-title-placeholder',
         ),
       }),
       {
         view: this.args.controller.mainEditorView,
-      }
+      },
     );
   }
 }

package/addon/components/generic-rdfa-variable/insert-menu.ts

@@ -87,8 +87,8 @@ export default class GenericRdfaVariableInsertMenu extends Component<Args> {
     this.controller.withTransaction((tr) => {
       return tr.replaceSelectionWith(
         ProseParser.fromSchema(this.schema).parse(
-          domParser.parseFromString(editorContent, 'text/html')
-        )
+          domParser.parseFromString(editorContent, 'text/html'),
+        ),
       );
     });
 

package/addon/components/hover-tooltip.ts

@@ -20,7 +20,7 @@ export default class HoverTooltip extends Component<Args> {
         element.removeEventListener('blur', this.hideTooltip);
       };
     },
-    { eager: false }
+    { eager: false },
   );
 
   @tracked tooltipOpen = false;

package/addon/components/import-snippet-plugin/card.ts

@@ -24,7 +24,7 @@ export default class ImportSnippetPluginCard extends Component<Args> {
   get insertRange() {
     const { selection } = this.controller.mainEditorState;
     const besluit = findParentNodeOfType(this.controller.schema.nodes.besluit)(
-      selection
+      selection,
     );
     if (besluit) {
       return {
@@ -45,7 +45,7 @@ export default class ImportSnippetPluginCard extends Component<Args> {
         (tr) => {
           return tr.replaceRangeWith(insertRange.from, insertRange.to, node);
         },
-        { view: this.controller.mainEditorView }
+        { view: this.controller.mainEditorView },
       );
       this.importRdfaSnippet.removeSnippet(snippet);
     } else {
@@ -57,7 +57,7 @@ export default class ImportSnippetPluginCard extends Component<Args> {
   generateSnippetHtml(snippet: RdfaSnippet, type: string) {
     const domParser = new DOMParser();
     const contentFragment = ProseParser.fromSchema(
-      this.controller.schema
+      this.controller.schema,
     ).parse(domParser.parseFromString(snippet.content, 'text/html')).content;
     const { schema } = this.controller;
     if (type === 'attachment') {
@@ -83,11 +83,11 @@ export default class ImportSnippetPluginCard extends Component<Args> {
               schema.node(
                 'block_rdfa',
                 { property: 'http://www.w3.org/ns/prov#value' },
-                contentFragment
+                contentFragment,
               ),
-            ]
+            ],
           ),
-        ]
+        ],
       );
     } else {
       return schema.node(
@@ -107,11 +107,11 @@ export default class ImportSnippetPluginCard extends Component<Args> {
               schema.node(
                 'block_rdfa',
                 { property: 'http://www.w3.org/ns/prov#value' },
-                contentFragment
+                contentFragment,
               ),
-            ]
+            ],
           ),
-        ]
+        ],
       );
     }
   }

package/addon/components/rdfa-date-plugin/card.ts

@@ -84,7 +84,7 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
       (node) => {
         return !formatContainsTime(node.attrs.format);
       },
-      this.selectedDateNode
+      this.selectedDateNode,
     );
   }
 
@@ -95,14 +95,14 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
         const format = node.attrs.format as string;
         return SECONDS_REGEX.test(format.replace(/'[^']*'|"[^"]*"/g, ''));
       },
-      this.selectedDateNode
+      this.selectedDateNode,
     );
   }
 
   get documentDateFormat(): Option<string> {
     return optionMap(
       (node) => node.attrs.format as string,
-      this.selectedDateNode
+      this.selectedDateNode,
     );
   }
 
@@ -110,11 +110,11 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
     if (this.documentDateFormat) {
       if (this.onlyDate) {
         return this.formats.find(
-          (format) => format.dateFormat === this.documentDateFormat
+          (format) => format.dateFormat === this.documentDateFormat,
         );
       } else {
         return this.formats.find(
-          (format) => format.dateTimeFormat === this.documentDateFormat
+          (format) => format.dateTimeFormat === this.documentDateFormat,
         );
       }
     }
@@ -223,7 +223,7 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
       if (format) {
         this.setDateFormat(
           this.onlyDate ? format.dateFormat : format.dateTimeFormat,
-          false
+          false,
         );
       }
     }