Dictionary Table

[vilc]

The Dictionary Table plugin makes dictionary tiddlers displayed as a table, sorted alphabetically by key. Clicking a key or value will copy it to clipboard.

Vanilla palette dictionary tiddler without the plugin:

With the plugin:

• Alignment in a table makes dictionaries much more readable.
• Data displayed sorted alphabetically, even if raw content is unsorted – might also be seen as a disadvantage. I don’t know any way to retrieve dictionary’s content “as is”, since TW sees it as a JSON object, which doesn’t have predictable sorting.
• Applied only to dictionary tiddlers, not to JSON tiddlers. I’ve found no easy way to determine if a JSON tiddler is a simple, one-level object of name-value pairs (in which case it makes sense to display it as a table) or a multi-level nested object (in which case the table makes no sense).

[vilc]

@etardiff’s post from the plugin library thread:

@etardiff

Thank you for sharing! I love the dictionary tiddler table; it makes things much more readable.

I felt a little guilty since your code is so elegant, but I tweaked the table template a bit for my own use and thought I’d share back in case anyone else is interested. The code below replaces $:/plugins/wilk/dictionary-table/template; it enables double-clicking on a value cell to edit it inline, enter to save back to the data tiddler, and esc to exit edit-mode without saving changes.

\procedure display(content)
<$button
	class="tc-btn-invisible"
	message="tm-copy-to-clipboard"
	param=<<content>>
	tooltip="Copy" >
		<$text text=<<content>> />
		{{$:/core/images/copy-clipboard|1em}}
</$button>
\end

\procedure edit() <$action-createtiddler $basetitle=<<dom-temp>> />
\procedure cancel() <$action-deletetiddler $tiddler=<<temp>> />
\procedure save()
<$action-setfield $tiddler=<<currentTiddler>> $index=<<index>> $value={{{ [<temp>get[text]] ~[<value>] }}} />
<<cancel>>
\end

<$eventcatcher selector=".index" $dblclick=<<edit>> tag="div">
<table class="wilk-dictionary-table">
<$list filter="[<currentTiddler>indexes[]sort[]]" variable="index">
	<tr>
		<td>
			<$transclude $variable="display" content=<<index>> />
		</td>
		<$let
			temp=`$:/temp/volatile/$(currentTiddler)$/$(index)$`
			value={{{ [<currentTiddler>getindex<index>] }}}
		>
		<td class="index" temp=<<temp>>>
			<% if [<temp>is[tiddler]] %>
				<$keyboard key="enter" actions=<<save>>>
				<$keyboard key="escape" actions=<<cancel>>>
					<$edit-text tiddler=<<temp>> tag=input class="tc-max-width" default=<<value>> />
				</$keyboard>
				</$keyboard>
			<% else %>
				<$transclude $variable="display" content=<<value>> />
			<% endif %>
		</td>
		</$let>
	</tr>
</$list>
</table>
</$eventcatcher>

---

@etardiff this is a very interesting modification, thank you! I would have to think if I need it, but it seems a very logical extension of my initial idea. Two UX details that would make it even better:

• Not copying the value on the fist click of the two clicks to edit, in case user wants to paste a previously copied content into the edited cell. This seem difficult with the current design, there would probably have to be a second button to explicitly edit.
• Click outside of the edited field also exits edit mode, just as Esc.

Just thinking loud. I’m not entirely sure that these are good ideas or worth implementing. The beauty of the plugin and your modification is that they are very simple and lightweight.

[etardiff]

@vilc

Not copying the value on the fist click of the two clicks to edit, in case user wants to paste a previously copied content into the edited cell. This seem difficult with the current design, there would probably have to be a second button to explicitly edit.

I thought about this too, but I liked your click-to-copy and didn’t want to lose any existing functionality. I did actually consider an extra button, but decided against it as it would have required some CSS modifications as well.

@vilc

Click outside of the edited field also exits edit mode, just as Esc.

This is an interesting idea, though it would eliminate a current workaround to issue #1: at present, you can double-click a cell to edit, then single-click a different cell to copy the value. That might be a reasonable tradeoff for some people, though… in which case, you could probably modify the copy-to-clipboard button to delete any tiddlers with the $:/temp/volatile/$(currentTiddler)$ prefix. My display procedure is only rendered for cells that aren’t in “edit mode”, so you could safely click inside the $edit-text without cancelling the edit.

I’m not sure how practical it would be to catch clicks outside the table, though. You could add an $eventcatcher inside the body of the tiddler, but to catch clicks in the tiddler margins or the sidebar, etc., I think you’d need to modify the page template.

I’d love to hear any thoughts on this, though. Thank you again for the clever solution and the inspiration!