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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 25.2.0
+
+### Minor Changes
+
+- [#496](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/496) [`2e3c09f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2e3c09f95db40967caaceaa791e7eefd6187c5e4) Thanks [@piemonkey](https://github.com/piemonkey)! - Redesign snippet placeholder to have more intuitive UX
+
+- [#503](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/503) [`37ba9c3`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/37ba9c3ecd2c0452fb49ea1d0bb2704e6e716d05) Thanks [@elpoelma](https://github.com/elpoelma)! - Extension of configuration options of `citation-plugin`.
+  The `CitationPluginNodeConfig` is extended to allow for a `activeInNode` condition.
+  This allows you to specify a condition which an active/context node needs to satisfy.
+
+  ```ts
+  interface CitationPluginNodeConditionConfig {
+    type: 'nodes';
+    regex?: RegExp;
+
+    activeInNode(node: PNode, state?: EditorState): boolean;
+  }
+  ```
+
+  The previously expected `activeInNodeTypes` option is marked as deprecated and will be removed in a future release.
+
+- [#501](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/501) [`997fa98`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/997fa986a7094349ad368d291cb8364e5c50a140) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Add snippet list names to the modal title
+
 ## 25.1.0
 
 ### Minor Changes

package/README.md

@@ -335,9 +335,11 @@ Make `this.citationPlugin` a tracked reference to the plugin created with the fu
 
 Configuration:
 
-- type: it can be 'nodes' or 'ranges' if nodes is selected you are expected to pass the `activeInNodeTypes` function, otherwise you should pass the `activeInRanges` function
-- activeInNodeTypes: it's a function that gets the prosemirror schema and the state of the actual instance of the editor and returns a `Set` of nodetypes where the plugin should be active
-- activeInRanges: it's a function that gets the state of the actual instance of the editor and returns an array of ranges for the plugin to be active in, for example `[[0,50], [70,100]]`
+- type (optional): it can either be 'nodes', or 'ranges'
+  * if 'nodes' is selected, you are expected to pass the `activeInNode` function. It's a function which expects an instance of a prosemirror node and returns whether it should be active in that node. The previously expected `activeInNodeTypes` is marked as deprecated and will be removed in a future release.
+  * if 'ranges' is selected, you are expected to pass the `activeInRanges` function. It's a function that gets the state of the actual instance of the editor and returns an array of ranges for the plugin to be active in, for example `[[0,50], [70,100]]`
+  * if no type is provided, the citation plugin will be activated document-wide
+
 - regex: you can provide your custom regex to detect citations, if not the default one will be used
 
 A common usecase is to have the plugin active in the entire document. Here's how to do that using each configuration type:
@@ -347,9 +349,8 @@ import { citationPlugin } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/c
 
 const configA = {
   type: 'nodes',
-  activeInNodeTypes(schema) {
-    // the root node of the document should always have the doc type
-    return new Set([schema.nodes.doc]);
+  activeInNode(node, state) {
+    return node.type === state.schema.nodes.doc;
   },
 };
 

package/addon/components/citation-plugin/citation-insert.ts

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import {
   Fragment,
+  PNode,
   SayController,
   Slice,
   Transaction,
@@ -14,7 +15,7 @@ import {
   LEGISLATION_TYPES,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/types';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { findParentNode } from '@curvenote/prosemirror-utils';
 import { Article } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/article';
 import { LegalDocument } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
 import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
@@ -62,10 +63,13 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
       return true;
     }
     const { selection } = this.controller.mainEditorState;
-    if (this.config.type === 'ranges') {
-      const ranges = this.config.activeInRanges(
-        this.controller.mainEditorState,
-      );
+    const config = this.config;
+    if (!('type' in config)) {
+      // Enable plugin document wide
+      return false;
+    }
+    if (config.type === 'ranges') {
+      const ranges = config.activeInRanges(this.controller.mainEditorState);
       for (const range of ranges) {
         if (selection.from > range[0] && selection.from < range[1]) {
           return false;
@@ -73,17 +77,22 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
       }
       return true;
     } else {
-      const nodeTypes = this.config.activeInNodeTypes(
-        this.controller.schema,
-        this.controller.mainEditorState,
-      );
-      // if the doc node is included, the button should always be active
-      // the findParentNodeOfType util we import does NOT consider the doc node
-      // in its search.
-      if (nodeTypes.has(this.controller.schema.nodes.doc)) {
+      let condition: (node: PNode) => boolean;
+      if ('activeInNodeTypes' in config) {
+        const nodeTypes = config.activeInNodeTypes(
+          this.controller.schema,
+          this.controller.mainEditorState,
+        );
+        condition = (node) => nodeTypes.has(node.type);
+      } else {
+        condition = (node) =>
+          config.activeInNode(node, this.controller.mainEditorState);
+      }
+
+      if (condition(this.controller.mainEditorState.doc)) {
         return false;
       }
-      return !findParentNodeOfType([...nodeTypes])(selection);
+      return !findParentNode(condition)(selection);
     }
   }
 

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

@@ -1,21 +1,32 @@
 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: Pick<EmberNodeArgs, 'node' | 'selectNode'>;
+  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.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,
@@ -30,6 +31,8 @@ import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transactio
 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: {
@@ -76,6 +79,13 @@ export default class SnippetNode extends Component<Signature> {
   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;
@@ -85,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) {
@@ -123,7 +129,7 @@ export default class SnippetNode extends Component<Signature> {
         const node = createSnippetPlaceholder({
           listProperties: {
             placeholderId: this.node.attrs.placeholderId,
-            listIds: this.node.attrs.snippetListIds,
+            listIds: getSnippetListIdsFromNode(this.node),
             names: this.node.attrs.snippetListNames,
             importedResources: this.node.attrs.importedResources,
           },
@@ -155,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,
@@ -188,7 +200,7 @@ export default class SnippetNode extends Component<Signature> {
         title,
         listProperties: {
           placeholderId: this.node.attrs.placeholderId,
-          listIds: this.node.attrs.snippetListIds,
+          listIds: getSnippetListIdsFromNode(this.node),
           names: this.node.attrs.snippetListNames,
           importedResources: this.node.attrs.importedResources,
         },
@@ -199,40 +211,49 @@ 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'
-          {{on 'click' this.editFragment}}
-          @isActive={{this.isActive}}
-        />
-        <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}}
+    {{#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'
-            {{on 'click' 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}}
-      @snippetListIds={{this.node.attrs.snippetListIds}}
+      @snippetListIds={{getSnippetListIdsFromNode this.node}}
+      @snippetListNames={{this.node.attrs.snippetListNames}}
     />
   </template>
 }

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

@@ -3,7 +3,10 @@
   class='snippet-modal'
   @modalOpen={{@open}}
   @closeModal={{this.closeModal}}
-  @title={{t 'snippet-plugin.modal.title'}}
+  @title={{t
+    'snippet-plugin.modal.title'
+    snippetListNames=this.snippetListNames
+  }}
   @size='large'
   @padding='none'
   as |modal|

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

@@ -12,6 +12,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
 interface Args {
   config: SnippetPluginConfig;
   snippetListIds: string[] | undefined;
+  snippetListNames: string[] | undefined;
   closeModal: () => void;
   open: boolean;
   onInsert: (content: string, title: string) => void;
@@ -37,6 +38,10 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
     return this.inputSearchText;
   }
 
+  get snippetListNames() {
+    return this.args.snippetListNames?.map((name) => `"${name}"`).join(', ');
+  }
+
   @action
   setInputSearchText(event: InputEvent) {
     assert(

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

@@ -7,10 +7,7 @@ import {
   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';
 
@@ -25,13 +22,11 @@ interface Sig {
 export default class SnippetInsertRdfaComponent extends Component<Sig> {
   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,
@@ -49,11 +44,11 @@ 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,

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

@@ -89,6 +89,7 @@ export default class SnippetInsertComponent extends Component<Sig> {
       @config={{@config}}
       @onInsert={{this.onInsert}}
       @snippetListIds={{@listProperties.listIds}}
+      @snippetListNames={{@listProperties.names}}
     />
   </template>
 }

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

@@ -119,21 +119,31 @@ interface CitationPluginState {
 
 export type CitationPlugin = ProsePlugin<CitationPluginState>;
 
-export interface CitationPluginNodeConfig {
+export type CitationPluginNodeConfig = CitationPluginBaseConfig & {
   type: 'nodes';
-  regex?: RegExp;
-
-  activeInNodeTypes(schema: Schema, state: EditorState): Set<NodeType>;
-}
+} & (
+    | {
+        /**
+         * @deprecated use the `activeInNode` property instead
+         */
+        activeInNodeTypes(schema: Schema, state: EditorState): Set<NodeType>;
+      }
+    | {
+        activeInNode(node: PNode, state?: EditorState): boolean;
+      }
+  );
 
-export interface CitationPluginRangeConfig {
+export type CitationPluginRangeConfig = CitationPluginBaseConfig & {
   type: 'ranges';
-  regex?: RegExp;
-
   activeInRanges(state: EditorState): [number, number][];
-}
+};
+
+export type CitationPluginBaseConfig = {
+  regex?: RegExp;
+};
 
 export type CitationPluginConfig =
+  | CitationPluginBaseConfig
   | CitationPluginNodeConfig
   | CitationPluginRangeConfig;
 
@@ -176,21 +186,43 @@ function calculateCitationPluginState(
   const { doc, schema } = state;
   let activeRanges;
   let highlights;
-  if (config.type === 'ranges') {
-    activeRanges = config.activeInRanges(state);
-    const calculatedDecs = calculateDecorationsInRanges(
-      config,
-      schema,
-      doc,
-      activeRanges,
-    );
-    highlights = calculatedDecs.decorations;
+  if ('type' in config) {
+    if (config.type === 'ranges') {
+      activeRanges = config.activeInRanges(state);
+      const calculatedDecs = calculateDecorationsInRanges(
+        config,
+        schema,
+        doc,
+        activeRanges,
+      );
+      highlights = calculatedDecs.decorations;
+    } else {
+      let condition: (node: PNode) => boolean;
+      if ('activeInNodeTypes' in config) {
+        const nodeTypes = config.activeInNodeTypes(schema, state);
+        condition = (node) => {
+          return nodeTypes.has(node.type);
+        };
+      } else {
+        condition = (node) => config.activeInNode(node, state);
+      }
+
+      const calculatedDecs = calculateDecorationsInNodes(
+        config,
+        schema,
+        condition,
+        doc,
+        oldState?.doc,
+        oldDecs,
+      );
+      activeRanges = calculatedDecs.activeRanges;
+      highlights = calculatedDecs.decorations;
+    }
   } else {
-    const nodes = config.activeInNodeTypes(schema, state);
     const calculatedDecs = calculateDecorationsInNodes(
       config,
       schema,
-      nodes,
+      () => true,
       doc,
       oldState?.doc,
       oldDecs,
@@ -198,6 +230,7 @@ function calculateCitationPluginState(
     activeRanges = calculatedDecs.activeRanges;
     highlights = calculatedDecs.decorations;
   }
+
   return {
     highlights,
     activeRanges,
@@ -207,7 +240,7 @@ function calculateCitationPluginState(
 function calculateDecorationsInNodes(
   config: CitationPluginConfig,
   schema: CitationSchema,
-  nodes: Set<NodeType>,
+  condition: (node: PNode) => boolean,
   newDoc: PNode,
   oldDoc?: PNode,
   oldDecorations?: DecorationSet,
@@ -223,7 +256,7 @@ function calculateDecorationsInNodes(
     decsToRemove,
     oldDecorations,
   );
-  if (nodes.has(newDoc.type)) {
+  if (condition(newDoc)) {
     oldDoc
       ? changedDescendants(oldDoc, newDoc, 0, collector)
       : newDoc.descendants(collector);
@@ -236,7 +269,7 @@ function calculateDecorationsInNodes(
           0,
 
           (node, pos) => {
-            if (nodes.has(node.type)) {
+            if (condition(node)) {
               node.nodesBetween(0, node.nodeSize - 2, collector, pos + 1);
               activeRanges.push([pos, pos + node.nodeSize]);
               return false;
@@ -245,7 +278,7 @@ function calculateDecorationsInNodes(
           },
         )
       : newDoc.descendants((node, pos) => {
-          if (nodes.has(node.type)) {
+          if (condition(node)) {
             node.nodesBetween(0, node.nodeSize - 2, collector, pos + 1);
             activeRanges.push([pos, pos + node.nodeSize]);
             return false;

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

@@ -13,6 +13,7 @@ export const DEFAULT_CONTENT_STRING = 'block+';
 export type SnippetPluginConfig = {
   endpoint: string;
   allowedContent?: string;
+  hidePlaceholderInsertButton?: boolean;
 };
 
 interface SnippetArgs {

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

@@ -11,7 +11,7 @@ import {
   createEmberNodeView,
   type EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
-import SnippetPlaceholderComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/nodes/placeholder';
+import SnippetComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/nodes/snippet';
 import {
   EXT,
   RDF,
@@ -23,6 +23,7 @@ import {
   type SnippetListProperties,
   type ImportedResourceMap,
   type SnippetList,
+  type SnippetPluginConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 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';
@@ -93,7 +94,7 @@ export function createSnippetPlaceholder({
   });
 }
 
-const emberNodeConfig: EmberNodeConfig = {
+const emberNodeConfig = (config: SnippetPluginConfig): EmberNodeConfig => ({
   name: 'snippet_placeholder',
   inline: false,
   group: 'block',
@@ -107,8 +108,11 @@ const emberNodeConfig: EmberNodeConfig = {
     snippetListNames: { default: [] },
     importedResources: { default: {} },
     allowMultipleSnippets: { default: false },
+    config: {
+      default: config,
+    },
   },
-  component: SnippetPlaceholderComponent,
+  component: SnippetComponent,
   serialize(node, editorState) {
     const t = getTranslationFunction(editorState);
     const listNames = node.attrs.snippetListNames as string[];
@@ -116,7 +120,6 @@ const emberNodeConfig: EmberNodeConfig = {
       renderable: node,
       tag: 'div',
       attrs: {
-        ...node.attrs,
         class: 'say-snippet-placeholder-node',
         'data-list-names': listNames && JSON.stringify(listNames),
         'data-imported-resources': JSON.stringify(node.attrs.importedResources),
@@ -169,7 +172,9 @@ const emberNodeConfig: EmberNodeConfig = {
       },
     },
   ],
-};
+});
 
-export const snippetPlaceholder = createEmberNodeSpec(emberNodeConfig);
-export const snippetPlaceholderView = createEmberNodeView(emberNodeConfig);
+export const snippetPlaceholder = (config: SnippetPluginConfig) =>
+  createEmberNodeSpec(emberNodeConfig(config));
+export const snippetPlaceholderView = (config: SnippetPluginConfig) =>
+  createEmberNodeView(emberNodeConfig(config));

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

@@ -35,6 +35,7 @@ import {
   SnippetListProperties,
   type SnippetPluginConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { tripleForSnippetListId } from '../utils/rdfa-predicate';
 
 function outgoingFromBacklink(
   backlink: IncomingTriple,
@@ -58,6 +59,13 @@ function outgoingFromBacklink(
   }
 }
 
+const defaultProperties = [
+  {
+    predicate: RDF('type').full,
+    object: sayDataFactory.namedNode(EXT('Snippet').full),
+  },
+];
+
 interface CreateSnippetArgs {
   schema: Schema;
   allowMultipleSnippets?: boolean;
@@ -78,7 +86,7 @@ export function createSnippet({
   title,
   allowMultipleSnippets,
   listProperties: {
-    listIds: snippetListIds,
+    listIds,
     names: snippetListNames,
     importedResources,
     placeholderId,
@@ -100,11 +108,15 @@ export function createSnippet({
     schema,
     parser,
   });
+  const properties = [
+    ...defaultProperties,
+    ...listIds.map(tripleForSnippetListId),
+  ];
   const node = schema.node(
     'snippet',
     {
       placeholderId,
-      snippetListIds,
+      properties,
       snippetListNames,
       title,
       subject: `http://data.lblod.info/snippets/${uuidv4()}`,
@@ -150,17 +162,11 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
   attrs: {
     ...rdfaAttrSpec({ rdfaAware: true }),
     properties: {
-      default: [
-        {
-          predicate: RDF('type').full,
-          object: sayDataFactory.namedNode(EXT('Snippet').full),
-        },
-      ],
+      default: defaultProperties,
     },
     rdfaNodeType: { default: 'resource' },
     placeholderId: { default: '' },
     snippetListNames: { default: [] },
-    snippetListIds: { default: [] },
     importedResources: { default: {} },
     title: { default: '' },
     config: { default: options },
@@ -176,9 +182,6 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
       attrs: {
         ...node.attrs,
         'data-snippet-placeholder-id': node.attrs.placeholderId,
-        'data-assigned-snippet-ids': (
-          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,
@@ -194,6 +197,8 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
         if (typeof node === 'string') return false;
         const rdfaAttrs = getRdfaAttrs(node, { rdfaAware: true });
         if (
+          rdfaAttrs &&
+          rdfaAttrs.rdfaNodeType !== 'literal' &&
           hasOutgoingNamedNodeTriple(rdfaAttrs, RDF('type'), EXT('Snippet'))
         ) {
           // For older documents without placeholder ids, treat each inserted snippet separately.
@@ -202,12 +207,19 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
           // risking having no ability to insert another snippet.
           const placeholderId =
             node.getAttribute('data-snippet-placeholder-id') || uuidv4();
+          const legacySnippetListIds = node
+            .getAttribute('data-assigned-snippet-ids')
+            ?.split(',');
+          const properties = !legacySnippetListIds
+            ? rdfaAttrs.properties
+            : [
+                ...rdfaAttrs.properties,
+                ...legacySnippetListIds.map(tripleForSnippetListId),
+              ];
           return {
             ...rdfaAttrs,
+            properties,
             placeholderId,
-            snippetListIds: node
-              .getAttribute('data-assigned-snippet-ids')
-              ?.split(','),
             snippetListNames: jsonParse(node.getAttribute('data-list-names')),
             importedResources: jsonParse(
               node.getAttribute('data-imported-resources'),

package/addon/plugins/snippet-plugin/utils/rdfa-predicate.ts

@@ -33,3 +33,6 @@ export const getAssignedSnippetListsIdsFromProperties = (
     .map(getSnippetIdFromUri)
     .filter((id) => id !== undefined);
 };
+
+export const getSnippetListIdsFromNode = (node: PNode) =>
+  getAssignedSnippetListsIdsFromProperties(getSnippetListIdsProperties(node));

package/app/styles/snippet-plugin.scss

@@ -86,29 +86,6 @@
   }
 }
 
-.ProseMirror-selectednode > .say-snippet-placeholder {
-  background-color: var(--au-blue-200);
-}
-
-.say-snippet-placeholder-node {
-  background-color: var(--au-orange-200);
-  padding: 2rem;
-
-  div {
-    font-weight: var(--au-medium);
-  }
-}
-
-div[typeof='besluitpublicatie:Documentonderdeel']
-  .say-snippet-placeholder-node {
-  background-color: var(--au-gray-300);
-}
-
-.rdfa-annotations
-  [typeof]:not([typeof='foaf:Document']).say-snippet-placeholder-node {
-  padding-bottom: 2rem;
-}
-
 .say-snippet-card {
   border: 1px solid var(--au-blue-300);
   .say-snippet-title {
@@ -164,3 +141,62 @@ div[typeof='besluitpublicatie:Documentonderdeel']
     }
   }
 }
+
+.say-snippet-placeholder {
+  display: flex;
+  flex-direction: row;
+  padding: $au-unit-small $au-unit-small * 1.5;
+  background-color: var(--au-orange-300);
+  border-radius: var(--au-radius);
+  border: 0.1rem solid var(--au-orange-500);
+
+  .say-snippet-placeholder__icon {
+    background-color: var(--au-orange-500);
+    color: black;
+    height: $au-unit - 0.1rem; // compensate for visual distortion of perfect circle
+    width: $au-unit;
+    margin-right: $au-unit * 0.5;
+    border-radius: $au-unit-large;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .say-snippet-placeholder__content {
+    margin-top: 0;
+  }
+
+  .say-snippet-placeholder__title {
+    color: var(--au-orange-700);
+    font-weight: var(--au-medium);
+  }
+
+  .say-snippet-placeholder__button {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.ProseMirror-selectednode > .say-snippet-placeholder {
+  background-color: var(--au-blue-200);
+}
+
+.say-snippet-placeholder-node {
+  background-color: var(--au-orange-200);
+  padding: 2rem;
+
+  div {
+    font-weight: var(--au-medium);
+  }
+}
+
+div[typeof='besluitpublicatie:Documentonderdeel']
+  .say-snippet-placeholder-node {
+  background-color: var(--au-gray-300);
+}
+
+.rdfa-annotations
+  [typeof]:not([typeof='foaf:Document']).say-snippet-placeholder-node {
+  padding-bottom: 2rem;
+}

package/declarations/addon/components/snippet-plugin/nodes/placeholder.d.ts

@@ -1,12 +1,17 @@
 import Component from '@glimmer/component';
-import { type EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
 import IntlService from 'ember-intl/services/intl';
+import { type EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
+import { type SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 interface Signature {
-    Args: Pick<EmberNodeArgs, 'node' | 'selectNode'>;
+    Args: Pick<EmberNodeArgs, 'node' | 'selectNode'> & {
+        insertSnippet: () => void;
+    };
 }
 export default class SnippetPluginPlaceholder extends Component<Signature> {
     intl: IntlService;
+    get node(): import("prosemirror-model").Node;
     get listNames(): any;
+    get config(): SnippetPluginConfig;
     get isSingleList(): boolean;
     get alertTitle(): string;
 }

package/declarations/addon/components/snippet-plugin/nodes/snippet.d.ts

@@ -14,9 +14,10 @@ export default class SnippetNode extends Component<Signature> {
     get schema(): import("prosemirror-model").Schema<any, any>;
     get snippetOrPlaceholder(): import("prosemirror-model").NodeType[];
     get node(): PNode;
+    get isPlaceholder(): boolean;
+    get allowMultipleSnippets(): boolean;
     closeModal(): void;
     openModal(): void;
-    get allowMultipleSnippets(): boolean;
     addFragment(): void;
     editFragment(): void;
     deleteFragment(): void;

package/declarations/addon/components/snippet-plugin/search-modal.d.ts

@@ -3,6 +3,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
 interface Args {
     config: SnippetPluginConfig;
     snippetListIds: string[] | undefined;
+    snippetListNames: string[] | undefined;
     closeModal: () => void;
     open: boolean;
     onInsert: (content: string, title: string) => void;
@@ -15,6 +16,7 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
     totalCount: number;
     get config(): SnippetPluginConfig;
     get searchText(): string | null;
+    get snippetListNames(): string | undefined;
     setInputSearchText(event: InputEvent): void;
     closeModal(): Promise<void>;
     snippetsSearch: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, () => Promise<import("@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin").Snippet[]>>;

package/declarations/addon/plugins/citation-plugin/index.d.ts

@@ -1,4 +1,4 @@
-import { Decoration, DecorationSet, EditorState, InlineDecorationSpec, NodeType, ProsePlugin, Schema } from '@lblod/ember-rdfa-editor';
+import { Decoration, DecorationSet, EditorState, InlineDecorationSpec, NodeType, PNode, ProsePlugin, Schema } from '@lblod/ember-rdfa-editor';
 /**
  * The monster regex that makes the citation plugin trigger to show `CitationCard`.
  * In restructuring, I've made sure that I didn't abstract away any of the capturing groups,
@@ -20,17 +20,24 @@ interface CitationPluginState {
     activeRanges: [number, number][];
 }
 export type CitationPlugin = ProsePlugin<CitationPluginState>;
-export interface CitationPluginNodeConfig {
+export type CitationPluginNodeConfig = CitationPluginBaseConfig & {
     type: 'nodes';
-    regex?: RegExp;
+} & ({
+    /**
+     * @deprecated use the `activeInNode` property instead
+     */
     activeInNodeTypes(schema: Schema, state: EditorState): Set<NodeType>;
-}
-export interface CitationPluginRangeConfig {
+} | {
+    activeInNode(node: PNode, state?: EditorState): boolean;
+});
+export type CitationPluginRangeConfig = CitationPluginBaseConfig & {
     type: 'ranges';
-    regex?: RegExp;
     activeInRanges(state: EditorState): [number, number][];
-}
-export type CitationPluginConfig = CitationPluginNodeConfig | CitationPluginRangeConfig;
+};
+export type CitationPluginBaseConfig = {
+    regex?: RegExp;
+};
+export type CitationPluginConfig = CitationPluginBaseConfig | CitationPluginNodeConfig | CitationPluginRangeConfig;
 export type CitationPluginEmberComponentConfig = CitationPluginConfig & {
     endpoint: string;
     decisionsEndpoint?: string;

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

@@ -4,6 +4,7 @@ export declare const DEFAULT_CONTENT_STRING = "block+";
 export type SnippetPluginConfig = {
     endpoint: string;
     allowedContent?: string;
+    hidePlaceholderInsertButton?: boolean;
 };
 interface SnippetArgs {
     title: string | null;

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

@@ -1,5 +1,5 @@
 import { type Schema } from '@lblod/ember-rdfa-editor';
-import { type SnippetListProperties, type ImportedResourceMap, type SnippetList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { type SnippetListProperties, type ImportedResourceMap, type SnippetList, type SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 export declare function importedResourcesFromSnippetLists(lists: SnippetList[], existing?: ImportedResourceMap): {
     [k: string]: import("../../../utils/option").Option<string>;
 };
@@ -12,6 +12,6 @@ type CreateSnippetPlaceholderArgs = {
     lists: SnippetList[];
 });
 export declare function createSnippetPlaceholder({ schema, allowMultipleSnippets, ...args }: CreateSnippetPlaceholderArgs): import("prosemirror-model").Node;
-export declare const snippetPlaceholder: import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
-export declare const snippetPlaceholderView: (controller: import("@lblod/ember-rdfa-editor").SayController) => import("@lblod/ember-rdfa-editor/utils/ember-node").SayNodeViewConstructor;
+export declare const snippetPlaceholder: (config: SnippetPluginConfig) => import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
+export declare const snippetPlaceholderView: (config: SnippetPluginConfig) => (controller: import("@lblod/ember-rdfa-editor").SayController) => import("@lblod/ember-rdfa-editor/utils/ember-node").SayNodeViewConstructor;
 export {};

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

@@ -14,7 +14,7 @@ interface CreateSnippetArgs {
  * @returns a tuple containing the Node and the map of imported resources to the new outgoing
  * properties that these resources will have after the snippet is inserted into the document.
  **/
-export declare function createSnippet({ schema, content, title, allowMultipleSnippets, listProperties: { listIds: snippetListIds, names: snippetListNames, importedResources, placeholderId, }, }: CreateSnippetArgs): [PNode, Map<string, OutgoingTriple[]>];
+export declare function createSnippet({ schema, content, title, allowMultipleSnippets, listProperties: { listIds, names: snippetListNames, importedResources, placeholderId, }, }: CreateSnippetArgs): [PNode, Map<string, OutgoingTriple[]>];
 export declare const snippet: (config: SnippetPluginConfig) => import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
 export declare const snippetView: (config: SnippetPluginConfig) => (controller: import("@lblod/ember-rdfa-editor").SayController) => import("@lblod/ember-rdfa-editor/utils/ember-node").SayNodeViewConstructor;
 export {};

package/declarations/addon/plugins/snippet-plugin/utils/rdfa-predicate.d.ts

@@ -9,3 +9,4 @@ export declare function tripleForSnippetListId(id: string): {
 };
 export declare const getSnippetListIdsProperties: (node: PNode) => OutgoingTriple[];
 export declare const getAssignedSnippetListsIdsFromProperties: (snippetListIdsProperty?: OutgoingTriple[] | undefined) => string[];
+export declare const getSnippetListIdsFromNode: (node: PNode) => string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "25.1.0",
+  "version": "25.2.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/translations/en-US.yaml

@@ -301,10 +301,10 @@ snippet-plugin:
   placeholder:
     title-single: Snippet from the list "{listName}"
     title-multiple: Snippet from multiple lists
-    text: Select this then insert the desired snippet
+    button: Select the desired snippet
     active-lists: 'Active lists:'
   modal:
-    title: Choose a snippet
+    title: Choose a snippet from {snippetListNames}
     preview-button:
       title: Show snippet preview
     select-button:

package/translations/nl-BE.yaml

@@ -300,10 +300,10 @@ snippet-plugin:
   placeholder:
     title-single: Fragment uit de lijst "{listName}"
     title-multiple: Fragment uit meerdere lijsten
-    text: Selecteer dit en voeg het gewenste fragment in
+    button: Selecteer het gewenste fragment
     active-lists: 'Actieve lijsten:'
   modal:
-    title: Kies een fragment
+    title: Kies een fragment uit {snippetListNames}
     preview-button:
       title: Preview van fragment tonen
     select-button: