Adding a class via Vanilla JavaScript

#1

So, I’ve been using a custom wikitext tiddler for a bit now, and have run into a bit of a problem.

I copy/pasted the tiddler “$:/core/modules/parsers/wikiparser/rules/emphasis/bold.js” as a template, and modified to so when I type ==Hello== it creates <muted>Hello</muted> (snippet below)

	// Return the classed span
	return [{
		type: "element",
		tag: "muted",
		children: tree
	}];
};

However! these muted elements aren’t exactly ideal for me. I tried to change it so it was created a span with the class of tc-muted, but failed miserably.

Here is specifically what I tried. (I do Not advice trying this, it broke my password prompt and I had to fall back on my previous backup, something I recommend everyone to have.)

	// Return the classed span
	return [{
		type: "element",
		tag: "span",
		class:"tc-muted",
		children: tree
	}];
};

and then I also tried,

	// Return the classed span
	return [{
		type: "element",
		tag: "span",
		[{
			class:"tc-muted"
		}],
		children: tree
	}];
};

Needless to say, I’m still learning when it comes to VanillaJS; Is there a proper way to adding a class to the span element, or am I better off just using <muted> ?

#2

Hi @Justin_H the easiest way to understand these parse trees is to use the “Internals” plugin which provides a preview type that displays the parse tree corresponding to the text of a tiddler.

image
image2593×1941 129 KB

The “start”, “end”, and “orderedAttributes” can be omitted, leaving:

return [{
	type: "element",
	tag: "span",
	attributes: {
		class: {
			name: "class",
			type: "string",
			value: "tc-muted"
		}
	},
	children: tree
}];
#3

I’ll need to take a look at that plugin, that looks incredibly useful, thank you very much :grin: