DEV Community

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

GrahamTheDev on July 25, 2021

A WYSIWYG in just 745 bytes of JS (gzipped)? Check. A bonus JS syntax highlighter in 900 bytes of JS? Check. Combining the two? You bet! Things are...

Read full post

Alex Lohr • Jul 25 '21

I once wrote the engine for a small syntax highlighter in less than 140 bytes JavaScript for a code golfing competition: gist.github.com/atk/1084980 - it ran on the page that presented the code golfs.

The RegEx required for js is not for those faint of heart, though. 😉

GrahamTheDev • Jul 25 '21

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 😋🤣

Alex Lohr • Jul 25 '21

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 • Jul 25 '21

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 • Jul 25 '21

That's exactly what I did.

GrahamTheDev • Jul 25 '21

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

Siddharth • Jul 26 '21

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 • Jul 26 '21 • Edited

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.

Siddharth • Jul 26 '21

Nice... I would have built this document.execCommand was supported more, but it isn't.

GrahamTheDev • Jul 26 '21

Yeah that is a real issue, it isn't marked for removal in any browser yet so at least 2 years use of it.

But I agree, against good practices to use it in anything new!

I should perhaps making a point of that in the next article so people don't use it without knowing the risks, thanks for the great suggestion!

Siddharth • Jul 26 '21

But if you don't use it, you don't get undoing capabilities anymore

GrahamTheDev • Jul 26 '21

Undo is not too bad as we can just store the exact state each time there is an update.

Or better yet we can use doc diffing and just store the differences. I have to admit I have no idea which is better!

I think the answer I have at this point is to use it, but build it in a way I can swap it out easily. 🤷‍♂️

Siddharth • Jul 26 '21

Diffing is better if you care about space, which, to be honest, is not a big concern right now, unless you plan to persist them.

Mike Talbot ⭐ • Jul 25 '21

How about using pegjs to build a parser to do the syntax highlighting? Sure it's a bit more work, but I'm pretty sure there's a starter grammar out there that could help... like this one

GrahamTheDev • Jul 25 '21

Thanks for the suggestion, I will keep a bookmark on pegjs as if this evolves then it could be useful, but at the moment I want to understand every nut and bolt of what I am building.

I presume pegjs is purely a generator and I don't need it as a dependency once I have created a parser with it?

To be fair the point of the syntax highlighter was more to experiment with the headache that is live colouring on a WYSIWYG editor.

It is actually a really complex thing to deal with if you don't cheat as I did with the double stacked divs perfectly aligned and hiding the content in the contenteditable div that you actually write in.

I am experimenting as one idea for one part can then be applied to another part while I am still prototyping.

For example, one thing I didn't mention in the article is trying to guess if someone has added a "non English" phrase to a sentence like "c'est la vie" so that we can prompt them to add a <span lang="fr"> around the phrase so that screen readers can announce things properly.

The RegEx parsing method used in the syntax highlighter would work nicely on that scenario as I could just do a load of pipe separated words that are common in English and some basic occurrence counting to highlight potential other languages (or at least that is my first thought of how to do it...that could also change!).

Also just having an array of RegExs and corresponding <span> outputs seems like a really simple way to cover basic word lookup for swear words, racist language etc. that isn't sensitive to the context of the document.

One thing I learned in all this is apparently a prebuilt piped RegEx is really efficient using .match on a string when trying to match multiple needles to a haystack.

All very much a work in progress and suggestions like the above are always welcome!

Mike Talbot ⭐ • Jul 25 '21

I'm interested to see how you proceed with this for sure :) PegJS produces a parser that is a standalone JS file - the rules of Peg are very similar to regexes (though no backtracking etc) so that's what brought it to mind.

I'd wonder also about training a model to recognise sub sections of the document etc, though you are right, categorical searches for racist or swear words would also make sense.

GrahamTheDev • Jul 26 '21

Yeah the training a model bit is way beyond my current abilities (hence why I have shelved Grammar suggestions for now as trying to do that with simple algorithms seems very difficult!).

This project does provide some really interesting challenges and I don't think I can ever make a perfect solution. But who knows, maybe I can produce something useful enough that it can be turned into a paid service and I can pay someone smarter than me to handle the scary stuff! 😋🤣

Thanks once again for the suggestion, I will have a play with PegJS at some point in the future as it is interesting from a learning perspective, especially that parser example you linked to, still scratching my head on some of that!

GrahamTheDev • Jul 25 '21

Ironically this article rambles on a bit in places and isn't as well structured as I would like.

However, that is the whole point of this series, I will be using the tools I build to improve my own writing and take some of the thought process out of ensuring I use inclusive writing. I know my writing sucks sometimes! My apologies for that!

Over to you: if you have ever thought "I would like to see XXX" in a WYSIWYG to make your writing better or make it easier to create great content then let me know in the comments, all ideas are welcome (even slightly silly ones!).

Siddharth • Jul 26 '21

Protip: change the syntax highlighter to highlight markdown, because no one is going to write JS in a WYSIWYG anyways

GrahamTheDev • Jul 26 '21 • Edited

Nobody is going to write markdown in a WYSIWYG as the whole idea of a WYSIWYG is it looks like the end product and you don’t need to know Markdown, HTML etc 😜

Plus if you copy a code snippet in to a true WYSIWYG it is nice to see the syntax highlighting live!

I think I have made this all very confusing by combining the two for jokes! I think part two is going to need a lot of notes to cover this and the deprecation you mentioned in another comment!

However you have made a good point that Markdown import and export (that will be hard as some things aren’t possible in markdown that are in a HTML wysiwyg) needs adding to the spec list 👍

Eckehard • Feb 18 '23

About 2 years later we are still waiting on Part 2.... Hy GrahamTheDev, is there more on the project?

There are plenty "WYSIWIG" editors like TinyMCE, but having some free code as a basis could be really be helpful in some cases.