fix: Dataview: Enable workarounds to prevent Obsidian from rendering …

…inline fields as reference style links (#1916) * feat: Dataview: Allow inline fields to be comma seperated * test: Add test for comma seperated inline fields * fix: Ensure that inline fields are written with 2 spaces in between * docs: Update docs to use comma seperated inline fields * docs: Add a warnings about reference-style links and Dataview format * vault: Update spacing in Dataview Format.md * docs: Make Live Preview searchable in Dataview Format docs Obsidian Publish only searches file names and headings. * docs: Use text instead of markdown as block language * docs: Add a Tip callout with workarounds for reference-style links. * docs: Note that the Edit tasks modal puts 2 spaces between fields. --------- Co-authored-by: Clare Macrae <[email protected]>
obsidian-tasks-group · Apr 27, 2023 · b1188b4 · b1188b4
1 parent 49d41bd
commit b1188b4
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 17 deletions.
diff --git a/docs/Reference/Task Formats/About Task Formats.md b/docs/Reference/Task Formats/About Task Formats.md
@@ -30,9 +30,9 @@ Tasks supports these task formats:
   - `🛫 2023-04-05 ⏳ 2023-04-06 📅 2023-04-07`
   - `➕ 2023-04-03 ✅ 2023-04-08`
 - [[Dataview Format]]
-  - `[priority:: high] [repeat:: every day when done]`
-  - `[start:: 2023-04-05] [scheduled:: 2023-04-06] [due:: 2023-04-07]`
-  - `[created:: 2023-04-03] [completion:: 2023-04-08]`
+  - `[priority:: high], [repeat:: every day when done]`
+  - `[start:: 2023-04-05], [scheduled:: 2023-04-06], [due:: 2023-04-07]`
+  - `[created:: 2023-04-03], [completion:: 2023-04-08]`
   - **Note:** do read this format's documentation, as there are some important differences between Tasks and Dataview interpretations.
 
 ## Impact of non-default task formats on Tasks behaviour

diff --git a/docs/Reference/Task Formats/Dataview Format.md b/docs/Reference/Task Formats/Dataview Format.md
@@ -28,6 +28,52 @@ Note, however, that when Tasks *writes* task lines, it always writes them with `
 
 The brackets `[]` and `()` differ in how [Dataview displays them](https://blacksmithgu.github.io/obsidian-dataview/annotation/add-metadata/#inline-fields). With the parenthesis syntax, Dataview only shows the field value and not the key.
 
+### Ensuring correct display in Live Preview
+
+> [!tip]
+> If, in Source or Live Preview, **any of your dataview fields are underlined**, to ensure you see all your data in Live Preview, you should **separate the fields** with one of:
+>
+> - 2 spaces
+> - a comma and a space
+>
+> The [[Create or edit Task]] modal puts 2 spaces between dataview fields automatically.
+
+> [!warning]
+> `[Text][More Text]` is a Markdown feature called a [reference-style link](https://daringfireball.net/projects/markdown/syntax#link).
+>
+> If Live Preview in Obsidian is **enabled**, Obsidian will **hide** everything inside the second set of square brackets.
+>
+> So a task with multiple inline fields:
+>
+> ```text
+> - [ ] This is a task [priority:: high] [start:: 2023-04-24] [due:: 2023-05-01]
+> ```
+>
+> Will look like this with Live Preview enabled:
+>
+> > - [ ] This is a task <u>priority:: high</u> [due:: 2023-05-01]
+>
+> ---
+>
+> This issue is outside the scope of the Tasks plugin, but can be avoided with any of the following workarounds:
+>
+> - Turning **off** Live Preview in Obsidian.
+> - Separating each field with at least 2 spaces.
+>
+> > [!example]
+>   >
+>   > ```text
+>   >  - [ ] This is a task [priority:: high]  [start:: 2023-04-24]  [due:: 2023-05-01]
+>   >  ```
+>
+> - Separating each field with commas.
+>
+> > [!example]
+>   >
+>   > ```text
+>   >  - [ ] This is a task [priority:: high], [start:: 2023-04-24], [due:: 2023-05-01]
+>   > ```
+
 ---
 
 ## Supported dataview fields

diff --git a/resources/sample_vaults/Tasks-Demo/Formats/Dataview Format.md b/resources/sample_vaults/Tasks-Demo/Formats/Dataview Format.md
@@ -4,22 +4,27 @@ The fields shown below can be surrounded by either `[]` or `()`.
 
 ## Dataview Format Dates
 
-- [ ] #task Has a created date [created:: 2023-04-17]
-- [ ] #task Has a scheduled date [scheduled:: 2023-04-14]
-- [ ] #task Has a start date [start:: 2023-04-15]
-- [ ] #task Has a due date [due:: 2023-04-16]
-- [x] #task Has a done date [completion:: 2023-04-17]
+- [ ] #task Has a created date  [created:: 2023-04-17]
+- [ ] #task Has a scheduled date  [scheduled:: 2023-04-14]
+- [ ] #task Has a start date  [start:: 2023-04-15]
+- [ ] #task Has a due date  [due:: 2023-04-16]
+- [x] #task Has a done date  [completion:: 2023-04-17]
 
 ## Dataview Format for Priorities
 
-- [ ] #task Low priority [priority:: low]
+- [ ] #task Low priority  [priority:: low]
 - [ ] #task Normal priority
-- [ ] #task Medium priority [priority:: medium]
-- [ ] #task High priority [priority:: high]
+- [ ] #task Medium priority  [priority:: medium]
+- [ ] #task High priority  [priority:: high]
 
 ## Dataview Format for Recurrence
 
-- [ ] #task Is a recurring task [repeat:: every day when done]
+- [ ] #task Is a recurring task  [repeat:: every day when done]
+
+## All Dataview Fields
+
+- [ ] #task Has one of every field except done  [priority:: high]  [repeat:: every day]  [start:: 2023-04-24]  [scheduled:: 2023-04-26]  [due:: 2023-04-27]
+- [x] #task Has one of every except recurring  [priority:: high]  [created:: 2023-04-26]  [start:: 2023-04-23]  [scheduled:: 2023-04-25]  [due:: 2023-04-26]  [completion:: 2023-04-26]
 
 ---
 

diff --git a/src/TaskSerializer/DataviewTaskSerializer.ts b/src/TaskSerializer/DataviewTaskSerializer.ts
@@ -45,6 +45,7 @@ function toInlineFieldRegex(innerFieldRegex: RegExp): RegExp {
             innerFieldRegex,
             / */,
             /[)\]]/,
+            /(?: *,)?/, // Allow trailing comma, enables workaround from #1913 for rendering issue
             /$/, // Regexes are matched from the end of the string forwards
         ] as const
     )
@@ -107,6 +108,11 @@ export class DataviewTaskSerializer extends DefaultTaskSerializer {
         const stringComponent = super.componentToString(task, layout, component);
         const notInlineFieldComponents: TaskLayoutComponent[] = ['blockLink', 'description'];
         const shouldMakeInlineField = stringComponent !== '' && !notInlineFieldComponents.includes(component);
-        return shouldMakeInlineField ? ` [${stringComponent.trim()}]` : stringComponent;
+        return shouldMakeInlineField
+            ? // Having 2 (TWO) leading spaces avoids a rendering issues that makes every other
+              // square-bracketed inline-field invisible.
+              // See https://github.com/obsidian-tasks-group/obsidian-tasks/issues/1913
+              `  [${stringComponent.trim()}]`
+            : stringComponent;
     }
 }
diff --git a/tests/TaskSerializer/DataviewTaskSerializer.test.ts b/tests/TaskSerializer/DataviewTaskSerializer.test.ts
@@ -192,6 +192,22 @@ describe('DataviewTaskSerializer', () => {
             });
         });
 
+        // This test validates that the workaround for https://github.com/obsidian-tasks-group/obsidian-tasks/issues/1913
+        // works
+        it('should recognize comma seperated inline fields', () => {
+            const taskDetails = deserialize(
+                'Some task that is [due::2021-08-22], [priority::high]       , (start::2021-08-19)',
+            );
+            expect(taskDetails).toMatchTaskDetails({
+                priority: Priority.High,
+                dueDate: moment('2021-08-22', 'YYYY-MM-DD'),
+                startDate: moment('2021-08-19', 'YYYY-MM-DD'),
+                // Note that the commas are consumed by the inline field parsing
+                // This may have to change if #1505 is implemented
+                description: 'Some task that is',
+            });
+        });
+
         // This is one major behavior difference between Dataview and Tasks
         // This task is marked as skipped until tasks has support for parsing fields arbitrarily
         // within a task line
@@ -214,15 +230,15 @@ describe('DataviewTaskSerializer', () => {
         it.each(dateFields)('should serialize a %s', (dateField) => {
             const serialized = serialize(new TaskBuilder()[dateField]('2021-06-20').description('').build());
             const symbol = DATAVIEW_SYMBOLS[`${dateField}Symbol`];
-            expect(serialized).toEqual(` [${symbol} 2021-06-20]`);
+            expect(serialized).toEqual(`  [${symbol} 2021-06-20]`);
         });
 
         it('should serialize a High, Medium and Low priority', () => {
             const priorities = ['High', 'Medium', 'Low'] as const;
             for (const p of priorities) {
                 const task = new TaskBuilder().priority(Priority[p]).description('').build();
                 const serialized = serialize(task);
-                expect(serialized).toEqual(` [${DATAVIEW_SYMBOLS.prioritySymbols[p]}]`);
+                expect(serialized).toEqual(`  [${DATAVIEW_SYMBOLS.prioritySymbols[p]}]`);
             }
         });
 
@@ -238,7 +254,7 @@ describe('DataviewTaskSerializer', () => {
                 .description('')
                 .build();
             const serialized = serialize(task);
-            expect(serialized).toEqual(' [repeat:: every day]');
+            expect(serialized).toEqual('  [repeat:: every day]');
         });
 
         it('should serialize tags', () => {
@@ -269,7 +285,7 @@ describe('DataviewTaskSerializer', () => {
 
             const serialized = serialize(task);
             expect(serialized).toEqual(
-                'Wobble #tag1 #tag2 #tag3 #tag4 #tag5 #tag6 #tag7 #tag8 #tag9 #tag10 [priority:: high] [repeat:: every day] [start:: 2023-08-03] [scheduled:: 2022-07-02] [due:: 2025-10-05] [completion:: 2024-09-04]',
+                'Wobble #tag1 #tag2 #tag3 #tag4 #tag5 #tag6 #tag7 #tag8 #tag9 #tag10  [priority:: high]  [repeat:: every day]  [start:: 2023-08-03]  [scheduled:: 2022-07-02]  [due:: 2025-10-05]  [completion:: 2024-09-04]',
             );
         });
     });