Remove wikify operator and refactor palette preview

The implementation of the palette preview is much less elegant like this, but it does work

core/modules/filters/wikify.js

@@ -1,37 +0,0 @@
-/*\
-title: $:/core/modules/filters/wikify.js
-type: application/javascript
-module-type: filteroperator
-
-Filter operator wikifying each string in the input list and returning the result as a list of strings
-
-\*/
-(function(){
-
-/*jslint node: true, browser: true */
-/*global $tw: false */
-"use strict";
-
-/*
-Export our filter function
-*/
-exports.wikify = function(source,operator,options) {
-	var output = operator.operands[0],
-		mode = operator.operands[1],
-		type = operator.operands[2],
-		results = [];
-	source(function(tiddler,title) {
-		var wikifier = new $tw.utils.Wikifier({
-			wiki: options.wiki,
-			widget: options.widget,
-			text: title,
-			type: type,
-			mode: mode,
-			output: output
-		});
-		results.push(wikifier.getResult());
-	});
-	return results;
-};
-
-})();

core/modules/utils/wikifier.js

@@ -1,108 +0,0 @@
-/*\
-title: $:/core/modules/utils/wikifier.js
-type: application/javascript
-module-type: utils
-
-A high level helper class for parsing and wikification
-
-\*/
-(function(){
-
-/*
-Options include:
-wiki: wiki to be used for wikification
-widget: optional widget to be used as parent of wikified text
-text: text to be parsed/wikified
-type: type of the text
-mode: inline or block
-output: text, formattedtext, html, parsetree or widgettree
-*/
-function Wikifier(options) {
-	this.wiki = options.wiki || $tw.wiki;
-	this.widget = options.widget || $tw.rootWidget;
-	this.text = options.text || "";
-	this.type = options.type || "";
-	this.mode = options.mode || "block";
-	this.output = options.output || "text";
-	// Create the parse tree
-	this.parser = this.wiki.parseText(this.type,this.text,{
-		parseAsInline: this.mode === "inline"
-	});
-	// Create the widget tree 
-	this.widgetNode = this.wiki.makeWidget(this.parser,{
-		document: $tw.fakeDocument,
-		parentWidget: this.widget
-	});
-	// Render the widget tree to the container
-	this.container = $tw.fakeDocument.createElement("div");
-	this.widgetNode.render(this.container,null);
-};
-
-Wikifier.prototype.refresh = function(changedTiddlers) {
-	// Refresh the widget tree
-	return this.widgetNode.refresh(changedTiddlers);
-};
-
-/*
-Return the result string
-*/
-Wikifier.prototype.getResult = function() {
-	var result;
-	switch(this.output) {
-		case "text":
-			result = this.container.textContent;
-			break;
-		case "formattedtext":
-			result = this.container.formattedTextContent;
-			break;
-		case "html":
-			result = this.container.innerHTML;
-			break;
-		case "parsetree":
-			result = JSON.stringify(this.parser.tree,0,$tw.config.preferences.jsonSpaces);
-			break;
-		case "widgettree":
-			result = JSON.stringify(this.getWidgetTree(),0,$tw.config.preferences.jsonSpaces);
-			break;
-	}
-	return result;
-};
-
-/*
-Return a string of the widget tree
-*/
-Wikifier.prototype.getWidgetTree = function() {
-	var copyNode = function(widgetNode,resultNode) {
-			var type = widgetNode.parseTreeNode.type;
-			resultNode.type = type;
-			switch(type) {
-				case "element":
-					resultNode.tag = widgetNode.parseTreeNode.tag;
-					break;
-				case "text":
-					resultNode.text = widgetNode.parseTreeNode.text;
-					break;
-			}
-			if(Object.keys(widgetNode.attributes || {}).length > 0) {
-				resultNode.attributes = {};
-				$tw.utils.each(widgetNode.attributes,function(attr,attrName) {
-					resultNode.attributes[attrName] = widgetNode.getAttribute(attrName);
-				});
-			}
-			if(Object.keys(widgetNode.children || {}).length > 0) {
-				resultNode.children = [];
-				$tw.utils.each(widgetNode.children,function(widgetChildNode) {
-					var node = {};
-					resultNode.children.push(node);
-					copyNode(widgetChildNode,node);
-				});
-			}
-		},
-		results = {};
-	copyNode(this.widgetNode,results);
-	return results;
-};
-
-exports.Wikifier = Wikifier;
-
-})();

