@lblod/ember-rdfa-editor-lblod-plugins 37.2.0 → 37.2.1-dev.60bf09ed2e67f94ff54f71ac46e0e29d5d0b6404

package/.changeset/nasty-pots-bathe.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Adds caching, sticky groups, and offline search for the existing context actions

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 37.2.1
+
+### Patch Changes
+
+- [#663](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/663) [`4938095`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/49380955ce5c33beac6013cea02a684558aa0701) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Use parse slice to not include unneeded paragraphs on the inline locked placeholders parse
+
 ## 37.2.0
 
 ### Minor Changes

package/addon/plugins/location-plugin/contextual-actions/index.ts

@@ -8,6 +8,7 @@ import { replaceLocationCommand } from '../utils/replace-location';
 import { Area, Place } from '../utils/geo-helpers';
 import { Address } from '../utils/address-helpers';
 import { getLocationUri } from '../_private/utils/location-helpers';
+import { ContextualActionGroup } from '@lblod/ember-rdfa-editor/plugins/contextual-actions';
 
 const otherElementsGroupId =
   'other-elements-e01f46a0-b323-4add-8035-d81dc2e8578d';
@@ -16,78 +17,85 @@ const recentLocationsGroupId =
 
 const SUGGESTION_AMOUNT = 15;
 
-export function getContextualActions() {
-  return function (state: EditorState, searchQuery?: string) {
-    const t = getTranslationFunction(state);
-    const { selection } = state;
-    if (!(selection instanceof NodeSelection)) return [];
-    const selectedNode = selection.node;
-    if (selectedNode.type.name !== 'oslo_location') return [];
+function getLocationSuggestionOptions(state: EditorState) {
+  const { selection } = state;
+  if (!(selection instanceof NodeSelection)) return [];
+  const selectedNode = selection.node;
+  if (selectedNode.type.name !== 'oslo_location') return [];
 
-    const selectedLocation = selectedNode.attrs.value as
-      | Address
-      | Place
-      | Area
-      | undefined;
+  const selectedLocation = selectedNode.attrs.value as
+    | Address
+    | Place
+    | Area
+    | undefined;
 
-    const locationSuggestionOptions = getDocumentLocations(state)
-      .filter(
-        (location) =>
-          !selectedLocation ||
-          getLocationUri(selectedLocation) !== getLocationUri(location),
-      )
-      .slice(0, SUGGESTION_AMOUNT)
-      .map((location) => ({
-        label: location.formatted,
-        id: uuidv4(),
-        group: recentLocationsGroupId,
-        command: replaceLocationCommand(
-          { value: selection.node, pos: selection.from },
-          location,
-        ),
-      }));
+  return getDocumentLocations(state)
+    .filter(
+      (location) =>
+        !selectedLocation ||
+        getLocationUri(selectedLocation) !== getLocationUri(location),
+    )
+    .slice(0, SUGGESTION_AMOUNT)
+    .map((location) => ({
+      label: location.formatted,
+      id: uuidv4(),
+      group: recentLocationsGroupId,
+      command: replaceLocationCommand(
+        { value: selection.node, pos: selection.from },
+        location,
+      ),
+    }));
+}
 
-    const otherElementsOptions = [
-      {
-        label: t(
-          'location-plugin.context-actions.insert-address',
-          'Adres invoegen',
-        ),
-        locationType: 'address' as LocationType,
-        icon: 'location',
-      },
-      {
-        label: t(
-          'location-plugin.context-actions.insert-point-on-map',
-          'Punt op de kaart invoegen',
-        ),
-        locationType: 'place' as LocationType,
-        icon: 'location-gps',
-      },
-      {
-        label: t(
-          'location-plugin.context-actions.insert-area',
-          'Gebied invoegen',
-        ),
-        locationType: 'area' as LocationType,
-        icon: 'area',
-      },
-    ].map((option) => {
-      return {
-        ...option,
-        id: uuidv4(),
-        group: otherElementsGroupId,
-        command: openLocationModalCommand(option.locationType),
-      };
-    });
+function getOtherElementsOptions(state: EditorState) {
+  const t = getTranslationFunction(state);
 
-    return locationSuggestionOptions
-      .concat(otherElementsOptions)
-      .filter(
-        (option) =>
-          !searchQuery ||
-          option.label.toLocaleLowerCase().includes(searchQuery.toLowerCase()),
-      );
+  return [
+    {
+      label: t(
+        'location-plugin.context-actions.insert-address',
+        'Adres invoegen',
+      ),
+      locationType: 'address' as LocationType,
+      icon: 'location',
+    },
+    {
+      label: t(
+        'location-plugin.context-actions.insert-point-on-map',
+        'Punt op de kaart invoegen',
+      ),
+      locationType: 'place' as LocationType,
+      icon: 'location-gps',
+    },
+    {
+      label: t(
+        'location-plugin.context-actions.insert-area',
+        'Gebied invoegen',
+      ),
+      locationType: 'area' as LocationType,
+      icon: 'area',
+    },
+  ].map((option) => {
+    return {
+      ...option,
+      id: uuidv4(),
+      group: otherElementsGroupId,
+      command: openLocationModalCommand(option.locationType),
+    };
+  });
+}
+
+export function getContextualActions(type: 'suggestions' | 'other_elements') {
+  return function (state: EditorState, searchQuery?: string) {
+    const options =
+      type === 'suggestions'
+        ? getLocationSuggestionOptions(state)
+        : getOtherElementsOptions(state);
+    return options.filter(
+      (option) =>
+        !searchQuery ||
+        option.label.toLocaleLowerCase().includes(searchQuery.toLowerCase()),
+    );
   };
 }
 
@@ -100,7 +108,7 @@ function contextualGroupIsVisible(state: EditorState) {
 }
 
 export function getContextualActionGroups() {
-  return function (state: EditorState) {
+  return function (state: EditorState): ContextualActionGroup[] {
     if (!contextualGroupIsVisible(state)) return [];
     return [
       {
@@ -109,14 +117,12 @@ export function getContextualActionGroups() {
           'location-plugin.context-actions.location-suggestions',
           'Locatiesuggesties',
         ),
+        getActions: getContextualActions('suggestions'),
       },
       {
         id: otherElementsGroupId,
-        label: getTranslationFunction(state)(
-          'location-plugin.context-actions.other-elements',
-          'Andere elementen',
-        ),
         sticky: 'bottom',
+        getActions: getContextualActions('other_elements'),
       },
     ];
   };

package/addon/plugins/location-plugin/utils/replace-location.ts

@@ -8,6 +8,7 @@ import {
   TextSelection,
   PNode,
   Selection,
+  Command,
 } from '@lblod/ember-rdfa-editor';
 import type { FullTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
 import { PROV } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
@@ -39,8 +40,10 @@ function moveNodeSelectionForward(selection: Selection, doc: PNode) {
 export function replaceLocationCommand(
   node: ResolvedPNode,
   location: Address | Place | Area,
-) {
-  return function (state: EditorState, dispatch: (tr: Transaction) => void) {
+): Command {
+  return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
+    if (!dispatch) return false;
+
     const df = new SayDataFactory();
     const { pos, value: locNode } = node;
     // The location's subject has likely changed, so we should update the external links too
@@ -79,5 +82,6 @@ export function replaceLocationCommand(
     );
     setLocationTr.setSelection(newSelection);
     dispatch(setLocationTr);
+    return true;
   };
 }

package/addon/plugins/locked-placeholder-plugin/utils/replace-content-function.ts

@@ -67,7 +67,7 @@ function replacePlaceholderWithHtml(
 ) {
   return (state: EditorState) => {
     const domParser = new DOMParser();
-    const contentFragment = ProseParser.fromSchema(state.schema).parse(
+    const contentFragment = ProseParser.fromSchema(state.schema).parseSlice(
       domParser.parseFromString(value, 'text/html'),
     ).content;
     const tr = state.tr;

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

@@ -24,10 +24,18 @@ import { getActiveEditableNode } from '@lblod/ember-rdfa-editor/plugins/editable
 import { isRdfaAttrs } from '@lblod/ember-rdfa-editor/core/rdfa-types';
 import { v4 as uuidv4 } from 'uuid';
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
+import { type CodeListOptions } from '../utils/fetch-data';
+import { ContextualActionGroup } from '@lblod/ember-rdfa-editor/plugins/contextual-actions';
 
 const plaatsbepalingGroupId =
   'plaatsbepaling-1d8563d6-bfd8-487f-a2a0-6d7a6ab01cb5';
 
+const placeDescriptionCodelistCache: {
+  placeDescriptions: CodeListOptions | null;
+} = {
+  placeDescriptions: null,
+};
+
 function getSelectedLocation(state: EditorState) {
   const { selection } = state;
   if (
@@ -131,27 +139,47 @@ function createInsertPlaceDescriptionCommand(label: string) {
   };
 }
 
-export function getContextualActions({
-  zonalLocationCodelistUri,
-  nonZonalLocationCodelistUri,
-  endpoint,
-}: GetContextualActionsAttrs) {
-  return async function (state: EditorState) {
-    const source = getSource(state, endpoint);
-    const isZonal = getIsZonal(state);
-    const result = await fetchCodeListOptions(
+async function getPlaceDescriptionsCached(
+  state: EditorState,
+  {
+    zonalLocationCodelistUri,
+    nonZonalLocationCodelistUri,
+    endpoint,
+  }: GetContextualActionsAttrs,
+) {
+  const source = getSource(state, endpoint);
+  const isZonal = getIsZonal(state);
+  let options;
+  if (!placeDescriptionCodelistCache.placeDescriptions) {
+    options = await fetchCodeListOptions(
       source,
       isZonal ? zonalLocationCodelistUri : nonZonalLocationCodelistUri,
     );
+    placeDescriptionCodelistCache.placeDescriptions = options;
+  } else {
+    options = placeDescriptionCodelistCache.placeDescriptions;
+  }
 
-    return result.options.map((option) => {
-      return {
-        id: uuidv4(),
-        label: humanReadableLabel(option.label),
-        group: plaatsbepalingGroupId,
-        command: createInsertPlaceDescriptionCommand(option.label),
-      };
-    });
+  return options;
+}
+
+export function getContextualActions(attrs: GetContextualActionsAttrs) {
+  return async function (state: EditorState, searchQuery?: string) {
+    const result = await getPlaceDescriptionsCached(state, attrs);
+    return result.options
+      .filter(
+        (option) =>
+          !searchQuery ||
+          option.label.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+      .map((option) => {
+        return {
+          id: uuidv4(),
+          label: humanReadableLabel(option.label),
+          group: plaatsbepalingGroupId,
+          command: createInsertPlaceDescriptionCommand(option.label),
+        };
+      });
   };
 }
 
@@ -171,8 +199,8 @@ function contextualGroupIsVisible(state: EditorState) {
   );
 }
 
-export function getContextualActionGroups() {
-  return function (state: EditorState) {
+export function getContextualActionGroups(attrs: GetContextualActionsAttrs) {
+  return function (state: EditorState): ContextualActionGroup[] {
     return contextualGroupIsVisible(state)
       ? [
           {
@@ -181,6 +209,7 @@ export function getContextualActionGroups() {
               'variable.location.label',
               'Plaatsbeschrijving',
             ),
+            getActions: getContextualActions(attrs),
           },
         ]
       : [];

package/declarations/addon/plugins/location-plugin/contextual-actions/index.d.ts

@@ -1,16 +1,9 @@
 import { EditorState } from '@lblod/ember-rdfa-editor';
-export declare function getContextualActions(): (state: EditorState, searchQuery?: string) => {
+import { ContextualActionGroup } from '@lblod/ember-rdfa-editor/plugins/contextual-actions';
+export declare function getContextualActions(type: 'suggestions' | 'other_elements'): (state: EditorState, searchQuery?: string) => {
     label: string;
     id: string;
     group: string;
-    command: (state: EditorState, dispatch: (tr: import("@lblod/ember-rdfa-editor").Transaction) => void) => void;
+    command: import("@lblod/ember-rdfa-editor").Command;
 }[];
-export declare function getContextualActionGroups(): (state: EditorState) => ({
-    id: string;
-    label: string;
-    sticky?: undefined;
-} | {
-    id: string;
-    label: string;
-    sticky: string;
-})[];
+export declare function getContextualActionGroups(): (state: EditorState) => ContextualActionGroup[];

package/declarations/addon/plugins/location-plugin/utils/replace-location.d.ts

@@ -1,5 +1,5 @@
 import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 import { Address } from './address-helpers';
 import { Area, Place } from './geo-helpers';
-import { EditorState, Transaction } from '@lblod/ember-rdfa-editor';
-export declare function replaceLocationCommand(node: ResolvedPNode, location: Address | Place | Area): (state: EditorState, dispatch: (tr: Transaction) => void) => void;
+import { Command } from '@lblod/ember-rdfa-editor';
+export declare function replaceLocationCommand(node: ResolvedPNode, location: Address | Place | Area): Command;

package/declarations/addon/plugins/variable-plugin/contextual-actions/index.d.ts

@@ -1,17 +1,15 @@
 import { EditorState, Transaction } from '@lblod/ember-rdfa-editor';
+import { ContextualActionGroup } from '@lblod/ember-rdfa-editor/plugins/contextual-actions';
 type GetContextualActionsAttrs = {
     zonalLocationCodelistUri: string;
     nonZonalLocationCodelistUri: string;
     endpoint?: string;
 };
-export declare function getContextualActions({ zonalLocationCodelistUri, nonZonalLocationCodelistUri, endpoint, }: GetContextualActionsAttrs): (state: EditorState) => Promise<{
+export declare function getContextualActions(attrs: GetContextualActionsAttrs): (state: EditorState, searchQuery?: string) => Promise<{
     id: string;
     label: string;
     group: string;
     command: (state: EditorState, dispatch?: (tr: Transaction) => void) => boolean;
 }[]>;
-export declare function getContextualActionGroups(): (state: EditorState) => {
-    id: string;
-    label: string;
-}[];
+export declare function getContextualActionGroups(attrs: GetContextualActionsAttrs): (state: EditorState) => ContextualActionGroup[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "37.2.0",
+  "version": "37.2.1-dev.60bf09ed2e67f94ff54f71ac46e0e29d5d0b6404",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -111,7 +111,7 @@
     "@glint/ember-tsc": "^1.5.0",
     "@glint/environment-ember-loose": "^1.5.0",
     "@glint/environment-ember-template-imports": "^1.5.0",
-    "@lblod/ember-rdfa-editor": "13.10.0",
+    "@lblod/ember-rdfa-editor": "13.10.2-dev.e26309571bb5b422640bb0281f659239799f642c",
     "@glint/template": "^1.7.7",
     "@rdfjs/to-ntriples": "^3.0.1",
     "@rdfjs/types": "^1.1.0",
@@ -216,7 +216,7 @@
     "node": ">= 18"
   },
   "volta": {
-    "node": "20.11.0"
+    "node": "22.22.0"
   },
   "ember": {
     "edition": "octane"