@lblod/ember-rdfa-editor-lblod-plugins 36.0.0 → 37.0.1

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

@@ -0,0 +1,84 @@
+import { EditorState, NodeSelection } from '@lblod/ember-rdfa-editor';
+import { v4 as uuidv4 } from 'uuid';
+import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
+import { openLocationModalCommand } from '..';
+import { LocationType } from '@lblod/ember-rdfa-editor-lblod-plugins/components/location-plugin/map';
+
+const otherElementsGroupId =
+  'other-elements-e01f46a0-b323-4add-8035-d81dc2e8578d';
+
+export function getContextualActions() {
+  return function (state: EditorState, searchQuery?: string) {
+    const t = getTranslationFunction(state);
+
+    const options: {
+      label: string;
+      locationType: LocationType;
+      icon: string;
+    }[] = [
+      {
+        label: t(
+          'location-plugin.context-actions.insert-address',
+          'Adres invoegen',
+        ),
+        locationType: 'address',
+        icon: 'location',
+      },
+      {
+        label: t(
+          'location-plugin.context-actions.insert-point-on-map',
+          'Punt op de kaart invoegen',
+        ),
+        locationType: 'place',
+        icon: 'location-gps',
+      },
+      {
+        label: t(
+          'location-plugin.context-actions.insert-area',
+          'Gebied invoegen',
+        ),
+        locationType: 'area',
+        icon: 'area',
+      },
+    ];
+
+    return options
+      .filter(
+        (option) =>
+          !searchQuery ||
+          option.label.toLocaleLowerCase().includes(searchQuery.toLowerCase()),
+      )
+      .map((option) => {
+        return {
+          ...option,
+          id: uuidv4(),
+          group: otherElementsGroupId,
+          command: openLocationModalCommand(option.locationType),
+        };
+      });
+  };
+}
+
+function contextualGroupIsVisible(state: EditorState) {
+  const { selection } = state;
+  return (
+    selection instanceof NodeSelection &&
+    selection.node.type === selection.node.type.schema.nodes['oslo_location']
+  );
+}
+
+export function getContextualActionGroups() {
+  return function (state: EditorState) {
+    return contextualGroupIsVisible(state)
+      ? [
+          {
+            id: otherElementsGroupId,
+            label: getTranslationFunction(state)(
+              'location-plugin.context-actions.other-elements',
+              'Andere elementen',
+            ),
+          },
+        ]
+      : [];
+  };
+}

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

@@ -0,0 +1,90 @@
+import {
+  ProsePlugin,
+  PluginKey,
+  EditorState,
+  EditorView,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
+import { LocationType } from '@lblod/ember-rdfa-editor-lblod-plugins/components/location-plugin/map';
+
+type PluginState = {
+  modalOpen: boolean;
+  locationType: LocationType | null;
+};
+
+type LocationModalMeta =
+  | { action: 'open_location_modal'; locationType?: LocationType }
+  | { action: 'close_location_modal' }
+  | undefined;
+
+function isLocationMeta(meta: unknown): meta is LocationModalMeta {
+  if (!meta || typeof meta !== 'object') return false;
+  return 'action' in meta;
+}
+
+export const locationModalsPluginKey = new PluginKey<PluginState>(
+  'LOCATION_MODALS_PLUGIN',
+);
+
+export function closeLocationModal(view: EditorView) {
+  const tr = view.state.tr;
+  tr.setMeta(locationModalsPluginKey, { action: 'close_location_modal' });
+  view.dispatch(tr);
+}
+
+export function openLocationModal(
+  view: EditorView,
+  locationType?: LocationType,
+) {
+  const tr = view.state.tr;
+  tr.setMeta(locationModalsPluginKey, {
+    action: 'open_location_modal',
+    locationType: locationType ?? null,
+  });
+  view.dispatch(tr);
+}
+
+export function openLocationModalCommand(locationType: LocationType) {
+  return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
+    if (dispatch) {
+      const tr = state.tr;
+      tr.setMeta(locationModalsPluginKey, {
+        action: 'open_location_modal',
+        locationType,
+      });
+      dispatch(tr);
+    }
+  };
+}
+
+export function locationModalsPlugin() {
+  return new ProsePlugin<PluginState>({
+    key: locationModalsPluginKey,
+    state: {
+      init() {
+        return { modalOpen: false, locationType: null };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(locationModalsPluginKey);
+        if (!isLocationMeta(meta)) return pluginState;
+
+        if (meta?.action === 'open_location_modal') {
+          return {
+            modalOpen: true,
+            locationType: meta.locationType ?? null,
+          };
+        } else if (meta?.action === 'close_location_modal') {
+          return { modalOpen: false, locationType: null };
+        } else {
+          return pluginState;
+        }
+      },
+    },
+  });
+}
+
+export function getLocationModalsPluginState(
+  state: EditorState,
+): PluginState | undefined {
+  return locationModalsPluginKey.getState(state);
+}

