From 250e57cd79a93c6f6d01a63e2d854e6023aa006a Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Thu, 7 Nov 2024 18:30:39 +0000 Subject: [PATCH] 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 | 37 ------ core/modules/utils/wikifier.js | 108 ------------------ core/modules/widgets/widget.js | 14 +-- core/modules/widgets/wikify.js | 91 +++++++++++++-- core/wiki/currpalettepreview.tid | 75 +++++++----- core/wiki/macros/CSS.tid | 16 ++- .../data/operators/colour/ColourDarken.tid | 3 +- .../operators/colour/ColourFunctionDiv.tid | 18 --- .../operators/colour/ColourFunctionSimple.tid | 18 --- .../data/operators/colour/ColourLighten.tid | 3 +- .../data/operators/colour/ColourOklchL.tid | 3 +- .../tests/data/operators/wikify/HtmlMode.tid | 21 ---- .../data/operators/wikify/ParseTreeMode.tid | 64 ----------- .../tests/data/operators/wikify/TextMode.tid | 21 ---- 14 files changed, 140 insertions(+), 352 deletions(-) delete mode 100644 core/modules/filters/wikify.js delete mode 100644 core/modules/utils/wikifier.js delete mode 100644 editions/test/tiddlers/tests/data/operators/colour/ColourFunctionDiv.tid delete mode 100644 editions/test/tiddlers/tests/data/operators/colour/ColourFunctionSimple.tid delete mode 100644 editions/test/tiddlers/tests/data/operators/wikify/HtmlMode.tid delete mode 100644 editions/test/tiddlers/tests/data/operators/wikify/ParseTreeMode.tid delete mode 100644 editions/test/tiddlers/tests/data/operators/wikify/TextMode.tid diff --git a/core/modules/filters/wikify.js b/core/modules/filters/wikify.js deleted file mode 100644 index c9b488372..000000000 --- a/core/modules/filters/wikify.js +++ /dev/null @@ -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; -}; - -})(); diff --git a/core/modules/utils/wikifier.js b/core/modules/utils/wikifier.js deleted file mode 100644 index 5c99b01e5..000000000 --- a/core/modules/utils/wikifier.js +++ /dev/null @@ -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; - -})(); diff --git a/core/modules/widgets/widget.js b/core/modules/widgets/widget.js index c3dbf6df5..14e90ba2d 100755 --- a/core/modules/widgets/widget.js +++ b/core/modules/widgets/widget.js @@ -341,19 +341,7 @@ Widget.prototype.makeFakeWidgetWithVariables = function(variables) { }, makeFakeWidgetWithVariables: self.makeFakeWidgetWithVariables, resolveVariableParameters: self.resolveVariableParameters, - 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; - } + wiki: self.wiki }; }; diff --git a/core/modules/widgets/wikify.js b/core/modules/widgets/wikify.js index 987c3ab8a..1830b2048 100644 --- a/core/modules/widgets/wikify.js +++ b/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.wikifier = new $tw.utils.Wikifier({ - wiki: this.wiki, - widget: this, - text: this.getAttribute("text"), - type: this.getAttribute("type"), - mode: this.getAttribute("mode","block"), - output: this.getAttribute("output","text") - }); - this.wikifyResult = this.wikifier.getResult(); + this.wikifyText = this.getAttribute("text"); + this.wikifyType = this.getAttribute("type"); + this.wikifyMode = this.getAttribute("mode","block"); + this.wikifyOutput = this.getAttribute("output","text"); + // Create the parse tree + this.wikifyParser = this.wiki.parseText(this.wikifyType,this.wikifyText,{ + parseAsInline: this.wikifyMode === "inline" + }); + // Create the widget tree + 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; diff --git a/core/wiki/currpalettepreview.tid b/core/wiki/currpalettepreview.tid index 6b2cc6e8a..085196038 100644 --- a/core/wiki/currpalettepreview.tid +++ b/core/wiki/currpalettepreview.tid @@ -2,50 +2,69 @@ title: $:/snippets/currpalettepreview \whitespace trim -\function colour(name) -[getindex] :else[{$:/palettes/Vanilla}getindex] :else[[$:/config/DefaultColourMappings/]addsuffixget[text]] :and[wikify[text],[inline]] +\procedure colour(name) +\whitespace trim +<$transclude $tiddler=<> $index=<>> + <$transclude $tiddler="$:/palettes/Vanilla" $index=<>> + <$transclude $tiddler={{{ [[$:/config/DefaultColourMappings/]addsuffix] }}}/> + + \end colour +\widget $colour.div(class,styleName,styleColour) +<%if [!match[]] %> +<$wikify name="colour-result" text={{{ [[<addsuffix[>>]] }}} mode="inline"> +
> style={{{ [addsuffix[:]addsuffixaddsuffix[;]] }}}> + <$slot $name="ts-raw"/> +
+ +<%else%> +
>> + <$slot $name="ts-raw"/> +
+<%endif%> +\end $colour.div + \procedure palette-preview-thumbnail-tiddler(title) -
>> -
-
>> +<$colour.div class="tc-palette-preview-thumbnail-tiddler" styleName="background-color" styleColour="tiddler-background"> + <$colour.div class="tc-palette-preview-thumbnail-tiddler-header"> + <$colour.div class="tc-palette-preview-thumbnail-tiddler-title" styleName="color" styleColour="tiddler-title-foreground"> <$text text=<>/> - </div> - <div class="tc-palette-preview-thumbnail-tiddler-toolbar" style.fill=<<colour tiddler-controls-foreground>>> + </$colour.div> + <$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> - </div> - <div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>> + </$colour.div> + </$colour.div> + <$colour.div class="tc-palette-preview-thumbnail-tiddler-subtitle" styleName="color" styleColour="tiddler-subtitle-foreground"> Motovun Jack - </div> - <div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour foreground>>> + </$colour.div> + <$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> -</div> + </$colour.div> +</$colour.div> \end palette-preview-thumbnail-tiddler \procedure palette-preview-thumbnail() -<div class="tc-palette-preview-thumbnail" style.backgroundColor=<<colour page-background>>> - <div class="tc-palette-preview-thumbnail-story"> +<$colour.div class="tc-palette-preview-thumbnail" styleName="background-color" styleColour="page-background"> + <$colour.div class="tc-palette-preview-thumbnail-story"> <<palette-preview-thumbnail-tiddler "HelloThere">> <<palette-preview-thumbnail-tiddler "Getting Started">> - </div> - <div class="tc-palette-preview-thumbnail-sidebar" style.color=<<colour sidebar-foreground>>> - <div class="tc-palette-preview-thumbnail-sidebar-title"> + </$colour.div> + <$colour.div class="tc-palette-preview-thumbnail-sidebar" styleName="color" styleColour="sidebar-foreground"> + <$colour.div class="tc-palette-preview-thumbnail-sidebar-title"> ~TiddlyWiki - </div> - <div class="tc-palette-preview-thumbnail-sidebar-subtitle"> + </$colour.div> + <$colour.div class="tc-palette-preview-thumbnail-sidebar-subtitle"> a non-linear personal web notebook - </div> - <div class="tc-palette-preview-thumbnail-sidebar-search" style.backgroundColor=<<colour background>>> - <div class="tc-palette-preview-thumbnail-sidebar-search-box"> - </div> - </div> - </div> -</div> + </$colour.div> + <$colour.div class="tc-palette-preview-thumbnail-sidebar-search" styleName="background-color" styleColour="background"> + <$colour.div class="tc-palette-preview-thumbnail-sidebar-search-box"> + </$colour.div> + </$colour.div> + </$colour.div> +</$colour.div> \end palette-preview-thumbnail <<palette-preview-thumbnail>> diff --git a/core/wiki/macros/CSS.tid b/core/wiki/macros/CSS.tid index 3fffaa213..09c85efe9 100644 --- a/core/wiki/macros/CSS.tid +++ b/core/wiki/macros/CSS.tid @@ -1,13 +1,17 @@ title: $:/core/macros/CSS tags: $:/tags/Macro -\function colour(name) -[{$:/palette}getindex<name>] :else[{$:/palettes/Vanilla}getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :and[wikify[text],[inline]] -\end colour +<!-- Needs to stay that way for backwards compatibility. See GH issue: #8326 --> +\define colour(name) +\whitespace trim +<$transclude tiddler={{$:/palette}} index="$name$"> + <$transclude tiddler="$:/palettes/Vanilla" index="$name$"> + <$transclude tiddler="$:/config/DefaultColourMappings/$name$"/> + </$transclude> +</$transclude> +\end -\function color(name) -[function[colour],<name>] -\end color +\define color(name) <<colour $name$>> \define box-shadow(shadow) `` diff --git a/editions/test/tiddlers/tests/data/operators/colour/ColourDarken.tid b/editions/test/tiddlers/tests/data/operators/colour/ColourDarken.tid index 7801d1c34..796498480 100644 --- a/editions/test/tiddlers/tests/data/operators/colour/ColourDarken.tid +++ b/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 diff --git a/editions/test/tiddlers/tests/data/operators/colour/ColourFunctionDiv.tid b/editions/test/tiddlers/tests/data/operators/colour/ColourFunctionDiv.tid deleted file mode 100644 index e6d2b84c7..000000000 --- a/editions/test/tiddlers/tests/data/operators/colour/ColourFunctionDiv.tid +++ /dev/null @@ -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> \ No newline at end of file diff --git a/editions/test/tiddlers/tests/data/operators/colour/ColourFunctionSimple.tid b/editions/test/tiddlers/tests/data/operators/colour/ColourFunctionSimple.tid deleted file mode 100644 index 8cb21ef73..000000000 --- a/editions/test/tiddlers/tests/data/operators/colour/ColourFunctionSimple.tid +++ /dev/null @@ -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 \ No newline at end of file diff --git a/editions/test/tiddlers/tests/data/operators/colour/ColourLighten.tid b/editions/test/tiddlers/tests/data/operators/colour/ColourLighten.tid index 967215e52..f359a041a 100644 --- a/editions/test/tiddlers/tests/data/operators/colour/ColourLighten.tid +++ b/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 diff --git a/editions/test/tiddlers/tests/data/operators/colour/ColourOklchL.tid b/editions/test/tiddlers/tests/data/operators/colour/ColourOklchL.tid index 22d6767f8..4e5325b6d 100644 --- a/editions/test/tiddlers/tests/data/operators/colour/ColourOklchL.tid +++ b/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 diff --git a/editions/test/tiddlers/tests/data/operators/wikify/HtmlMode.tid b/editions/test/tiddlers/tests/data/operators/wikify/HtmlMode.tid deleted file mode 100644 index 9f6cf01ed..000000000 --- a/editions/test/tiddlers/tests/data/operators/wikify/HtmlMode.tid +++ /dev/null @@ -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 <strong>the text</strong> that is <u>wikified</u> \ No newline at end of file diff --git a/editions/test/tiddlers/tests/data/operators/wikify/ParseTreeMode.tid b/editions/test/tiddlers/tests/data/operators/wikify/ParseTreeMode.tid deleted file mode 100644 index 237676d8d..000000000 --- a/editions/test/tiddlers/tests/data/operators/wikify/ParseTreeMode.tid +++ /dev/null @@ -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" - } -] \ No newline at end of file diff --git a/editions/test/tiddlers/tests/data/operators/wikify/TextMode.tid b/editions/test/tiddlers/tests/data/operators/wikify/TextMode.tid deleted file mode 100644 index 2f4f844bc..000000000 --- a/editions/test/tiddlers/tests/data/operators/wikify/TextMode.tid +++ /dev/null @@ -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 \ No newline at end of file