Add custom macro editor for KaTeX plugin (#5933)

* Add custom macro editor for KaTeX plugin

* Use list

* Better escape

* Tweaks

* Remove const

* Catch bad macros

* Capitalize tags

* Name KaTeX-macro tiddlers properly

* UI tweaks

* Move input string to temp

* Improve UI; import macros using LaTeX cmd directly

plugins/tiddlywiki/katex/config.tid

@@ -0,0 +1,17 @@
+title: $:/plugins/tiddlywiki/katex/config
+
+<div class="tc-control-panel">
+
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/KaTeX/Config]!has[draft.of]]">
+
+<div>
+
+!! <$link><$transclude field="caption"/></$link>
+
+<$transclude>
+
+</div>
+
+</$list>
+
+</div>

plugins/tiddlywiki/katex/plugin.info

@@ -2,6 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/katex",
 	"name": "KaTeX",
 	"description": "KaTeX library for mathematical typography",
-	"list": "readme usage",
+	"list": "readme usage config",
 	"library-version": "v0.12.0"
 }

plugins/tiddlywiki/katex/ui/config/macro.tid

@@ -0,0 +1,137 @@
+title: $:/plugins/tiddlywiki/katex/ui/config/macro
+tags: $:/tags/KaTeX/Config
+caption: Custom macro editor
+
+\define katex-escape(text)
+<$vars t=$text$>
+<$latex text={{{[<t>search-replace:g:regexp[(?<!\\)#(\d)],[{\#_$1}]]}}}>
+</$vars>
+\end
+
+\define katex-create-macro()
+<$vars loc={{$:/temp/katex/new-macro-name}}>
+<$action-createtiddler $basetitle={{{[<loc>addprefix[$:/plugins/tiddlywiki/katex/macros/]]}}} tags="$:/tags/KaTeX/Macro" type="text/plain" caption={{$:/temp/katex/new-macro-name}} text={{$:/temp/katex/new-macro-command}} $overwrite=yes/>
+</$vars>
+\end
+
+\define katex-edit-cell()
+<$reveal state="$:/temp/katex/edit-macro" type=match text={{!!title}}>
+<$edit-text tiddler=<<currentTiddler>> tag="input" default=""/>
+</$reveal>
+\end
+
+\define katex-view-cell()
+<$reveal state="$:/temp/katex/edit-macro" type=nomatch text={{!!title}}>
+<tt><$view field=text/></tt>
+</$reveal>
+\end
+
+\define katex-edit-macro-button()
+<$reveal state="$:/temp/katex/edit-macro" type=nomatch text={{!!title}}>
+<$button class="tc-btn-invisible tc-btn-dropdown">
+<$action-setfield $tiddler="$:/temp/katex/edit-macro" text={{!!title}}/>
+{{$:/core/images/edit-button}}
+</$button>
+</$reveal>
+\end
+
+\define katex-save-macro-button()
+<$reveal state="$:/temp/katex/edit-macro" type=match text={{!!title}}>
+<$button class="tc-btn-invisible tc-btn-dropdown">
+<$action-deletetiddler $tiddler="$:/temp/katex/edit-macro"/>
+{{$:/core/images/done-button}}
+</$button>
+</$reveal>
+\end
+
+<table>
+<tr>
+<th>Macro</th>
+<th>Command</th>
+<th>Preview</th>
+<th></th>
+</tr>
+
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/KaTeX/Macro]!has[draft.of]sort[caption]]">
+<tr>
+<td><tt><$text text={{!!caption}}/></tt></td>
+<td><<katex-edit-cell>><<katex-view-cell>></td>
+<td><<katex-escape {{!!text}}>></td>
+<td>
+<<katex-edit-macro-button>>
+<<katex-save-macro-button>>
+<$button class="tc-btn-invisible tc-btn-dropdown">
+<$action-deletetiddler $tiddler={{!!title}}/>
+{{$:/core/images/delete-button}}
+</$button>
+</td>
+</tr>
+</$list>
+
+<tr>
+<td colspan="4" align="left">Add a new macro</td>
+</tr>
+<tr>
+<td><$edit-text tiddler="$:/temp/katex/new-macro-name" tag="input" default=""/></td>
+<td><$edit-text tiddler="$:/temp/katex/new-macro-command" tag="input" default=""/></td>
+<td><<katex-escape {{$:/temp/katex/new-macro-command}}>></td>
+<td><$button actions=<<katex-create-macro>>>
+{{$:/language/EditTemplate/Fields/Add/Button}}
+</$button></td>
+</tr>
+
+<tr><td colspan="4" align="left">
+<details>
+<summary>Import</summary>
+<$edit-text tiddler="$:/temp/katex/import-macro" tag="textarea" default="" class="tc-edit-texteditor" placeholder="You can type commands like \def\ZZ{\mathbb{Z}} and import them automatically."/>
+
+<$vars macros={{$:/temp/katex/import-macro}} sep="%.*\n|\n+" re="^\\g?def([^{]*){(.*)}.*">
+
+<$button>
+<$list filter="[<macros>splitregexp<sep>regexp<re>]" variable=line>
+<$vars m={{{[<line>search-replace:g:regexp<re>,[$1]]}}} c={{{[<line>search-replace:g:regexp<re>,[$2]]}}}>
+<$action-createtiddler $basetitle={{{[<m>addprefix[$:/plugins/tiddlywiki/katex/macros/]]}}} tags="$:/tags/KaTeX/Macro" type="text/plain" caption=<<m>> text=<<c>> $overwrite=yes/>
+</$vars>
+</$list>
+Import
+</$button>
+<$button>
+<$action-setfield $tiddler="$:/temp/katex/import-macro" text=""/>
+Clear
+</$button>
+
+''Preview''
+<table>
+<$list filter="[<macros>splitregexp<sep>regexp<re>]" variable=line>
+<$vars m={{{[<line>search-replace:g:regexp<re>,[$1]]}}} c={{{[<line>search-replace:g:regexp<re>,[$2]]}}}>
+<tr>
+<td><tt><<m>></tt></td>
+<td><tt><<c>></tt></td>
+<td><$macrocall $name=katex-escape text="<<c>>"/></td></tr>
+</$vars>
+</$list>
+</table>
+
+</$vars>
+</details>
+</td>
+</tr>
+
+<tr><td colspan="4" align="left">
+<details>
+<summary>Usage</summary>
+<ul>
+<li>
+You can add entries like `\ZZ`, `\mathbb{Z}`, which will render as <$latex text="\mathbb{Z}"/>.
+</li>
+<li>
+An entry mapping `\dd#1#2` to `\frac{d#1}{d#2}` will create a macro with two arguments; `\dd{f}{x}` will then render as <$latex text="\frac{df}{dx}"/>.
+</li>
+<li>
+Note that the macros defined here have higher priority than those defined using `\gdef`. Also, deleted macros will continue to exist until a full refresh.
+</li>
+</ul>
+</details>
+</td>
+</tr>
+</table>

plugins/tiddlywiki/katex/wrapper.js

@@ -16,6 +16,23 @@ var katex = require("$:/plugins/tiddlywiki/katex/katex.min.js"),
     chemParse = require("$:/plugins/tiddlywiki/katex/mhchem.min.js"),
 	Widget = require("$:/core/modules/widgets/widget.js").widget;
 
+katex.macros = {};
+katex.updateMacros = function() {
+	var tiddlers = $tw.wiki.getTiddlersWithTag("$:/tags/KaTeX/Macro"),
+		regex = /#\d/g, // Remove the arguments like #1#2
+		tid, macro, cmd;
+	for (var i=0; i < tiddlers.length; i++) {
+		tid = $tw.wiki.getTiddler(tiddlers[i]);
+		try {
+			macro = tid.fields["caption"];
+			macro = macro.replace(regex, "");
+			cmd = tid.fields["text"];
+			katex.macros[macro] = cmd;
+		} catch(ex) {// Catch the bad ones
+		};
+	};
+};
+
 var KaTeXWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
@@ -36,9 +53,10 @@ KaTeXWidget.prototype.render = function(parent,nextSibling) {
 	// Get the source text
 	var text = this.getAttribute("text",this.parseTreeNode.text || "");
 	var displayMode = this.getAttribute("displayMode",this.parseTreeNode.displayMode || "false") === "true";
+	katex.updateMacros();
 	// Render it into a span
 	var span = this.document.createElement("span"),
-		options = {throwOnError: false, displayMode: displayMode};
+		options = {throwOnError: false, displayMode: displayMode, macros: katex.macros};
 	try {
 		if(!this.document.isTiddlyWikiFakeDom) {
 			katex.render(text,span,options);