@lblod/ember-rdfa-editor-lblod-plugins 24.3.0 → 24.3.1-dev.2e3c09f95db40967caaceaa791e7eefd6187c5e4

package/.changeset/four-eagles-live.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Redesign snippet placeholder to have more intuitive UX

package/.changeset/gentle-berries-exist.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+When removing last snippet of a 'group', replace the placeholder instead of completely deleting

package/.changeset/hungry-trees-perform.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Fix bug with snippet list names containing a `,` displaying as multiple lists

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 24.3.1
+
+### Patch Changes
+
+- [#494](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/494) [`3941b65`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/3941b659fbb710be0aafd34b911a42416a1124c9) Thanks [@elpoelma](https://github.com/elpoelma)! - Ensure that the event handlers of snippet actions are only triggered once
+
 ## 24.3.0
 
 ### Minor Changes

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

@@ -1,20 +1,31 @@
 import Component from '@glimmer/component';
+import { service } from '@ember/service';
 import { on } from '@ember/modifier';
+import IntlService from 'ember-intl/services/intl';
 import t from 'ember-intl/helpers/t';
-import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
 import { PlusTextIcon } from '@appuniversum/ember-appuniversum/components/icons/plus-text';
+import AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import { type EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
-import { service } from '@ember/service';
-import IntlService from 'ember-intl/services/intl';
+import { type SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 
 interface Signature {
-  Args: EmberNodeArgs;
+  Args: Pick<EmberNodeArgs, 'node' | 'selectNode'> & {
+    insertSnippet: () => void;
+  };
 }
 
 export default class SnippetPluginPlaceholder extends Component<Signature> {
   @service declare intl: IntlService;
+
+  get node() {
+    return this.args.node;
+  }
   get listNames() {
-    return this.args.node.attrs.listNames;
+    return this.args.node.attrs.snippetListNames;
+  }
+  get config(): SnippetPluginConfig {
+    return this.node.attrs.config;
   }
   get isSingleList() {
     return this.listNames.length === 1;
@@ -28,24 +39,32 @@ export default class SnippetPluginPlaceholder extends Component<Signature> {
       return this.intl.t('snippet-plugin.placeholder.title-multiple');
     }
   }
+
   <template>
-    <AuAlert
-      @title={{this.alertTitle}}
-      @skin='warning'
-      @icon={{PlusTextIcon}}
-      @size='small'
-      class='say-snippet-placeholder'
-      {{on 'click' @selectNode}}
-    >
-      {{#unless this.isSingleList}}
-        {{t 'snippet-plugin.placeholder.active-lists'}}
-        <ul>
-          {{#each this.listNames as |listName|}}
-            <li>{{listName}}</li>
-          {{/each}}
-        </ul>
-      {{/unless}}
-      {{t 'snippet-plugin.placeholder.text'}}
-    </AuAlert>
+    {{! template-lint-disable no-invalid-interactive }}
+    <div class='say-snippet-placeholder' {{on 'click' @selectNode}}>
+      <div class='say-snippet-placeholder__icon'>
+        <AuIcon @icon={{PlusTextIcon}} />
+      </div>
+      <div class='say-snippet-placeholder__content'>
+        <p class='say-snippet-placeholder__title'>{{this.alertTitle}}</p>
+        {{#unless this.isSingleList}}
+          <ul class='say-snippet-placeholder__list'>
+            {{#each this.listNames as |listName|}}
+              <li>{{listName}}</li>
+            {{/each}}
+          </ul>
+        {{/unless}}
+        {{#unless this.config.hidePlaceholderInsertButton}}
+          <AuButton
+            @skin='link'
+            class='say-snippet-placeholder__button'
+            {{on 'click' @insertSnippet}}
+          >
+            {{t 'snippet-plugin.placeholder.button'}}
+          </AuButton>
+        {{/unless}}
+      </div>
+    </div>
   </template>
 }

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

@@ -13,6 +13,7 @@ import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
 import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 import { type EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
 import {
+  NodeSelection,
   type PNode,
   ProseParser,
   type Selection,
@@ -28,11 +29,14 @@ 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';
+import SnippetPlaceholder from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/nodes/placeholder';
+import { getSnippetListIdsFromNode } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
 
 interface ButtonSig {
   Args: {
     isActive: boolean;
-    onClick: () => void;
     icon: AuIconSignature['Args']['icon'];
     helpText: string;
   };
@@ -41,13 +45,8 @@ interface ButtonSig {
 
 const SnippetButton: TemplateOnlyComponent<ButtonSig> = <template>
   {{#if @isActive}}
-    <button
-      class='say-snippet-button'
-      type='button'
-      {{on 'click' @onClick}}
-      ...attributes
-    >
-      <AuIcon @icon={{@icon}} @size='large' {{on 'click' @onClick}} />
+    <button class='say-snippet-button' type='button' ...attributes>
+      <AuIcon @icon={{@icon}} @size='large' />
       <div class='say-snippet-button-text'>
         {{t @helpText}}
       </div>
@@ -68,9 +67,25 @@ 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;
   }
+  get isPlaceholder() {
+    return this.node.content.size === 0;
+  }
+  get allowMultipleSnippets() {
+    return this.node.attrs.allowMultipleSnippets as boolean;
+  }
+
   @action
   closeModal() {
     this.showModal = false;
@@ -80,10 +95,6 @@ export default class SnippetNode extends Component<Signature> {
     this.showModal = true;
   }
 
-  get allowMultipleSnippets() {
-    return this.node.attrs.allowMultipleSnippets as boolean;
-  }
-
   @action
   addFragment() {
     if (this.allowMultipleSnippets) {
@@ -100,17 +111,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: getSnippetListIdsFromNode(this.node),
+            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,
@@ -121,6 +161,12 @@ export default class SnippetNode extends Component<Signature> {
     return this.controller.mainEditorState.selection;
   }
   get isActive(): boolean {
+    if (
+      this.selection instanceof NodeSelection &&
+      this.selection.node === this.node
+    ) {
+      return true;
+    }
     const ancestor = findAncestors(this.selection.$from, (node: PNode) => {
       return hasOutgoingNamedNodeTriple(
         node.attrs,
@@ -133,7 +179,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();
@@ -153,8 +198,12 @@ export default class SnippetNode extends Component<Signature> {
       insertSnippet({
         content,
         title,
-        assignedSnippetListsIds,
-        importedResources: this.node.attrs.importedResources,
+        listProperties: {
+          placeholderId: this.node.attrs.placeholderId,
+          listIds: getSnippetListIdsFromNode(this.node),
+          names: this.node.attrs.snippetListNames,
+          importedResources: this.node.attrs.importedResources,
+        },
         range: { start, end },
         allowMultipleSnippets: this.allowMultipleSnippets,
       }),
@@ -162,40 +211,48 @@ export default class SnippetNode extends Component<Signature> {
   }
 
   <template>
-    <div class='say-snippet-card'>
-      <div class='say-snippet-title'>{{this.node.attrs.title}}</div>
-      <div class='say-snippet-content'>{{yield}}</div>
-      <div class='say-snippet-icons' contenteditable='false'>
-        <SnippetButton
-          @icon={{SynchronizeIcon}}
-          @helpText='snippet-plugin.snippet-node.change-fragment'
-          @onClick={{this.editFragment}}
-          @isActive={{this.isActive}}
-        />
-        <SnippetButton
-          @icon={{BinIcon}}
-          @helpText='snippet-plugin.snippet-node.remove-fragment'
-          @onClick={{this.deleteFragment}}
-          @isActive={{this.isActive}}
-          class='say-snippet-remove-button'
-        />
-        {{#if this.allowMultipleSnippets}}
+    {{#if this.isPlaceholder}}
+      <SnippetPlaceholder
+        @node={{@node}}
+        @selectNode={{@selectNode}}
+        @insertSnippet={{this.editFragment}}
+      />
+    {{else}}
+      <div class='say-snippet-card'>
+        <div class='say-snippet-title'>{{this.node.attrs.title}}</div>
+        <div class='say-snippet-content'>{{yield}}</div>
+        <div class='say-snippet-icons' contenteditable='false'>
           <SnippetButton
-            @icon={{AddIcon}}
-            @helpText='snippet-plugin.snippet-node.add-fragment'
-            @onClick={{this.addFragment}}
+            @icon={{SynchronizeIcon}}
+            @helpText='snippet-plugin.snippet-node.change-fragment'
+            {{on 'click' this.editFragment}}
             @isActive={{this.isActive}}
           />
-        {{/if}}
-      </div>
+          <SnippetButton
+            @icon={{BinIcon}}
+            @helpText='snippet-plugin.snippet-node.remove-fragment'
+            {{on 'click' this.deleteFragment}}
+            @isActive={{this.isActive}}
+            class='say-snippet-remove-button'
+          />
+          {{#if this.allowMultipleSnippets}}
+            <SnippetButton
+              @icon={{AddIcon}}
+              @helpText='snippet-plugin.snippet-node.add-fragment'
+              {{on 'click' this.addFragment}}
+              @isActive={{this.isActive}}
+            />
+          {{/if}}
+        </div>
 
-    </div>
+      </div>
+    {{/if}}
     <SearchModal
       @open={{this.showModal}}
       @closeModal={{this.closeModal}}
       @config={{this.node.attrs.config}}
       @onInsert={{this.onInsert}}
-      @assignedSnippetListsIds={{this.node.attrs.assignedSnippetListsIds}}
+      @snippetListIds={{getSnippetListIdsFromNode this.node}}
     />
   </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,14 +3,11 @@ 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';
-import {
-  getAssignedSnippetListsIdsFromProperties,
-  getSnippetListIdsProperties,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
+import { getSnippetListIdsFromNode } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
 import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 import SnippetInsert from './snippet-insert';
 
@@ -23,21 +20,15 @@ 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);
+    const listIds = getSnippetListIdsFromNode(activeNode);
 
-    if (activeNodeSnippetListIds.length > 0) {
+    if (listIds.length > 0) {
       return {
-        listIds: getAssignedSnippetListsIdsFromProperties(
-          activeNodeSnippetListIds,
-        ),
+        listIds,
+        placeholderId: activeNode.attrs.placeholderId,
+        names: activeNode.attrs.snippetListNames,
         importedResources: activeNode.attrs.importedResources,
       };
     }
@@ -53,11 +44,13 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
       isResourceNode(node),
     );
     while (parentNode) {
-      const properties = getSnippetListIdsProperties(parentNode.node);
+      const listIds = getSnippetListIdsFromNode(parentNode.node);
 
-      if (properties.length > 0) {
+      if (listIds.length > 0) {
         return {
-          listIds: getAssignedSnippetListsIdsFromProperties(properties),
+          listIds,
+          placeholderId: parentNode.node.attrs.placeholderId,
+          names: parentNode.node.attrs.snippetListNames,
           importedResources: parentNode.node.attrs.importedResources,
         };
       }
@@ -79,8 +72,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>

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

@@ -11,7 +11,7 @@ import {
   Slice,
 } from '@lblod/ember-rdfa-editor';
 import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
-import { type ImportedResourceMap } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { type SnippetListProperties } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 import insertSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/commands/insert-snippet';
 import SearchModal from './search-modal';
 
@@ -19,10 +19,7 @@ interface Sig {
   Args: {
     controller: SayController;
     config: SnippetPluginConfig;
-    snippetListProperties:
-      | { listIds: string[]; importedResources: ImportedResourceMap }
-      | undefined;
-    disabled?: boolean;
+    listProperties: SnippetListProperties | undefined;
     allowMultipleSnippets?: boolean;
   };
 }
@@ -33,6 +30,9 @@ export default class SnippetInsertComponent extends Component<Sig> {
   get controller() {
     return this.args.controller;
   }
+  get disabled() {
+    return (this.args.listProperties?.listIds.length ?? 0) === 0;
+  }
 
   @action
   openModal() {
@@ -58,19 +58,16 @@ export default class SnippetInsertComponent extends Component<Sig> {
   @action
   onInsert(content: string, title: string) {
     this.closeModal();
-    this.controller.doCommand(
-      insertSnippet({
-        content,
-        title,
-        assignedSnippetListsIds: this.args.snippetListProperties?.listIds || [],
-        importedResources: this.args.snippetListProperties?.importedResources,
-        allowMultipleSnippets: this.args.allowMultipleSnippets,
-      }),
-    );
-  }
-
-  get disabled() {
-    return this.args.disabled ?? false;
+    if (this.args.listProperties) {
+      this.controller.doCommand(
+        insertSnippet({
+          content,
+          title,
+          listProperties: this.args.listProperties,
+          allowMultipleSnippets: this.args.allowMultipleSnippets,
+        }),
+      );
+    }
   }
 
   <template>
@@ -91,7 +88,7 @@ export default class SnippetInsertComponent extends Component<Sig> {
       @closeModal={{this.closeModal}}
       @config={{@config}}
       @onInsert={{this.onInsert}}
-      @assignedSnippetListsIds={{@snippetListProperties.listIds}}
+      @snippetListIds={{@listProperties.listIds}}
     />
   </template>
 }

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

@@ -19,7 +19,7 @@
           {{else}}
             <SnippetPlugin::SnippetList::SnippetListView
               @snippetLists={{this.snippetListResource.value}}
-              @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
+              @snippetListIds={{this.snippetListIds}}
               @listNameFilter={{this.nameFilterText}}
               @sort={{this.sort}}
               @onChange={{this.onChange}}

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

@@ -23,7 +23,7 @@ interface Signature {
       lists: SnippetList[],
       allowMultipleSnippets: boolean,
     ) => void;
-    assignedSnippetListsIds: string[] | undefined;
+    snippetListIds: string[] | undefined;
     closeModal: () => void;
     open: boolean;
     allowMultipleSnippets?: boolean;
@@ -40,10 +40,8 @@ export default class SnippetListModalComponent extends Component<Signature> {
   // Display
   @tracked error: unknown;
 
-  @trackedReset('args.assignedSnippetListsIds')
-  assignedSnippetListsIds: string[] = [
-    ...(this.args.assignedSnippetListsIds ?? []),
-  ];
+  @trackedReset('args.snippetListIds')
+  snippetListIds: string[] = [...(this.args.snippetListIds ?? [])];
 
   @localCopy('args.allowMultipleSnippets') allowMultipleSnippets = false;
 
@@ -65,7 +63,7 @@ export default class SnippetListModalComponent extends Component<Signature> {
   @action
   saveAndClose() {
     const snippetLists = this.snippetListResource.value?.filter((snippetList) =>
-      this.assignedSnippetListsIds.includes(snippetList.id),
+      this.snippetListIds.includes(snippetList.id),
     );
     this.args.onSaveSnippetLists(
       snippetLists || [],
@@ -73,7 +71,7 @@ export default class SnippetListModalComponent extends Component<Signature> {
     );
     this.args.closeModal();
     // Clear selection for next time
-    this.assignedSnippetListsIds = [];
+    this.snippetListIds = [];
   }
 
   snippetListSearch = restartableTask(async () => {
@@ -107,7 +105,7 @@ export default class SnippetListModalComponent extends Component<Signature> {
   );
 
   @action
-  onChange(assignedSnippetListsIds: string[]) {
-    this.assignedSnippetListsIds = assignedSnippetListsIds;
+  onChange(snippetListIds: string[]) {
+    this.snippetListIds = snippetListIds;
   }
 }

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

@@ -53,7 +53,7 @@
             <AuCheckbox
               id={{row.label}}
               @onChange={{fn this.onChange row.id}}
-              @checked={{in-array @assignedSnippetListsIds row.id}}
+              @checked={{in-array @snippetListIds row.id}}
             />
           </td>
           <td>{{row.label}}</td>

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

@@ -4,25 +4,22 @@ import { SnippetList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snip
 
 interface Args {
   snippetLists: SnippetList[];
-  assignedSnippetListsIds: string[];
+  snippetListIds: string[];
   listNameFilter: string | null;
   isLoading: boolean;
-  onChange: (assignedSnippetListsIds: string[]) => void;
+  onChange: (snippetListIds: string[]) => void;
 }
 
 export default class SnippetListViewComponent extends Component<Args> {
   @action
   onChange(snippetId: string, isSelected: boolean) {
     if (isSelected) {
-      const newSnippetListIds = [
-        ...this.args.assignedSnippetListsIds,
-        snippetId,
-      ];
+      const newSnippetListIds = [...this.args.snippetListIds, snippetId];
 
       return this.args.onChange(newSnippetListIds);
     }
 
-    const newSnippetListIds = this.args.assignedSnippetListsIds.filter(
+    const newSnippetListIds = this.args.snippetListIds.filter(
       (id) => id !== snippetId,
     );
 
@@ -49,8 +46,7 @@ export default class SnippetListViewComponent extends Component<Args> {
       return;
     }
 
-    const isSelected =
-      this.args.assignedSnippetListsIds.includes(snippetListId);
+    const isSelected = this.args.snippetListIds.includes(snippetListId);
 
     this.onChange(snippetListId, !isSelected);
   }