Replace snippet placeholder when deleting last snippet

.changeset/gentle-berries-exist.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+When removing last snippet of a 'group', replace the placeholder instead of completely deleting

.changeset/hungry-trees-perform.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Fix bug with snippet list names containing a `,` displaying as multiple lists

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

@@ -8,13 +8,13 @@ import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 
 interface Signature {
-  Args: EmberNodeArgs;
+  Args: Pick<EmberNodeArgs, 'node' | 'selectNode'>;
 }
 
 export default class SnippetPluginPlaceholder extends Component<Signature> {
   @service declare intl: IntlService;
   get listNames() {
-    return this.args.node.attrs.listNames;
+    return this.args.node.attrs.snippetListNames;
   }
   get isSingleList() {
     return this.listNames.length === 1;

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

@@ -28,6 +28,8 @@ import insertSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippe
 import { isNone } from '@lblod/ember-rdfa-editor/utils/_private/option';
 import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
 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';
 
 interface ButtonSig {
   Args: {
@@ -62,6 +64,15 @@ export default class SnippetNode extends Component<Signature> {
   get controller() {
     return this.args.controller;
   }
+  get schema() {
+    return this.controller.schema;
+  }
+  get snippetOrPlaceholder() {
+    return [
+      this.schema.nodes.snippet,
+      this.schema.nodes.snippet_placeholder,
+    ].filter(Boolean);
+  }
   get node() {
     return this.args.node;
   }
@@ -94,17 +105,46 @@ export default class SnippetNode extends Component<Signature> {
   deleteFragment() {
     const position = this.args.getPos();
     if (position !== undefined) {
-      this.controller.withTransaction((tr) => {
-        return transactionCombinator(
-          this.controller.mainEditorState,
-          tr.deleteRange(position, position + this.node.nodeSize),
-        )([recalculateNumbers]).transaction;
-      });
+      const matchingSnippetExists = hasDecendant(
+        this.controller.mainEditorState.doc,
+        (node) =>
+          node !== this.node &&
+          this.snippetOrPlaceholder.includes(node.type) &&
+          node.attrs.placeholderId === this.node.attrs.placeholderId,
+      );
+      if (matchingSnippetExists) {
+        this.controller.withTransaction((tr) => {
+          return transactionCombinator(
+            this.controller.mainEditorState,
+            tr.deleteRange(position, position + this.node.nodeSize),
+          )([recalculateNumbers]).transaction;
+        });
+      } else {
+        const node = createSnippetPlaceholder({
+          listProperties: {
+            placeholderId: this.node.attrs.placeholderId,
+            listIds: this.node.attrs.snippetListIds,
+            names: this.node.attrs.snippetListNames,
+            importedResources: this.node.attrs.importedResources,
+          },
+          schema: this.schema,
+          allowMultipleSnippets: this.allowMultipleSnippets,
+        });
+
+        this.args.controller.withTransaction(
+          (tr) =>
+            transactionCombinator(
+              this.controller.mainEditorState,
+              tr.replaceWith(position, position + this.node.nodeSize, node),
+            )([recalculateNumbers]).transaction,
+          { view: this.args.controller.mainEditorView },
+        );
+      }
     }
   }
   createSliceFromElement(element: Element) {
     return new Slice(
-      ProseParser.fromSchema(this.controller.schema).parse(element, {
+      ProseParser.fromSchema(this.schema).parse(element, {
         preserveWhitespace: true,
       }).content,
       0,
@@ -127,7 +167,6 @@ export default class SnippetNode extends Component<Signature> {
   @action
   onInsert(content: string, title: string) {
     this.closeModal();
-    const assignedSnippetListsIds = this.node.attrs.assignedSnippetListsIds;
     let start = 0;
     let end = 0;
     const pos = this.args.getPos();
@@ -147,8 +186,12 @@ export default class SnippetNode extends Component<Signature> {
       insertSnippet({
         content,
         title,
-        assignedSnippetListsIds,
-        importedResources: this.node.attrs.importedResources,
+        listProperties: {
+          placeholderId: this.node.attrs.placeholderId,
+          listIds: this.node.attrs.snippetListIds,
+          names: this.node.attrs.snippetListNames,
+          importedResources: this.node.attrs.importedResources,
+        },
         range: { start, end },
         allowMultipleSnippets: this.allowMultipleSnippets,
       }),
@@ -189,7 +232,7 @@ export default class SnippetNode extends Component<Signature> {
       @closeModal={{this.closeModal}}
       @config={{this.node.attrs.config}}
       @onInsert={{this.onInsert}}
-      @assignedSnippetListsIds={{this.node.attrs.assignedSnippetListsIds}}
+      @snippetListIds={{this.node.attrs.snippetListIds}}
     />
   </template>
 }

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

@@ -11,7 +11,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
 
 interface Args {
   config: SnippetPluginConfig;
-  assignedSnippetListsIds: string[] | undefined;
+  snippetListIds: string[] | undefined;
   closeModal: () => void;
   open: boolean;
   onInsert: (content: string, title: string) => void;
@@ -64,8 +64,7 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
         abortSignal: abortController.signal,
         filter: {
           name: this.inputSearchText ?? undefined,
-          assignedSnippetListIds:
-            this.args.assignedSnippetListsIds ?? undefined,
+          snippetListIds: this.args.snippetListIds ?? undefined,
         },
         pagination: {
           pageNumber: this.pageNumber,
@@ -88,7 +87,7 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
     this.inputSearchText,
     this.pageNumber,
     this.pageSize,
-    this.args.assignedSnippetListsIds,
+    this.args.snippetListIds,
   ]);
 
   @action

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

@@ -43,11 +43,11 @@ export default class SnippetPluginSnippetInsertPlaceholder extends Component<Sig
     allowMultipleSnippets: boolean,
   ) {
     if (lists) {
-      const node = createSnippetPlaceholder(
+      const node = createSnippetPlaceholder({
         lists,
-        this.args.controller.schema,
+        schema: this.args.controller.schema,
         allowMultipleSnippets,
-      );
+      });
 
       this.args.controller.withTransaction(
         (tr) => {
@@ -72,7 +72,7 @@ export default class SnippetPluginSnippetInsertPlaceholder extends Component<Sig
     </li>
     <SnippetListModal
       @config={{@config}}
-      @assignedSnippetListsIds={{empty}}
+      @snippetListIds={{empty}}
       @allowMultipleSnippets={{false}}
       @onSaveSnippetLists={{this.insertPlaceholder}}
       @open={{this.isModalOpen}}

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

@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 
 import { SayController } from '@lblod/ember-rdfa-editor';
 import {
-  type ImportedResourceMap,
+  type SnippetListProperties,
   type SnippetPluginConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 import { findParentNodeClosestToPos } from '@curvenote/prosemirror-utils';
@@ -23,13 +23,7 @@ interface Sig {
 }
 
 export default class SnippetInsertRdfaComponent extends Component<Sig> {
-  get disableInsert() {
-    return (this.snippetListProperties?.listIds.length ?? 0) === 0;
-  }
-
-  get snippetListProperties():
-    | { listIds: string[]; importedResources: ImportedResourceMap }
-    | undefined {
+  get listProperties(): SnippetListProperties | undefined {
     const activeNode = this.args.node.value;
     const activeNodeSnippetListIds = getSnippetListIdsProperties(activeNode);
 
@@ -38,6 +32,8 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
         listIds: getAssignedSnippetListsIdsFromProperties(
           activeNodeSnippetListIds,
         ),
+        placeholderId: activeNode.attrs.placeholderId,
+        names: activeNode.attrs.snippetListNames,
         importedResources: activeNode.attrs.importedResources,
       };
     }
@@ -58,6 +54,8 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
       if (properties.length > 0) {
         return {
           listIds: getAssignedSnippetListsIdsFromProperties(properties),
+          placeholderId: parentNode.node.attrs.placeholderId,
+          names: parentNode.node.attrs.snippetListNames,
           importedResources: parentNode.node.attrs.importedResources,
         };
       }
@@ -79,8 +77,7 @@ export default class SnippetInsertRdfaComponent extends Component<Sig> {
     <SnippetInsert
       @config={{@config}}
       @controller={{@controller}}
-      @snippetListProperties={{this.snippetListProperties}}
-      @disabled={{this.disableInsert}}
+      @listProperties={{this.listProperties}}
       @allowMultipleSnippets={{this.allowMultipleSnippets}}
     />
   </template>

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

@@ -11,18 +11,15 @@ import {
   Slice,
 } from '@lblod/ember-rdfa-editor';
 import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
-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 insertSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/commands/insert-snippet';
 import SearchModal from './search-modal';
 
 interface Sig {
   Args: {
     controller: SayController;
     config: SnippetPluginConfig;
-    snippetListProperties:
-      | { listIds: string[]; importedResources: ImportedResourceMap }
-      | undefined;
-    disabled?: boolean;
+    listProperties: SnippetListProperties | undefined;
     allowMultipleSnippets?: boolean;
   };
 }
@@ -33,6 +30,9 @@ export default class SnippetInsertComponent extends Component<Sig> {
   get controller() {
     return this.args.controller;
   }
+  get disabled() {
+    return (this.args.listProperties?.listIds.length ?? 0) === 0;
+  }
 
   @action
   openModal() {
@@ -58,19 +58,16 @@ export default class SnippetInsertComponent extends Component<Sig> {
   @action
   onInsert(content: string, title: string) {
     this.closeModal();
-    this.controller.doCommand(
-      insertSnippet({
-        content,
-        title,
-        assignedSnippetListsIds: this.args.snippetListProperties?.listIds || [],
-        importedResources: this.args.snippetListProperties?.importedResources,
-        allowMultipleSnippets: this.args.allowMultipleSnippets,
-      }),
-    );
-  }
-
-  get disabled() {
-    return this.args.disabled ?? false;
+    if (this.args.listProperties) {
+      this.controller.doCommand(
+        insertSnippet({
+          content,
+          title,
+          listProperties: this.args.listProperties,
+          allowMultipleSnippets: this.args.allowMultipleSnippets,
+        }),
+      );
+    }
   }
 
   <template>
@@ -91,7 +88,7 @@ export default class SnippetInsertComponent extends Component<Sig> {
       @closeModal={{this.closeModal}}
       @config={{@config}}
       @onInsert={{this.onInsert}}
-      @assignedSnippetListsIds={{@snippetListProperties.listIds}}
+      @snippetListIds={{@listProperties.listIds}}
     />
   </template>
 }

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

addon/components/snippet-plugin/snippet-list/snippet-list-modal.hbs

@@ -19,7 +19,7 @@
           {{else}}
             <SnippetPlugin::SnippetList::SnippetListView
               @snippetLists={{this.snippetListResource.value}}
-              @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
+              @snippetListIds={{this.snippetListIds}}
               @listNameFilter={{this.nameFilterText}}
               @sort={{this.sort}}
               @onChange={{this.onChange}}

addon/components/snippet-plugin/snippet-list/snippet-list-modal.ts

@@ -23,7 +23,7 @@ interface Signature {
       lists: SnippetList[],
       allowMultipleSnippets: boolean,
     ) => void;
-    assignedSnippetListsIds: string[] | undefined;
+    snippetListIds: string[] | undefined;
     closeModal: () => void;
     open: boolean;
     allowMultipleSnippets?: boolean;
@@ -40,10 +40,8 @@ export default class SnippetListModalComponent extends Component<Signature> {
   // Display
   @tracked error: unknown;
 
-  @trackedReset('args.assignedSnippetListsIds')
-  assignedSnippetListsIds: string[] = [
-    ...(this.args.assignedSnippetListsIds ?? []),
-  ];
+  @trackedReset('args.snippetListIds')
+  snippetListIds: string[] = [...(this.args.snippetListIds ?? [])];
 
   @localCopy('args.allowMultipleSnippets') allowMultipleSnippets = false;
 
@@ -65,15 +63,15 @@ export default class SnippetListModalComponent extends Component<Signature> {
   @action
   saveAndClose() {
     const snippetLists = this.snippetListResource.value?.filter((snippetList) =>
-      this.assignedSnippetListsIds.includes(snippetList.id),
+      this.snippetListIds.includes(snippetList.id),
     );
     this.args.onSaveSnippetLists(
       snippetLists || [],
       this.allowMultipleSnippets,
     );
     this.args.closeModal();
     // Clear selection for next time
-    this.assignedSnippetListsIds = [];
+    this.snippetListIds = [];
   }
 
   snippetListSearch = restartableTask(async () => {
@@ -107,7 +105,7 @@ export default class SnippetListModalComponent extends Component<Signature> {
   );
 
   @action
-  onChange(assignedSnippetListsIds: string[]) {
-    this.assignedSnippetListsIds = assignedSnippetListsIds;
+  onChange(snippetListIds: string[]) {
+    this.snippetListIds = snippetListIds;
   }
 }

addon/components/snippet-plugin/snippet-list/snippet-list-view.hbs

@@ -53,7 +53,7 @@
             <AuCheckbox
               id={{row.label}}
               @onChange={{fn this.onChange row.id}}
-              @checked={{in-array @assignedSnippetListsIds row.id}}
+              @checked={{in-array @snippetListIds row.id}}
             />
           </td>
           <td>{{row.label}}</td>