From d11893752c5c4efe6dc41aa43ad3fde9a7233280 Mon Sep 17 00:00:00 2001
From: "jeremy@jermolene.com" <jeremy@jermolene.com>
Date: Mon, 23 May 2022 10:24:51 +0100
Subject: [PATCH] Experimental update of the parse-tree preview visualisation

An experiment to try out using the new JSON operators for rendering the JSON parse tree that we get back from the wikify widget.

As usual with these experiments, this one is going to require quite a lot more work to finish up:

* The formatting is via direct styles rather than classes
* The formatting for attributes and properties is not yet completed
* The same thing needs to also be done to the widget tree preview
---
 .../internals/editpreviews/parse-tree.tid     | 121 +++++++++++++++++-
 1 file changed, 114 insertions(+), 7 deletions(-)

diff --git a/plugins/tiddlywiki/internals/editpreviews/parse-tree.tid b/plugins/tiddlywiki/internals/editpreviews/parse-tree.tid
index aafa30ecf..97da36a40 100644
--- a/plugins/tiddlywiki/internals/editpreviews/parse-tree.tid
+++ b/plugins/tiddlywiki/internals/editpreviews/parse-tree.tid
@@ -3,13 +3,120 @@ tags: $:/tags/EditPreview
 list-after: $:/core/ui/EditTemplate/body/preview/output
 caption: parse tree
 
-\define preview(mode)
-<$wikify name="preview-text" text={{!!text}} type={{!!type}} mode="$mode$" output="parsetree">
-<pre>
-<code>
-<$text text=<<preview-text>>/>
-</code>
-</pre>
+\procedure preview-node-properties(node)
+<$let excludeProperties="text type tag children attributes orderedAttributes">
+<$list filter="[<node>jsonindexes[]] -[subfilter<excludeProperties>] +[limit[1]]" variable="ignore">
+<table>
+<tbody>
+<$list filter="[<node>jsonindexes[]] -[subfilter<excludeProperties>] +[sort[]]" variable="index">
+<tr>
+<td>
+<$text text=<<index>>/>
+</td>
+<td>
+<$text text={{{ [<node>jsonget<index>] }}}/>
+</td>
+</tr>
+</$list>
+</tbody>
+</table>
+</$list>
+</$let>
+\end
+
+\procedure preview-node-attribute-string(attribute)
+<$text text={{{ [<attribute>jsonget[value]] }}}/>
+\end
+
+\procedure preview-node-attribute-indirect(attribute)
+{{<$text text={{{ [<attribute>jsonget[textReference]] }}}/>}}
+\end
+
+\procedure preview-node-attribute-macro(attribute)
+\whitespace trim
+&lt;&lt;
+<$text text={{{ [<attribute>jsonget[value],[name]] }}}/>
+<$list filter="[<attribute>jsonindexes[value],[params]]" variable="index">
+&nbsp;
+<$list filter="[<attribute>jsonget[value],[params],<index>,[name]]" variable="ignore">
+<$text text={{{ [<attribute>jsonget[value],[params],<index>,[name]] }}}/>
+:
+</$list>
+<$text text={{{ [<attribute>jsonget[value],[params],<index>,[value]] }}}/>
+</$list>
+>>
+\end
+
+\procedure preview-node-attributes(node)
+<$list filter="[<node>jsonindexes[attributes]limit[1]]" variable="ignore">
+<table>
+<tbody>
+<$list filter="[<node>jsonindexes[attributes]sort[]]" variable="index">
+<tr>
+<td>
+<$text text=<<index>>/>
+</td>
+<td>
+<$let type={{{ [<node>jsonget[attributes],<index>,[type]] }}}>
+<$transclude $variable={{{ [<type>match[string]then[preview-node-attribute-string]] :else[<type>match[indirect]then[preview-node-attribute-indirect]] :else[<type>match[macro]then[preview-node-attribute-macro]] }}} attribute={{{ [<node>jsonextract[attributes],<index>] }}}/>
+</$let>
+</td>
+</tr>
+</$list>
+</tbody>
+</table>
+</$list>
+\end
+
+\procedure preview-node-children(node)
+<div style="padding:4px 4px 0 4px;">
+<$transclude $variable="preview-node-properties" node=<<node>>/>
+<$transclude $variable="preview-node-attributes" node=<<node>>/>
+<$transclude $variable="preview-node-list" nodeList={{{ [<node>jsonextract[children]] }}}/>
+</div>
+\end
+
+\procedure preview-node-title-widget(node)
+<div style="border:2px solid red;margin:4px;">
+<div style="background:red;color:white;padding:4px;">
+<$<$text text={{{ [<node>jsonget[type]] }}}/>>
+</div>
+<$transclude $variable="preview-node-children" node=<<node>>/>
+</div>
+\end
+
+\procedure preview-node-title-element(node)
+<div style="border:2px solid purple;margin:4px;">
+<div style="background:purple;color:white;padding:4px;">
+&lt;<$text text={{{ [<node>jsonget[tag]] }}}/>>
+</div>
+<$transclude $variable="preview-node-children" node=<<node>>/>
+</div>
+\end
+
+\procedure preview-node-title-text(node)
+<div style="border:2px solid green;margin:4px;">
+<div style="background:green;color:white;padding:4px;">
+<span style="color:#ff0;font-weight:bold;">"</span><span style="white-space:pre-wrap;"><$text text={{{ [<node>jsonget[text]] }}}/></span><span style="color:#ff0;font-weight:bold;">"</span>
+</div>
+</div>
+\end
+
+\procedure preview-node(node)
+<$let type={{{ [<node>jsonget[type]] }}}>
+<$transclude $variable={{{ [<type>match[element]then[preview-node-title-element]] :else[<type>match[text]then[preview-node-title-text]] :else[[preview-node-title-widget]] }}} node=<<node>>/>
+</$let>
+\end
+
+\procedure preview-node-list(nodeList)
+<$list filter="[<nodeList>jsonindexes[]]" variable="index">
+<$transclude $variable="preview-node" node={{{ [<nodeList>jsonextract<index>] }}}/>
+</$list>
+\end
+
+\procedure preview(mode)
+<$wikify name="preview-json" text={{!!text}} type={{!!type}} mode=<<mode>> output="parsetree">
+<$transclude $variable="preview-node-list" nodeList=<<preview-json>>/>
 </$wikify>
 \end