Skip to content
This repository was archived by the owner on Oct 28, 2022. It is now read-only.

Commit 141921c

Browse files
petabytpetabyt
committed
Initial program
0 parents  commit 141921c

File tree

5 files changed

+242
-0
lines changed

5 files changed

+242
-0
lines changed

‎javascript.js‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
// Create the initial formatter element
2+
var formatter;
3+
4+
// Everything is customizable here.
5+
// (local images don't work yet, but who cares.
6+
// this is the internet.)
7+
var tags = [
8+
{
9+
"name": "bold",
10+
"tag": "b",
11+
"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/bold.svg",
12+
"fillers": ["[b]", "[/b]"],
13+
"formatter": function(part1, part2) {
14+
return "<b>" + part2 + "</b>";
15+
}
16+
},
17+
{
18+
"name": "italics",
19+
"tag": "i",
20+
"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/italic.svg",
21+
"fillers": ["[i]", "[/i]"],
22+
"formatter": function(part1, part2) {
23+
return "<i>" + part2 + "</i>";
24+
}
25+
},
26+
{
27+
"name": "underline",
28+
"tag": "u",
29+
"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/underline.svg",
30+
"fillers": ["[u]", "[/u]"],
31+
"formatter": function(part1, part2) {
32+
return "<u>" + part2 + "</u>";
33+
}
34+
},
35+
{
36+
"name": "color",
37+
"tag": "color",
38+
"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/font-color.svg",
39+
"fillers": ["[color=red]", "[/color]"],
40+
"formatter": function(part1, part2) {
41+
return "<span style='color:" + part1 + "'>" + part2 + "</span>";
42+
}
43+
},
44+
{
45+
"name": "link",
46+
"tag": "link",
47+
"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/link.svg",
48+
"fillers": ["[link=", "]Link[/link]"],
49+
"formatter": function(part1, part2) {
50+
return "<a href='" + part1 + "' target='_newtab'>" + part2 + "</a>";
51+
}
52+
},
53+
{
54+
"name": "easteregg",
55+
"tag": "easteregg",
56+
"dontshow": true,
57+
"fillers": ["[easteregg]"],
58+
"formatter": function(part1, part2) {
59+
return "<i>Yes? No. Or is it?</i>";
60+
}
61+
}
62+
]
63+
64+
// Firstly, initialize the formatter, and its icons
65+
window.onload = function() {
66+
document.getElementsByName("content")[0].placeholder = "Click here to activate ScratchFormat";
67+
68+
formatter = document.createElement("div");
69+
formatter.id = "formatter";
70+
for (var t = 0; t < tags.length; t++) {
71+
if (tags[t].dontshow) {
72+
continue;
73+
}
74+
75+
var icon = document.createElement("img");
76+
icon.src = tags[t].src;
77+
icon.fillers = tags[t].fillers;
78+
79+
// This may look janky, but with Chrome extensions,
80+
// Everything is jank. Basically I have to set custom
81+
// properties to the element in order to get data without
82+
// having functions, which would require some "injection"
83+
// garbage.
84+
icon.onclick = function(event) {
85+
var textarea = event.target.parentElement.parentElement.children[1];
86+
var fillers = event.target.fillers;
87+
88+
// Grab the selected text
89+
var selection = textarea.value.substring(
90+
textarea.selectionStart,
91+
textarea.selectionEnd
92+
);
93+
94+
// Generate new text, if just 1 filler, ex [br], don't attempt
95+
// to use second part.
96+
var newText = textarea.value.substring(0, textarea.selectionStart)
97+
if (fillers.length > 1) {
98+
newText += fillers[0] + selection + fillers[1];
99+
} else {
100+
newText += fillers[0];
101+
}
102+
103+
newText += textarea.value.substring(textarea.selectionEnd);
104+
105+
textarea.value = newText;
106+
textarea.focus();
107+
}
108+
109+
formatter.appendChild(icon);
110+
}
111+
112+
// Move formatter if user clicks on textarea.
113+
document.body.onclick = function(event) {
114+
if (event.target.name == "content") {
115+
event.target.parentElement.prepend(formatter);
116+
}
117+
}
118+
119+
// Initial background formatting loop.
120+
setInterval(function() {
121+
format();
122+
}, 300);
123+
}
124+
125+
var oldComments = 0;
126+
function format() {
127+
// Quit if we already formatted those comments.
128+
// Checks for last vs new length.
129+
var comments = document.getElementsByClassName("content");
130+
if (oldComments == comments.length) {
131+
return;
132+
}
133+
134+
oldComments = comments.length
135+
136+
for (var c = 0; c < comments.length; c++) {
137+
comments[c].style.whiteSpace = "pre";
138+
comments[c].innerHTML = parse(comments[c].innerHTML);
139+
}
140+
}
141+
142+
// Custom regex parser. Easy to maintain.
143+
function parse(text) {
144+
var startBracket = "[\\(|\\[]";
145+
var endBracket = "[\\)|\\]]";
146+
147+
for (var t = 0; t < tags.length; t++) {
148+
149+
// First part of tag
150+
var regex = "";
151+
regex += startBracket;
152+
regex += tags[t].tag;
153+
regex += "(=(.*))*";
154+
regex += endBracket;
155+
156+
// If just 1 tag (Ex [br])
157+
if (tags[t].fillers.length > 1) {
158+
regex += "(.*)";
159+
160+
// Second part of tag
161+
regex += startBracket;
162+
regex += "\/";
163+
regex += tags[t].tag;
164+
regex += endBracket;
165+
}
166+
167+
regex = new RegExp(regex, "gm");
168+
text = text.replace(regex, tags[t].formatter("$2", "$3"));
169+
}
170+
171+
text = text.replace(/^(\n| )+/gm, "");
172+
173+
return text;
174+
}

