Replace classed blocks and runs with styled blocks and runs

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

@@ -1,50 +0,0 @@
-/*\
-title: $:/core/modules/parsers/wikiparser/rules/classblock.js
-type: application/javascript
-module-type: wikirule
-
-Wiki text block rule for assigning classes to paragraphs and other blocks. For example:
-
-{{{
-{{myClass{
-This paragraph will have the CSS class `myClass`.
-
-* The `<ul>` around this list will also have the class `myClass`
-* List item 2
-
- }}}
-}}}
-
-Note that the opening and closing braces both must be immediately followed by a newline.
-
-\*/
-(function(){
-
-/*jslint node: true, browser: true */
-/*global $tw: false */
-"use strict";
-
-exports.name = "classblock";
-exports.types = {block: true};
-
-exports.init = function(parser) {
-	this.parser = parser;
-	// Regexp to match
-	this.matchRegExp = /\{\{([^\{\r\n]+)\{\r?\n/mg;
-};
-
-exports.parse = function() {
-	var reEndString = "(\\}\\}\\}$(?:\\r?\\n)?)";
-	// Get the class
-	var classString = this.match[1];
-	// Move past the match
-	this.parser.pos = this.matchRegExp.lastIndex;
-	// Parse the body
-	var tree = this.parser.parseBlocks(reEndString);
-	for(var t=0; t<tree.length; t++) {
-		$tw.utils.addClassToParseTreeNode(tree[t],classString);
-	}
-	return tree;
-};
-
-})();

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

@@ -1,52 +0,0 @@
-/*\
-title: $:/core/modules/parsers/wikiparser/rules/classinline.js
-type: application/javascript
-module-type: wikirule
-
-Wiki text inline rule for assigning classes to runs of text. For example:
-
-{{{
-{{myClass{This text will have the CSS class `myClass`.
-
-* This will not be recognised as a list
-
-List item 2}}}
-}}}
-
-
-\*/
-(function(){
-
-/*jslint node: true, browser: true */
-/*global $tw: false */
-"use strict";
-
-exports.name = "classinline";
-exports.types = {inline: true};
-
-exports.init = function(parser) {
-	this.parser = parser;
-	// Regexp to match
-	this.matchRegExp = /\{\{([^\{\r\n]+)\{/mg;
-};
-
-exports.parse = function() {
-	var reEnd = /(\}\}\})/g;
-	// Get the class
-	var classString = this.match[1];
-	// Move past the match
-	this.parser.pos = this.matchRegExp.lastIndex;
-	// Parse the run up to the terminator
-	var tree = this.parser.parseInlineRun(reEnd,{eatTerminator: true});
-	// Return the classed span
-	return [{
-		type: "element",
-		tag: "span",
-		attributes: {
-			"class": {type: "string", value: classString}
-		},
-		children: tree
-	}];
-};
-
-})();

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

@@ -0,0 +1,73 @@
+/*\
+title: $:/core/modules/parsers/wikiparser/rules/styleblock.js
+type: application/javascript
+module-type: wikirule
+
+Wiki text block rule for assigning styles and classes to paragraphs and other blocks. For example:
+
+```
+@@.myClass
+@@background-color:red;
+This paragraph will have the CSS class `myClass`.
+
+* The `<ul>` around this list will also have the class `myClass`
+* List item 2
+
+@@
+```
+
+Note that classes and styles can be mixed subject to the rule that styles must precede classes. For example
+
+```
+@@.myFirstClass.mySecondClass
+@@width:100px;.myThirdClass
+This is a paragraph
+@@
+```
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.name = "styleblock";
+exports.types = {block: true};
+
+exports.init = function(parser) {
+	this.parser = parser;
+	// Regexp to match
+	this.matchRegExp = /@@((?:[^\.\r\n\s:]+:[^\r\n;]+;)+)?(\.(?:[^\r\n\s]+))?\r?\n/mg;
+};
+
+exports.parse = function() {
+	var reEndString = "@@$(?:\\r?\\n)?";
+	var classes = [], styles = [];
+	do {
+		// Get the class and style
+		if(this.match[1]) {
+			styles.push(this.match[1]);
+		}
+		if(this.match[2]) {
+			classes.push(this.match[2]);
+		}
+		// Move past the match
+		this.parser.pos = this.matchRegExp.lastIndex;
+		// Look for another line of classes and styles
+		this.match = this.matchRegExp.exec(this.parser.source);
+	} while(this.match && this.match.index === this.parse.pos);
+	// Parse the body
+	var tree = this.parser.parseBlocks(reEndString);
+	for(var t=0; t<tree.length; t++) {
+		if(classes.length > 0) {
+			$tw.utils.addClassToParseTreeNode(tree[t],classes.join(" "));
+		}
+		if(styles.length > 0) {
+			$tw.utils.addAttributeToParseTreeNode(tree[t],"style",styles.join(""));
+		}
+	}
+	return tree;
+};
+
+})();

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

@@ -0,0 +1,55 @@
+/*\
+title: $:/core/modules/parsers/wikiparser/rules/styleinline.js
+type: application/javascript
+module-type: wikirule
+
+Wiki text inline rule for assigning styles and classes to inline runs. For example:
+
+```
+@@.myClass This is some text with a class@@
+@@background-color:red;This is some text with a background colour@@
+@@width:100px;.myClass This is some text with a class and a width@@
+```
+
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.name = "styleinline";
+exports.types = {inline: true};
+
+exports.init = function(parser) {
+	this.parser = parser;
+	// Regexp to match
+	this.matchRegExp = /@@((?:[^\.\r\n\s:]+:[^\r\n;]+;)+)?(\.(?:[^\r\n\s]+)\s+)?/mg;
+};
+
+exports.parse = function() {
+	var reEnd = /@@/g;
+	// Get the styles and class
+	var stylesString = this.match[1],
+		classString = this.match[2] ? this.match[2].split(".").join(" ") : undefined;
+	// Move past the match
+	this.parser.pos = this.matchRegExp.lastIndex;
+	// Parse the run up to the terminator
+	var tree = this.parser.parseInlineRun(reEnd,{eatTerminator: true});
+	// Return the classed span
+	var node = {
+		type: "element",
+		tag: "span",
+		children: tree
+	};
+	if(classString) {
+		$tw.utils.addClassToParseTreeNode(node,classString);
+	}
+	if(stylesString) {
+		$tw.utils.addAttributeToParseTreeNode(node,"style",stylesString);
+	}
+	return [node];
+};
+
+})();

core/templates/NewPageTemplate.tid

@@ -8,7 +8,8 @@ New paragraph
 \end
 \define another(first:default second third:default3) that is
 
-{{something{
+@@.something
+@@background-color:green;
 * This
 *.disabled Is a 
 * List!!
@@ -28,17 +29,17 @@ And this is an inline transclusion {{Acknowledgements}width:40;height:50;}.one
 
 ---
 
-{{{
+```
 Some monospaced
-}}}
+```
 
-This is a {{myClass{normal}}} para and one `with` so<!--and a comment-->me {{{code}}} blocks -- and both kinds of dashes --- just for the fun of it. And ''some bold'' text and //italics//, ^^superscript^^ and ,,subscript,, and even some __underlined text__. Oh a ~~strikethrough~~.
+This is a @@.myClass normal@@ para and @@background-color:red; one@@ `with` so<!--and a comment-->me `code` blocks -- and both kinds of dashes --- just for the fun of it. And ''some bold'' text and //italics//, ^^superscript^^ and ,,subscript,, and even some __underlined text__. Oh a ~~strikethrough~~.
 
 
 some text ~~strike start -- ndash --- mdash strike end~~  -> nok
 
 
-}}}
+@@
 
 <!--This is another comment-->