Add pluggable previews to the import listing

core/language/en-GB/Import.multids

@@ -7,6 +7,12 @@ Listing/Import/Caption: Import
 Listing/Select/Caption: Select
 Listing/Status/Caption: Status
 Listing/Title/Caption: Title
+Listing/Preview: Preview:
+Listing/Preview/Text: Text
+Listing/Preview/TextRaw: Text (Raw)
+Listing/Preview/Fields: Fields
+Listing/Preview/Diff: Diff
+Listing/Preview/DiffFields: Diff (Fields)
 Upgrader/Plugins/Suppressed/Incompatible: Blocked incompatible or obsolete plugin
 Upgrader/Plugins/Suppressed/Version: Blocked plugin (due to incoming <<incoming>> being older than existing <<existing>>)
 Upgrader/Plugins/Upgraded: Upgraded plugin from <<incoming>> to <<upgraded>>

core/ui/ImportListing.tid

@@ -41,12 +41,12 @@ $(currentTiddler)$!!popup-$(payloadTiddler)$
 <$checkbox field=<<selectionField>> checked="checked" unchecked="unchecked" default="checked"/>
 </td>
 <td>
-<$reveal type="nomatch" state=<<previewPopupState>> text="yes">
+<$reveal type="nomatch" state=<<previewPopupState>> text="yes" tag="div">
 <$button class="tc-btn-invisible tc-btn-dropdown" set=<<previewPopupState>> setTo="yes">
 {{$:/core/images/right-arrow}}&nbsp;<$text text=<<payloadTiddler>>/>
 </$button>
 </$reveal>
-<$reveal type="match" state=<<previewPopupState>> text="yes">
+<$reveal type="match" state=<<previewPopupState>> text="yes" tag="div">
 <$button class="tc-btn-invisible tc-btn-dropdown" set=<<previewPopupState>> setTo="no">
 {{$:/core/images/down-arrow}}&nbsp;<$text text=<<payloadTiddler>>/>
 </$button>
@@ -58,8 +58,10 @@ $(currentTiddler)$!!popup-$(payloadTiddler)$
 </tr>
 <tr>
 <td colspan="3">
-<$reveal type="match" text="yes" state=<<previewPopupState>>>
-<$macrocall $name="compareTiddlerText" sourceTiddlerTitle=<<payloadTiddler>> destTiddlerTitle=<<currentTiddler>> destSubTiddlerTitle=<<payloadTiddler>>/>
+<$reveal type="match" text="yes" state=<<previewPopupState>> tag="div">
+<$list filter="[{$:/state/importpreviewtype}has[text]]" variable="listItem" emptyMessage={{$:/core/ui/ImportPreviews/Text}}>
+<$transclude tiddler={{$:/state/importpreviewtype}}/>
+</$list>
 </$reveal>
 </td>
 </tr>

core/ui/ImportPreviews/Diff.tid

@@ -0,0 +1,5 @@
+title: $:/core/ui/ImportPreviews/Diff
+tags: $:/tags/ImportPreview
+caption: {{$:/language/Import/Listing/Preview/Diff}}
+
+<$macrocall $name="compareTiddlerText" sourceTiddlerTitle=<<payloadTiddler>> destTiddlerTitle=<<currentTiddler>> destSubTiddlerTitle=<<payloadTiddler>>/>

core/ui/ImportPreviews/DiffFields.tid

@@ -0,0 +1,5 @@
+title: $:/core/ui/ImportPreviews/DiffFields
+tags: $:/tags/ImportPreview
+caption: {{$:/language/Import/Listing/Preview/DiffFields}}
+
+<$macrocall $name="compareTiddlers" sourceTiddlerTitle=<<payloadTiddler>> destTiddlerTitle=<<currentTiddler>> destSubTiddlerTitle=<<payloadTiddler>> exclude="text"/>

core/ui/ImportPreviews/Fields.tid

@@ -0,0 +1,7 @@
+title: $:/core/ui/ImportPreviews/Fields
+tags: $:/tags/ImportPreview
+caption: {{$:/language/Import/Listing/Preview/Fields}}
+
+<$tiddler tiddler=<<payloadTiddler>>>
+<$transclude tiddler="$:/core/ui/TiddlerFields"/>
+</$tiddler>

core/ui/ImportPreviews/Text.tid

@@ -0,0 +1,5 @@
+title: $:/core/ui/ImportPreviews/Text
+tags: $:/tags/ImportPreview
+caption: {{$:/language/Import/Listing/Preview/Text}}
+
+<$transclude tiddler=<<payloadTiddler>> mode="block"/>

core/ui/ImportPreviews/TextRaw.tid

@@ -0,0 +1,5 @@
+title: $:/core/ui/ImportPreviews/TextRaw
+tags: $:/tags/ImportPreview
+caption: {{$:/language/Import/Listing/Preview/TextRaw}}
+
+<pre><code><$view tiddler=<<payloadTiddler>>/></code></pre>

core/ui/ViewTemplate/import.tid

@@ -3,19 +3,27 @@ tags: $:/tags/ViewTemplate
 
 \define lingo-base() $:/language/Import/
 
+\define buttons()
+<$button message="tm-delete-tiddler" param=<<currentTiddler>>><<lingo Listing/Cancel/Caption>></$button>
+<$button message="tm-perform-import" param=<<currentTiddler>>><<lingo Listing/Import/Caption>></$button>
+<<lingo Listing/Preview>> <$select tiddler="$:/state/importpreviewtype" default="$:/core/ui/ImportPreviews/Text">
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/ImportPreview]!has[draft.of]]">
+<option value=<<currentTiddler>>>{{!!caption}}</option>
+</$list>
+</$select>
+\end
+
 <$list filter="[all[current]field:plugin-type[import]]">
 
 <div class="tc-import">
 
 <<lingo Listing/Hint>>
 
-<$button message="tm-delete-tiddler" param=<<currentTiddler>>><<lingo Listing/Cancel/Caption>></$button>
-<$button message="tm-perform-import" param=<<currentTiddler>>><<lingo Listing/Import/Caption>></$button>
+<<buttons>>
 
 {{||$:/core/ui/ImportListing}}
 
-<$button message="tm-delete-tiddler" param=<<currentTiddler>>><<lingo Listing/Cancel/Caption>></$button>
-<$button message="tm-perform-import" param=<<currentTiddler>>><<lingo Listing/Import/Caption>></$button>
+<<buttons>>
 
 </div>
 

editions/tw5.com/tiddlers/concepts/SystemTags.tid

@@ -29,6 +29,7 @@ These are the available system tags
 |<<tag "$:/tags/Exporter">> |for the exporters |
 |<<tag "$:/tags/Filter">> |for filters in advanced seach sample filter dropdown |
 |<<tag "$:/tags/Image">> |for (core) images |
+|<<tag "$:/tags/ImportPreview">> |for preview types for the import listing |
 |<<tag "$:/tags/Manager/ItemMain">> |for the tiddler manager. $:/Manager |
 |<<tag "$:/tags/Manager/ItemSidebar">> |for the tiddler manager |
 |<<tag "$:/tags/Macro">> |for global macros |

themes/tiddlywiki/vanilla/base.tid

@@ -2410,6 +2410,20 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
 	color: <<colour diff-invisible-foreground>>;
 }
 
+.tc-diff-tiddlers th {
+	text-align: right;
+	background: <<colour background>>;
+	font-weight: normal;
+	font-style: italic;
+}
+
+.tc-diff-tiddlers pre {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+}
+
 /*
 ** Errors
 */