‎logo.png‎

13.2 KB
Loading

‎manifest.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "ScratchFormat",
3+
"description": "Rich text editing in Scratch.",
4+
"version": "1.0",
5+
"permissions": [
6+
"activeTab",
7+
"tabs"
8+
],
9+
"content_scripts": [
10+
{
11+
"matches": ["https://scratch.mit.edu/users*","https://scratch.mit.edu/studios*", "https://scratch.mit.edu/projects*"],
12+
"js": ["javascript.js"],
13+
"css": ["style.css"]
14+
}
15+
],
16+
"browser_action": {
17+
"default_title": "ScratchFormat",
18+
"default_icon": "logo.png",
19+
"default_popup": "popup.html"
20+
21+
},
22+
"manifest_version": 2,
23+
"short_name": "SF"
24+
}

‎popup.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<head>
2+
</head>
3+
<body>
4+
<center>
5+
<h2>ScratchFormat 2.0</h2>
6+
Thank you for using ScratchFormat. To use it, go <br>
7+
on a scratch comment editor and click on it. The formatter<br>
8+
will automatically show up, and move to different comment boxes<br>
9+
when you click on them.
10+
11+
<br>
12+
<p>
13+
Made by <a href="https://scratch.mit.edu/users/pufflegamerz" target="_newtab">@pufflegamerz</a>.
14+
<br>
15+
This is open-source. See <a href="https://github.com/ScratchFormat/" target="_newtab">Our Github</a>.
16+
</p>
17+
</center>
18+
</body>
19+
<style>
20+
body {
21+
width: 500px;
22+
height: 200px;
23+
background-color: lightblue;
24+
}
25+
</style>

‎style.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* Code from Scratch 2.0 style interface */
2+
#formatter {
3+
border: 1px solid rgb(169, 169, 169);
4+
box-shadow: inset 0 1px 1px #ccc;
5+
border-radius: 3px;
6+
margin-bottom: 10px;
7+
width: 500px;
8+
9+
/* Size of icon */
10+
height: 24px;
11+
}
12+
13+
/* Formatter icons */
14+
#formatter img {
15+
height: 24px;
16+
}
17+
#formatter img:hover {
18+
background: #e6e6e6;
19+
}

0 commit comments

Comments
 (0)