@lblod/ember-rdfa-editor-lblod-plugins 24.3.2 → 25.1.0-dev.bf9bca801660c11d81ecbcc0cc8dd91084a18702

package/.changeset/purple-bobcats-lick.md

@@ -0,0 +1,15 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Extension of configuration options of `citation-plugin`.
+It is now possible to pass a configuration object with the type `CitationPluginNodeConditionConfig` to an instance of the citation plugin.
+This type of config allows you to specify a condition on which an active/context node needs to match.
+```ts
+interface CitationPluginNodeConditionConfig {
+  type: 'node-condition';
+  regex?: RegExp;
+
+  activeInNode(node: PNode): boolean;
+}
+```

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 25.1.0
+
+### Minor Changes
+
+- [#502](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/502) [`9beff10`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/9beff10b99a5825a4eb9be94128c2efb822ac982) Thanks [@abeforgit](https://github.com/abeforgit)! - Improved LMB-plugin
+
+  - Fixes missing data due to 10000 triple limit of query
+  - does all pagination, sorting and searching through the query
+  - adds filters for administrative period and unit
+
+## 25.0.0
+
+### Major Changes
+
+- [#499](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/499) [`3255c70`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/3255c7021008a801eb5b07ebd49a6e557467b4ba) Thanks [@elpoelma](https://github.com/elpoelma)! - Update `@lblod/ember-rdfa-editor` peerdep requirement to version [10.7.2](https://github.com/lblod/ember-rdfa-editor/releases/tag/v10.7.2)
+
+### Minor Changes
+
+- [#495](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/495) [`046b6b7`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/046b6b7c65b1e9144b7c469bbb2d968652639117) Thanks [@piemonkey](https://github.com/piemonkey)! - When removing last snippet of a 'group', replace the placeholder instead of completely deleting
+
+### Patch Changes
+
+- [#495](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/495) [`6547270`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/65472703c65a05feb6793a973e3785228822e1a1) Thanks [@piemonkey](https://github.com/piemonkey)! - Fix bug with snippet list names containing a `,` displaying as multiple lists
+
+- [#499](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/499) [`3255c70`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/3255c7021008a801eb5b07ebd49a6e557467b4ba) Thanks [@elpoelma](https://github.com/elpoelma)! - Fix margins of mandatee table warning message
+
+- [#500](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/500) [`0b336ad`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/0b336addbf4287620d471515aa75c2d62dc2627d) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Fix bug when setting a date with a day bigger than the number of days in the current month
+
 ## 24.3.2
 
 ### Patch Changes

package/README.md

@@ -335,9 +335,11 @@ Make `this.citationPlugin` a tracked reference to the plugin created with the fu
 
 Configuration:
 
-- type: it can be 'nodes' or 'ranges' if nodes is selected you are expected to pass the `activeInNodeTypes` function, otherwise you should pass the `activeInRanges` function
-- activeInNodeTypes: it's a function that gets the prosemirror schema and the state of the actual instance of the editor and returns a `Set` of nodetypes where the plugin should be active
-- activeInRanges: it's a function that gets the state of the actual instance of the editor and returns an array of ranges for the plugin to be active in, for example `[[0,50], [70,100]]`
+- type: it can either be 'nodes', 'node-condition, or 'ranges' if nodes is selected you are expected to pass the `activeInNodeTypes` function, otherwise you should pass the `activeInRanges` function
+  * if 'nodes' is selected, you are expected to pass the `activeInNodeTypes` function. It's a function that gets the prosemirror schema and the state of the actual instance of the editor and returns a `Set` of nodetypes where the plugin should be active
+  * if 'node-condition' is selected, you are expected to pass the `activeInNode` function. It's a function which expects an instance of a prosemirror node and returns whether it should be active in that node.
+  * if 'ranges' is selected, you are expected to pass the `activeInRanges` function. It's a function that gets the state of the actual instance of the editor and returns an array of ranges for the plugin to be active in, for example `[[0,50], [70,100]]`
+
 - regex: you can provide your custom regex to detect citations, if not the default one will be used
 
 A common usecase is to have the plugin active in the entire document. Here's how to do that using each configuration type:
@@ -354,6 +356,13 @@ const configA = {
 };
 
 const configB = {
+  type: 'node-condition',
+  activeInNodeTypes(node) {
+    return node.type === schema.nodes.doc;
+  },
+};
+
+const configC = {
   type: 'ranges',
   activeInRanges(state) {
     // a node's nodeSize follows the Prosemirror definition

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

@@ -14,7 +14,10 @@ import {
   LEGISLATION_TYPES,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/types';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import {
+  findParentNode,
+  findParentNodeOfType,
+} from '@curvenote/prosemirror-utils';
 import { Article } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/article';
 import { LegalDocument } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
 import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
@@ -62,18 +65,17 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
       return true;
     }
     const { selection } = this.controller.mainEditorState;
-    if (this.config.type === 'ranges') {
-      const ranges = this.config.activeInRanges(
-        this.controller.mainEditorState,
-      );
+    const config = this.config;
+    if (config.type === 'ranges') {
+      const ranges = config.activeInRanges(this.controller.mainEditorState);
       for (const range of ranges) {
         if (selection.from > range[0] && selection.from < range[1]) {
           return false;
         }
       }
       return true;
-    } else {
-      const nodeTypes = this.config.activeInNodeTypes(
+    } else if (config.type === 'nodes') {
+      const nodeTypes = config.activeInNodeTypes(
         this.controller.schema,
         this.controller.mainEditorState,
       );
@@ -84,6 +86,11 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
         return false;
       }
       return !findParentNodeOfType([...nodeTypes])(selection);
+    } else {
+      if (config.activeInNode(this.controller.mainEditorState.doc)) {
+        return false;
+      }
+      return !findParentNode((node) => config.activeInNode(node))(selection);
     }
   }
 

package/addon/components/lmb-plugin/list.hbs

@@ -37,7 +37,15 @@
     </tr>
   </:header>
   <:body>
-    {{#unless @services.isRunning}}
+    {{#if @services.isRunning}}
+      <tr>
+        <td colspan='5'>
+          <AuLoader @centered={{true}}>
+            {{t 'common.search.loading'}}
+          </AuLoader>
+        </td>
+      </tr>
+    {{else}}
       {{#if @services.value.totalCount}}
         {{#each @services.value.results as |row|}}
           <tr>
@@ -53,6 +61,6 @@
           </tr>
         {{/each}}
       {{/if}}
-    {{/unless}}
+    {{/if}}
   </:body>
 </AuTable>

package/addon/components/lmb-plugin/search-modal.hbs

@@ -21,16 +21,42 @@
               {{t 'lmb-plugin.modal.search.title'}}
             </AuHeading>
             <AuLabel class='au-margin-bottom-small' for='searchTerm'>
-              {{t 'worship-plugin.modal.fields.name'}}
+              {{t 'lmb-plugin.modal.fields.name'}}
             </AuLabel>
             <AuNativeInput
               @type='text'
               @width='block'
               id='searchTerm'
               value={{this.searchText}}
-              placeholder={{t 'worship-plugin.modal.search.placeholder'}}
+              placeholder={{t 'lmb-plugin.modal.nameSearch.placeholder'}}
               {{on 'input' this.setInputSearchText}}
             />
+            <AuLabel class='au-margin-bottom-small' for='periodSelect'>
+              {{t 'lmb-plugin.modal.fields.period'}}
+            </AuLabel>
+            <PowerSelect
+              @allowClear={{false}}
+              @searchEnabled={{false}}
+              @options={{this.adminPeriods}}
+              @selected={{this.selectedAdminPeriod}}
+              @onChange={{this.selectAdminPeriod}}
+              as |period|
+            >
+              {{period.label}}
+            </PowerSelect>
+
+            <AuLabel class='au-margin-bottom-small' for='searchAdminUnit'>
+              {{t 'lmb-plugin.modal.fields.adminUnit'}}
+            </AuLabel>
+            <AuNativeInput
+              @type='text'
+              @width='block'
+              id='searchAdminUnit'
+              value={{this.adminUnitSearch}}
+              placeholder={{t 'lmb-plugin.modal.adminUnitSearch.placeholder'}}
+              {{on 'input' this.setAdminUnitSearch}}
+            />
+
           </div>
         </div>
       </mc.sidebar>

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

@@ -2,13 +2,22 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
-import { restartableTask } from 'ember-concurrency';
+import { restartableTask, timeout } from 'ember-concurrency';
 import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
 
 import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
-import { fetchMandatees } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin/utils/fetchMandatees';
-type SearchSort = [keyof Mandatee, 'ASC' | 'DESC'] | false;
+import {
+  FetchMandateesArgs,
+  fetchMandatees,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin/utils/fetchMandatees';
+import {
+  BESTUURSPERIODES,
+  BestuursperiodeLabel,
+  BestuursperiodeURI,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { isSome } from '@lblod/ember-rdfa-editor/utils/_private/option';
+export type SearchSort = [keyof Mandatee, 'ASC' | 'DESC'] | false;
 
 interface Args {
   config: LmbPluginConfig;
@@ -16,6 +25,10 @@ interface Args {
   closeModal: () => void;
   onInsert: (mandatee: Mandatee) => void;
 }
+interface AdminPeriodOption {
+  label: BestuursperiodeLabel;
+  uri: BestuursperiodeURI;
+}
 
 export default class LmbPluginSearchModalComponent extends Component<Args> {
   // Display
@@ -28,96 +41,120 @@ export default class LmbPluginSearchModalComponent extends Component<Args> {
   @tracked pageSize = 20;
   @tracked totalCount = 0;
 
+  // Admin periods
+  @tracked selectedAdminPeriod: AdminPeriodOption;
+  adminPeriods: AdminPeriodOption[];
+  // Admin units
+  @tracked adminUnitSearch: string;
+  // tracks whether the user has just typed a character
+  // doesn't need to be reactive
+  typing = false;
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+    this.adminPeriods = Object.entries(BESTUURSPERIODES).map(
+      ([key, value]: [BestuursperiodeLabel, BestuursperiodeURI]) => ({
+        label: key,
+        uri: value,
+      }),
+    );
+    this.selectedAdminPeriod =
+      this.adminPeriods.find(
+        (entry) =>
+          isSome(args.config.defaultPeriod) &&
+          entry.label === args.config.defaultPeriod,
+      ) ?? this.adminPeriods[this.adminPeriods.length - 1];
+    this.adminUnitSearch = args.config.defaultAdminUnit ?? '';
+  }
+
   get config() {
     return this.args.config;
   }
+  selectAdminPeriod = (value: AdminPeriodOption) => {
+    this.selectedAdminPeriod = value;
+    this.pageNumber = 0;
+  };
+  setAdminUnitSearch = (event: InputEvent) => {
+    this.typing = true;
+    assert(
+      'setAdminUnitSearch must be bound to an input element',
+      event.target instanceof HTMLInputElement,
+    );
+    this.adminUnitSearch = event.target.value;
+    this.pageNumber = 0;
+  };
 
   @action
   async closeModal() {
+    this.typing = false;
     this.inputSearchText = null;
     this.sort = false;
     await this.servicesResource.cancel();
     this.args.closeModal();
   }
 
-  fetchData = restartableTask(async () => {
-    return fetchMandatees({ endpoint: this.args.config.endpoint });
-  });
-
   // TODO Either make this a trackedFunction or do filtering on the query and correctly pass an
   // AbortController
-  search = restartableTask(async () => {
-    if (!this.args.open) {
-      return {
-        results: [],
-        totalCount: 0,
-      };
-    }
+  search = restartableTask(
+    async ({
+      endpoint,
+      searchString,
+      page,
+      pageSize,
+      sort,
+      period,
+      adminUnitSearch,
+    }: FetchMandateesArgs) => {
+      // debounce, but only when the input fields are being used
+      if (this.typing) {
+        this.typing = false;
+        await timeout(250);
+      }
+
+      if (!this.args.open) {
+        return {
+          results: [],
+          totalCount: 0,
+        };
+      }
 
-    // Can't do what I want, so if the user modifies the filter before resolving the query will run again
-    if (!this.fetchData.lastComplete) {
       try {
-        await this.fetchData.perform();
+        const result = await fetchMandatees({
+          endpoint,
+          searchString,
+          page,
+          pageSize,
+          sort,
+          period,
+          adminUnitSearch,
+        });
+        const { count, mandatees } = result;
+
+        return {
+          results: mandatees,
+          totalCount: count,
+        };
       } catch (err) {
         console.error('Got an error fetching LMB data', err);
         this.error = err;
       }
-    }
-
-    if (!this.fetchData.lastComplete?.value) return;
-    let mandatees: Mandatee[] = [...this.fetchData.lastComplete.value];
-
-    if (this.inputSearchText) {
-      mandatees = mandatees?.filter((mandatee: Mandatee) =>
-        mandatee.fullName
-          .toLowerCase()
-          .includes(this.inputSearchText?.toLowerCase() as string),
-      );
-    }
-
-    if (this.sort) {
-      const [key, sortingDirection] = this.sort;
-      mandatees = mandatees.sort((a: Mandatee, b: Mandatee) => {
-        if (key === 'fullName') {
-          if (a.lastName === b.lastName) {
-            if (a.firstName > b.firstName) {
-              return sortingDirection === 'ASC' ? 1 : -1;
-            } else {
-              return sortingDirection === 'ASC' ? -1 : 1;
-            }
-          } else {
-            if (a.lastName > b.lastName) {
-              return sortingDirection === 'ASC' ? 1 : -1;
-            } else {
-              return sortingDirection === 'ASC' ? -1 : 1;
-            }
-          }
-        } else if (a[key] > b[key]) {
-          return sortingDirection === 'ASC' ? 1 : -1;
-        } else {
-          return sortingDirection === 'ASC' ? -1 : 1;
-        }
-      });
-    }
-
-    const totalCount = mandatees?.length;
-
-    mandatees = mandatees?.slice(
-      this.pageSize * this.pageNumber,
-      this.pageSize * (this.pageNumber + 1),
-    );
-    return {
-      results: mandatees,
-      totalCount,
-    };
-  });
+      return {
+        results: [],
+        totalCount: 0,
+      };
+    },
+  );
 
   servicesResource = trackedTask(this, this.search, () => [
-    this.inputSearchText,
-    this.sort,
-    this.pageNumber,
-    this.pageSize,
-    this.args.open,
+    {
+      endpoint: this.args.config.endpoint,
+      searchString: this.inputSearchText ?? '',
+      sort: this.sort,
+      page: this.pageNumber,
+      pageSize: this.pageSize,
+      open: this.args.open,
+      period: this.selectedAdminPeriod.uri,
+      adminUnitSearch: this.adminUnitSearch,
+    } satisfies Partial<FetchMandateesArgs> & { open: boolean },
   ]);
 
   @action
@@ -130,6 +167,7 @@ export default class LmbPluginSearchModalComponent extends Component<Args> {
       'inputSearchText must be bound to an input element',
       event.target instanceof HTMLInputElement,
     );
+    this.typing = true;
 
     this.inputSearchText = event.target.value;
     this.pageNumber = 0;

package/addon/components/mandatee-table-plugin/node.gts

@@ -45,7 +45,7 @@ export default class MandateeTableNode extends Component<Sig> {
         />
         <div>
           <h6 class='say-mandatee-table__title'>{{this.title}}</h6>
-          <p>
+          <p class='say-mandatee-table__warning'>
             {{this.warning}}
           </p>
         </div>

package/addon/components/snippet-plugin/nodes/placeholder.gts

@@ -8,13 +8,13 @@ import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 
 interface Signature {
-  Args: EmberNodeArgs;
+  Args: Pick<EmberNodeArgs, 'node' | 'selectNode'>;
 }
 
 export default class SnippetPluginPlaceholder extends Component<Signature> {
   @service declare intl: IntlService;
   get listNames() {
-    return this.args.node.attrs.listNames;
+    return this.args.node.attrs.snippetListNames;
   }
   get isSingleList() {
     return this.listNames.length === 1;

package/addon/components/snippet-plugin/nodes/snippet.gts

@@ -28,6 +28,8 @@ import insertSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippe
 import { isNone } from '@lblod/ember-rdfa-editor/utils/_private/option';
 import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
 import { recalculateNumbers } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/structure-plugin/recalculate-structure-numbers';
+import { createSnippetPlaceholder } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/nodes/snippet-placeholder';
+import { hasDecendant } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/has-descendant';
 
 interface ButtonSig {
   Args: {
@@ -62,6 +64,15 @@ export default class SnippetNode extends Component<Signature> {
   get controller() {
     return this.args.controller;
   }
+  get schema() {
+    return this.controller.schema;
+  }
+  get snippetOrPlaceholder() {
+    return [
+      this.schema.nodes.snippet,
+      this.schema.nodes.snippet_placeholder,
+    ].filter(Boolean);
+  }
   get node() {
     return this.args.node;
   }
@@ -94,17 +105,46 @@ export default class SnippetNode extends Component<Signature> {
   deleteFragment() {
     const position = this.args.getPos();
     if (position !== undefined) {
-      this.controller.withTransaction((tr) => {
-        return transactionCombinator(
-          this.controller.mainEditorState,
-          tr.deleteRange(position, position + this.node.nodeSize),
-        )([recalculateNumbers]).transaction;
-      });
+      const matchingSnippetExists = hasDecendant(
+        this.controller.mainEditorState.doc,
+        (node) =>
+          node !== this.node &&
+          this.snippetOrPlaceholder.includes(node.type) &&
+          node.attrs.placeholderId === this.node.attrs.placeholderId,
+      );
+      if (matchingSnippetExists) {
+        this.controller.withTransaction((tr) => {
+          return transactionCombinator(
+            this.controller.mainEditorState,
+            tr.deleteRange(position, position + this.node.nodeSize),
+          )([recalculateNumbers]).transaction;
+        });
+      } else {
+        const node = createSnippetPlaceholder({
+          listProperties: {
+            placeholderId: this.node.attrs.placeholderId,
+            listIds: this.node.attrs.snippetListIds,
+            names: this.node.attrs.snippetListNames,
+            importedResources: this.node.attrs.importedResources,
+          },
+          schema: this.schema,
+          allowMultipleSnippets: this.allowMultipleSnippets,
+        });
+
+        this.args.controller.withTransaction(
+          (tr) =>
+            transactionCombinator(
+              this.controller.mainEditorState,
+              tr.replaceWith(position, position + this.node.nodeSize, node),
+            )([recalculateNumbers]).transaction,
+          { view: this.args.controller.mainEditorView },
+        );
+      }
     }
   }
   createSliceFromElement(element: Element) {
     return new Slice(
-      ProseParser.fromSchema(this.controller.schema).parse(element, {
+      ProseParser.fromSchema(this.schema).parse(element, {
         preserveWhitespace: true,
       }).content,
       0,
@@ -127,7 +167,6 @@ export default class SnippetNode extends Component<Signature> {
   @action
   onInsert(content: string, title: string) {
     this.closeModal();
-    const assignedSnippetListsIds = this.node.attrs.assignedSnippetListsIds;
     let start = 0;
     let end = 0;
     const pos = this.args.getPos();
@@ -147,8 +186,12 @@ export default class SnippetNode extends Component<Signature> {
       insertSnippet({
         content,
         title,
-        assignedSnippetListsIds,
-        importedResources: this.node.attrs.importedResources,
+        listProperties: {
+          placeholderId: this.node.attrs.placeholderId,
+          listIds: this.node.attrs.snippetListIds,
+          names: this.node.attrs.snippetListNames,
+          importedResources: this.node.attrs.importedResources,
+        },
         range: { start, end },
         allowMultipleSnippets: this.allowMultipleSnippets,
       }),
@@ -189,7 +232,7 @@ export default class SnippetNode extends Component<Signature> {
       @closeModal={{this.closeModal}}
       @config={{this.node.attrs.config}}
       @onInsert={{this.onInsert}}
-      @assignedSnippetListsIds={{this.node.attrs.assignedSnippetListsIds}}
+      @snippetListIds={{this.node.attrs.snippetListIds}}
     />
   </template>
 }

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

@@ -11,7 +11,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
 
 interface Args {
   config: SnippetPluginConfig;
-  assignedSnippetListsIds: string[] | undefined;
+  snippetListIds: string[] | undefined;
   closeModal: () => void;
   open: boolean;
   onInsert: (content: string, title: string) => void;
@@ -64,8 +64,7 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
         abortSignal: abortController.signal,
         filter: {
           name: this.inputSearchText ?? undefined,
-          assignedSnippetListIds:
-            this.args.assignedSnippetListsIds ?? undefined,
+          snippetListIds: this.args.snippetListIds ?? undefined,
         },
         pagination: {
           pageNumber: this.pageNumber,
@@ -88,7 +87,7 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
     this.inputSearchText,
     this.pageNumber,
     this.pageSize,
-    this.args.assignedSnippetListsIds,
+    this.args.snippetListIds,
   ]);
 
   @action

package/addon/components/snippet-plugin/snippet-insert-placeholder.gts

@@ -43,11 +43,11 @@ export default class SnippetPluginSnippetInsertPlaceholder extends Component<Sig
     allowMultipleSnippets: boolean,
   ) {
     if (lists) {
-      const node = createSnippetPlaceholder(
+      const node = createSnippetPlaceholder({
         lists,
-        this.args.controller.schema,
+        schema: this.args.controller.schema,
         allowMultipleSnippets,
-      );
+      });
 
       this.args.controller.withTransaction(
         (tr) => {
@@ -72,7 +72,7 @@ export default class SnippetPluginSnippetInsertPlaceholder extends Component<Sig
     </li>
     <SnippetListModal
       @config={{@config}}
-      @assignedSnippetListsIds={{empty}}
+      @snippetListIds={{empty}}
       @allowMultipleSnippets={{false}}
       @onSaveSnippetLists={{this.insertPlaceholder}}
       @open={{this.isModalOpen}}

package/addon/components/snippet-plugin/snippet-insert-rdfa.gts

@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 
 import { SayController } from '@lblod/ember-rdfa-editor';
 import {
-  type ImportedResourceMap,
+  type SnippetListProperties,
   type SnippetPluginConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 import { findParentNodeClosestToPos } from '@curvenote/prosemirror-utils';
@@ -23,13 +23,7 @@ interface Sig {
 }
 
 export default class SnippetInsertRdfaComponent extends Component<Sig> {
-  get disableInsert() {
-    return (this.snippetListProperties?.listIds.length ?? 0) === 0;
-  }
-
-  get snippetListProperties():
-    | { listIds: string[]; importedResources: ImportedResourceMap }
-    | undefined {
+  get listProperties(): SnippetListProperties | undefined {
     const activeNode = this.args.node.value;
     const activeNodeSnippetListIds = getSnippetListIdsProperties(activeNode);
 
@@ -38,6 +32,8 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
         listIds: getAssignedSnippetListsIdsFromProperties(
           activeNodeSnippetListIds,
         ),
+        placeholderId: activeNode.attrs.placeholderId,
+        names: activeNode.attrs.snippetListNames,
         importedResources: activeNode.attrs.importedResources,
       };
     }
@@ -58,6 +54,8 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
       if (properties.length > 0) {
         return {
           listIds: getAssignedSnippetListsIdsFromProperties(properties),
+          placeholderId: parentNode.node.attrs.placeholderId,
+          names: parentNode.node.attrs.snippetListNames,
           importedResources: parentNode.node.attrs.importedResources,
         };
       }
@@ -79,8 +77,7 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
     <SnippetInsert
       @config={{@config}}
       @controller={{@controller}}
-      @snippetListProperties={{this.snippetListProperties}}
-      @disabled={{this.disableInsert}}
+      @listProperties={{this.listProperties}}
       @allowMultipleSnippets={{this.allowMultipleSnippets}}
     />
   </template>