@lblod/ember-rdfa-editor-lblod-plugins 5.0.1 → 6.0.0

package/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [6.0.0] - 2023-05-05
+### Changed
+- Use plugin configuration instead of ember environment in all the plugins
+- Insert address plugin
+
+### Added
+- validation plugin
+ 
+### Deprecated
+- the decision-plugin card component is now deprecated in favor of the host app's choice of insert button
+
 ## [5.0.1] - 2023-04-07
 ### Fixed
 - fix deprecated use of modifier without specifying eagerness
@@ -412,7 +423,8 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v5.0.1...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v6.0.0...HEAD
+[6.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v5.0.1...v6.0.0
 [5.0.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v5.0.0...v5.0.1
 [5.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.2...v5.0.0
 [4.0.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.1...v4.0.2

package/README.md

@@ -1,29 +1,24 @@
 # ember-rdfa-editor-lblod-plugins
 
-
-Ember v2 addon which bundles a collection of [ember-rdfa-editor](https://github.com/lblod/ember-rdfa-editor) plugins related to the LBLOD Project.
-
+Ember v2 addon which bundles a collection of [ember-rdfa-editor](https://github.com/lblod/ember-rdfa-editor) plugins
+related to the LBLOD Project.
 
 ## Compatibility
 
-
 * Ember.js v3.28 or above
 * Embroider or ember-auto-import v2
 * Node 18 or above
 
-
 ## Installation
 
-
 ```
 ember install ember-rdfa-editor-lblod-plugins
 ```
 
-
 ## General addon information
 
-
 This addon contains the following editor plugins:
+
 * besluit-type-plugin
 * citaten-plugin
 * import-snippet-plugin
@@ -33,6 +28,7 @@ This addon contains the following editor plugins:
 * standard-template-plugin
 * table-of-contents-plugin
 * template-variable-plugin
+* validation-plugin
 
 You can configure your editor like this:
 ```hbs
@@ -61,8 +57,8 @@ You can configure your editor like this:
   </:aside>
 </EditorContainer>
 ```
-You will have 2 anchor points where to put your plugins: `top` for a toolbar, and `aside` for plugin cards.
 
+You will have 2 anchor points where to put your plugins: `top` for a toolbar, and `aside` for plugin cards.
 
 ## besluit-type-plugin
 
@@ -70,10 +66,18 @@ Plugin which allows a user to change the type of a [besluit](https://data.vlaand
 
 This plugin needs to be added to the toolbar as a dropdown with the following syntax:
 ```hbs
-  <BesluitTypePlugin::ToolbarDropdown @controller={{this.controller}}/>
+  <BesluitTypePlugin::ToolbarDropdown @controller={{this.controller}} @options={{this.config.besluitType}}/>
+```
+
+You can need to specify the endpoint from which the plugin will fetch the types
+```js
+{
+  endpoint: 'https://centrale-vindplaats.lblod.info/sparql',
+}
 ```
 
 ## citaten-plugin
+
 Plugin which allows a user to insert references to a legal resource or legal expression into the document.
 
 This plugin provides a card that needs to be added to the sidebar of the editor like
@@ -127,7 +131,10 @@ const configB = {
 };
 ```
 ### Using the plugin
-If used with the example configuration provided this plugin can be triggered by typing one of the following in the correct RDFa context (the [besluit:motivering](http://data.vlaanderen.be/ns/besluit#motivering) of a [besluit:Besluit](https://data.vlaanderen.be/ns/besluit#Besluit)).
+
+If used with the example configuration provided this plugin can be triggered by typing one of the following in the correct RDFa context (
+the [besluit:motivering](http://data.vlaanderen.be/ns/besluit#motivering) of
+a [besluit:Besluit](https://data.vlaanderen.be/ns/besluit#Besluit)).
 
 * [specification]**decreet** [words to search for] *(e.g. "gemeentedecreet wijziging")*
 * **omzendbrief** [words to search for]
@@ -143,9 +150,12 @@ If used with the example configuration provided this plugin can be triggered by
 * **ministerieel besluit** [words to search for]
 * **genummerd besluit** [words to search for]
 
-You should be able to add a reference manually by clicking on the `Insert` > `Insert reference` item in the Insert menu located on the top right of the editor. This will open the advanced search window. **Note** that this will only be avaliable in the proper context (see above in this section).
+You should be able to add a reference manually by clicking on the `Insert` > `Insert reference` item in the Insert menu
+located on the top right of the editor. This will open the advanced search window. **Note** that this will only be
+avaliable in the proper context (see above in this section).
 
 ## import-snippet-plugin
+
 Plugin allowing importing of external RDFA snippets and inserting it in the document.
 
 The plugin has a card that needs to be added to the sidebar:
@@ -155,7 +165,8 @@ The plugin has a card that needs to be added to the sidebar:
 
 ### Using the plugin
 
-This plugin provides an Ember service, `import-rdfa-snippet` which allows you to download rdfa snippets in the following manner:
+This plugin provides an Ember service, `import-rdfa-snippet` which allows you to download rdfa snippets in the following
+manner:
 
 ```js
 import { inject as service } from '@ember/service';
@@ -164,15 +175,18 @@ import { inject as service } from '@ember/service';
 // An entry point to download the resouce (e.g a route) in your host app.
 // (...)
 
-    let downloadData = { source: 'http://remote/resource.html' }
-    await this.importRdfaSnippet.downloadSnippet(downloadData);
+let downloadData = { source: 'http://remote/resource.html' }
+await this.importRdfaSnippet.downloadSnippet(downloadData);
 ```
 
-After having downloaded a snippet, a user can use the plugin in the Gelinkt Notuleren application (https://github.com/lblod/frontend-gelinkt-notuleren). 
+After having downloaded a snippet, a user can use the plugin in the Gelinkt Notuleren
+application (https://github.com/lblod/frontend-gelinkt-notuleren).
 
-When opening a new document, users will get the option to either include the snippet data in the document or as an attachment.
+When opening a new document, users will get the option to either include the snippet data in the document or as an
+attachment.
 
 ## insert-variable-plugin
+
 Plugin which allows users to insert variable placeholders into a document.
 
 The plugin provides a card that needs to be attached to the editor sidebar like
@@ -186,28 +200,39 @@ The plugin provides a card that needs to be attached to the editor sidebar like
 ### Configuring the plugin
 
 The plugin can be configured through the following optional attributes that can be added as a json to the options attribute of the card:
-- `publisher`: the URI of a specific codelist publisher which you can use if you want to filter the codelists by its publisher.
-- `defaultEndpoint`: The default endpoint where the codelists are fetched, this is also the variable that gets passed to the fetchSubtypes and template function
-- `variableTypes`: a custom list of variable types you want the plugin to use. This list can contain the following default variable types: `text`, `number`,`date`,`location` and `codelist`. Additionally this list can also contain custom variable types, configured by the following three sub-attributes:
+
+- `publisher`: the URI of a specific codelist publisher which you can use if you want to filter the codelists by its
+  publisher.
+- `defaultEndpoint`: The default endpoint where the codelists are fetched, this is also the variable that gets passed to
+  the fetchSubtypes and template function
+- `variableTypes`: a custom list of variable types you want the plugin to use. This list can contain the following
+  default variable types: `text`, `number`,`date`,`location` and `codelist`. Additionally this list can also contain
+  custom variable types, configured by the following three sub-attributes:
   * `label`: the label of the custom variable type
-  * `fetchSubTypes` (optional): a function which returns a list of possible variable values. The function takes two optional arguments: an `endpoint` and a `publisher`.
+  * `fetchSubTypes` (optional): a function which returns a list of possible variable values. The function takes two
+    optional arguments: an `endpoint` and a `publisher`.
   * `constructor`: function which returns a prosemirror node to be inserted, the function takes three arguments, the prosemirror `schema`, the `endpoint` and the `selectedSubtype` if you are using subtypes.
 
 #### Example
 
 ```js
 {
-  publisher: 'http://data.lblod.info/id/bestuurseenheden/141d9d6b-54af-4d17-b313-8d1c30bc3f5b',
-  defaultEndpoint: 'https://dev.roadsigns.lblod.info/sparql',
-  variableTypes: [
-    'text',
-    'number',
-    'date',
-    'location',
-    'codelist',
-    {
-      label: 'Simple Variable',
-      constructor: (schema) => {
+  
+    publisher: 'http://data.lblod.info/id/bestuurseenheden/141d9d6b-54af-4d17-b313-8d1c30bc3f5b',
+      defaultEndpoint
+  :
+    'https://dev.roadsigns.lblod.info/sparql',
+      variableTypes
+  :
+    [
+      'text',
+      'number',
+      'date',
+      'location',
+      'codelist',
+      {
+        label: 'Simple Variable',
+        constructor: (schema) => {
         const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
         const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
         return schema.node(
@@ -220,27 +245,27 @@ The plugin can be configured through the following optional attributes that can
           schema.node('placeholder', { placeholderText: 'text' })
         );
       },
-    },
-    {
-      label: 'Complex Variable',
-      fetchSubtypes: async (endpoint, publisher) => {
-        const subtypes = [
-          {
-            uri: '1',
-            label: '1',
-          },
-          {
-            uri: '2',
-            label: '2',
-          },
-          {
-            uri: '3',
-            label: '3',
-          },
-        ];
-        return subtypes;
       },
-      constructor: (schema, endpoint, selectedSubtype) => {
+      {
+        label: 'Complex Variable',
+        fetchSubtypes: async (endpoint, publisher) => {
+          const subtypes = [
+            {
+              uri: '1',
+              label: '1',
+            },
+            {
+              uri: '2',
+              label: '2',
+            },
+            {
+              uri: '3',
+              label: '3',
+            },
+          ];
+          return subtypes;
+        },
+        constructor: (schema, endpoint, selectedSubtype) => {
         const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
         const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
         return schema.node(
@@ -261,12 +286,14 @@ The plugin can be configured through the following optional attributes that can
   ],
 }
 ```
-### Using the plugin
 
-When the insert-variable-plugin is enabled, users will have the option to insert a variable into a document through a card which pops up in the sidebar of the editor.
+### Using the plugin
 
+When the insert-variable-plugin is enabled, users will have the option to insert a variable into a document through a
+card which pops up in the sidebar of the editor.
 
 ## rdfa-date-plugin
+
 Plugin to insert and modify semantic dates and timestamps in an editor document.
 
 This plugin provides a card to modify dates that needs to be added to the editor sidebar like
@@ -296,7 +323,9 @@ You will also need to add the date node with the following configuration (being
 ```
 
 ## roadsign-regulation-plugin
-A plugin that fetches data from the mow regulation and roadsign registry and allows users to insert roadsign regulations inside an editor document.
+
+A plugin that fetches data from the mow regulation and roadsign registry and allows users to insert roadsign regulations
+inside an editor document.
 
 This plugin provides a card that needs to be added to the editor sidebar like:
 
@@ -304,10 +333,20 @@ This plugin provides a card that needs to be added to the editor sidebar like:
   <RoadsignRegulationPlugin::RoadsignRegulationCard @controller={{this.controller}}/>
 ```
 
-The default endpoint the plugin will query is https://roadsigns.lblod.info/sparql . This can be overwritten by setting `roadsignRegulationPlugin.endpoint` in your `config/environment.js`.
+You will need to set the following configuration
+```js
+{
+  endpoint: 'https://dev.roadsigns.lblod.info/sparql',
+  imageBaseUrl: 'https://register.mobiliteit.vlaanderen.be/',
+}
+```
+The `endpoint` from where the plugin will fetch the roadsigns, and the `imageBaseUrl` is a fallback for the images that don't have a baseUrl specified, probably you won't need it if your data is correctly constructed
 
 ## standard-template-plugin
-Plugin which allows users to insert standard templates in the editor. Depending on the position of the cursor or selected text, a dropdown will appear in the toolbar of the editor that lets you insert a template for the proper context at the location of the cursor.
+
+Plugin which allows users to insert standard templates in the editor. Depending on the position of the cursor or
+selected text, a dropdown will appear in the toolbar of the editor that lets you insert a template for the proper
+context at the location of the cursor.
 
 In order to use this plugin you will need to add its card:
 ```hbs
@@ -321,12 +360,16 @@ When creating a template in your database, the following properties are used by
 * the title of the template (`title`)
 * its HTML content (`content`)
 * the words of the document the template should match on (`matches`)
-* the contexts in which it should be active (`contexts`) 
+* the contexts in which it should be active (`contexts`)
 * the contexts in which it should not be active (`disabled-in-contexts`)
 
 ### Using the plugin
 
-The plugin will search for RDFa contexts in the content of the editor and the editor itself. Based on the contexts, the plugin will show possible templates to be added at the location of the cursor. E.g. if an element in the editor has the `typeof="besluit:BehandelingVanAgendapunt"` attribute, the plugin will show the templates related to [`besluit:BehandelingVanAgendapunt`](http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt) in the dropdown menu. This attribute can be set on an element in the content of the editor or predefined in the editor itself.
+The plugin will search for RDFa contexts in the content of the editor and the editor itself. Based on the contexts, the
+plugin will show possible templates to be added at the location of the cursor. E.g. if an element in the editor has
+the `typeof="besluit:BehandelingVanAgendapunt"` attribute, the plugin will show the templates related
+to [`besluit:BehandelingVanAgendapunt`](http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt) in the dropdown
+menu. This attribute can be set on an element in the content of the editor or predefined in the editor itself.
 
 ## table-of-contents-plugin
 
@@ -340,8 +383,6 @@ In order to enable the plugin you need to add the table of contents button to th
 ```
   tableOfContentsView(this.config.tableOfContents)(controller),
 ```
-
-
 ### Configuring the plugin with a custom config
 
 You can configure the nodeview with the hiearchy of the nodes
@@ -350,8 +391,8 @@ You can configure the nodeview with the hiearchy of the nodes
 {
   nodeHierarchy: [
     'title|chapter|section|subsection|article',
-    'structure_header|article_header',
-  ],
+  'structure_header|article_header',
+],
 },
 ```
 
@@ -362,7 +403,7 @@ Editor plugin which allows you to interact with placeholders created by the inse
 
 For enabling it, you need to add the card provided by the plugin to the editor sidebar
 ```hbs
-  <VariablePlugin::TemplateVariableCard @controller={{this.controller}}/>
+  <VariablePlugin::TemplateVariableCard @controller={{this.controller}} @options={{this.config.templateVariable}}/>
 ```
 
 You will also need to add the variable node to the list of nodes of your prosemirror schema and the variable view to the list of nodeviews like `variable: variableView(controller)` imported from:
@@ -378,25 +419,40 @@ import {
 ### Configuring the plugin
 
 
-You can configure the plugin in your `environment.js` file:
+You can configure the card with the following attributes:
 
 ```js
-templateVariablePlugin: {
+{
   endpoint: 'https://dev.roadsigns.lblod.info/sparql', // the fallback endpoint which should be used for codelists which do not have a `dct:source` property.
   zonalLocationCodelistUri:
     'http://lblod.data.gift/concept-schemes/62331E6900730AE7B99DF7EF',
   nonZonalLocationCodelistUri:
     'http://lblod.data.gift/concept-schemes/62331FDD00730AE7B99DF7F2',
-},
+}
 ```
+The most important attributes are `zonalLocationCodelistUri` and `nonZonalLocationCodelistUri` that are the uri that the location codelists have on your backend.
 
-## Contributing
+## validation-plugin
 
+see [the plugin docs](addon/plugins/validation/README.md)
 
-See the [Contributing](CONTRIBUTING.md) guide for details.
+## address-plugin
 
+Editor plugin which allows you to insert address based on information from
 
-## License
+- https://basisregisters.vlaanderen.be/api/v1/adressen
+- https://geo.api.vlaanderen.be/geolocation/v4/Location
+
+For enabling it, you need to add the card provided by the plugin to the editor sidebar
+
+```hbs
+<AddressPlugin::Insert @controller={{this.controller}} />
+```
+
+## Contributing
 
+See the [Contributing](CONTRIBUTING.md) guide for details.
+
+## License
 
 This project is licensed under the [MIT License](LICENSE.md).

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

@@ -0,0 +1,47 @@
+<AuList::Item>
+  <AuButton
+    @icon='add'
+    @iconAlignment='left'
+    @skin='link'
+    {{on 'click' (fn this.openModal true)}}
+  >
+    {{t 'address-plugin.insert.address'}}
+  </AuButton>
+</AuList::Item>
+<AuModal
+  @modalOpen={{this.modalOpen}}
+  @closeModal={{this.closeModal}}
+  class='address-plugin-modal'
+>
+  <:title>{{t 'address-plugin.insert.address'}}</:title>
+  <:body>
+    <PowerSelect
+      @renderInPlace={{true}}
+      @searchEnabled={{true}}
+      @searchMessage={{t 'address-plugin.search.cta'}}
+      @noMatchesMessage={{t 'address-plugin.search.no-match'}}
+      @options={{this.addressSuggestion}}
+      @search={{perform this.searchAddress}}
+      @onChange={{this.selectAddress}}
+      @selected={{this.selectedAddress}}
+      as |address|
+    >
+      {{address.FormattedAddress}}
+    </PowerSelect>
+  </:body>
+  <:footer>
+    <AuButtonGroup>
+      <AuButton
+        @skin='primary'
+        @disabled={{not this.canInsertAddress}}
+        @loading={{this.isSelectingAddress}}
+        {{on 'click' (perform this.insertAddress)}}
+      >
+        {{t 'address-plugin.button.insert'}}
+      </AuButton>
+      <AuButton @skin='secondary' {{on 'click' this.closeModal}}>
+        {{t 'address-plugin.button.back'}}
+      </AuButton>
+    </AuButtonGroup>
+  </:footer>
+</AuModal>

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

@@ -0,0 +1,100 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { tracked } from 'tracked-built-ins';
+import { restartableTask, task, timeout } from 'ember-concurrency';
+
+import { AddressSuggestion } from './types';
+import { getAddressMatch, getSuggestedLocations } from './utils';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class AddressPluginInsertComponent extends Component<Args> {
+  @tracked modalOpen = false;
+  @tracked isSelectingAddress = false;
+
+  @tracked addressSuggestions: AddressSuggestion[] = [];
+  @tracked selectedAddress: AddressSuggestion | null = null;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.controller.schema;
+  }
+
+  @action
+  openModal() {
+    this.modalOpen = true;
+  }
+
+  @action
+  closeModal() {
+    this.modalOpen = false;
+    this.selectedAddress = null;
+  }
+
+  @action
+  selectAddress(selection: AddressSuggestion) {
+    this.selectedAddress = selection;
+  }
+
+  get canInsertAddress() {
+    if (this.isSelectingAddress) {
+      return false;
+    }
+
+    if (!this.selectedAddress) {
+      return false;
+    }
+
+    return true;
+  }
+
+  insertAddress = task(async () => {
+    if (this.selectedAddress) {
+      this.isSelectingAddress = true;
+
+      const addresses = await getAddressMatch({
+        housenumber: this.selectedAddress.Housenumber,
+        municipality: this.selectedAddress.Municipality,
+        street: this.selectedAddress.Thoroughfarename,
+        zipcode: this.selectedAddress.Zipcode,
+      });
+
+      const address = addresses[0];
+
+      this.controller.withTransaction((tr) => {
+        tr.replaceSelectionWith(
+          this.schema.node(
+            'block_rdfa',
+            {
+              typeof: 'https://data.vlaanderen.be/ns/adres#Adres',
+              resource: address.identificator.id,
+            },
+            this.schema.node('paragraph', null, [
+              this.schema.text(address.volledigAdres.geografischeNaam.spelling),
+            ])
+          )
+        );
+
+        return tr;
+      });
+
+      this.closeModal();
+      this.selectedAddress = null;
+      this.isSelectingAddress = false;
+    }
+  });
+
+  searchAddress = restartableTask(async (term: string) => {
+    await timeout(400);
+
+    const locations = await getSuggestedLocations(term);
+
+    return locations;
+  });
+}

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

@@ -0,0 +1,26 @@
+export type AddressSuggestion = {
+  ID: number;
+  FormattedAddress: string;
+  Municipality: string;
+  Thoroughfarename: string; // street
+  Housenumber: string;
+  Zipcode: string;
+};
+
+export type Address = {
+  identificator: {
+    id: string;
+    naamruimte: string;
+    objectId: string;
+    versieId: string;
+  };
+  detail: string;
+  huisnummer: string;
+  volledigAdres: {
+    geografischeNaam: {
+      spelling: string;
+      taal: string;
+    };
+  };
+  adresStatus: string;
+};

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

@@ -0,0 +1,59 @@
+import { Address, AddressSuggestion } from './types';
+
+const LOC_GEOPUNT_ENDPOINT = `https://geo.api.vlaanderen.be/geolocation/v4/Location`;
+const BASISREGISTER_ADRESMATCH = `https://basisregisters.vlaanderen.be/api/v1/adressen`;
+
+export const replaceAccents = (string: string) =>
+  string.normalize('NFD').replace(/([\u0300-\u036f])/g, '');
+
+export async function getSuggestedLocations(query: string) {
+  const result = await fetch(
+    `${LOC_GEOPUNT_ENDPOINT}?q=${encodeURIComponent(
+      query.replace(/^"(.*)"$/, '$1')
+    )}&c=10&type=Housenumber`,
+    {
+      method: 'GET',
+    }
+  );
+
+  const jsonResult = (await result.json()) as {
+    LocationResult: AddressSuggestion[];
+  };
+
+  if (!jsonResult) {
+    return [];
+  }
+
+  return jsonResult.LocationResult;
+}
+
+export async function getAddressMatch({
+  municipality,
+  zipcode,
+  street,
+  housenumber,
+}: {
+  municipality: string;
+  street: string;
+  housenumber: string;
+  zipcode: string;
+}) {
+  const url = new URL(BASISREGISTER_ADRESMATCH);
+
+  url.searchParams.append('GemeenteNaam', replaceAccents(municipality));
+  url.searchParams.append('Straatnaam', replaceAccents(street));
+  url.searchParams.append('Huisnummer', replaceAccents(housenumber));
+  url.searchParams.append('Postcode', replaceAccents(zipcode));
+
+  const response = await fetch(url.toString(), {
+    method: 'GET',
+  });
+
+  const result = (await response.json()) as {
+    adressen: Address[];
+  };
+
+  if (!result) return [];
+
+  return result.adressen;
+}

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

@@ -1,7 +1,6 @@
 import { tracked } from '@glimmer/tracking';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { getOwner } from '@ember/application';
 import { inject as service } from '@ember/service';
 import {
   addType,
@@ -17,6 +16,7 @@ import fetchBesluitTypes, {
 import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 import { trackedFunction } from 'ember-resources/util/function';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
 
 declare module 'ember__owner' {
   export default interface Owner {
@@ -26,6 +26,7 @@ declare module 'ember__owner' {
 
 type Args = {
   controller: SayController;
+  options: BesluitTypePluginOptions;
 };
 
 export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
@@ -63,10 +64,10 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     // eslint-disable-next-line @typescript-eslint/await-thenable
     const bestuurseenheid = await this.currentSession.get('group');
     const classificatie = await bestuurseenheid.get('classificatie');
-    const ENV = getOwner(this)?.resolveRegistration('config:environment') as {
-      besluitTypePlugin: { endpoint: string };
-    };
-    const types = await fetchBesluitTypes(classificatie.uri, ENV);
+    const types = await fetchBesluitTypes(
+      classificatie.uri,
+      this.args.options.endpoint
+    );
     return types;
   });