Fixed regex parameter matching

Load ScratchFormat onto the page instead of
in the extension

bugs

Author: petabyt

javascript.js

@@ -50,7 +50,7 @@ var tags = [
 		"name": "link",
 		"tag": "link",
 		"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/link.svg",
-		"fillers": ["[link=", "]Link[/link]"],
+		"fillers": ["[link=https://example.com", "]Link[/link]"],
 		"formatter": function(part1, part2) {
 			return "<a href='" + part1 + "'  target='_newtab'>" + part2 + "</a>";
 		}
@@ -78,15 +78,20 @@ var tags = [
 setTimeout(function() {
 	var textareaFinder = "[name=compose-comment],[name=content]";
 
+	// Helpful first textarea message
 	var findFirst = document.querySelectorAll(textareaFinder);
 	if (findFirst.length > 0) {
 		findFirst[0].placeholder = "Click here to activate ScratchFormat";
+	} else {
+		// Kill all if there are no textareas
+		return;
 	}
 
 	formatter = document.createElement("div");
 	formatter.id = "formatter";
 	for (var t = 0; t < tags.length; t++) {
 		if (tags[t].dontshow) {
+			// Basically, skip to next part
 			continue;
 		}
 
@@ -97,9 +102,10 @@ setTimeout(function() {
 		if (tags[t].help) {
 			icon.style.float = "right";
 			icon.onclick = function() {
+				// Popup message HTML got a bit out of hand here
 				smod.dialogText("ScratchFormat Help", `
-<a href="https://github.com/ScratchFormat/ScratchFormat2/issues" style="color: #12b1e4;">Report issues at our Github</a>
-If you do not own a Github account, simply comment on my profile <a href="https://scratch.mit.edu/users/pufflegamerz/" style="color: #12b1e4;">@pufflegamerz</a>
+					<a href="https://github.com/ScratchFormat/ScratchFormat2/issues" style="color: #12b1e4;">Report issues at our Github</a>
+					If you do not own a Github account, simply comment on my profile <a href="https://scratch.mit.edu/users/pufflegamerz/" style="color: #12b1e4;">@pufflegamerz</a>
 				`, version);
 			}
 
@@ -146,7 +152,7 @@ If you do not own a Github account, simply comment on my profile <a href="https:
 	document.body.onclick = function(event) {
 		if (event.target.name == "content" || event.target.name == "compose-comment") {
 			event.target.parentElement.prepend(formatter);
-			formatter.style.width = event.target.style.width;
+			formatter.style.width = event.target.offsetWidth + "px";
 		}
 	}
 
@@ -170,7 +176,7 @@ function format() {
 	for (var c = 0; c < comments.length; c++) {
 		comments[c].style.whiteSpace = "pre-line";
 		if (comments[c].className == "emoji-text") {
-			comments[c].style.marginLeft = "5px";
+			comments[c].style.marginLeft = "3px";
 		}
 
 		comments[c].innerHTML = parse(comments[c].innerText);
@@ -194,7 +200,7 @@ function parse(text) {
 		var regex = "";
 		regex += startBracket;
 		regex += tags[t].tag;
-		regex += "(=(.*))*";
+		regex += "[=]*([^\\]\\[\\)\\(]*)";
 		regex += endBracket;
 
 		// If just 1 tag (Ex [br])
@@ -207,9 +213,9 @@ function parse(text) {
 			regex += tags[t].tag;
 			regex += endBracket;
 		}
-
+		console.log(regex);
 		regex = new RegExp(regex, "gm");
-		text = text.replace(regex, tags[t].formatter("$2", "$3"));
+		text = text.replace(regex, tags[t].formatter("$1", "$2"));
 	}
 
 	// Format trailing breaklines and spaces

loader.js

@@ -1,3 +1,4 @@
+// Loads javascript onto page
 {var s = document.createElement('script');
 s.src = chrome.extension.getURL('smod.js');
 (document.head||document.documentElement).appendChild(s);}

smod.js

@@ -30,7 +30,7 @@ var smod = {
 	// This is bad, bad, bad. If anybody can find the native
 	// way to create popups in Scratch 3.0 React.js, let me know.
 	dialog3: function(title, text) {
-		var html = `"<div class="ReactModalPortal"><div class="modal-overlay modal-overlay"><div aria-label="Report Comment" class="modal-content mod-report modal-sizes modal-content mod-report" role="dialog" tabindex="-1"><div class="modal-content-close" onclick="this.parentElement.parentElement.style.display = 'none';"><img alt="close-icon" class="modal-content-close-img" draggable="true" src="/svgs/modal/close-x.svg"></div><div><div class="report-modal-header" style="background-color: #395c79; box-shadow: inset 0 -1px 0 0 #001fff;"><div class="report-content-label"><span>` + title + `</span></div></div><div class="report-modal-content" style="padding-bottom: 50px;"><div><div class="instructions"><span>` + text +`</span></div></div></div></div></div></div>"</div>`;
+		var html = `"<div class="ReactModalPortal"><div class="modal-overlay modal-overlay"><div aria-label="Report Comment" class="modal-content mod-report modal-sizes modal-content mod-report" role="dialog" tabindex="-1"><div class="modal-content-close" onclick="this.parentElement.parentElement.parentElement.outerHTML = null;"><img alt="close-icon" class="modal-content-close-img" draggable="true" src="/svgs/modal/close-x.svg"></div><div><div class="report-modal-header" style="background-color: #395c79; box-shadow: inset 0 -1px 0 0 #001fff;"><div class="report-content-label"><span>` + title + `</span></div></div><div class="report-modal-content" style="padding-bottom: 50px;"><div><div class="instructions"><span>` + text +`</span></div></div></div></div></div></div>"</div>`;
 		document.body.innerHTML += html;
 	},