Add default settings for styled inline SPANs (#6877)

* add default settings for styled inline SPANs

* change color names in palettes and vanilla-base

* change parser behaviour if custom class is used

* tc-inline-style will only be set if no other custom setting is appliead

* Add tests for inline-styles

* add one more test

* remove space after if

core/modules/parsers/wikiparser/rules/styleinline.js

@@ -41,9 +41,6 @@ exports.parse = function() {
 	var node = {
 		type: "element",
 		tag: "span",
-		attributes: {
-			"class": {type: "string", value: "tc-inline-style"}
-		},
 		children: tree
 	};
 	if(classString) {
@@ -52,6 +49,9 @@ exports.parse = function() {
 	if(stylesString) {
 		$tw.utils.addAttributeToParseTreeNode(node,"style",stylesString);
 	}
+	if(!classString && !stylesString) {
+		$tw.utils.addClassToParseTreeNode(node,"tc-inline-style");
+	}
 	return [node];
 };
 

core/palettes/Blanca.tid

@@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #0000aa
 external-link-foreground: #0000ee
 foreground: #333333
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: #ecf2ff
 message-border: #cfd6e6
 message-foreground: #547599

core/palettes/Blue.tid

@@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #0000aa
 external-link-foreground: #0000ee
 foreground: #333353
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: #ecf2ff
 message-border: #cfd6e6
 message-foreground: #547599

core/palettes/BrightMute.tid

@@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #0000aa
 external-link-foreground: #0000ee
 foreground: #333333
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: #ecf2ff
 message-border: #cfd6e6
 message-foreground: #547599

core/palettes/ContrastDark.tid

@@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #00a
 external-link-foreground: #00e
 foreground: #000
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: <<colour foreground>>
 message-border: <<colour background>>
 message-foreground: <<colour background>>

core/palettes/ContrastLight.tid

@@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #00a
 external-link-foreground: #00e
 foreground: #fff
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: <<colour foreground>>
 message-border: <<colour background>>
 message-foreground: <<colour background>>

core/palettes/CupertinoDark.tid

@@ -32,6 +32,8 @@ external-link-foreground-hover:
 external-link-foreground-visited: #BF5AF2
 external-link-foreground: #32D74B
 foreground: #FFFFFF
+highlight-background: #ffff78
+highlight-foreground: #000000
 menubar-background: #464646
 menubar-foreground: #ffffff
 message-background: <<colour background>>

core/palettes/DarkPhotos.tid

@@ -36,6 +36,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #0000aa
 external-link-foreground: #0000ee
 foreground: #333333
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: #ecf2ff
 message-border: #cfd6e6
 message-foreground: #547599

core/palettes/DesertSand.tid

@@ -40,6 +40,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #313163
 external-link-foreground: #555592
 foreground: #2D2A23
+highlight-background: #ffff00
+highlight-foreground: #000000
 menubar-background: #CDC2A6
 menubar-foreground: #5A5446
 message-background: #ECE5CF

core/palettes/GruvBoxDark.tid

@@ -41,6 +41,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #d3869b
 external-link-foreground: #8ec07c
 foreground: #fbf1c7
+highlight-background: #ffff79
+highlight-foreground: #000000
 menubar-background: #504945
 menubar-foreground: <<colour foreground>>
 message-background: #83a598

core/palettes/Nord.tid

@@ -41,6 +41,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #5E81AC
 external-link-foreground: #8FBCBB
 foreground: #d8dee9
+highlight-background: #ffff78
+highlight-foreground: #000000
 menubar-background: #2E3440
 menubar-foreground: #d8dee9
 message-background: #2E3440

core/palettes/Rocker.tid

@@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #0000aa
 external-link-foreground: #0000ee
 foreground: #333333
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: #ecf2ff
 message-border: #cfd6e6
 message-foreground: #547599

core/palettes/SolarFlare.tid

@@ -131,6 +131,8 @@ external-link-background-hover: inherit
 external-link-background-visited: inherit
 external-link-background: inherit
 external-link-foreground-hover: inherit
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-border: #cfd6e6
 modal-border: #999999
 select-tag-background:

core/palettes/SolarizedDark.tid

@@ -35,6 +35,8 @@ external-link-foreground: #268bd2
 external-link-foreground-hover:
 external-link-foreground-visited: #268bd2
 foreground: #839496
+highlight-background: #ffff78
+highlight-foreground: #000000
 message-background: #002b36
 message-border: #586e75
 message-foreground: #839496

core/palettes/SolarizedLight.tid

@@ -35,6 +35,8 @@ external-link-foreground: #268bd2
 external-link-foreground-hover: inherit
 external-link-foreground-visited: #268bd2
 foreground: #657b83
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: #fdf6e3
 message-border: #93a1a1
 message-foreground: #657b83

core/palettes/SpartanDay.tid

@@ -34,6 +34,8 @@ external-link-foreground-hover:
 external-link-foreground-visited: 
 external-link-foreground: 
 foreground: rgba(0, 0, 0, 0.87)
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: <<colour background>>
 message-border: <<colour very-muted-foreground>>
 message-foreground: rgba(0, 0, 0, 0.54)

core/palettes/SpartanNight.tid

@@ -34,6 +34,8 @@ external-link-foreground-hover:
 external-link-foreground-visited: #7c318c
 external-link-foreground: #9e3eb3
 foreground: rgba(255, 255, 255, 0.7)
+highlight-background: #ffff78
+highlight-foreground: #000000
 message-background: <<colour background>>
 message-border: <<colour very-muted-foreground>>
 message-foreground: rgba(255, 255, 255, 0.54)

core/palettes/Twilight.tid

@@ -43,6 +43,8 @@ external-link-foreground: rgb(179, 179, 255)
 external-link-foreground-hover: inherit
 external-link-foreground-visited: rgb(153, 153, 255)
 foreground: rgb(179, 179, 179)
+highlight-background: #ffff78
+highlight-foreground: #000000
 message-background: <<colour tag-foreground>>
 message-border: #96ccff
 message-foreground: <<colour tag-background>>

core/palettes/Vanilla.tid

@@ -42,6 +42,8 @@ external-link-foreground-hover: inherit
 external-link-foreground-visited: #0000aa
 external-link-foreground: #0000ee
 foreground: #333333
+highlight-background: #ffff00
+highlight-foreground: #000000
 message-background: #ecf2ff
 message-border: #cfd6e6
 message-foreground: #547599

editions/fr-FR/tiddlers/$__editions_tw5.com_doc-macros.tid

@@ -117,7 +117,7 @@ C'est un exemple de tiddler. Voir [[Macros Table des matières (Exemples)|Table-
 <table class="doc-bad-example">
 <tbody>
 <tr class="evenRow">
-<td><span class="tc-inline-style" style="font-size:1.5em;">&#9888;</span> Attention&nbsp;:<br> Ne faites pas comme ça !</td>
+<td><span style="font-size:1.5em;">&#9888;</span> Attention&nbsp;:<br> Ne faites pas comme ça !</td>
 <td>
 
 $eg$

editions/test/tiddlers/tests/test-wikitext.js

@@ -63,6 +63,22 @@ describe("WikiText tests", function() {
 		expect(wiki.renderText("text/html","text/vnd-tiddlywiki","@@color:red;\n<div>\n\nContent</div>\n@@")).toBe("<div style=\"color:red;\"><p>Content</p></div>");
 		expect(wiki.renderText("text/html","text/vnd-tiddlywiki","@@color:red;\n---\n@@")).toBe("<hr style=\"color:red;\">");
 	});
+	it("handles inline style wikitext notation", function() {
+		expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
+			"some @@highlighted@@ text")).toBe('<p>some <span class="tc-inline-style">highlighted</span> text</p>');
+		expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
+			"some @@color:green;.tc-inline-style 1 style and 1 class@@ text")).toBe('<p>some <span class=" tc-inline-style " style="color:green;">1 style and 1 class</span> text</p>');
+		expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
+			"some @@background-color:red;red@@ text")).toBe('<p>some <span style="background-color:red;">red</span> text</p>');
+		expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
+			"some @@.myClass class@@ text")).toBe('<p>some <span class=" myClass ">class</span> text</p>');
+		expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
+			"some @@.myClass.secondClass 2 classes@@ text")).toBe('<p>some <span class=" myClass secondClass ">2 classes</span> text</p>');
+		expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
+			"some @@background:red;.myClass style and class@@ text")).toBe('<p>some <span class=" myClass " style="background:red;">style and class</span> text</p>');
+		expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
+			"some @@background:red;color:white;.myClass 2 style and 1 class@@ text")).toBe('<p>some <span class=" myClass " style="background:red;color:white;">2 style and 1 class</span> text</p>');
+	});
 });
 
 })();

editions/tw5.com/tiddlers/system/doc-macros.tid

@@ -117,7 +117,7 @@ This is an example tiddler. See [[Table-of-Contents Macros (Examples)]].
 <table class="doc-bad-example">
 <tbody>
 <tr class="evenRow">
-<td><span class="tc-inline-style" style="font-size:1.5em;">&#9888;</span> Warning:<br> Don't do it this way!</td>
+<td><span style="font-size:1.5em;">&#9888;</span> Warning:<br> Don't do it this way!</td>
 <td>
 
 $eg$

themes/tiddlywiki/vanilla/base.tid

@@ -290,6 +290,11 @@ kbd {
 	color: <<colour selection-foreground>>;
 }
 
+.tc-inline-style {
+	background: <<colour highlight-background>>;
+	color: <<colour highlight-foreground>>;
+}
+
 form.tc-form-inline {
 	display: inline;
 }