Merge pull request #3446 from obsidian-tasks-group/edit-includes

feat: First try at editing named reusable task block statements

Author: claremacrae

src/Config/Settings.ts

@@ -59,9 +59,10 @@ export const TASK_FORMATS = {
 } as const;
 
 export type TASK_FORMATS = typeof TASK_FORMATS; // For convenience to make some typing easier
+export type IncludesMap = Record<string, string>;
 
 export interface Settings {
-    includes: Record<string, string>;
+    includes: IncludesMap;
     globalQuery: string;
     globalFilter: string;
     removeGlobalFilter: boolean;

src/Config/SettingsTab.scss

@@ -79,3 +79,47 @@
     margin-top: 0px;
     margin-bottom: 0px;
 }
+
+/* ---------------------------------------------- */
+/* Includes section                               */
+/* ---------------------------------------------- */
+
+/* Container for each setting row */
+.tasks-settings .tasks-includes-wrapper {
+    width: 100%;
+}
+
+/* Flex layout for each row */
+.tasks-settings .tasks-includes-setting.setting-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 1em;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+/* Input for key */
+.tasks-settings .tasks-includes-setting .tasks-includes-key {
+    width: 200px;
+    flex-shrink: 0;
+}
+
+/* Textarea for value */
+.tasks-settings .tasks-includes-setting .tasks-includes-value {
+    flex-grow: 1;
+    min-width: 300px;
+    min-height: 3em;
+    font-family: monospace;
+    resize: horizontal;      // allow horizontal resizing
+    overflow-x: auto;        // allow horizontal scrolling
+    overflow-y: hidden;      // hide vertical scrollbar
+    white-space: pre;        // prevent wrapping
+}
+
+/* Responsive: stack in narrow view */
+@media (max-width: 600px) {
+    .tasks-settings .tasks-includes-setting.setting-item {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}

src/Config/SettingsTab.ts

@@ -6,6 +6,7 @@ import { Status } from '../Statuses/Status';
 import type { StatusCollection } from '../Statuses/StatusCollection';
 import { createStatusRegistryReport } from '../Statuses/StatusRegistryReport';
 import { i18n } from '../i18n/i18n';
+import { renameKeyInRecordPreservingOrder } from '../lib/RecordHelpers';
 import * as Themes from './Themes';
 import { type HeadingState, TASK_FORMATS } from './Settings';
 import { getSettings, isFeatureEnabled, updateGeneralSetting, updateSettings } from './Settings';
@@ -146,6 +147,11 @@ export class SettingsTab extends PluginSettingTab {
                 }),
         );
 
+        // ---------------------------------------------------------------------------
+        new Setting(containerEl).setName('Includes').setHeading();
+        // ---------------------------------------------------------------------------
+        this.renderIncludesSettings(containerEl);
+
         // ---------------------------------------------------------------------------
         new Setting(containerEl).setName(i18n.t('settings.statuses.heading')).setHeading();
         // ---------------------------------------------------------------------------
@@ -609,6 +615,101 @@ export class SettingsTab extends PluginSettingTab {
         );
     }
 
