@lblod/ember-rdfa-editor-lblod-plugins 38.0.3 → 38.1.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 38.1.0
+
+### Minor Changes
+
+- [#674](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/674) [`9ded434`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/9ded4345c52e1bc6f22bb3fbae8dfd96c5d6e6be) Thanks [@piemonkey](https://github.com/piemonkey)! - Cache snippets for insertion when not doing a text search
+
+- [#674](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/674) [`13576c5`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/13576c5bd749b40bdc33d26c0b31c3a0a11b96b9) Thanks [@piemonkey](https://github.com/piemonkey)! - Query for snippet list names instead of storing names when inserting
+
+- [#674](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/674) [`b107980`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/b10798018e487503613fa3ba4473c91cde20dbef) Thanks [@piemonkey](https://github.com/piemonkey)! - No longer store snippet list names on snippet nodes. Passing this when creating snippets or placeholders is now deprecated.
+
+- [#670](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/670) [`530dafc`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/530dafcf0723bf7f06715633563ae73d19ec9f68) Thanks [@piemonkey](https://github.com/piemonkey)! - Make endpoint arg for location variable config required in the typescript type, which matches the documentation, and the reality of handling locations without a source attribute
+
+- [#674](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/674) [`f5e1c0d`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f5e1c0dd13b2d3af6ca2f47ad8789247c2e94af4) Thanks [@piemonkey](https://github.com/piemonkey)! - Cache snippet list names to avoid excess queries
+
+- [#673](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/673) [`8913ca5`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8913ca57dfa9e3ccfabdea405dc7cd38acfb1459) Thanks [@piemonkey](https://github.com/piemonkey)! - Add contextual actions for filling in codelist values. This introduces new contextual actions for
+  the variable-plugin, so the import for place description actions has moved to
+  `@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/contextual-actions/place-description`.
+  The old import location remains for backwards compatibility.
+
+### Patch Changes
+
+- [#673](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/673) [`e2b9436`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e2b943657850d63673457233a7aa34676fe42ad3) Thanks [@piemonkey](https://github.com/piemonkey)! - Fix bug in location description context actions where one cache was used for both zonal and non-zonal options
+
+- [#673](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/673) [`8a844bd`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8a844bd88a2bc1786034136bb02c3d7891ef57ac) Thanks [@piemonkey](https://github.com/piemonkey)! - Keep context menu open after selecting codelist options
+
+- [#673](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/673) [`593e95e`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/593e95e4ae870719bc48cb14d3759d7f0f10041e) Thanks [@piemonkey](https://github.com/piemonkey)! - bump editor to [@lblod](https://github.com/lblod/ember-rdfa-editor/releases/tag/@lblod/ember-rdfa-editor@13.16.0)
+
 ## 38.0.3
 
 ### Patch Changes

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

@@ -13,6 +13,7 @@ import getClassnamesFromNode from '@lblod/ember-rdfa-editor/utils/get-classnames
 interface Signature {
   Args: Pick<EmberNodeArgs, 'node' | 'selectNode'> & {
     insertSnippet: () => void;
+    snippetListNames: string[];
   };
 }
 
@@ -22,19 +23,16 @@ export default class SnippetPluginPlaceholder extends Component<Signature> {
   get node() {
     return this.args.node;
   }
-  get listNames() {
-    return this.args.node.attrs.snippetListNames;
-  }
   get config(): SnippetPluginConfig {
     return this.node.attrs.config;
   }
   get isSingleList() {
-    return this.listNames.length === 1;
+    return this.args.snippetListNames.length === 1;
   }
   get alertTitle() {
     if (this.isSingleList) {
       return this.intl.t('snippet-plugin.placeholder.title-single', {
-        listName: this.listNames[0],
+        listName: this.args.snippetListNames[0],
       });
     } else {
       return this.intl.t('snippet-plugin.placeholder.title-multiple');
@@ -58,7 +56,7 @@ export default class SnippetPluginPlaceholder extends Component<Signature> {
         <p class='say-snippet-placeholder__title'>{{this.alertTitle}}</p>
         {{#unless this.isSingleList}}
           <ul class='say-snippet-placeholder__list'>
-            {{#each this.listNames as |listName|}}
+            {{#each @snippetListNames as |listName|}}
               <li>{{listName}}</li>
             {{/each}}
           </ul>

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

@@ -4,7 +4,9 @@ import SearchModal from '../search-modal';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { TemplateOnlyComponent } from '@ember/component/template-only';
+import { service } from '@ember/service';
 import t from 'ember-intl/helpers/t';
+import { trackedFunction } from 'reactiveweb/function';
 import AuIcon, {
   type AuIconSignature,
 } from '@appuniversum/ember-appuniversum/components/au-icon';
@@ -33,8 +35,12 @@ import { createSnippetPlaceholder } from '@lblod/ember-rdfa-editor-lblod-plugins
 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 { getSnippetListUrisFromNode } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
-import { Snippet } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import {
+  Snippet,
+  SnippetPluginConfig,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 import getClassnamesFromNode from '@lblod/ember-rdfa-editor/utils/get-classnames-from-node';
+import SnippetFetchService from '@lblod/ember-rdfa-editor-lblod-plugins/services/snippet-fetch-service';
 
 interface ButtonSig {
   Args: {
@@ -64,8 +70,11 @@ interface Signature {
 }
 
 export default class SnippetNode extends Component<Signature> {
+  @service declare snippetFetchService: SnippetFetchService;
+
   @tracked showModal: boolean = false;
   @tracked mode: string = '';
+
   get controller() {
     return this.args.controller;
   }
@@ -87,6 +96,12 @@ export default class SnippetNode extends Component<Signature> {
   get allowMultipleSnippets() {
     return this.node.attrs.allowMultipleSnippets as boolean;
   }
+  get snippetListUris() {
+    return getSnippetListUrisFromNode(this.node);
+  }
+  get config(): SnippetPluginConfig {
+    return this.node.attrs.config;
+  }
 
   @action
   closeModal() {
@@ -131,8 +146,8 @@ export default class SnippetNode extends Component<Signature> {
         const node = createSnippetPlaceholder({
           listProperties: {
             placeholderId: this.node.attrs.placeholderId,
-            listUris: getSnippetListUrisFromNode(this.node),
-            names: this.node.attrs.snippetListNames,
+            listUris: this.snippetListUris,
+            names: this.snippetListNames,
             importedResources: this.node.attrs.importedResources,
           },
           schema: this.schema,
@@ -202,8 +217,8 @@ export default class SnippetNode extends Component<Signature> {
         title: snippet.title ?? '',
         listProperties: {
           placeholderId: this.node.attrs.placeholderId,
-          listUris: getSnippetListUrisFromNode(this.node),
-          names: this.node.attrs.snippetListNames,
+          listUris: this.snippetListUris,
+          names: this.snippetListNames,
           importedResources: this.node.attrs.importedResources,
         },
         range: { start, end },
@@ -216,12 +231,23 @@ export default class SnippetNode extends Component<Signature> {
     return getClassnamesFromNode(this.args.node);
   }
 
+  loadedListNames = trackedFunction(this, async () => {
+    return this.snippetFetchService.getListNames(
+      this.config,
+      this.snippetListUris,
+    );
+  });
+  get snippetListNames() {
+    return this.loadedListNames.value ?? [];
+  }
+
   <template>
     {{#if this.isPlaceholder}}
       <SnippetPlaceholder
         @node={{@node}}
         @selectNode={{@selectNode}}
         @insertSnippet={{this.editFragment}}
+        @snippetListNames={{this.snippetListNames}}
       />
     {{else}}
       <div class='{{this.class}} say-snippet-card'>
@@ -268,10 +294,10 @@ export default class SnippetNode extends Component<Signature> {
     <SearchModal
       @open={{this.showModal}}
       @closeModal={{this.closeModal}}
-      @config={{this.node.attrs.config}}
+      @config={{this.config}}
       @onInsert={{this.onInsert}}
-      @snippetListUris={{getSnippetListUrisFromNode this.node}}
-      @snippetListNames={{this.node.attrs.snippetListNames}}
+      @snippetListUris={{this.snippetListUris}}
+      @snippetListNames={{this.snippetListNames}}
     />
   </template>
 }

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

@@ -1,7 +1,7 @@
-import pagination from '@lblod/ember-rdfa-editor-lblod-plugins/helpers/pagination';
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
+import { service } from '@ember/service';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 import { tracked } from '@glimmer/tracking';
@@ -13,10 +13,11 @@ import AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main
 import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
 import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
 
+import { Option } from '@lblod/ember-rdfa-editor/utils/option';
+import pagination from '@lblod/ember-rdfa-editor-lblod-plugins/helpers/pagination';
 import AuNativeInput from '@lblod/ember-rdfa-editor-lblod-plugins/components/au-native-input';
 import Loading from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/loading';
 import AlertLoadError from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/alert-load-error';
-import { fetchSnippets } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/fetch-data';
 import {
   Snippet,
   SnippetPluginConfig,
@@ -24,17 +25,20 @@ import {
 import PreviewList from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/documents/preview-list';
 import AlertNoItems from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/alert-no-items';
 import PaginationView from '@lblod/ember-rdfa-editor-lblod-plugins/components/pagination/pagination-view';
+import SnippetFetchService from '@lblod/ember-rdfa-editor-lblod-plugins/services/snippet-fetch-service';
 
 interface Args {
   config: SnippetPluginConfig;
-  snippetListUris: string[] | undefined;
-  snippetListNames: string[] | undefined;
+  snippetListUris: Option<string[]>;
+  snippetListNames: Option<string[]>;
   closeModal: () => void;
   open: boolean;
   onInsert: (snippet: Snippet) => void;
 }
 
 export default class SnippetPluginSearchModalComponent extends Component<Args> {
+  @service declare snippetFetchService: SnippetFetchService;
+
   // Filtering
   @tracked inputSearchText: string | null = null;
 
@@ -75,12 +79,14 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
   }
 
   snippetsSearch = restartableTask(async () => {
-    await timeout(500);
+    if (this.searchText) {
+      await timeout(500);
+    }
 
     const abortController = new AbortController();
 
     try {
-      const queryResult = await fetchSnippets({
+      const queryResult = await this.snippetFetchService.getSnippets({
         endpoint: this.args.config.endpoint,
         abortSignal: abortController.signal,
         filter: {

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

@@ -28,7 +28,6 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
       return {
         listUris,
         placeholderId: activeNode.attrs.placeholderId,
-        names: activeNode.attrs.snippetListNames,
         importedResources: activeNode.attrs.importedResources,
       };
     }
@@ -50,7 +49,6 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
         return {
           listUris,
           placeholderId: parentNode.node.attrs.placeholderId,
-          names: parentNode.node.attrs.snippetListNames,
           importedResources: parentNode.node.attrs.importedResources,
         };
       }

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

@@ -1,7 +1,6 @@
 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 { tripleForSnippetListUri } 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 {
@@ -47,20 +46,12 @@ export const updateSnippetPlaceholder = ({
 
         addProperty({
           resource,
-          property: {
-            predicate: SNIPPET_LIST_RDFA_PREDICATE.prefixed,
-            object: sayDataFactory.namedNode(list.uri),
-          },
+          property: tripleForSnippetListUri(list.uri),
           transaction,
         })(newState, (newTransaction) => {
           transaction = newTransaction;
         });
       });
-      transaction = transaction.setNodeAttribute(
-        node.pos,
-        'snippetListNames',
-        newSnippetLists.map((list) => list.label),
-      );
       transaction = transaction.setNodeAttribute(
         node.pos,
         'importedResources',

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

@@ -33,7 +33,8 @@ export type ImportedResourceMap = Record<string, Option<string>>;
 export type SnippetListProperties = {
   placeholderId: string;
   listUris: string[];
-  names: string[];
+  /** @deprecated Passing snippet list names is no longer necessary */
+  names?: string[];
   importedResources: ImportedResourceMap;
 };
 

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

@@ -81,7 +81,6 @@ export function createSnippetPlaceholder({
   return schema.nodes.snippet_placeholder.create({
     rdfaNodeType: 'resource',
     placeholderId: listProps.placeholderId,
-    snippetListNames: listProps.names,
     subject: mappingResource,
     properties: [
       {
@@ -106,7 +105,6 @@ const emberNodeConfig = (config: SnippetPluginConfig): EmberNodeConfig => ({
     ...rdfaAttrSpec({ rdfaAware: true }),
     typeof: { default: EXT('SnippetPlaceholder') },
     placeholderId: { default: '' },
-    snippetListNames: { default: [] },
     importedResources: { default: {} },
     allowMultipleSnippets: { default: false },
     config: {
@@ -117,13 +115,11 @@ const emberNodeConfig = (config: SnippetPluginConfig): EmberNodeConfig => ({
   classNames: ['say-snippet'],
   serialize(node, editorState) {
     const t = getTranslationFunction(editorState);
-    const listNames = node.attrs.snippetListNames as string[];
     return renderRdfaAware({
       renderable: node,
       tag: 'div',
       attrs: {
         class: `${getClassnamesFromNode(node)} say-snippet-placeholder`,
-        'data-list-names': listNames && JSON.stringify(listNames),
         'data-imported-resources': JSON.stringify(node.attrs.importedResources),
         'data-allow-multiple-snippets': node.attrs.allowMultipleSnippets,
       },
@@ -149,20 +145,12 @@ const emberNodeConfig = (config: SnippetPluginConfig): 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,
             // 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

@@ -84,12 +84,7 @@ export function createSnippet({
   content,
   title,
   allowMultipleSnippets,
-  listProperties: {
-    listUris,
-    names: snippetListNames,
-    importedResources,
-    placeholderId,
-  },
+  listProperties: { listUris, 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;
@@ -116,7 +111,6 @@ export function createSnippet({
     {
       placeholderId,
       properties,
-      snippetListNames,
       title,
       subject: `http://data.lblod.info/snippets/${uuidv4()}`,
       importedResources,
@@ -169,7 +163,6 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
     },
     rdfaNodeType: { default: 'resource' },
     placeholderId: { default: '' },
-    snippetListNames: { default: [] },
     importedResources: { default: {} },
     title: { default: '' },
     config: { default: options },
@@ -180,13 +173,11 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
   content: options.allowedContent || DEFAULT_CONTENT_STRING,
   classNames: ['say-snippet'],
   serialize(node) {
-    const listNames = node.attrs.snippetListNames as string[];
     return renderRdfaAware({
       renderable: node,
       tag: 'div',
       attrs: {
         'data-snippet-placeholder-id': node.attrs.placeholderId,
-        '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,
@@ -225,7 +216,6 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
             ...rdfaAttrs,
             properties,
             placeholderId,
-            snippetListNames: jsonParse(node.getAttribute('data-list-names')),
             importedResources: jsonParse(
               node.getAttribute('data-imported-resources'),
             ),

package/addon/plugins/snippet-plugin/utils/fetch-data.ts

@@ -7,7 +7,7 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
 import { Snippet, SnippetList, SnippetListArgs } from '../index';
 
-type Filter = { name?: string; snippetListUris?: string[] };
+export type SnippetFilter = { name?: string; snippetListUris?: string[] };
 export type OrderBy =
   | 'label'
   | 'created-on'
@@ -15,9 +15,9 @@ export type OrderBy =
   | '-created-on'
   | ''
   | null;
-type Pagination = { pageNumber: number; pageSize: number };
+export type Pagination = { pageNumber: number; pageSize: number };
 
-const buildSnippetCountQuery = ({ name, snippetListUris }: Filter) => {
+const buildSnippetCountQuery = ({ name, snippetListUris }: SnippetFilter) => {
   return /* sparql */ `
       PREFIX schema: <http://schema.org/>
       PREFIX dct: <http://purl.org/dc/terms/>
@@ -52,7 +52,7 @@ const buildSnippetCountQuery = ({ name, snippetListUris }: Filter) => {
       `;
 };
 
-// const buildSnippetListCountQuery = ({ name }: Filter) => {
+// const buildSnippetListCountQuery = ({ name }: SnippetFilter) => {
 //   return `
 //       PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
 //       SELECT (COUNT(?snippetLists) AS ?count)
@@ -72,7 +72,7 @@ const buildSnippetFetchQuery = ({
   filter: { name, snippetListUris },
   pagination: { pageSize, pageNumber },
 }: {
-  filter: Filter;
+  filter: SnippetFilter;
   pagination: Pagination;
 }) => {
   return /* sparql */ `
@@ -138,7 +138,7 @@ const buildSnippetListFetchQuery = ({
   filter: { name },
   orderBy,
 }: {
-  filter: Filter;
+  filter: SnippetFilter;
   orderBy: OrderBy;
 }) => {
   return /* sparql */ `
@@ -161,6 +161,21 @@ const buildSnippetListFetchQuery = ({
         `;
 };
 
+const buildSnippetListNameFetchQuery = (snippetListUris: string[]) => {
+  return /* sparql */ `
+        PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+        PREFIX say: <https://say.data.gift/ns/>
+
+        SELECT DISTINCT ?snippetList ?snippetListName WHERE {
+          ?snippetList a say:SnippetList;
+            skos:prefLabel ?snippetListName.
+          FILTER (?snippetList IN (${snippetListUris
+            .map(sparqlEscapeUri)
+            .join(', ')}))
+        }
+        `;
+};
+
 export const fetchSnippets = async ({
   endpoint,
   abortSignal,
@@ -169,7 +184,7 @@ export const fetchSnippets = async ({
 }: {
   endpoint: string;
   abortSignal: AbortSignal;
-  filter: Filter;
+  filter: SnippetFilter;
   pagination: Pagination;
 }) => {
   if (!filter.snippetListUris?.length) {
@@ -196,14 +211,13 @@ export const fetchSnippets = async ({
     abortSignal,
   });
 
-  const results = queryResult.results.bindings.map(
-    (binding) =>
-      new Snippet({
-        title: binding.title?.value,
-        createdOn: binding.createdOn?.value,
-        content: binding.content?.value,
-      }),
-  );
+  const results = queryResult.results.bindings.map((binding) => {
+    return new Snippet({
+      title: binding.title?.value,
+      createdOn: binding.createdOn?.value,
+      content: binding.content?.value,
+    });
+  });
 
   return { totalCount, results };
 };
@@ -216,7 +230,7 @@ export const fetchSnippetLists = async ({
 }: {
   endpoint: string;
   abortSignal: AbortSignal;
-  filter: Filter;
+  filter: SnippetFilter;
   orderBy: OrderBy;
 }) => {
   // We don't currently use this count, so skip the query, but we'll need it if we make pagination
@@ -263,3 +277,28 @@ export const fetchSnippetLists = async ({
 
   return { results };
 };
+
+export const fetchSnippetListNames = async ({
+  endpoint,
+  abortSignal,
+  snippetListUris,
+}: {
+  endpoint: string;
+  abortSignal: AbortSignal;
+  snippetListUris: string[];
+}) => {
+  const queryResult = await executeQuery<
+    BindingObject<{ snippetList: string; snippetListName: string }>
+  >({
+    endpoint,
+    query: buildSnippetListNameFetchQuery(snippetListUris),
+    abortSignal,
+  });
+
+  return new Map(
+    queryResult.results.bindings.map((binding) => [
+      binding.snippetList.value,
+      binding.snippetListName.value,
+    ]),
+  );
+};

package/addon/plugins/variable-plugin/contextual-actions/codelist.ts

@@ -0,0 +1,132 @@
+import { v4 as uuidv4 } from 'uuid';
+import { EditorState } from '@lblod/ember-rdfa-editor';
+import { getActiveEditableNode } from '@lblod/ember-rdfa-editor/plugins/editable-node';
+import { isRdfaAttrs } from '@lblod/ember-rdfa-editor/core/rdfa-types';
+import { ContextualActionGroup } from '@lblod/ember-rdfa-editor/plugins/contextual-actions';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
+import { updateCodelistVariableCommand } from '../utils/codelist-utils';
+import {
+  type CodeListOptions,
+  fetchCodeListOptions,
+  CodeListOption,
+} from '../utils/fetch-data';
+import { CodelistAttrs } from '../variables';
+
+const codelistGroupId = 'codelist-db36f85d-edbf-45dc-85fc-9fb67649fe00';
+
+const codelistOptionsCache: Map<string, CodeListOptions> = new Map();
+
+function getSource(codelistAttrs: CodelistAttrs, fallback?: string) {
+  if (codelistAttrs) {
+    const source = codelistAttrs['source'];
+    if (source && source !== 'UNKNOWN') {
+      return source;
+    }
+  }
+  return fallback;
+}
+
+type GetContextualActionsAttrs = {
+  endpoint?: string;
+};
+
+function humanReadableLabel(label: string) {
+  return label.replace(/\$\{[^}]+\}/g, '…');
+}
+
+async function getCodelistOptionsCached(
+  activeNode: ResolvedPNode,
+  { endpoint }: GetContextualActionsAttrs,
+) {
+  const codelistAttrs = activeNode.value.attrs as CodelistAttrs | undefined;
+  const source = codelistAttrs && getSource(codelistAttrs, endpoint);
+  const codelistUri = codelistAttrs?.codelist;
+
+  let result = codelistUri && codelistOptionsCache.get(codelistUri);
+  if (!result && codelistAttrs?.hardcodedOptionList) {
+    result = {
+      type: '',
+      options: codelistAttrs.hardcodedOptionList,
+    } as CodeListOptions;
+  }
+  if (!result && source && codelistUri) {
+    result = await fetchCodeListOptions(source, codelistUri);
+    codelistOptionsCache.set(codelistUri, result);
+    if (!result) {
+      console.warn(
+        `Failed to fetch codelist options for ${codelistUri} from ${source}`,
+      );
+    }
+  }
+
+  return result || { type: '', options: [] };
+}
+
+export function getContextualActions(attrs: GetContextualActionsAttrs) {
+  return async function (state: EditorState, searchQuery?: string) {
+    const activeNode = getActiveEditableNode(state);
+    if (!activeNode) return [];
+    const result = await getCodelistOptionsCached(activeNode, attrs);
+    const isMultiSelect = activeNode.value.attrs['selectionStyle'] === 'multi';
+    const selectedOptions: CodeListOption[] = [];
+    activeNode.value.content.forEach((contentNode) => {
+      selectedOptions.push({
+        uri: contentNode.attrs.subject,
+        label: contentNode.textContent,
+      });
+    });
+
+    return result.options
+      .filter(
+        (option) =>
+          !searchQuery ||
+          option.label.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+      .map((option) => {
+        const selected = selectedOptions.some(
+          (selOption) => selOption.uri === option.uri,
+        );
+        const newOptions = selected
+          ? selectedOptions.filter((selOption) => selOption.uri !== option.uri)
+          : isMultiSelect
+            ? [...selectedOptions, option]
+            : option;
+        return {
+          id: uuidv4(),
+          label: humanReadableLabel(option.label),
+          group: codelistGroupId,
+          command: updateCodelistVariableCommand(activeNode, newOptions),
+          selected,
+        };
+      });
+  };
+}
+
+function contextualGroupIsVisible(state: EditorState) {
+  const activeNode = getActiveEditableNode(state);
+  const isCodelist =
+    activeNode &&
+    isRdfaAttrs(activeNode.value.attrs) &&
+    activeNode?.value.type.name === 'codelist';
+
+  return isCodelist;
+}
+
+export function getCodelistActionGroups(attrs: GetContextualActionsAttrs) {
+  return function (state: EditorState): ContextualActionGroup[] {
+    return contextualGroupIsVisible(state)
+      ? [
+          {
+            id: codelistGroupId,
+            label: getTranslationFunction(state)(
+              'variable.codelist.label',
+              'Codelijst',
+            ),
+            keepOpen: true,
+            getActions: getContextualActions(attrs),
+          },
+        ]
+      : [];
+  };
+}