package/addon/plugins/locked-placeholder-plugin/nodes/block-locked-placeholder.ts

@@ -0,0 +1,68 @@
+import {
+  createEmberNodeSpec,
+  createEmberNodeView,
+  EmberNodeConfig,
+} from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
+import BlockLockedPlaceholderNodeView from '@lblod/ember-rdfa-editor-lblod-plugins/components/locked-placeholder-plugin/nodeviews/block';
+import type { ComponentLike } from '@glint/template';
+
+const parseDOM = [
+  {
+    tag: 'div',
+    getAttrs: (node: HTMLElement) => {
+      if (
+        node.dataset.lockedPlaceholder &&
+        node.dataset.lockedPlaceholderType === 'block'
+      ) {
+        const label = node.dataset.label;
+        const key = node.dataset.key;
+        return {
+          label,
+          key,
+        };
+      }
+      return false;
+    },
+  },
+];
+
+const toDOM = (node: PNode): DOMOutputSpec => {
+  return [
+    'div',
+    {
+      'data-locked-placeholder': 'true',
+      'data-locked-placeholder-type': 'block',
+      'data-label': node.attrs['label'],
+      'data-key': node.attrs['key'],
+    },
+    0,
+  ];
+};
+
+const emberNodeConfig: EmberNodeConfig = {
+  name: 'block-locked-placeholder',
+  component: BlockLockedPlaceholderNodeView as unknown as ComponentLike,
+  inline: false,
+  group: 'block',
+  content: 'inline*',
+  atom: true,
+  draggable: false,
+  needsFFKludge: true,
+  editable: true,
+  selectable: true,
+  attrs: {
+    label: {
+      default: '',
+    },
+    key: {
+      default: undefined,
+    },
+  },
+  classNames: ['say-block-locked-placeholder'],
+  toDOM,
+  parseDOM: parseDOM,
+};
+
+export const blockLockedPlaceholder = createEmberNodeSpec(emberNodeConfig);
+export const blockLockedPlaceholderView = createEmberNodeView(emberNodeConfig);

package/addon/plugins/locked-placeholder-plugin/nodes/inline-locked-placeholder.ts

@@ -0,0 +1,68 @@
+import {
+  createEmberNodeSpec,
+  createEmberNodeView,
+  EmberNodeConfig,
+} from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
+import InlineLockedPlaceholderNodeView from '@lblod/ember-rdfa-editor-lblod-plugins/components/locked-placeholder-plugin/nodeviews/inline';
+import type { ComponentLike } from '@glint/template';
+
+const parseDOM = [
+  {
+    tag: 'span',
+    getAttrs: (node: HTMLElement) => {
+      if (
+        node.dataset.lockedPlaceholder &&
+        node.dataset.lockedPlaceholderType === 'inline'
+      ) {
+        const label = node.dataset.label;
+        const key = node.dataset.key;
+        return {
+          label,
+          key,
+        };
+      }
+      return false;
+    },
+  },
+];
+
+const toDOM = (node: PNode): DOMOutputSpec => {
+  return [
+    'span',
+    {
+      'data-locked-placeholder': 'true',
+      'data-locked-placeholder-type': 'inline',
+      'data-label': node.attrs['label'],
+      'data-key': node.attrs['key'],
+    },
+    0,
+  ];
+};
+
+const emberNodeConfig: EmberNodeConfig = {
+  name: 'inline-locked-placeholder',
+  component: InlineLockedPlaceholderNodeView as unknown as ComponentLike,
+  inline: true,
+  group: 'inline',
+  content: 'inline*',
+  atom: true,
+  draggable: false,
+  needsFFKludge: true,
+  editable: true,
+  selectable: true,
+  attrs: {
+    label: {
+      default: '',
+    },
+    key: {
+      default: undefined,
+    },
+  },
+  classNames: ['say-inline-locked-placeholder'],
+  toDOM,
+  parseDOM: parseDOM,
+};
+
+export const inlineLockedPlaceholder = createEmberNodeSpec(emberNodeConfig);
+export const inlineLockedPlaceholderView = createEmberNodeView(emberNodeConfig);

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

