@lblod/ember-rdfa-editor-lblod-plugins 24.3.2 → 25.1.0

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);
   }

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

@@ -53,7 +53,7 @@ export default class SnippetListSelect extends Component<Signature> {
     return getSnippetListIdsProperties(this.args.node.value);
   }
 
-  get assignedSnippetListsIds(): string[] {
+  get snippetListIds(): string[] {
     return getAssignedSnippetListsIdsFromProperties(
       this.snippetListIdsProperties,
     );
@@ -99,7 +99,7 @@ export default class SnippetListSelect extends Component<Signature> {
 
       <SnippetListModal
         @config={{@config}}
-        @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
+        @snippetListIds={{this.snippetListIds}}
         @onSaveSnippetLists={{this.onSaveSnippetLists}}
         @allowMultipleSnippets={{this.allowMultipleSnippets}}
         @open={{this.showModal}}

package/addon/components/variable-plugin/date/date-time-picker.ts

@@ -51,9 +51,9 @@ export default class DateTimePickerComponent extends Component<Args> {
         this.date = new Date();
         this.date.setHours(0, 0, 0, 0);
       }
-      this.date.setDate(date.getDate());
-      this.date.setMonth(date.getMonth());
       this.date.setFullYear(date.getFullYear());
+      this.date.setMonth(date.getMonth());
+      this.date.setDate(date.getDate());
       this.args.onChange(this.date);
     }
   }

package/addon/plugins/lmb-plugin/index.ts

@@ -1,8 +1,11 @@
 import { SayController } from '@lblod/ember-rdfa-editor';
 import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
+import { BestuursperiodeLabel } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 export type LmbPluginConfig = {
   endpoint: string;
+  defaultPeriod?: BestuursperiodeLabel;
+  defaultAdminUnit?: string;
 };
 
 export function createMandateeNode(

package/addon/plugins/lmb-plugin/utils/fetchMandatees.ts

@@ -1,11 +1,30 @@
+import { SearchSort } from '@lblod/ember-rdfa-editor-lblod-plugins/components/lmb-plugin/search-modal';
 import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
-import { executeQuery } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
+import { BESTUURSPERIODES } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import {
+  executeQuery,
+  sparqlEscapeString,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
 
-type FetchMandateesArgs = {
+export type FetchMandateesArgs = {
   endpoint: string;
+  searchString: string;
+  adminUnitSearch: string;
+  page: number;
+  pageSize: number;
+  sort: SearchSort;
+  period: (typeof BESTUURSPERIODES)[keyof typeof BESTUURSPERIODES];
 };
 
-export async function fetchMandatees({ endpoint }: FetchMandateesArgs) {
+export async function countMandatees({
+  endpoint,
+  searchString,
+  adminUnitSearch,
+  period,
+}: Pick<
+  FetchMandateesArgs,
+  'searchString' | 'endpoint' | 'period' | 'adminUnitSearch'
+>) {
   const query = `
       PREFIX besluit: <http://data.vlaanderen.be/ns/besluit#>
       PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
@@ -14,7 +33,8 @@ export async function fetchMandatees({ endpoint }: FetchMandateesArgs) {
       PREFIX persoon: <http://data.vlaanderen.be/ns/persoon#>
       PREFIX org: <http://www.w3.org/ns/org#>
       PREFIX regorg: <https://www.w3.org/ns/regorg#>
-      SELECT DISTINCT ?mandatee ?person ?firstName ?lastName ?statusLabel ?fractieLabel ?roleLabel WHERE {
+        PREFIX lmb: <http://lblod.data.gift/vocabularies/lmb/>
+      SELECT DISTINCT (count(distinct ?mandatee) as ?count) WHERE {
           ?mandatee a mandaat:Mandataris;
             org:holds ?mandaat;
             mandaat:status ?status;
@@ -24,21 +44,100 @@ export async function fetchMandatees({ endpoint }: FetchMandateesArgs) {
           ?status skos:prefLabel ?statusLabel.
           ?mandaat org:role ?role.
           ?role skos:prefLabel ?roleLabel.
-          OPTIONAL  {
-            ?mandatee mandaat:einde ?endDate
+            ?bestuursorgaanIT org:hasPost ?mandaat.
+            ?bestuursorgaanIT lmb:heeftBestuursperiode <${period}>.
+            ?bestuursorgaanIT mandaat:isTijdspecialisatieVan/besluit:bestuurt/skos:prefLabel ?adminUnitName.
+
+          ${adminUnitSearch.length ? `FILTER(contains(lcase(?adminUnitName), lcase(${sparqlEscapeString(adminUnitSearch)}) )).` : ''}
+          ${searchString.length ? `FILTER(contains(lcase(concat(?firstName, " ", ?lastName)), lcase(${sparqlEscapeString(searchString)}) )).` : ''}
+      }
+      `;
+  const response = await executeQuery({
+    query,
+    endpoint,
+  });
+  console.log(response);
+  return Number(response.results.bindings[0].count.value);
+}
+
+export async function fetchMandatees({
+  endpoint,
+  page,
+  pageSize,
+  searchString,
+  adminUnitSearch,
+  sort,
+  period,
+}: FetchMandateesArgs) {
+  const count = await countMandatees({
+    endpoint,
+    searchString,
+    period,
+    adminUnitSearch,
+  });
+  let sortString = '?lastName ?firstName';
+  if (sort) {
+    const [key, direction] = sort;
+    switch (key) {
+      case 'fullName':
+        sortString = `${direction}(?lastName) ?firstName`;
+        break;
+      case 'status':
+        sortString = `${direction}(?statusLabel) ?lastName ?firstName`;
+        break;
+      case 'fractie':
+        sortString = `${direction}(?fractieLabel) ?lastName ?firstName`;
+        break;
+      case 'role':
+        sortString = `${direction}(?roleLabel) ?lastName ?firstName`;
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  const query = `
+      PREFIX besluit: <http://data.vlaanderen.be/ns/besluit#>
+      PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+      PREFIX mandaat: <http://data.vlaanderen.be/ns/mandaat#>
+      PREFIX foaf: <http://xmlns.com/foaf/0.1/>
+      PREFIX persoon: <http://data.vlaanderen.be/ns/persoon#>
+      PREFIX org: <http://www.w3.org/ns/org#>
+      PREFIX regorg: <https://www.w3.org/ns/regorg#>
+        PREFIX lmb: <http://lblod.data.gift/vocabularies/lmb/>
+      SELECT DISTINCT ?mandatee ?person ?firstName ?lastName ?statusLabel ?fractieLabel ?roleLabel WHERE {
+          {
+            ?mandatee a mandaat:Mandataris;
+              org:holds ?mandaat;
+              mandaat:status ?status;
+              mandaat:isBestuurlijkeAliasVan ?person.
+            ?person foaf:familyName ?lastName;
+              persoon:gebruikteVoornaam ?firstName.
+            ?status skos:prefLabel ?statusLabel.
+            ?mandaat org:role ?role.
+            ?role skos:prefLabel ?roleLabel.
+            ?bestuursorgaanIT org:hasPost ?mandaat.
+            ?bestuursorgaanIT lmb:heeftBestuursperiode <${period}>.
+            ?bestuursorgaanIT mandaat:isTijdspecialisatieVan/besluit:bestuurt/skos:prefLabel ?adminUnitName.
           }
           OPTIONAL {
             ?mandatee org:hasMembership ?membership.
             ?membership org:organisation ?fractie.
             ?fractie regorg:legalName ?fractieLabel.
           }
-          filter (!bound(?endDate) || ?endDate > now()).
+
+          ${adminUnitSearch.length ? `FILTER(contains(lcase(?adminUnitName), lcase(${sparqlEscapeString(adminUnitSearch)}) )).` : ''}
+          ${searchString.length ? `FILTER(contains(lcase(concat(?firstName, "", ?lastName)), lcase(${sparqlEscapeString(searchString)}) )).` : ''}
       }
+        ORDER BY ${sortString}
+        LIMIT ${pageSize} OFFSET ${page * pageSize}
       `;
   const response = await executeQuery({
     query,
     endpoint,
   });
+  console.log(response.results.bindings);
   const mandatees = response.results.bindings.map(Mandatee.fromBinding);
-  return mandatees;
+  return { mandatees, count };
 }

package/addon/plugins/snippet-plugin/commands/insert-snippet.ts

@@ -3,7 +3,7 @@ import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transactio
 import { addPropertyToNode } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
 import { recalculateNumbers } from '../../structure-plugin/recalculate-structure-numbers';
 import { createSnippet } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/nodes/snippet';
-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 {
   isSome,
   unwrap,
@@ -12,8 +12,7 @@ import {
 export interface InsertSnippetCommandArgs {
   content: string;
   title: string;
-  assignedSnippetListsIds: string[];
-  importedResources?: ImportedResourceMap;
+  listProperties: SnippetListProperties;
   range?: { start: number; end: number };
   allowMultipleSnippets?: boolean;
 }
@@ -21,8 +20,7 @@ export interface InsertSnippetCommandArgs {
 const insertSnippet = ({
   content,
   title,
-  assignedSnippetListsIds,
-  importedResources,
+  listProperties,
   range,
   allowMultipleSnippets,
 }: InsertSnippetCommandArgs): Command => {
@@ -44,13 +42,12 @@ const insertSnippet = ({
         schema: state.schema,
         content,
         title,
-        snippetListIds: assignedSnippetListsIds,
-        importedResources,
+        listProperties,
         allowMultipleSnippets,
       });
 
       const addImportedResourceProperties = Object.values(
-        importedResources ?? {},
+        listProperties.importedResources ?? {},
       )
         .map((linked) => {
           const newProperties =

package/addon/plugins/snippet-plugin/commands/update-snippet-placeholder.ts

@@ -2,7 +2,7 @@ import { Command } from '@lblod/ember-rdfa-editor';
 import { addProperty, removeProperty } from '@lblod/ember-rdfa-editor/commands';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import { SNIPPET_LIST_RDFA_PREDICATE } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
-import { getSnippetUriFromId } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { getSnippetUriFromId } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
 import { type OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
 import { type ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 import {
@@ -59,7 +59,7 @@ export const updateSnippetPlaceholder = ({
       });
       transaction = transaction.setNodeAttribute(
         node.pos,
-        'listNames',
+        'snippetListNames',
         newSnippetLists.map((list) => list.label),
       );
       transaction = transaction.setNodeAttribute(

package/addon/plugins/snippet-plugin/index.ts

@@ -6,6 +6,7 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { dateValue } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
+import { getSnippetIdFromUri } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
 
 export const DEFAULT_CONTENT_STRING = 'block+';
 
@@ -34,6 +35,13 @@ export class Snippet {
 
 export type ImportedResourceMap = Record<string, Option<string>>;
 
+export type SnippetListProperties = {
+  placeholderId: string;
+  listIds: string[];
+  names: string[];
+  importedResources: ImportedResourceMap;
+};
+
 export type SnippetListArgs = {
   id: string;
   label: string;
@@ -41,13 +49,6 @@ export type SnippetListArgs = {
   importedResources: string[];
 };
 
-const snippetListBase = 'http://lblod.data.gift/snippet-lists/';
-
-export const getSnippetUriFromId = (id: string) => `${snippetListBase}${id}`;
-
-export const getSnippetIdFromUri = (uri: string) =>
-  uri.replace(snippetListBase, '');
-
 export class SnippetList {
   id: string;
   label: string;

package/addon/plugins/snippet-plugin/nodes/snippet-placeholder.ts

@@ -20,11 +20,12 @@ import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugi
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 import { jsonParse } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import {
-  getSnippetUriFromId,
+  type SnippetListProperties,
   type ImportedResourceMap,
   type SnippetList,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
-import { SNIPPET_LIST_RDFA_PREDICATE } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
+import { tripleForSnippetListId } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
+import { OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
 
 export function importedResourcesFromSnippetLists(
   lists: SnippetList[],
@@ -38,27 +39,56 @@ export function importedResourcesFromSnippetLists(
   );
 }
 
-export function createSnippetPlaceholder(
-  lists: SnippetList[],
-  schema: Schema,
-  allowMultipleSnippets?: boolean,
-) {
+type CreateSnippetPlaceholderArgs = {
+  schema: Schema;
+  allowMultipleSnippets?: boolean;
+} & (
+  | {
+      listProperties: SnippetListProperties;
+    }
+  | {
+      lists: SnippetList[];
+    }
+);
+
+export function createSnippetPlaceholder({
+  schema,
+  allowMultipleSnippets,
+  ...args
+}: CreateSnippetPlaceholderArgs) {
+  let additionalProperties: OutgoingTriple[];
+  let listProps: Omit<SnippetListProperties, 'listIds'>;
+  if ('lists' in args) {
+    listProps = {
+      // This is a completely new placeholder, so new id
+      placeholderId: uuidv4(),
+      names: args.lists.map((list) => list.label),
+      importedResources: importedResourcesFromSnippetLists(args.lists),
+    };
+    additionalProperties = args.lists.map((list) =>
+      tripleForSnippetListId(list.id),
+    );
+  } else {
+    // Replacing the last snippet, so keep the id
+    listProps = args.listProperties;
+    additionalProperties = args.listProperties.listIds.map(
+      tripleForSnippetListId,
+    );
+  }
   const mappingResource = `http://example.net/lblod-snippet-placeholder/${uuidv4()}`;
   return schema.nodes.snippet_placeholder.create({
     rdfaNodeType: 'resource',
-    listNames: lists.map((list) => list.label),
+    placeholderId: listProps.placeholderId,
+    snippetListNames: listProps.names,
     subject: mappingResource,
     properties: [
       {
         predicate: RDF('type').full,
         object: sayDataFactory.namedNode(EXT('SnippetPlaceholder').full),
       },
-      ...lists.map((list) => ({
-        predicate: SNIPPET_LIST_RDFA_PREDICATE.full,
-        object: sayDataFactory.namedNode(getSnippetUriFromId(list.id)),
-      })),
+      ...additionalProperties,
     ],
-    importedResources: importedResourcesFromSnippetLists(lists),
+    importedResources: listProps.importedResources,
     allowMultipleSnippets,
   });
 }
@@ -73,20 +103,22 @@ const emberNodeConfig: EmberNodeConfig = {
   attrs: {
     ...rdfaAttrSpec({ rdfaAware: true }),
     typeof: { default: EXT('SnippetPlaceholder') },
-    listNames: { default: [] },
+    placeholderId: { default: '' },
+    snippetListNames: { default: [] },
     importedResources: { default: {} },
     allowMultipleSnippets: { default: false },
   },
   component: SnippetPlaceholderComponent,
   serialize(node, editorState) {
     const t = getTranslationFunction(editorState);
+    const listNames = node.attrs.snippetListNames as string[];
     return renderRdfaAware({
       renderable: node,
       tag: 'div',
       attrs: {
         ...node.attrs,
         class: 'say-snippet-placeholder-node',
-        'data-list-names': (node.attrs.listNames as string[]).join(','),
+        'data-list-names': listNames && JSON.stringify(listNames),
         'data-imported-resources': JSON.stringify(node.attrs.importedResources),
         'data-allow-multiple-snippets': node.attrs.allowMultipleSnippets,
       },
@@ -112,9 +144,20 @@ const emberNodeConfig: EmberNodeConfig = {
             EXT('SnippetPlaceholder'),
           )
         ) {
+          let snippetListNames = jsonParse(
+            node.getAttribute('data-list-names'),
+          );
+          if (!snippetListNames) {
+            // We might have an older version which is comma separated
+            snippetListNames = node.getAttribute('data-list-names')?.split(',');
+          }
           return {
             ...rdfaAttrs,
-            listNames: node.getAttribute('data-list-names')?.split(','),
+            // Generate a placeholderId any time we deserialise, this way we don't need to handle
+            // generating new ids whenever we re-use parts of a document (e.g. copy-paste or
+            // placeholders inside snippets)
+            placeholderId: uuidv4(),
+            snippetListNames,
             importedResources: jsonParse(
               node.getAttribute('data-imported-resources'),
             ),

package/addon/plugins/snippet-plugin/nodes/snippet.ts

@@ -32,7 +32,7 @@ import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugi
 import { jsonParse } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import {
   DEFAULT_CONTENT_STRING,
-  type ImportedResourceMap,
+  SnippetListProperties,
   type SnippetPluginConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 
@@ -60,11 +60,10 @@ function outgoingFromBacklink(
 
 interface CreateSnippetArgs {
   schema: Schema;
+  allowMultipleSnippets?: boolean;
   content: string;
   title: string;
-  snippetListIds: string[];
-  importedResources?: ImportedResourceMap;
-  allowMultipleSnippets?: boolean;
+  listProperties: SnippetListProperties;
 }
 
 /**
@@ -77,9 +76,13 @@ export function createSnippet({
   schema,
   content,
   title,
-  snippetListIds,
-  importedResources,
   allowMultipleSnippets,
+  listProperties: {
+    listIds: snippetListIds,
+    names: snippetListNames,
+    importedResources,
+    placeholderId,
+  },
 }: CreateSnippetArgs): [PNode, Map<string, OutgoingTriple[]>] {
   // Replace instances of linked to uris with the resources that exist in the outer document.
   let replacedContent = content;
@@ -100,7 +103,9 @@ export function createSnippet({
   const node = schema.node(
     'snippet',
     {
-      assignedSnippetListsIds: snippetListIds,
+      placeholderId,
+      snippetListIds,
+      snippetListNames,
       title,
       subject: `http://data.lblod.info/snippets/${uuidv4()}`,
       importedResources,
@@ -153,7 +158,9 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
       ],
     },
     rdfaNodeType: { default: 'resource' },
-    assignedSnippetListsIds: { default: [] },
+    placeholderId: { default: '' },
+    snippetListNames: { default: [] },
+    snippetListIds: { default: [] },
     importedResources: { default: {} },
     title: { default: '' },
     config: { default: options },
@@ -162,14 +169,17 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
   component: SnippetComponent,
   content: options.allowedContent || DEFAULT_CONTENT_STRING,
   serialize(node) {
+    const listNames = node.attrs.snippetListNames as string[];
     return renderRdfaAware({
       renderable: node,
       tag: 'div',
       attrs: {
         ...node.attrs,
+        'data-snippet-placeholder-id': node.attrs.placeholderId,
         'data-assigned-snippet-ids': (
-          node.attrs.assignedSnippetListsIds as string[]
-        ).join(','),
+          node.attrs.snippetListIds as string[]
+        )?.join(','),
+        'data-list-names': listNames && JSON.stringify(listNames),
         'data-imported-resources': JSON.stringify(node.attrs.importedResources),
         'data-snippet-title': node.attrs.title,
         'data-allow-multiple-snippets': node.attrs.allowMultipleSnippets,
@@ -186,11 +196,19 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
         if (
           hasOutgoingNamedNodeTriple(rdfaAttrs, RDF('type'), EXT('Snippet'))
         ) {
+          // For older documents without placeholder ids, treat each inserted snippet separately.
+          // This means that pressing 'remove snippet' will add a placeholder in it's place, which
+          // is not expected, but simple to remove (hitting backspace). This is better than
+          // risking having no ability to insert another snippet.
+          const placeholderId =
+            node.getAttribute('data-snippet-placeholder-id') || uuidv4();
           return {
             ...rdfaAttrs,
-            assignedSnippetListsIds: node
+            placeholderId,
+            snippetListIds: node
               .getAttribute('data-assigned-snippet-ids')
               ?.split(','),
+            snippetListNames: jsonParse(node.getAttribute('data-list-names')),
             importedResources: jsonParse(
               node.getAttribute('data-imported-resources'),
             ),