@lblod/ember-rdfa-editor-lblod-plugins 10.0.0 → 11.1.0

package/CHANGELOG.md

@@ -7,6 +7,45 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.1.0] - 2023-08-29
+
+### Fixed
+- GN-4370: Do not allow header nodes to be split by table
+- Grey out Generic RDFA button in embedded view
+- GN-4425: Smarter content wrapping for structure nodes
+
+### Changed
+- GN-4442: template comments can move up and down over the *whole* document
+- GN-4322: Add ORDER to snippet list query 
+- Bumps `@lblod/ember-rdfa-editor` from 5.1.0 to 5.2.0
+
+## [11.0.0] - 2023-08-22
+
+### Added
+- GN-4261: addition of an address variable
+- GN-4262: addition of WGS84 coordinates to address variables
+- Introduce internationalization in the table of contents node based on the document language.
+- The whole table of contents node (include its entries) is now exported in its `serialize` method without the need of an `entries` attribute.
+- GN-4461: update readme to specify needed imports for template comment
+- Check validity on number minimum/maximum inputs
+
+### Changed
+- GN-4263: update address variable edit UI/UX according to updated design
+- Allow the address municipality-edit field to be prefilled
+- Use one-way-binding in variable label input
+- Use one-way-binding in number variable inputs
+- Manage snippet list connection with template
+
+### Fixed
+- GN-4404: ensure number-variable placeholders are consistent
+
+### Breaking
+- Removal of old address-plugin
+- Removal of the `entries` attribute from the table-of-contents prosemirror node. The node can now generate it's own outline in its `serialize` method.
+### Dependencies
+- Bumps `@codemirror/view` from 6.12.0 to 6.16.0
+- Bumps `@lblod/ember-rdfa-editor` from 4.2.0 to 5.1.0
+
 ## [10.0.0] - 2023-08-08
 ### Changed
 - remove unused code from template comment component