core/modules/widgets/widget.js

@@ -341,19 +341,7 @@ Widget.prototype.makeFakeWidgetWithVariables = function(variables) {
 		},
 		makeFakeWidgetWithVariables: self.makeFakeWidgetWithVariables,
 		resolveVariableParameters: self.resolveVariableParameters,
-		wiki: self.wiki,
+		wiki: self.wiki
-		get variables() {
-			// We have to inefficiently fake the variables hashmap. It would be better to refactor the places
-			// that make direct access to the variables hashmap
-			const v = Object.create(self.parentWidget.variables || null);
-			$tw.utils.each(variables,function(value,name) {
-				v[name] = {value: value};
-			});
-			return v;
-		},
-		getAncestorCount: function() {
-			return 0;
-		}
 	};
 };
 

core/modules/widgets/wikify.js

@@ -39,22 +39,89 @@ Compute the internal state of the widget
 WikifyWidget.prototype.execute = function() {
 	// Get our parameters
 	this.wikifyName = this.getAttribute("name");
-	// Create the wikifier
+	this.wikifyText = this.getAttribute("text");
-	this.wikifier = new $tw.utils.Wikifier({
+	this.wikifyType = this.getAttribute("type");
-		wiki: this.wiki,
+	this.wikifyMode = this.getAttribute("mode","block");
-		widget: this,
+	this.wikifyOutput = this.getAttribute("output","text");
-		text: this.getAttribute("text"),
+	// Create the parse tree
-		type: this.getAttribute("type"),
+	this.wikifyParser = this.wiki.parseText(this.wikifyType,this.wikifyText,{
-		mode: this.getAttribute("mode","block"),
+			parseAsInline: this.wikifyMode === "inline"
-		output: this.getAttribute("output","text")
+		});
-	});
+	// Create the widget tree 
-	this.wikifyResult = this.wikifier.getResult();
+	this.wikifyWidgetNode = this.wiki.makeWidget(this.wikifyParser,{
+			document: $tw.fakeDocument,
+			parentWidget: this
+		});
+	// Render the widget tree to the container
+	this.wikifyContainer = $tw.fakeDocument.createElement("div");
+	this.wikifyWidgetNode.render(this.wikifyContainer,null);
+	this.wikifyResult = this.getResult();
 	// Set context variable
 	this.setVariable(this.wikifyName,this.wikifyResult);
 	// Construct the child widgets
 	this.makeChildWidgets();
 };
 