+    private renderIncludesSettings(containerEl: HTMLElement) {
+        const includesContainer = containerEl.createDiv();
+        const settings = getSettings();
+
+        const renderIncludes = () => {
+            includesContainer.empty();
+
+            Object.entries(settings.includes).forEach(([key, value]) => {
+                const wrapper = includesContainer.createDiv({ cls: 'tasks-includes-wrapper' });
+                const setting = new Setting(wrapper);
+                setting.settingEl.addClass('tasks-includes-setting');
+
+                setting
+                    .addText((text) => {
+                        text.setPlaceholder('Name').setValue(key);
+                        text.inputEl.addClass('tasks-includes-key');
+
+                        let newKey = key;
+
+                        text.inputEl.addEventListener('input', (e) => {
+                            newKey = (e.target as HTMLInputElement).value;
+                        });
+
+                        const commitRename = async () => {
+                            if (newKey && newKey !== key) {
+                                const newIncludes = renameKeyInRecordPreservingOrder(settings.includes, key, newKey);
+                                updateSettings({ includes: newIncludes });
+                                await this.plugin.saveSettings();
+                                renderIncludes();
+                            }
+                        };
+
+                        text.inputEl.addEventListener('blur', commitRename);
+                        text.inputEl.addEventListener('keydown', async (e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                text.inputEl.blur(); // trigger blur handler
+                            }
+                        });
+                    })
+                    .addTextArea((textArea) => {
+                        textArea.inputEl.addClass('tasks-includes-value');
+                        textArea.setPlaceholder('Query or filter text...').setValue(value);
+
+                        // Resize to fit content
+                        const resize = () => {
+                            textArea.inputEl.style.height = 'auto'; // reset first
+                            textArea.inputEl.style.height = `${textArea.inputEl.scrollHeight}px`;
+                        };
+
+                        // Initial resize
+                        resize();
+
+                        // Resize on input
+                        textArea.inputEl.addEventListener('input', resize);
+
+                        return textArea.onChange(async (newValue) => {
+                            settings.includes[key] = newValue;
+                            updateSettings({ includes: settings.includes });
+                            await this.plugin.saveSettings();
+                        });
+                    })
+                    .addExtraButton((btn) => {
+                        btn.setIcon('cross')
+                            .setTooltip('Delete')
+                            .onClick(async () => {
+                                delete settings.includes[key];
+                                updateSettings({ includes: settings.includes });
+                                await this.plugin.saveSettings();
+                                renderIncludes();
+                            });
+                    });
+            });
+        };
+
+        renderIncludes();
+
+        new Setting(containerEl).addButton((btn) => {
+            btn.setButtonText('Add new include')
+                .setCta()
+                .onClick(async () => {
+                    const baseKey = 'new_key';
+                    let suffix = 1;
+                    while (Object.prototype.hasOwnProperty.call(settings.includes, `${baseKey}_${suffix}`)) {
+                        suffix++;
+                    }
+                    const newKey = `${baseKey}_${suffix}`;
+                    settings.includes[newKey] = '';
+                    updateSettings({ includes: settings.includes });
+                    await this.plugin.saveSettings();
+                    renderIncludes();
+                });
+        });
+    }
+
     private static renderFolderArray(folders: string[]): string {
         return folders.join(',');
     }

src/Scripting/QueryContext.ts

@@ -1,4 +1,4 @@
-import { getSettings } from '../Config/Settings';
+import { type IncludesMap, getSettings } from '../Config/Settings';
 import type { Task } from '../Task/Task';
 import type { TasksFile } from './TasksFile';
 
@@ -25,7 +25,7 @@ export interface QueryContext {
         allTasks: Readonly<Task[]>;
         searchCache: Record<string, any>; // Added caching capability
     };
-    includes: Record<string, string>;
+    includes: IncludesMap;
 }
 
 /**

src/lib/RecordHelpers.ts

@@ -0,0 +1,21 @@
+export function renameKeyInRecordPreservingOrder<T>(
+    record: Record<string, T>,
+    oldKey: string,
+    newKey: string,
+): Record<string, T> {
+    if (oldKey === newKey || !Object.prototype.hasOwnProperty.call(record, oldKey)) {
+        return { ...record };
+    }
+
+    const newRecord: Record<string, T> = {};
+
+    for (const [key, value] of Object.entries(record)) {
+        if (key === oldKey) {
+            newRecord[newKey] = value;
+        } else {
+            newRecord[key] = value;
+        }
+    }
+
+    return newRecord;
+}

tests/Scripting/Includes.test.ts

@@ -3,7 +3,7 @@
  */
 
 import moment from 'moment';
-import { getSettings, resetSettings, updateSettings } from '../../src/Config/Settings';
+import { type IncludesMap, getSettings, resetSettings, updateSettings } from '../../src/Config/Settings';
 import { Query } from '../../src/Query/Query';
 import { TasksFile } from '../../src/Scripting/TasksFile';
 