@@ -652,7 +691,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v10.0.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.1.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
@@ -668,6 +707,8 @@ 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
+[11.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.0.0...v11.1.0
+[11.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v10.0.0...v11.0.0
 [10.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.1...v10.0.0
 [9.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.0...v9.1.1
 [9.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.2...v9.1.0

package/README.md

@@ -30,7 +30,6 @@ This addon contains the following editor plugins:
 * [table-of-contents-plugin](#table-of-contents-plugin)
 * [variable-plugin](#variable-plugin)
 * [validation-plugin](#validation-plugin)
-* [address-plugin](#address-plugin)
 * [template-comments-plugin](#template-comments-plugin)
 
 You can configure your editor like this:
@@ -203,7 +202,7 @@ This plugin needs to be added to the toolbar as a dropdown with the following sy
   <BesluitTypePlugin::ToolbarDropdown @controller={{this.controller}} @options={{this.config.besluitType}}/>
 ```
 
-You can need to specify the endpoint from which the plugin will fetch the types
+You need to specify the endpoint from which the plugin will fetch the types in the config object
 ```js
 {
   endpoint: 'https://centrale-vindplaats.lblod.info/sparql',
@@ -261,7 +260,7 @@ Same goes for the `CitationInsert` component
 ```
 
 
-Being this.citationPlugin a tracked reference to the plugin created with the function exported from the package and the wished configuration
+Make `this.citationPlugin` a tracked reference to the plugin created with the function exported from the package and the wished configuration
 ```js
   import { citationPlugin } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
 
@@ -371,7 +370,7 @@ This plugin provides a card to modify dates that needs to be added to the editor
     @options={{this.config.date}}/>
 ```
 
-And a insert button to insert new dates that needs to be added to the insert part of the sidebar:
+And an insert button to insert new dates that needs to be added to the insert part of the sidebar:
 ```hbs
   <RdfaDatePlugin::Insert 
     @controller={{this.controller}}
@@ -397,17 +396,20 @@ inside an editor document.
 This plugin provides a card that needs to be added to the editor sidebar like:
 
 ```hbs
-  <RoadsignRegulationPlugin::RoadsignRegulationCard @controller={{this.controller}}/>
+  <RoadsignRegulationPlugin::RoadsignRegulationCard 
+    @controller={{this.controller}}
+    @options={{this.config.roadsignRegulation}}
+  />
 ```
 
-You will need to set the following configuration
+You will need to set the following configuration in the config object
 ```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
+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
 
@@ -447,7 +449,7 @@ In order to enable the plugin you need to add the table of contents button to th
   <TableOfContentsPlugin::ToolbarButton @controller={{this.editor}}/>
 ```
 
-```
+```js
   tableOfContentsView(this.config.tableOfContents)(controller),
 ```
 ### Configuring the plugin with a custom config
@@ -466,6 +468,26 @@ For very custom setups, the plugin might be unable to find your scrollContainer
 },
 ```
 
+### Internationalization of the table of contents
+The dynamic version of the table of contents is internationalized based on the current document language and using the `ember-intl` service.
+The static (serialized) version of the table of contents can also be internationalized based on the current document language. For this to work correctly, the `emberApplication` prosemirror-plugin should be present. 
+You can add this plugin as follows to the controller/component in which the editor is initialized:
+```js
+import { getOwner } from '@ember/application';
+import { emberApplication } from '@lblod/ember-rdfa-editor/plugins/ember-application';
+...
+plugins = [
+  ...
+  emberApplication(getOwner(this));
+  ...
+];
+...
+```
+As an example, the `emberApplication` plugin has been added to the regulatory-statement route of the dummy app included in this addon.
+
+The table of contents node needs this plugin to be able to translate the serialized version properly. If the plugin is not present, a default (dutch) version of the table of contents will be generated.
+
+
 ## variable-plugin
 
 Editor plugin which provides node-specs and components which allow you to insert and edit different types of variables in a document. The plugin provides the following variable types:
@@ -474,6 +496,7 @@ Editor plugin which provides node-specs and components which allow you to insert
 - date variable
 - codelist
 - location
+- address
 
 Additional variable types can be added in the consuming application or addon.
 
@@ -488,6 +511,8 @@ import {
   numberView,
   text_variable,
   textVariableView,
+  address,
+  addressView
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
 ```
 
@@ -503,6 +528,7 @@ This addon includes an insert-component for each of these variable types:
 - `variable-plugin/date/insert`
 - `variable-plugin/location/insert`
 - `variable-plugin/codelist/insert`
+- `variable-plugin/address/insert`
 
 Each of these components presents a custom UI which allows a user to insert a variable of the corresponding type in a document.
 
@@ -635,32 +661,43 @@ get codelistEditOptions() {
 }
 ```
 
-## validation-plugin
-
-see [the plugin docs](addon/plugins/validation/README.md)
-
-## address-plugin
-
-Editor plugin which allows you to insert address based on information from
+#### The address variable
+This addon provides a seperate edit component which allows users to search for an address and update the select address variable. Additionally, they can also choose whether to include the housenumber of an address.
+You can add this edit-component to a template as follows:
+```hbs
+<VariablePlugin::Address::Edit @controller={{this.controller}} @defaultMuncipality='Antwerpen'/>
+```
 
-- https://basisregisters.vlaanderen.be/api/v1/adressen
-- https://geo.api.vlaanderen.be/geolocation/v4/Location
+The edit card can be configured with two arguments:
+- An instance of a `SayController` (required)
+- A `defaultMuncipality` which should be used as the default value of the `muncipality` field in the edit-card (optional)
 
-For enabling it, you need to add the card provided by the plugin to the editor sidebar
+## validation-plugin
 
-```hbs
-<AddressPlugin::Insert @controller={{this.controller}} />
-```
+see [the plugin docs](addon/plugins/validation/README.md)
 
 ## template-comments-plugin
 A plugin to insert a template comment anywhere in the document.  
 This is meant as a block of text for extra information to provide to a created template. It has
 the attribute `ext:TemplateComment`. This can (and should) be filtered out when publishing the document, as it is only meant as extra information while filling in a template.  
-It supports basic text with indenting, list items and the marks.
+It supports basic text with indenting, list items and marks.
+
+Add it to editor by adding `templateComment` to your schema and
+```js
+templateComment: templateCommentView(controller),
+```
+as a nodeview.
+
+Import with:
+```js
+import {
+  templateComment,
+  templateCommentView,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/template-comments-plugin';
+```
 
-Add it to editor by adding `templateComment` to your schema and `templateComment: templateCommentView(controller)` as a nodeview.
 
-Logic to insert a template comment is added with
+Button to insert a template comment is added with
 ```hbs
 <TemplateCommentsPlugin::Insert @controller={{this.controller}}/>
 ```
@@ -669,6 +706,11 @@ Buttons to remove and move it when selected can be shown with
 ```hbs
 <TemplateCommentsPlugin::EditCard @controller={{this.controller}}/>
 ```
+
+Template comments have a specific style that can be imported in the stylesheet with
+```css
+@import 'template-comments-plugin';
+```
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

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

@@ -2,6 +2,7 @@
   @title={{t 'generic-rdfa-variable.menu.insert'}}
   @icon='html-plus'
   {{on 'click' this.showModal}}
+  @disabled={{not this.canInsert}}
 />
 <AuModal
   @modalOpen={{this.modalOpen}}

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

@@ -3,13 +3,13 @@ import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { tracked } from 'tracked-built-ins';
 
-import { DOMParser as ProseParser } from 'prosemirror-model';
-
 import { basicSetup, EditorView } from 'codemirror';
 import { EditorState } from '@codemirror/state';
 import { html } from '@codemirror/lang-html';
 import { tooltips } from '@codemirror/view';
 
+import { insertGenericRdfa } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/generic-rdfa-variable/commands/insert-generic-rdfa';
+
 type Args = {
   controller: SayController;
 };
@@ -26,6 +26,14 @@ export default class GenericRdfaVariableInsertMenu extends Component<Args> {
     return this.args.controller.schema;
   }
 
+  get canInsert() {
+    if (this.controller.inEmbeddedView) {
+      return false;
+    }
+
+    return this.controller.checkCommand(insertGenericRdfa(''));
+  }
+
   @action
   showModal() {
     this.modalOpen = true;
@@ -82,14 +90,8 @@ export default class GenericRdfaVariableInsertMenu extends Component<Args> {
       return;
     }
 
-    const domParser = new DOMParser();
-
-    this.controller.withTransaction((tr) => {
-      return tr.replaceSelectionWith(
-        ProseParser.fromSchema(this.schema).parse(
-          domParser.parseFromString(editorContent, 'text/html'),
-        ),
-      );
+    this.args.controller.doCommand(insertGenericRdfa(editorContent), {
+      view: this.controller.mainEditorView,
     });
 
     this.closeModal();

package/addon/components/loading-alert.hbs

@@ -0,0 +1,28 @@
+{{#if this.isVisible}}
+  <div
+    class="au-c-alert {{this.skin}} {{this.size}}"
+    role="alert"
+    data-test-alert
+    ...attributes
+  >
+    <AuLoader/>
+    <div class="au-c-alert__content">
+      {{#if @title}}
+        <p class="au-c-alert__title" data-test-alert-title>{{@title}}</p>
+      {{/if}}
+      <div class="au-c-alert__message" data-test-alert-message>{{yield}}</div>
+    </div>
+    {{#if @closable}}
+      <button
+        class="au-c-alert__close"
+        type="button"
+        data-test-alert-close
+        {{on "click" this.closeAlert}}
+      >
+        <AuIcon @icon="cross" @size="large" />
+        {{!-- template-lint-disable no-bare-strings --}}
+        <span class="au-u-hidden-visually">Sluit alert</span>
+      </button>
+    {{/if}}
+  </div>
+{{/if}}

package/addon/components/loading-alert.ts

@@ -0,0 +1,3 @@
+//@ts-expect-error ember-appuniversum uses vanilla javascript
+import AuAlertComponent from '@appuniversum/ember-appuniversum/components/au-alert';
+export default class LoadingAlertComponent extends AuAlertComponent {}

package/addon/components/snippet-plugin/search-modal.ts

@@ -11,6 +11,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
 
 interface Args {
   config: SnippetPluginConfig;
+  assignedSnippetListsIds: string[];
   closeModal: () => void;
 }
 
@@ -61,6 +62,8 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
         abortSignal: abortController.signal,
         filter: {
           name: this.inputSearchText ?? undefined,
+          assignedSnippetListIds:
+            this.args.assignedSnippetListsIds ?? undefined,
         },
         pagination: {
           pageNumber: this.pageNumber,
@@ -83,6 +86,7 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
     this.inputSearchText,
     this.pageNumber,
     this.pageSize,
+    this.args.assignedSnippetListsIds,
   ]);
 
   @action

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

@@ -14,4 +14,5 @@
   @closeModal={{this.closeModal}}
   @config={{this.config}}
   @onInsert={{this.onInsert}}
+  @assignedSnippetListsIds={{@assignedSnippetListsIds}}
 />

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

@@ -9,6 +9,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
 interface Args {
   controller: SayController;
   config: SnippetPluginConfig;
+  assignedSnippetListsIds: string[];
 }
 
 export default class SnippetInsertComponent extends Component<Args> {

package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.hbs

@@ -0,0 +1,80 @@
+<AuModal
+  @modalOpen={{@open}}
+  @closeModal={{this.closeModal}}
+  @title={{t 'snippet-plugin.snippet-list.modal.title'}}
+  @size='large'
+  @padding='none'
+  as |modal|
+>
+  <modal.Body>
+    <AuMainContainer class='snippet-modal--main-container' as |mc|>
+      <mc.sidebar>
+        <div class='au-c-sidebar'>
+          <div class='au-c-sidebar__content au-u-padding'>
+            <AuHeading @level='3' @skin='4' class='au-u-padding-bottom-small'>
+              {{t 'snippet-plugin.snippet-list.modal.search.title'}}
+            </AuHeading>
+            <AuLabel
+              class='au-margin-bottom-small'
+              for='searchTerm'
+              @inline={{false}}
+              @required={{false}}
+              @error={{false}}
+              @warning={{false}}
+            >
+              {{t 'snippet-plugin.snippet-list.modal.search.label'}}
+            </AuLabel>
+            <AuNativeInput
+              @type='text'
+              @width='block'
+              id='searchTerm'
+              value={{this.searchText}}
+              placeholder={{t 'snippet-plugin.snippet-list.modal.search.placeholder'}}
+              {{on 'input' this.setInputSearchText}}
+            />
+          </div>
+        </div>
+      </mc.sidebar>
+      <mc.content @scroll={{true}}>
+        <div class='au-u-padding-top snippet-modal--list-container'>
+          {{#if this.snippetListResource.isRunning}}
+            <div class='au-u-margin'>
+              <AuLoader @padding='large' />
+              <span class='au-u-hidden-visually'>
+                {{t 'snippet-plugin.alert.loading'}}
+              </span>
+            </div>
+          {{else}}
+            {{#if this.error}}
+              <SnippetPlugin::Helpers::AlertLoadError @error={{this.error}} />
+            {{else}}
+              {{#if this.snippetListResource.value.length}}
+                <SnippetPlugin::SnippetList::SnippetListView
+                  @snippetLists={{this.snippetListResource.value}}
+                  @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
+                  @onChange={{this.onChange}}
+                />
+              {{else}}
+                <SnippetPlugin::Helpers::AlertNoItems />
+              {{/if}}
+            {{/if}}
+          {{/if}}
+        </div>
+        <AuToolbar @border='top' @size='large' @nowrap={{true}} @reverse={{true}}>
+          <AuButtonGroup>
+            <AuButton @skin='secondary' {{on 'click' this.closeModal}}>
+              {{t 'snippet-plugin.snippet-list.modal.button.cancel'}}
+            </AuButton>
+            <AuButton
+              @skin='primary'
+              {{on 'click' this.saveAndClose}}
+              @disabled={{@onSaveSnippetListIds.isRunning}}
+            >
+              {{t 'snippet-plugin.snippet-list.modal.button.update'}}
+            </AuButton>
+          </AuButtonGroup>
+        </AuToolbar>
+      </mc.content>
+    </AuMainContainer>
+  </modal.Body>
+</AuModal>

package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.ts

@@ -0,0 +1,98 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { restartableTask, Task, timeout } from 'ember-concurrency';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+
+import { tracked } from '@glimmer/tracking';
+
+import { fetchSnippetLists } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/fetch-data';
+
+import {
+  SnippetPluginConfig,
+  SnippetList,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+
+interface Args {
+  config: SnippetPluginConfig;
+  onSaveSnippetListIds: Task<Promise<void>, [snippetIds: string[]]>;
+  assignedSnippetListsIds: string[];
+  closeModal: () => void;
+}
+
+export default class SnippetListModalComponent extends Component<Args> {
+  // Filtering
+  @tracked inputSearchText: string | null = null;
+
+  // Display
+  @tracked error: unknown;
+
+  @tracked assignedSnippetListsIds: string[] = [
+    ...this.args.assignedSnippetListsIds,
+  ];
+
+  get config() {
+    return this.args.config;
+  }
+
+  get searchText() {
+    return this.inputSearchText;
+  }
+
+  @action
+  setInputSearchText(event: InputEvent) {
+    assert(
+      'inputSearchText must be bound to an input element',
+      event.target instanceof HTMLInputElement,
+    );
+
+    this.inputSearchText = event.target.value;
+  }
+
+  @action
+  closeModal() {
+    this.args.closeModal();
+  }
+
+  @action
+  async saveAndClose() {
+    await this.snippetListResource.cancel();
+
+    await this.args.onSaveSnippetListIds.perform(this.assignedSnippetListsIds);
+    this.args.closeModal();
+  }
+
+  snippetListSearch = restartableTask(async () => {
+    await timeout(500);
+
+    const abortController = new AbortController();
+
+    try {
+      const queryResult = await fetchSnippetLists({
+        endpoint: this.args.config.endpoint,
+        abortSignal: abortController.signal,
+        filter: {
+          name: this.inputSearchText ?? undefined,
+        },
+      });
+
+      return queryResult.results;
+    } catch (error) {
+      this.error = error;
+      return [];
+    } finally {
+      abortController.abort();
+    }
+  });
+
+  snippetListResource = trackedTask<SnippetList[]>(
+    this,
+    this.snippetListSearch,
+    () => [this.inputSearchText],
+  );
+
+  @action
+  onChange(assignedSnippetListsIds: string[]) {
+    this.assignedSnippetListsIds = assignedSnippetListsIds;
+  }
+}

package/addon/components/snippet-plugin/snippet-list/snippet-list-view.hbs

@@ -0,0 +1,29 @@
+<AuHeading @level='3' @skin='4'>
+  {{t 'snippet-plugin.snippet-list.modal.subtitle'}}
+</AuHeading>
+{{#if @snippetLists.length}}
+  <div class="snippet-lists-table">
+    <AuTable class="snippet-lists-table">
+      <:header>
+        <tr>
+          <th class="selectColumn">{{t 'snippet-plugin.snippet-list.modal.table.select'}}</th>
+          <th>{{t 'snippet-plugin.snippet-list.modal.table.list'}}</th>
+        </tr>
+      </:header>
+      <:body>
+        {{#each @snippetLists as |snippetList|}}
+          <tr>
+            <td class="selectColumn">
+              <AuControlCheckbox
+                @identifier={{snippetList.label}}
+                @onChange={{fn this.onChange snippetList.id}}
+                @checked={{in-array @assignedSnippetListsIds snippetList.id}}
+              />
+            </td>
+            <td>{{snippetList.label}}</td>
+          </tr>
+        {{/each}}
+      </:body>
+    </AuTable>
+  </div>
+{{/if}}

package/addon/components/snippet-plugin/snippet-list/snippet-list-view.ts

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+interface Args {
+  assignedSnippetListsIds: string[];
+  onChange: (assignedSnippetListsIds: string[]) => void;
+  closeModal: () => void;
+}
+
+export default class SnippetListViewComponent extends Component<Args> {
+  @action
+  onChange(snippetId: string, isSelected: boolean) {
+    if (isSelected) {
+      const newSnippetListIds = [
+        ...this.args.assignedSnippetListsIds,
+        snippetId,
+      ];
+
+      return this.args.onChange(newSnippetListIds);
+    }
+
+    const newSnippetListIds = this.args.assignedSnippetListsIds.filter(
+      (id) => id !== snippetId,
+    );
+
+    return this.args.onChange(newSnippetListIds);
+  }
+}

package/addon/components/snippet-plugin/snippet-list-select.hbs

@@ -0,0 +1,16 @@
+<AuButton
+  @icon='unordered-list'
+  @skin='secondary'
+  @iconAlignment='left'
+  {{on 'click' this.openModal}}
+>
+  {{t 'snippet-plugin.snippet-list.open-modal'}}
+</AuButton>
+
+<SnippetPlugin::SnippetList::SnippetListModal
+  @config={{@config}}
+  @assignedSnippetListsIds={{@assignedSnippetListsIds}}
+  @onSaveSnippetListIds={{@onSaveSnippetListIds}}
+  @open={{this.showModal}}
+  @closeModal={{this.closeModal}}
+/>

package/addon/components/snippet-plugin/snippet-list-select.ts

@@ -0,0 +1,27 @@
+import { action } from '@ember/object';
+import { Task } from 'ember-concurrency';
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+
+interface Args {
+  config: SnippetPluginConfig;
+  assignedSnippetListsIds: string[];
+  onSaveSnippetListIds: Task<Promise<void>, [snippetIds: string[]]>;
+}
+
+export default class SnippetListSelectComponent extends Component<Args> {
+  @tracked showModal = false;
+
+  @action
+  openModal() {
+    this.showModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showModal = false;
+  }
+}

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.hbs

@@ -1,5 +1,5 @@
 <div class='au-u-background-gray-100 au-u-padding-tiny table-of-contents'>
-  <h3>{{t "table-of-contents-plugin.title"}}</h3>
+  <h3>{{this.title}}</h3>
   {{#if this.outline}}
     <TableOfContentsPlugin::EmberNodes::Outline
       @entries={{this.outline.entries}}