+/*
+Return the result string
+*/
+WikifyWidget.prototype.getResult = function() {
+	var result;
+	switch(this.wikifyOutput) {
+		case "text":
+			result = this.wikifyContainer.textContent;
+			break;
+		case "formattedtext":
+			result = this.wikifyContainer.formattedTextContent;
+			break;
+		case "html":
+			result = this.wikifyContainer.innerHTML;
+			break;
+		case "parsetree":
+			result = JSON.stringify(this.wikifyParser.tree,0,$tw.config.preferences.jsonSpaces);
+			break;
+		case "widgettree":
+			result = JSON.stringify(this.getWidgetTree(),0,$tw.config.preferences.jsonSpaces);
+			break;
+	}
+	return result;
+};
+
+/*
+Return a string of the widget tree
+*/
+WikifyWidget.prototype.getWidgetTree = function() {
+	var copyNode = function(widgetNode,resultNode) {
+			var type = widgetNode.parseTreeNode.type;
+			resultNode.type = type;
+			switch(type) {
+				case "element":
+					resultNode.tag = widgetNode.parseTreeNode.tag;
+					break;
+				case "text":
+					resultNode.text = widgetNode.parseTreeNode.text;
+					break;
+			}
+			if(Object.keys(widgetNode.attributes || {}).length > 0) {
+				resultNode.attributes = {};
+				$tw.utils.each(widgetNode.attributes,function(attr,attrName) {
+					resultNode.attributes[attrName] = widgetNode.getAttribute(attrName);
+				});
+			}
+			if(Object.keys(widgetNode.children || {}).length > 0) {
+				resultNode.children = [];
+				$tw.utils.each(widgetNode.children,function(widgetChildNode) {
+					var node = {};
+					resultNode.children.push(node);
+					copyNode(widgetChildNode,node);
+				});
+			}
+		},
+		results = {};
+	copyNode(this.wikifyWidgetNode,results);
+	return results;
+};
+
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
@@ -66,9 +133,9 @@ WikifyWidget.prototype.refresh = function(changedTiddlers) {
 		return true;
 	} else {
 		// Refresh the widget tree
-		if(this.wikifier.refresh(changedTiddlers)) {
+		if(this.wikifyWidgetNode.refresh(changedTiddlers)) {
 			// Check if there was any change
-			var result = this.wikifier.getResult();
+			var result = this.getResult();
 			if(result !== this.wikifyResult) {
 				// If so, save the change
 				this.wikifyResult = result;

core/wiki/currpalettepreview.tid

@@ -2,50 +2,69 @@ title: $:/snippets/currpalettepreview
 
 \whitespace trim
 
-\function colour(name)
+\procedure colour(name)
-[<currentTiddler>getindex<name>] :else[{$:/palettes/Vanilla}getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :and[wikify[text],[inline]]
+\whitespace trim
+<$transclude $tiddler=<<currentTiddler>> $index=<<name>>>
+	<$transclude $tiddler="$:/palettes/Vanilla" $index=<<name>>>
+		<$transclude $tiddler={{{ [[$:/config/DefaultColourMappings/]addsuffix<name>] }}}/>
+	</$transclude>
+</$transclude>
 \end colour
 
+\widget $colour.div(class,styleName,styleColour)
+<%if [<styleName>!match[]] %>
+<$wikify name="colour-result" text={{{ [[<<colour ]addsuffix<styleColour>addsuffix[>>]] }}} mode="inline">
+	<div class=<<class>> style={{{ [<styleName>addsuffix[:]addsuffix<colour-result>addsuffix[;]] }}}>
+		<$slot $name="ts-raw"/>
+	</div>
+</$wikify>
+<%else%>
+	<div class=<<class>>>
+		<$slot $name="ts-raw"/>
+	</div>
+<%endif%>
+\end $colour.div
+
 \procedure palette-preview-thumbnail-tiddler(title)
-<div class="tc-palette-preview-thumbnail-tiddler" style.backgroundColor=<<colour tiddler-background>>>
+<$colour.div class="tc-palette-preview-thumbnail-tiddler" styleName="background-color" styleColour="tiddler-background">
-	<div class="tc-palette-preview-thumbnail-tiddler-header">
+	<$colour.div class="tc-palette-preview-thumbnail-tiddler-header">
-		<div class="tc-palette-preview-thumbnail-tiddler-title" style.color=<<colour tiddler-title-foreground>>>
+		<$colour.div class="tc-palette-preview-thumbnail-tiddler-title" styleName="color" styleColour="tiddler-title-foreground">
 			<$text text=<<title>>/>
-		</div>
+		</$colour.div>
-		<div class="tc-palette-preview-thumbnail-tiddler-toolbar" style.fill=<<colour tiddler-controls-foreground>>>
+		<$colour.div class="tc-palette-preview-thumbnail-tiddler-toolbar" styleName="fill" styleColour="tiddler-controls-foreground">
 			{{$:/core/images/down-arrow}}
 			{{$:/core/images/edit-button}}
 			{{$:/core/images/close-button}}
-		</div>
+		</$colour.div>
-	</div>
+	</$colour.div>
-	<div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>>
+	<$colour.div class="tc-palette-preview-thumbnail-tiddler-subtitle" styleName="color" styleColour="tiddler-subtitle-foreground">
 		Motovun Jack
-	</div>
+	</$colour.div>
-	<div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour foreground>>>
+	<$colour.div class="tc-palette-preview-thumbnail-tiddler-body" styleName="color" styleColour="foreground">
 		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam efficitur velit tortor, sit amet tristique felis viverra sit amet. Nullam posuere facilisis purus sed consectetur. Integer vel elit euismod, posuere ligula et, dictum tellus. Donec in odio diam. Sed metus magna, placerat at ligula et, imperdiet sagittis ex.
-	</div>
+	</$colour.div>
-</div>
+</$colour.div>
 \end palette-preview-thumbnail-tiddler
 
 \procedure palette-preview-thumbnail()
-<div class="tc-palette-preview-thumbnail" style.backgroundColor=<<colour page-background>>>
+<$colour.div class="tc-palette-preview-thumbnail" styleName="background-color" styleColour="page-background">
-	<div class="tc-palette-preview-thumbnail-story">
+	<$colour.div class="tc-palette-preview-thumbnail-story">
 		<<palette-preview-thumbnail-tiddler "HelloThere">>
 		<<palette-preview-thumbnail-tiddler "Getting Started">>
-	</div>
+	</$colour.div>
-	<div class="tc-palette-preview-thumbnail-sidebar" style.color=<<colour sidebar-foreground>>>
+	<$colour.div class="tc-palette-preview-thumbnail-sidebar" styleName="color" styleColour="sidebar-foreground">
-		<div class="tc-palette-preview-thumbnail-sidebar-title">
+		<$colour.div class="tc-palette-preview-thumbnail-sidebar-title">
 			~TiddlyWiki
-		</div>
+		</$colour.div>
-		<div class="tc-palette-preview-thumbnail-sidebar-subtitle">
+		<$colour.div class="tc-palette-preview-thumbnail-sidebar-subtitle">
 			a non-linear personal web notebook
-		</div>
+		</$colour.div>
-		<div class="tc-palette-preview-thumbnail-sidebar-search" style.backgroundColor=<<colour background>>>
+		<$colour.div class="tc-palette-preview-thumbnail-sidebar-search" styleName="background-color" styleColour="background">
-			<div class="tc-palette-preview-thumbnail-sidebar-search-box">
+			<$colour.div class="tc-palette-preview-thumbnail-sidebar-search-box">
-			</div>
+			</$colour.div>
-		</div>
+		</$colour.div>
-	</div>
+	</$colour.div>
-</div>
+</$colour.div>
 \end palette-preview-thumbnail
 
 <<palette-preview-thumbnail>>

core/wiki/macros/CSS.tid

@@ -1,13 +1,17 @@
 title: $:/core/macros/CSS
 tags: $:/tags/Macro
 
-\function colour(name)
+<!-- Needs to stay that way for backwards compatibility. See GH issue: #8326 -->
-[{$:/palette}getindex<name>] :else[{$:/palettes/Vanilla}getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :and[wikify[text],[inline]]
+\define colour(name)
-\end colour
+\whitespace trim
+<$transclude tiddler={{$:/palette}} index="$name$">
+	<$transclude tiddler="$:/palettes/Vanilla" index="$name$">
+		<$transclude tiddler="$:/config/DefaultColourMappings/$name$"/>
+	</$transclude>
+</$transclude>
+\end
 
-\function color(name)
+\define color(name) <<colour $name$>>
-[function[colour],<name>]
-\end color
 
 \define box-shadow(shadow)
 ``

editions/test/tiddlers/tests/data/operators/colour/ColourDarken.tid

@@ -6,12 +6,11 @@ tags: [[$:/tags/wiki-test-spec]]
 title: Output
 
 \parsermode inline
-\import [subfilter{$:/core/config/GlobalImportFilter}]
 <$text text={{{ [subfilter{Filter}] }}}/>
 +
 title: Filter
 
-[function[colour],[primary]colour-darken[0.5]]
+[[#5778d8]colour-darken[0.5]]
 +
 title: ExpectedResult
 

editions/test/tiddlers/tests/data/operators/colour/ColourFunctionDiv.tid

@@ -1,18 +0,0 @@
-title: Operators/Colour/ColourFunctionDiv
-description: Simple colour function applied to a DIV
-type: text/vnd.tiddlywiki-multiple
-tags: [[$:/tags/wiki-test-spec]]
-
-title: Output
-
-\parsermode inline
-\import [subfilter{$:/core/config/GlobalImportFilter}]
-<div style.background=<<colour page-background>>>
-Something
-</div>
-+
-title: ExpectedResult
-
-<div style="background:#f4f4f4;">
-Something
-</div>

editions/test/tiddlers/tests/data/operators/colour/ColourFunctionSimple.tid

@@ -1,18 +0,0 @@
-title: Operators/Colour/ColourFunctionSimple
-description: Simple colour function
-type: text/vnd.tiddlywiki-multiple
-tags: [[$:/tags/wiki-test-spec]]
-
-title: Output
-
-\parsermode inline
-\import [subfilter{$:/core/config/GlobalImportFilter}]
-<$text text={{{ [subfilter{Filter}] }}}/>
-+
-title: Filter
-
-[function[colour],[background]]
-+
-title: ExpectedResult
-
-#ffffff

editions/test/tiddlers/tests/data/operators/colour/ColourLighten.tid

@@ -6,12 +6,11 @@ tags: [[$:/tags/wiki-test-spec]]
 title: Output
 
 \parsermode inline
-\import [subfilter{$:/core/config/GlobalImportFilter}]
 <$text text={{{ [subfilter{Filter}] }}}/>
 +
 title: Filter
 
-[function[colour],[primary]colour-lighten[0.5]]
+[[#5778d8]colour-lighten[0.5]]
 +
 title: ExpectedResult
 

editions/test/tiddlers/tests/data/operators/colour/ColourOklchL.tid

@@ -6,12 +6,11 @@ tags: [[$:/tags/wiki-test-spec]]
 title: Output
 
 \parsermode inline
-\import [subfilter{$:/core/config/GlobalImportFilter}]
 <$text text={{{ [subfilter{Filter}] }}}/>
 +
 title: Filter
 
-=[function[colour],[primary]colour-oklch[0.5]] =[function[colour],[primary]colour-oklch:l[0.5]] +[join[,]]
+=[[#5778d8]colour-oklch[0.5]] =[[#5778d8]colour-oklch:l[0.5]] +[join[,]]
 +
 title: ExpectedResult
 

editions/test/tiddlers/tests/data/operators/wikify/HtmlMode.tid

@@ -1,21 +0,0 @@
-title: Operators/Wikify/TextMode
-description: Simple wikify operator
-type: text/vnd.tiddlywiki-multiple
-tags: [[$:/tags/wiki-test-spec]]
-
-title: Output
-
-\parsermode inline
-<$text text={{{ [subfilter{Filter}] }}}/>
-+
-title: Filter
-
-[{Text}wikify[html],[inline],[text/vnd.tiddlywiki]]
-+
-title: Text
-
-This is ''the text'' that is __wikified__
-+
-title: ExpectedResult
-
-This is &lt;strong&gt;the text&lt;/strong&gt; that is &lt;u&gt;wikified&lt;/u&gt;

editions/test/tiddlers/tests/data/operators/wikify/ParseTreeMode.tid

@@ -1,64 +0,0 @@
-title: Operators/Wikify/ParseTreeMode
-description: Simple wikify operator
-type: text/vnd.tiddlywiki-multiple
-tags: [[$:/tags/wiki-test-spec]]
-
-title: Output
-
-\parsermode inline
-<$text text={{{ [subfilter{Filter}] }}}/>
-+
-title: Filter
-
-[{Text}wikify[parsetree],[inline],[text/vnd.tiddlywiki]]
-+
-title: Text
-
-This is ''the text'' that is __wikified__
-+
-title: ExpectedResult
-
-[
-    {
-        "type": "text",
-        "text": "This is ",
-        "start": 0,
-        "end": 8
-    },
-    {
-        "type": "element",
-        "tag": "strong",
-        "children": [
-            {
-                "type": "text",
-                "text": "the text",
-                "start": 10,
-                "end": 18
-            }
-        ],
-        "start": 8,
-        "end": 20,
-        "rule": "bold"
-    },
-    {
-        "type": "text",
-        "text": " that is ",
-        "start": 20,
-        "end": 29
-    },
-    {
-        "type": "element",
-        "tag": "u",
-        "children": [
-            {
-                "type": "text",
-                "text": "wikified",
-                "start": 31,
-                "end": 39
-            }
-        ],
-        "start": 29,
-        "end": 41,
-        "rule": "underscore"
-    }
-]

editions/test/tiddlers/tests/data/operators/wikify/TextMode.tid

@@ -1,21 +0,0 @@
-title: Operators/Wikify/TextMode
-description: Simple wikify operator
-type: text/vnd.tiddlywiki-multiple
-tags: [[$:/tags/wiki-test-spec]]
-
-title: Output
-
-\parsermode inline
-<$text text={{{ [subfilter{Filter}] }}}/>
-+
-title: Filter
-
-[{Text}wikify[text],[inline],[text/vnd.tiddlywiki]]
-+
-title: Text
-
-This is ''the text'' that is __wikified__
-+
-title: ExpectedResult
-
-This is the text that is wikified