@@ -18,9 +18,15 @@ afterEach(() => {
     resetSettings();
 });
 
+export function makeIncludes(...entries: [string, string][]): IncludesMap {
+    return Object.fromEntries(entries);
+}
+
 describe('include tests', () => {
     it('should accept whole-line include placeholder', () => {
-        updateSettings({ includes: { not_done: 'not done' } });
+        updateSettings({
+            includes: makeIncludes(['not_done', 'not done']),
+        });
 
         const source = '{{includes.not_done}}';
         const query = new Query(source, new TasksFile('stuff.md'));
@@ -31,7 +37,9 @@ describe('include tests', () => {
     });
 
     it('should accept whole-line include filter instruction', () => {
-        updateSettings({ includes: { not_done: 'not done' } });
+        updateSettings({
+            includes: makeIncludes(['not_done', 'not done']),
+        });
 
         const source = 'include not_done';
         const query = new Query(source, new TasksFile('stuff.md'));
@@ -43,7 +51,9 @@ describe('include tests', () => {
     });
 
     it('should accept whole-line include layout instruction', () => {
-        updateSettings({ includes: { show_tree: 'show tree' } });
+        updateSettings({
+            includes: makeIncludes(['show_tree', 'show tree']),
+        });
 
         const source = 'include show_tree';
         const query = new Query(source, new TasksFile('stuff.md'));
@@ -55,8 +65,9 @@ describe('include tests', () => {
     });
 
     it('should accept multi-line include', () => {
-        updateSettings({ includes: { multi_line: 'scheduled tomorrow\nhide backlink' } });
-
+        updateSettings({
+            includes: makeIncludes(['multi_line', 'scheduled tomorrow\nhide backlink']),
+        });
         const source = 'include multi_line';
         const query = new Query(source, new TasksFile('stuff.md'));
 
@@ -84,10 +95,11 @@ describe('include tests', () => {
 
     it('should support nested include instructions', () => {
         updateSettings({
-            includes: {
-                inside: 'not done',
-                out: 'include inside\nhide edit button',
-            },
+            includes: makeIncludes(
+                // Force line break
+                ['inside', 'not done'],
+                ['out', 'include inside\nhide edit button'],
+            ),
         });
 
         const source = 'include out';
@@ -105,10 +117,10 @@ describe('include tests', () => {
 
     it('should explain two levels of nested includes', () => {
         updateSettings({
-            includes: {
-                inside: '(happens this week) AND (starts before today)',
-                out: 'include inside\nnot done',
-            },
+            includes: makeIncludes(
+                ['inside', '(happens this week) AND (starts before today)'],
+                ['out', 'include inside\nnot done'],
+            ),
         });
 
         const source = 'include out';
@@ -133,10 +145,11 @@ describe('include tests', () => {
 
     it('should give meaningful error message about included text', () => {
         updateSettings({
-            includes: {
-                inside: 'apple sauce',
-                out: 'include inside',
-            },
+            includes: makeIncludes(
+                // Force line break
+                ['inside', 'apple sauce'],
+                ['out', 'include inside'],
+            ),
         });
 
         const source = 'include out';

tests/lib/RecordHelpers.test.ts

@@ -0,0 +1,22 @@
+import { renameKeyInRecordPreservingOrder } from '../../src/lib/RecordHelpers';
+
+describe('renameKeyInRecordPreservingOrder', () => {
+    it('should rename a key without changing the order of other keys', () => {
+        const input = {
+            a: 'apple',
+            b: 'banana',
+            c: 'cherry',
+        };
+
+        const result = renameKeyInRecordPreservingOrder(input, 'b', 'blueberry');
+
+        expect(result).toEqual({
+            a: 'apple',
+            blueberry: 'banana',
+            c: 'cherry',
+        });
+
+        // Ensure key order is preserved
+        expect(Object.keys(result)).toEqual(['a', 'blueberry', 'c']);
+    });
+});