Merge pull request #3658 from ilandikov/feat-copy-button

feat: Add 'Copy results' button to search results

Author: claremacrae

docs/snippets-embedded-in-multiple-pages/Sample HTML - Full mode.md

@@ -5,6 +5,7 @@
 -->
 
 <div>
+  <button class="plugin-tasks-copy-button">Copy results</button>
   <ul class="contains-task-list plugin-tasks-query-result">
     <li
       class="task-list-item plugin-tasks-list-item"

docs/snippets-embedded-in-multiple-pages/Sample HTML - Short mode.md

@@ -5,6 +5,7 @@
 -->
 
 <div>
+  <button class="plugin-tasks-copy-button">Copy results</button>
   <ul class="contains-task-list plugin-tasks-query-result tasks-layout-short-mode">
     <li
       class="task-list-item plugin-tasks-list-item"

src/Query/Group/TaskGroup.ts

@@ -97,18 +97,17 @@ export class TaskGroup {
      * A human-readable representation of this task group, including names
      * and headings that should be displayed.
      *
-     * Note that this is used in snapshot testing, so if the format is
-     * changed, the snapshots will need to be updated.
+     * Note that this is used in the 'Copy results' facility and snapshot testing, so if the format is
+     * changed, the documentation and snapshots will need to be updated.
      */
     public toString(): string {
         let output = '\n';
-        output += `Group names: [${this.groups}]\n`;
 
         for (const heading of this.groupHeadings) {
             // These headings mimic the behaviour of QueryRenderer,
             // which uses 'h4', 'h5' and 'h6' for nested groups.
             const headingPrefix = '#'.repeat(4 + heading.nestingLevel);
-            output += `${headingPrefix} [${heading.property}] ${heading.displayName}\n`;
+            output += `${headingPrefix} ${heading.displayName}\n\n`;
         }
 
         output += this.tasksAsStringOfLines();

src/Query/Group/TaskGroups.ts

@@ -75,22 +75,16 @@ export class TaskGroups {
     /**
      * A human-readable representation of all the task groups.
      *
-     * Note that this is used in snapshot testing, so if the format is
-     * changed, the snapshots will need to be updated.
+     * Note that this is used in the 'Copy results' facility and snapshot testing, so if the format is
+     * changed, the documentation and snapshots will need to be updated.
      */
     public toString(): string {
         let output = '';
-        output += 'Groupers (if any):\n';
-        for (const grouper of this._groupers) {
-            const reverseText = grouper.reverse ? ' reverse' : '';
-            output += `- ${grouper.property}${reverseText}\n`;
-        }
+
         for (const taskGroup of this.groups) {
             output += taskGroup.toString();
-            output += '\n---\n';
         }
-        const totalTasksCount = this.totalTasksCount();
-        output += `\n${totalTasksCount} tasks\n`;
+
         return output;
     }
 

src/Renderer/QueryResultsRenderer.ts

@@ -1,4 +1,4 @@
-import type { App, Component, TFile } from 'obsidian';
+import { type App, type Component, Notice, type TFile } from 'obsidian';
 import { GlobalFilter } from '../Config/GlobalFilter';
 import { GlobalQuery } from '../Config/GlobalQuery';
 import { postponeButtonTitle, shouldShowPostponeButton } from '../DateTime/Postponer';
@@ -202,6 +202,8 @@ export class QueryResultsRenderer {
         const measureRender = new PerformanceTracker(`Render: ${this.query.queryId} - ${this.filePath}`);
         measureRender.start();
 
+        this.addCopyButton(content, queryResult.taskGroups);
+
         await this.addAllTaskGroups(queryResult.taskGroups, content, queryRendererParameters);
 
         const totalTasksCount = queryResult.totalTasksCount;
@@ -235,6 +237,16 @@ export class QueryResultsRenderer {
         content.appendChild(explanationsBlock);
     }
 
+    private addCopyButton(content: HTMLDivElement, taskGroups: TaskGroups) {
+        const copyButton = createAndAppendElement('button', content);
+        copyButton.textContent = 'Copy results';
+        copyButton.classList.add('plugin-tasks-copy-button');
+        copyButton.addEventListener('click', async () => {
+            await navigator.clipboard.writeText(taskGroups.toString());
+            new Notice('Results copied to clipboard');
+        });
+    }
+
     private async addAllTaskGroups(
         tasksSortedLimitedGrouped: TaskGroups,
         content: HTMLDivElement,

src/Renderer/Renderer.scss

@@ -13,6 +13,15 @@
     --code-white-space: pre;
 }
 
+.plugin-tasks-copy-button {
+    position: absolute;
+    right: 0;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+
+    margin-top: 16px;
+}
+
 .tasks-count {
     color: var(--text-faint);
     padding-left: 20px;

tests/Query/Filter/TagsField.test.ts

@@ -659,22 +659,14 @@ describe('grouping by tag', () => {
 
         // Assert
         expect(groups.toString()).toMatchInlineSnapshot(`
-            "Groupers (if any):
-            - tags reverse
+            "
+            #### #tag2
 
-            Group names: [#tag2]
-            #### [tags] #tag2
             - [ ] b #tag2
 
-            ---
+            #### #tag1
 
-            Group names: [#tag1]
-            #### [tags] #tag1
             - [ ] a #tag1
-
-            ---
-
-            2 tasks
             "
         `);
     });