Merge pull request #12 from miscoined/cssclass

Add an option to set a CSS class to be applied for each link type

README.md

@@ -38,6 +38,9 @@ For example, if the regular expression is `@(\w+)` and the link pattern is `http
 
 You can have multiple regex-link entries. Each one is applied independently.
 
+### Custom Styling For a Link Pattern
+By default, links will have the `linkified` CSS class applied to them. You can add additional classes based on the pattern by adding them to the "CSS Class" field.
+
 ### Delete a Link Pattern
 You can delete an entry by clicking on the trash can icon to the right of the entry.
 

main.ts

@@ -5,6 +5,7 @@ import { RangeSet } from "@codemirror/rangeset";
 interface LinkifyRule {
 	regexp: string,
 	link: string,
+	cssclass: string,
 }
 
 interface LinkifySettings {
@@ -21,14 +22,17 @@ const DEFAULT_SETTINGS: LinkifySettings = {
 		{
 			regexp: "g:([a-zA-Z0-9.-]*)",
 			link: "http://google.com/search?q=$1",
+			cssclass: ""
 		},
 		{
 			regexp: "gh:([a-zA-Z0-9./-]*)",
 			link: "http://github.com/$1",
+			cssclass: "",
 		},
 		{
 			regexp: "@([a-zA-Z0-9]*)",
 			link: "http://twitter.com/$1",
+			cssclass: "",
 		},
 	]
 }
@@ -42,7 +46,7 @@ const DEFAULT_NEW_RULE = {
 function createViewPlugin(rule: LinkifyRule): LinkifyViewPlugin {
 	let decorator = new MatchDecorator({
 		regexp: new RegExp(rule.regexp, "g"),
-		decoration: Decoration.mark({ class: "cm-link linkified" }),
+		decoration: Decoration.mark({ class: `cm-link linkified ${rule.cssclass}` }),
 	});
 	return ViewPlugin.define(view => ({
 		decorations: decorator.createDeco(view),
@@ -94,7 +98,7 @@ export default class Linkify extends Plugin {
 	// Opens linkified text as a link.
 	openLink(evt: MouseEvent) {
 		if (evt.target instanceof HTMLSpanElement &&
-			evt.target.className === "cm-link linkified") {
+			evt.target.className.includes("cm-link linkified")) {
 			let m = this.matchRule(evt.target.innerText);
 			if (m != null) {
 				window.open(m.link);
@@ -103,14 +107,15 @@ export default class Linkify extends Plugin {
 	}
 
 	// Returns the RegExp match and link for the given text.
-	matchRule(text: string): { match: RegExpMatchArray, link: string } | null {
+	matchRule(text: string): { match: RegExpMatchArray, link: string, cssclass: string } | null {
 		for (let rule of this.settings.rules) {
 			let regexp = new RegExp(rule.regexp);
 			let m = text.match(regexp);
 			if (m != null) {
 				return {
 					match: m,
 					link: m[0].replace(regexp, rule.link),
+					cssclass: rule.cssclass,
 				}
 			}
 		}
@@ -132,6 +137,7 @@ export default class Linkify extends Plugin {
 		let anchor = document.createElement("a");
 		anchor.textContent = matchedText;
 		anchor.href = m.link;
+		anchor.className = `linkified ${m.cssclass}`;
 		let nodes: (string | Node)[] = [];
 		nodes.push(before);
 		nodes.push(anchor);
@@ -190,6 +196,14 @@ class LinkifySettingTab extends PluginSettingTab {
 						await this.plugin.saveSettings();
 					};
 				})
+				.addText(text => {
+					text.setValue(rule.cssclass);
+					text.setPlaceholder("CSS Class")
+					text.inputEl.onblur = async () => {
+						rule.cssclass = text.getValue();
+						await this.plugin.saveSettings();
+					};
+				})
 				.addButton(button => {
 					return button
 						.setIcon("trash")