@@ -0,0 +1,89 @@
+import { Node, EditorState } from '@lblod/ember-rdfa-editor';
+import { DOMParser as ProseParser } from '@lblod/ember-rdfa-editor';
+import {
+  transactionCombinator,
+  type TransactionCombinatorResult,
+} from '@lblod/ember-rdfa-editor/utils/transaction-utils';
+
+type PlaceholderWithPos = {
+  placeholder: Node;
+  pos: number;
+};
+
+type ReplacementValues = {
+  [key: string]: string;
+};
+
+export default function replaceLockedPlaceholderContent(
+  initialState: EditorState,
+  values: ReplacementValues | ((state: EditorState) => ReplacementValues),
+): TransactionCombinatorResult<boolean> {
+  const doc = initialState.doc;
+  const placeholdersWithPos: PlaceholderWithPos[] = [];
+  doc.descendants((node, pos) => {
+    if (
+      node.type.name === 'block_locked_placeholder' ||
+      node.type.name === 'inline_locked_placeholder'
+    ) {
+      placeholdersWithPos.push({
+        placeholder: node,
+        pos: pos,
+      });
+      return false;
+    }
+    return true;
+  });
+  placeholdersWithPos.reverse();
+  const monads = [];
+  const valuesResolved =
+    typeof values === 'function' ? values(initialState) : values;
+  for (const { placeholder, pos } of placeholdersWithPos) {
+    const key = placeholder.attrs.key as string;
+    const valueToReplace = valuesResolved[key];
+    if (!valueToReplace) continue;
+    if (typeof valueToReplace === 'string') {
+      const monad = replacePlaceholderWithHtml(
+        placeholder,
+        pos,
+        valueToReplace,
+      );
+      monads.push(monad);
+    } else {
+      const monad = replacePlaceholderWithProsemirrorNode(
+        placeholder,
+        pos,
+        valueToReplace,
+      );
+      monads.push(monad);
+    }
+  }
+  return transactionCombinator<boolean>(initialState)(monads);
+}
+
+function replacePlaceholderWithHtml(
+  placeholder: Node,
+  pos: number,
+  value: string,
+) {
+  return (state: EditorState) => {
+    const domParser = new DOMParser();
+    const contentFragment = ProseParser.fromSchema(state.schema).parse(
+      domParser.parseFromString(value, 'text/html'),
+    ).content;
+    const tr = state.tr;
+    tr.replaceWith(pos, pos + placeholder.nodeSize, contentFragment);
+    return { initialState: state, transaction: tr, result: true };
+  };
+}
+
+function replacePlaceholderWithProsemirrorNode(
+  placeholder: Node,
+  pos: number,
+  value: Node,
+) {
+  return (state: EditorState) => {
+    const tr = state.tr;
+    tr.replaceWith(pos, pos + placeholder.nodeSize, value);
+    return { initialState: state, transaction: tr, result: true };
+  };
+}

package/addon/plugins/structure-plugin/monads/regenerate-rdfa-links.ts

