@lblod/ember-rdfa-editor-lblod-plugins 24.3.1 → 24.3.2-dev.2ac9ceabc39305020bc2d6bbf37755c2dcb383ac

package/addon/components/snippet-plugin/snippet-list/snippet-list-view.ts

@@ -4,25 +4,22 @@ import { SnippetList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snip
 
 interface Args {
   snippetLists: SnippetList[];
-  assignedSnippetListsIds: string[];
+  snippetListIds: string[];
   listNameFilter: string | null;
   isLoading: boolean;
-  onChange: (assignedSnippetListsIds: string[]) => void;
+  onChange: (snippetListIds: string[]) => void;
 }
 
 export default class SnippetListViewComponent extends Component<Args> {
   @action
   onChange(snippetId: string, isSelected: boolean) {
     if (isSelected) {
-      const newSnippetListIds = [
-        ...this.args.assignedSnippetListsIds,
-        snippetId,
-      ];
+      const newSnippetListIds = [...this.args.snippetListIds, snippetId];
 
       return this.args.onChange(newSnippetListIds);
     }
 
-    const newSnippetListIds = this.args.assignedSnippetListsIds.filter(
+    const newSnippetListIds = this.args.snippetListIds.filter(
       (id) => id !== snippetId,
     );
 
@@ -49,8 +46,7 @@ export default class SnippetListViewComponent extends Component<Args> {
       return;
     }
 
-    const isSelected =
-      this.args.assignedSnippetListsIds.includes(snippetListId);
+    const isSelected = this.args.snippetListIds.includes(snippetListId);
 
     this.onChange(snippetListId, !isSelected);
   }

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
+import templateUuidInstantiator from '@lblod/template-uuid-instantiator';
 import {
   type Attrs,
   getRdfaAttrs,
@@ -31,9 +32,10 @@ import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugi
 import { jsonParse } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import {
   DEFAULT_CONTENT_STRING,
-  type ImportedResourceMap,
+  SnippetListProperties,
   type SnippetPluginConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { tripleForSnippetListId } from '../utils/rdfa-predicate';
 
 function outgoingFromBacklink(
   backlink: IncomingTriple,
@@ -57,13 +59,19 @@ function outgoingFromBacklink(
   }
 }
 
+const defaultProperties = [
+  {
+    predicate: RDF('type').full,
+    object: sayDataFactory.namedNode(EXT('Snippet').full),
+  },
+];
+
 interface CreateSnippetArgs {
   schema: Schema;
+  allowMultipleSnippets?: boolean;
   content: string;
   title: string;
-  snippetListIds: string[];
-  importedResources?: ImportedResourceMap;
-  allowMultipleSnippets?: boolean;
+  listProperties: SnippetListProperties;
 }
 
 /**
@@ -76,9 +84,13 @@ export function createSnippet({
   schema,
   content,
   title,
-  snippetListIds,
-  importedResources,
   allowMultipleSnippets,
+  listProperties: {
+    listIds,
+    names: snippetListNames,
+    importedResources,
+    placeholderId,
+  },
 }: CreateSnippetArgs): [PNode, Map<string, OutgoingTriple[]>] {
   // Replace instances of linked to uris with the resources that exist in the outer document.
   let replacedContent = content;
@@ -88,16 +100,24 @@ export function createSnippet({
       replacedContent = replacedContent.replaceAll(imported, linked);
     }
   }
+  // Instantiate URIs of the form --ref-algo-123
+  replacedContent = templateUuidInstantiator(replacedContent);
   // Create the new node
   const parser = ProseParser.fromSchema(schema);
   const contentAsNode = htmlToDoc(replacedContent, {
     schema,
     parser,
   });
+  const properties = [
+    ...defaultProperties,
+    ...listIds.map(tripleForSnippetListId),
+  ];
   const node = schema.node(
     'snippet',
     {
-      assignedSnippetListsIds: snippetListIds,
+      placeholderId,
+      properties,
+      snippetListNames,
       title,
       subject: `http://data.lblod.info/snippets/${uuidv4()}`,
       importedResources,
@@ -142,15 +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' },
-    assignedSnippetListsIds: { default: [] },
+    placeholderId: { default: '' },
+    snippetListNames: { default: [] },
     importedResources: { default: {} },
     title: { default: '' },
     config: { default: options },
@@ -159,14 +175,14 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
   component: SnippetComponent,
   content: options.allowedContent || DEFAULT_CONTENT_STRING,
   serialize(node) {
+    const listNames = node.attrs.snippetListNames as string[];
     return renderRdfaAware({
       renderable: node,
       tag: 'div',
       attrs: {
         ...node.attrs,
-        'data-assigned-snippet-ids': (
-          node.attrs.assignedSnippetListsIds as string[]
-        ).join(','),
+        '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,
@@ -181,13 +197,30 @@ 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.
+          // This means that pressing 'remove snippet' will add a placeholder in it's place, which
+          // is not expected, but simple to remove (hitting backspace). This is better than
+          // risking having no ability to insert another snippet.
+          const placeholderId =
+            node.getAttribute('data-snippet-placeholder-id') || uuidv4();
+          const legacySnippetListIds = node
+            .getAttribute('data-assigned-snippet-ids')
+            ?.split(',');
+          const properties = !legacySnippetListIds
+            ? rdfaAttrs.properties
+            : [
+                ...rdfaAttrs.properties,
+                ...legacySnippetListIds.map(tripleForSnippetListId),
+              ];
           return {
             ...rdfaAttrs,
-            assignedSnippetListsIds: node
-              .getAttribute('data-assigned-snippet-ids')
-              ?.split(','),
+            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

@@ -6,7 +6,7 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
 import { Snippet, SnippetList, SnippetListArgs } from '../index';
 
-type Filter = { name?: string; assignedSnippetListIds?: string[] };
+type Filter = { name?: string; snippetListIds?: string[] };
 export type OrderBy =
   | 'label'
   | 'created-on'
@@ -16,7 +16,7 @@ export type OrderBy =
   | null;
 type Pagination = { pageNumber: number; pageSize: number };
 
-const buildSnippetCountQuery = ({ name, assignedSnippetListIds }: Filter) => {
+const buildSnippetCountQuery = ({ name, snippetListIds }: Filter) => {
   return /* sparql */ `
       PREFIX schema: <http://schema.org/>
       PREFIX dct: <http://purl.org/dc/terms/>
@@ -42,8 +42,8 @@ const buildSnippetCountQuery = ({ name, assignedSnippetListIds }: Filter) => {
               : ''
           }
           ${
-            assignedSnippetListIds && assignedSnippetListIds.length
-              ? `FILTER (?snippetListId IN (${assignedSnippetListIds
+            snippetListIds && snippetListIds.length
+              ? `FILTER (?snippetListId IN (${snippetListIds
                   .map((from) => sparqlEscapeString(from))
                   .join(', ')}))`
               : ''
@@ -69,7 +69,7 @@ const buildSnippetCountQuery = ({ name, assignedSnippetListIds }: Filter) => {
 // };
 
 const buildSnippetFetchQuery = ({
-  filter: { name, assignedSnippetListIds },
+  filter: { name, snippetListIds },
   pagination: { pageSize, pageNumber },
 }: {
   filter: Filter;
@@ -106,8 +106,8 @@ const buildSnippetFetchQuery = ({
               : ''
           }
           ${
-            assignedSnippetListIds && assignedSnippetListIds.length
-              ? `FILTER (?snippetListId IN (${assignedSnippetListIds
+            snippetListIds && snippetListIds.length
+              ? `FILTER (?snippetListId IN (${snippetListIds
                   .map((from) => sparqlEscapeString(from))
                   .join(', ')}))`
               : ''
@@ -173,7 +173,7 @@ export const fetchSnippets = async ({
   filter: Filter;
   pagination: Pagination;
 }) => {
-  if (!filter.assignedSnippetListIds?.length) {
+  if (!filter.snippetListIds?.length) {
     return { totalCount: 0, results: [] };
   }
 

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

@@ -1,11 +1,25 @@
-import { PNode } from '@lblod/ember-rdfa-editor';
-import { OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
-import { getSnippetIdFromUri } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { type PNode } from '@lblod/ember-rdfa-editor';
+import { type OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { getOutgoingTripleList } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
 export const SNIPPET_LIST_RDFA_PREDICATE = SAY('allowedSnippetList');
 
+const snippetListBase = 'http://lblod.data.gift/snippet-lists/';
+
+export const getSnippetUriFromId = (id: string) => `${snippetListBase}${id}`;
+
+export const getSnippetIdFromUri = (uri: string) =>
+  uri.replace(snippetListBase, '');
+
+export function tripleForSnippetListId(id: string) {
+  return {
+    predicate: SNIPPET_LIST_RDFA_PREDICATE.full,
+    object: sayDataFactory.namedNode(getSnippetUriFromId(id)),
+  };
+}
+
 export const getSnippetListIdsProperties = (node: PNode) => {
   return getOutgoingTripleList(node.attrs, SNIPPET_LIST_RDFA_PREDICATE);
 };
@@ -19,3 +33,6 @@ export const getAssignedSnippetListsIdsFromProperties = (
     .map(getSnippetIdFromUri)
     .filter((id) => id !== undefined);
 };
+
+export const getSnippetListIdsFromNode = (node: PNode) =>
+  getAssignedSnippetListsIdsFromProperties(getSnippetListIdsProperties(node));

package/addon/utils/has-descendant.ts

@@ -0,0 +1,19 @@
+import { type PNode } from '@lblod/ember-rdfa-editor';
+
+export function hasDecendant(
+  nodeToDescendInto: PNode,
+  matchFunc: (node: PNode) => boolean,
+) {
+  let foundMatch = false;
+  nodeToDescendInto.descendants((node) => {
+    // Already found a match, stop descending or checking
+    if (foundMatch) return false;
+    if (matchFunc(node)) {
+      foundMatch = true;
+      return false;
+    }
+    return true;
+  });
+
+  return foundMatch;
+}

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