Discussion on: Designing the ultimate (INCLUSIVE) writing tool. [Part 1 - a WYSIWYG in 745 *Bytes*! 😱]

[GrahamTheDev]

I always enjoy seeing people "Golf" things.

I used a great version of pong in an article on steganography that was something like 460 bytes fully functional with scoring etc. as the thing I was hiding in the image. Blew my mind!

Love your solution.

"The RegEx"...singular? You mean the 10 I have so far 😋🤣

[Siddharth]

window.j=(f,a)=>{var l=[{h:/'(.*?)'/g,r:"<span class='string'>'$1'</span>"},{h:/(\d+\.?\d+?)/g,r:'<span class="number">$1</span>'},{h:/(\/\/.*)/g,r:'<span class="comment">$1</span>'},{h:/\b(var|let|const|function|this|do|super|as|constructor|instanceof|default)\b/g,r:'<span class="js-keyword">$1</span>'},{h:/\b(typeof|try|catch|finally|delete|switch|case|in|of|if|else|import|from|as|export|extends|new|return|throw|for|while|break|continue|async|await)\b/g,r:'<span class="js-command">$1</span>'},
{h:/\b(true|false|null|undefined|NaN|Infinity|\$)(?=[^\w])/g,r:'<span class="js-literal">$1</span>'},{h:/([\b\s\[\{\(])([!=]=|[!=]==|\+\+?|--?|\*|\/|&&|\|\||!|<=?|>=?|>>|<<|\.\.\.)(?!span)([\b\s\w])/g,r:'<span class="js-operator">$1$2$3</span>'},{h:/\b(window|document|navigator|console|self|top|process|require|module|define|global|Promise|Array|Math|String|Number|Symbol|Function|Reflect|Proxy|Error)\b/g,r:'<span class="js-global">$1</span>'},{h:/(\w[A-Za-z0-9]*)(?=\()/g,r:'<span class="js-function">$1</span>'},
{h:/\b(getElementsBy(TagName|ClassName|Name)|getElementById|(get|set|remove)Attribute|querySelector(|All))(?=[^\w])/g,r:'<span class="js-dommethod">$1</span>'}];f=f.replace(/(&lt;!--(?:[^-]|-(?!-&gt;))*--&gt;)|(&lt;(?:(?!&gt;).)+&gt;)/g,function(h,k,m){if(null!=k)return'<span class="comment">'+k+"</span>";if(null!=m)return'<span class="tag">'+m.replace(/(\s[\w_-]+)+(?:(=)+("[a-z-\s]?")+)?/ig,"<i>$1</i>$2<u>$3</u>")+"</span>"});for(var c=f.split("\n"),d=0;d<c.length;d++){var g=c[d],b=document.createElement("div");
for(x=0;x<l.length;x++){var e=l[x];g=g.replace(e.h,e.r)}b.innerHTML=g;a.appendChild(b)}};
(function(f){function a(c,d){return document.execCommand(c,!1,d||null)}var l=[{icon:"Para",g:function(){return a("formatBlock","<p>")}},{icon:"<b>B</b>",state:"bold",g:function(){return a("bold")}},{icon:"<i>I</i>",state:"italic",g:function(){return a("italic")}},{icon:"<u>U</u>",state:"underline",g:function(){return a("underline")}},{icon:"<strike>S</strike>",state:"strikeThrough",g:function(){return a("strikeThrough")}},{icon:"<b>H1</b>",g:function(){return a("formatBlock","<h1>")}},{icon:"<b>H2</b>",
g:function(){return a("formatBlock","<h2>")}},{icon:"<b>H3</b>",g:function(){return a("formatBlock","<h3>")}},{icon:"&#8220; &#8221;",g:function(){return a("formatBlock","<blockquote>")}},{icon:"&#35;",g:function(){return a("insertOrderedList")}},{icon:"&#8226;",g:function(){return a("insertUnorderedList")}},{icon:"&lt;/&gt;",g:function(){return a("formatBlock","<pre>")}},{icon:"&#8213;",g:function(){return a("insertHorizontalRule")}},{icon:"&#128279;",g:function(){var c=f.prompt("Enter the link URL");
c&&a("createLink",c)}},{icon:"img",g:function(){var c=prompt("Enter the image URL");c&&a("insertImage",c)}}];return{i:function(c){var d=document.querySelector(".highlight");console.log(l);var g=document.createElement("div");g.className="bar";c.appendChild(g);var b=document.createElement("div");b.contentEditable=!0;b.className="content";b.innerHTML="<p>&nbsp;</p>";b.oninput=function(){console.log(b.innerHTML);var e=b.innerHTML;d.innerHTML="";f.j(e,d);d.height=b.height};c.appendChild(b);l.forEach(function(e){var h=
document.createElement("button");h.innerHTML=e.icon;h.onclick=function(){return e.g()&&b.focus()};if(e.state){var k=function(){var m=document.queryCommandState(e.state);return h.classList[m?"add":"remove"]("active")};b.addEventListener("keyup",k);b.addEventListener("mouseup",k);h.addEventListener("click",k)}g.appendChild(h)});a("defaultParagraphSeparator","p")}}})(window).i(document.querySelector(".editor"));

Your code, cut in half.

I can definitely decrease it more. But that's enough for a WYSIWYG.

[GrahamTheDev]

And once you run mine through a compiler / minifier and gzip them both up you saved...39 bytes! (1569 bytes vs 1530 bytes).

Those were the numbers I was talking about anyway, I don't work in Raw bytes as they are meaningless, gzipped and minified are the numbers that matter for network performance and sometimes more raw bytes means lower gzipped bytes!

I am not going to share minified code with people if I expect them to be able to dig around in it.

To really golf this you would have to completely rewrite most of it as the regexes are about 70% of the weight. Combining them into one gigantic RegEx would be one way and using capture groups.

Have a look at the page Alex linked the engine he used for his syntax highlighter was 140 bytes!

function(c,r){return c.replace(r,function(f,i){for(i=7;~i*!arguments[i--];);return i?'<t class=f'+i+'>'+f.replace('<','&lt;')+'</t>':''})}

But yet again, once you add the RegExs back in...

var re = /(?![\d\w]\s*)(\/[^\/\*][^\n\/]*\/[gi])|(".*?"|'.*?')|(\/\/.*?\n|\/\*[\x00-\xff\u00\uffff]*?\*\/)|(?:\b)(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|var|void|volatile|while|with)(?:\b)|(?:\b)(Array|Boolean|Date|Function|Math|Number|Object|RegExp|String|document|window|arguments)(?:\b)|(\d[\d\.eE]*)|([\x28-\x2b\x2d\x3a-\x3f\x5b\x5d\x5e\x7b-\x7e]+|\x2f|(?=\D)\.(?=\D))/g;

It quadruples the size! (The total is 562 bytes gzipped, damned impressive!)

Not sure if he fixed the problem in the comments where function(a,b){b/=2;return (a+b)/b;} is highlighted as a RegEx but mine can deal with that at least.

And above all....why are you golfing this silly monstrosity! I have no intention of making a WYSIWYG code editor combination in real life as I said 🤣 it lets you do things that are so so wrong like having a <h1>function(){</h1> - it hurts, it hurts so much! 😋

Hopefully both of those will give you some ideas on how to really "golf" them, but you would almost certainly be starting from scratch to get any meaningful gains over my code.

[Alex Lohr]

No, the one that is used for my version:

var re = /(\B\/(?:\\.|[^\n/*])(?:\\.|[^\n/])*\/[gim]*)|("(?:\\.|\\\r*\n|[^\n"])*"|'(?:\\.|\\\r*\n|[^\n'])*')|(\/\/[^\n]*\n|\/\*[\x00-\xff\u00\uffff]*?\*\/)|\b(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|var|void|volatile|while|with)\b|\b(Array|Boolean|Date|Function|Math|Number|Object|RegExp|String|document|window|arguments)\b|(\d[\d\.eE]*)|([\x28-\x2b\x2d\x3a-\x3f\x5b\x5d\x5e\x7b-\x7e]+|\x2f|\.(?=\D))/g;

Yours is an example of readability by comparison. 😁

[GrahamTheDev]

Yeah but I couldn’t work out how to also do different colours, unless I used match groups I suppose and increment the group in the loop...

Probably could be done but obviously the idea is this is a base for something useful so I don’t think I will even try it! 😜🤣

[Alex Lohr]

That's exactly what I did.

[GrahamTheDev]

Ah yes, I see it now, being a non code golfer I didn't get that was a counter you had implemented!