@@ -1,20 +1,37 @@
-import { type PNode } from '@lblod/ember-rdfa-editor';
-import {
-  composeMonads,
-  type TransactionMonad,
-} from '@lblod/ember-rdfa-editor/utils/transaction-utils';
+import { Attrs, type PNode } from '@lblod/ember-rdfa-editor';
+import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { getOutgoingTripleList } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { isSome } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { difference } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/set-utils';
+import { SayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import {
   addPropertyToNode,
   getProperties,
   getSubject,
   removePropertyFromNode,
 } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
-import { SayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
-import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import {
+  composeMonads,
+  type TransactionMonad,
+} from '@lblod/ember-rdfa-editor/utils/transaction-utils';
 import { isHierarchyNode } from '../structure-types';
 
+const factory = new SayDataFactory();
+
+/**
+ * Generate monads to recursively sync the RDFa links with the actual document structure
+ * of the given structure node and its descendants.
+ *
+ * Takes the document hierarchy as the source of truth, and updates the rdfa links to match.
+ *
+ * Currently this is being called every transaction that modifies any structure node,
+ * which includes typing inside one. As such, the implementation should take care to avoid
+ * generating unnecessary updates.
+ *
+ * @param parent A structure node
+ * @returns a list of monads which will update the structures as described
+ */
 function linkAllChildrenToParent(parent: PNode): TransactionMonad<boolean>[] {
-  const factory = new SayDataFactory();
   const parentResource = getSubject(parent);
   if (!parentResource) {
     console.warn(
@@ -24,48 +41,104 @@ function linkAllChildrenToParent(parent: PNode): TransactionMonad<boolean>[] {
   }
   const monads: TransactionMonad<boolean>[] = [];
 
-  // Remove existing links
-  const existingLinks = getProperties(parent)?.filter((rel) =>
-    SAY('hasPart').matches(rel.predicate),
-  );
-  existingLinks?.forEach((link) => {
-    monads.push(
-      removePropertyFromNode({ resource: parentResource, property: link }),
-    );
-  });
+  const childStructures: PNode[] = [];
 
+  // collect all direct structure-node descendants, skipping non-structure nodes
+  // which is why the rest of the function calls them "children" even if they might
+  // not be direct children in the strict sense
   parent.descendants((node) => {
     if (isHierarchyNode(node)) {
-      const resource = getSubject(node);
-      if (!resource) {
-        console.warn(
-          'Trying to update RDFa links for a structure node with no subject',
-        );
-        return false;
-      }
-      const monad = addPropertyToNode({
-        resource: parentResource,
-        property: {
-          predicate: SAY('hasPart').full,
-          object: factory.resourceNode(resource),
-        },
-      });
-      monads.push(monad);
-
-      // Recurse for children
-      monads.push(...linkAllChildrenToParent(node));
-
-      // Avoid `descendants()` from handling children, we do that with recursion
+      childStructures.push(node);
       return false;
-    } else {
-      // Look for hierarchy nodes within
-      return true;
     }
+    return true;
   });
+
+  const documentChildSubjects = new Set(
+    // As far as this function is concerned,
+    // it will handle child structures without a subject just fine, so we can filter them out
+    // Any dangling reference to them in the parent will be removed.
+    // However, it is definitely unexpected and likely will break other things
+    childStructures.map((node) => getSubject(node)).filter(isSome),
+  );
+
+  const parentProps = getProperties(parent) ?? [];
+  const rdfaChildSubjects = new Set(
+    parentProps
+      .filter((p) => SAY('hasPart').matches(p.predicate))
+      .map((p) => p.object.value),
+  );
+
+  // calculating this is highly worth doing, since there will usually be no differences
+  // and avoiding the extra transactions is very worth it
+  const toBeDeleted = difference(rdfaChildSubjects, documentChildSubjects);
+  const toBeAdded = difference(documentChildSubjects, rdfaChildSubjects);
+
+  // generate the monads to update the props
+  for (const subject of toBeDeleted) {
+    monads.push(...removeChildLinks(parent.attrs, parentResource, subject));
+  }
+  for (const subject of toBeAdded) {
+    monads.push(addChildLink(parentResource, subject));
+  }
+
+  // recurse down for each child
+  for (const child of childStructures) {
+    monads.push(...linkAllChildrenToParent(child));
+  }
+
   return monads;
 }
 
+/**
+ * Generate monad to remove child from the parent's node attrs
+ *
+ * @param parentAttrs the prosemirror attrs of the parent
+ * @param parentSubject
+ * @param childSubject
+ * @returns list of monads to remove each property
+ *
+ * @private
+ */
+function removeChildLinks(
+  parentAttrs: Attrs,
+  parentSubject: string,
+  childSubject: string,
+) {
+  const toRemove = getOutgoingTripleList(parentAttrs, SAY('hasPart')).filter(
+    (t) => t.object.value === childSubject,
+  );
+  return toRemove.map((prop) =>
+    removePropertyFromNode({ resource: parentSubject, property: prop }),
+  );
+}
+
+/**
+ * Generate monad to add child to the parent's rdfa props
+ *
+ * @param parentSubject
+ * @param childSubject
+ * @returns monad to add the child to the parent with a 'hasPart' predicate
+ *
+ * @private
+ */
+function addChildLink(parentSubject: string, childSubject: string) {
+  return addPropertyToNode({
+    resource: parentSubject,
+    property: {
+      predicate: SAY('hasPart').full,
+      object: factory.resourceNode(childSubject),
+    },
+  });
+}
+
 // TODO add support for decision structure nodes to this to remove their current manual linking
+/**
+ * Generate monads to update the rdfa-hierarchy of all structure nodes to match their document hierarchy
+ * @see {@link linkAllChildrenToParent} for more details
+ *
+ * @returns list of monads to perform the update on the whole doc
+ */
 export const regenerateRdfaLinks = composeMonads((state) => {
   const monads: TransactionMonad<boolean>[] = [];
   // First find all the nodes that are in the hierarchy, but do not have a parent that is part of

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

@@ -92,7 +92,7 @@ function humanReadableLabel(label: string) {
 }
 
 function createInsertPlaceDescriptionCommand(label: string) {
-  return (state: EditorState, dispatch: (tr: Transaction) => void) => {
+  return (state: EditorState, dispatch?: (tr: Transaction) => void) => {
     if (dispatch) {
       let htmlToInsert = label;
       htmlToInsert = wrapVariableInHighlight(htmlToInsert);

package/addon/utils/set-utils.ts

@@ -0,0 +1,18 @@
+/**
+ * Calculate the set difference a - b between two sets
+ *
+ * @param a set a, or the left hand side of the operation
+ * @param b set b, or the right hand sidde of the operation
+ * @returns a-b
+ */
+export function difference<T>(a: Set<T>, b: Set<T>): Set<T> {
+  const diff = new Set<T>();
+
+  for (const item of a) {
+    if (!b.has(item)) {
+      diff.add(item);
+    }
+  }
+
+  return diff;
+}

package/app/components/locked-placeholder-plugin/insert.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/locked-placeholder-plugin/insert';

package/app/styles/locked-placeholder-plugin.scss

@@ -0,0 +1,12 @@
+.say-inline-locked-placeholder {
+  background-color: var(--au-gray-200);
+  color: var(--au-gray-700);
+  border-color: var(--au-gray-300);
+}
+
+.say-block-locked-placeholder {
+  background-color: var(--au-gray-200);
+  color: var(--au-gray-700);
+  border-color: var(--au-gray-300);
+  padding: 1.2rem;
+}

package/declarations/addon/components/location-plugin/insert.d.ts

@@ -21,7 +21,6 @@ interface Signature {
 }
 export default class LocationPluginInsertComponent extends Component<Signature> {
     intl: IntlService;
-    modalOpen: boolean;
     chosenPoint: GeoPos | undefined;
     isLoading: boolean;
     constructor(owner: unknown, args: Signature['Args']);
@@ -30,7 +29,6 @@ export default class LocationPluginInsertComponent extends Component<Signature>
     savedLocation: GeoPos | undefined;
     placeName: string;
     savedArea: GeoPos[] | undefined;
-    locationType: LocationType;
     selectedLocationNode: ResolvedPNode | null;
     get controller(): SayController;
     get nodeContentsUtils(): NodeContentsUtils;
@@ -38,7 +36,9 @@ export default class LocationPluginInsertComponent extends Component<Signature>
     get modalTitle(): string;
     get canInsert(): boolean;
     get disableConfirm(): boolean;
+    get modalOpen(): boolean | undefined;
     setLocationType(type: LocationType): void;
+    get locationType(): LocationType;
     setChosenPoint(point: GlobalCoordinates): void;
     setPlaceName(name: string): void;
     closeModal(): void;

package/declarations/addon/components/locked-placeholder-plugin/insert.d.ts

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { type LocationPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/node';
+interface Signature {
+    Args: {
+        controller: SayController;
+        config: LocationPluginConfig;
+        templateMode?: boolean;
+    };
+    Element: HTMLLIElement;
+}
+export default class LockedPlaceholderPluginInsert extends Component<Signature> {
+    key: string | null;
+    label: string | null;
+    type: string;
+    get selectedPlaceholderNode(): import("prosemirror-model").Node | undefined;
+    get controller(): SayController;
+    get canInsert(): boolean;
+    insertPlaceholder(): void;
+    updateKey(event: InputEvent): void;
+    updateLabel(event: InputEvent): void;
+    updateType(type: string): void;
+}
+export {};

package/declarations/addon/components/locked-placeholder-plugin/nodeviews/block.d.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { PNode } from '@lblod/ember-rdfa-editor';
+interface Sig {
+    Args: {
+        node: PNode;
+    };
+    Blocks: {
+        default: [];
+    };
+}
+export default class BlockLockedPlaceholder extends Component<Sig> {
+    get label(): any;
+}
+export {};