A contentEditable, pasted garbage and caret placement walk into a pub
bien.ee
bien.ee
All problems start with caret placing and multi browser support and ends with undo or collaborative editing (when you go deep into the rabbit whole).
When I think about it: Never develop an editor on your own ;)
It's a perfectly reasonable mistake, but damn are the implications of that phrasing unpleasant to think about...
It's "rabbit hole", btw, in case this was an /r/boneappletea moment :)
Undo/redo logic was another nightmare. And copy paste required a ton of clean up before.
Next issue I faced was that if the container element had certain css formatting applied (can't remember which one) then if I hit enter, then backspace won't work. If I remember right, this had something to do with a well reported bug related to pre-wrap, white-space, break-line etc. This was also when I discovered that the content editable would work differently across browsers. This was basically when I dumped content editable and went with a simple textarea and a "fake dummy" hidden textarea used for calculating the size, formatting etc.
could you expand on this? what's the high level
If you are planning to write a custom editor Tiptap is a good starting point, but it's weirdly over-complicated in places.
There are still nights I wake up screaming, remembering the time I tried to build an editor with contentEditable. Is there a special place in hell for those who forced this spawn of Cthulhu upon us? Or should we pity these souls, who were the first to lay eyes on these unimaginable horrors?
If you ever meet someone who thinks that the lovecraftian amalgamation of HTML/JS/CSS is a sane platform for developing applications, just tell them to build an editor using only contentEditable and the standard browser APIs. Then wait a few days. They will hate you, but at least they'll be forever cured of their delusion.
Yes, it's that bad. No matter how long you have been programming, no matter what you have built before, contentEditable will defeat you. Decades of experience, written your own programming language, database, editor? Oh you poor soul, contentEditable will laugh in your face, because there is no logic to it. It is the very embodiment of edge cases built upon edge cases, with a smidge of browser incompatibilities sprinkled on top, then all dumped onto the garbage dump that is caret handling.
I'm a contentEditable survivor. The dark episode is now behind me, yet no matter how much time passes, I will forever be scarred by the experience.
To this extent, I've written a hook for React/Preact that attempts to be a decent code editor basis on contentEditables: https://github.com/kitten/use-editable
Funnily enough, if you just search the code for "// Quirk" it's easy to see that this experience wasn't pleasant in the slightest. But it did allow me to write a code editor in just about a day which can be found here: https://trygql.formidable.dev/
I'd say, there's plenty of edge cases to take care of. But on the other hand, things like composition, selection behaviour, and other niceties are things that you just have to take care of much less
The biggest problem I have with it is that layering on collaborative editing is nontrivial.
I think that's probably the most interesting part here. What happens for images? Do they get converted into an <img src="data:base-64;..." type thing?
So when you copy an image from Finder in MacOS, if you paste it into a terminal you get the file path and if you paste it into a comment on github you get the contents of the file as a binary blob.
When pasting, an application is essentially querying the clipboard for a representation of the data it can use, and if there is none, it either defaults to something or fails.
In a well designed program, all of the translating and parsing is done before sending to the clipboard. If you copy text from MS Word and paste it into a content editable field in a website, you might expect some consistency.
> In a well designed program, all of the translating and parsing is done before sending to the clipboard.
To avoid unnecessary work a program can opt to delay rendering until it's pasted or the program is closed. This is why excel will sometimes ask you if you want to keep your clipboard on save.
Hard-fought consistency... https://github.com/ProseMirror/prosemirror-schema-basic/blob...
Most modern apps will also copy an html fragment to the clipboard so the browser could use that directly.
According to stackoverflow, when you read from the clipboard in javascript the browser gives you access to its synthesised html version of the rtf content via ClipboardItem.getType. That's what you would expect, but I haven't tried it.
So, all-in-all, the clipboard contains still everything, the sanitize-html library would strip things from it that you wouldn't want, so that you're left with only the formatting you do want. As for images, since I'm stripping them out as well, there will not be any images. By default I'm not sure if they end up as base-64 (I'm leaning to believe that rather they would get local URL's like file://...).
+ not only there but also in Québec, Switzerland, Belgium, a lot of African countries. Millions of people understand French as a first or second language. Moreover there is a lot of scientific literature in French, in particular in linguistics (the field was created in French, actually). I find your statement rather insensitive.
The clojurescript makes this an absolute slog to read.
That said, a number of those languages are interesting and great even of they aren't as simple as the tutorials make them look.
I just dont understand.
I ended up switching everything to use regex with rigorous testing as there were far too many edge cases, particularly between the different browsers.
I agree contenteditable leaves a lot to be desired, and indeed I had to file a few bug reports to the vendors while working on it (e.g. in firefox hitting backspace against a <contenteditable=false> within a <contenteditable=true> wouldn't work)
Have you run into some of these cross-browser issues? How have you approached it?
off-topic: what do you like about closurescript?
yep, ran into the same bug few months ago myself.
As for ClojureScript, well, I just find it a lot more concise and easier to read than a non-lisp. I realise this is not the case for someone who has never seen Lisp before, but from my experience, people who do learn how to read a Lisp tend to also see that point of view of it being highly effective at conveying meaning. I just feel like there's less cognitive overload with it.
I still make money writing plain old JavaScript, Java, PHP and other C-derivatives, but for personal use Clojure is my go-to.
The author mentions to build their own sanitizer, which I would recommend against. Maybe for this use case (extracting a few b tags), it’d be fine, but as soon as links are involved: please stand on the shoulder of giants in order to prevent XSS.
If you care about semantics at all, or even want your code readable by someone who is in their early days of trying to understand and learn code - it's just ugly and hard to read.
I've been coding since I was 14, and I don't feel bad in saying that I can't tell you what this line does without looking it up. (reset! caret-location nil)))) I can't imagine how you could argue this is good and adheres to any philosophy of openness or readability.
(-> ((have you written) lisp before) ?)
ClojureScript is a Lisp language. If you’ve never learned one, I highly recommend it. It will make you think about programming differently.
As esr puts it in his (in)famous “How To Become A Hacker”:
“LISP is worth learning for a different reason — the profound enlightenment experience you will have when you finally get it. That experience will make you a better programmer for the rest of your days, even if you never actually use LISP itself a lot.”
http://www.catb.org/~esr/faqs/hacker-howto.html#skills1
For myself, I learned Scheme (another Lisp-like language) in graduate school through the How to Design Programs curriculum (http://htdp.org/), which despite already being a professional programmer, I found enlightening. And then again in the online programming languages course from Brown: https://cs.brown.edu/courses/cs173/.
You have to choose 1, it’s either easy to parse for machines or for humans, not both. Any kind of lisp is harder to parse for humans.
Take any Javascript or C program, and remove the line breaks so that it's just a linear string of tokens. It's no harder for the parse for the machine. Much harder for you.
Humans parse non-trivial examples of Lisp using indentation clues that the machine ignores, just like in the case of a large number of language families.
Not all structure in programs is indicated with indentation; sufficiently small chunks of programs are written on one line. The structure of those chunks is easy for humans to understand accurately if they are written in Lisp because there is no ambiguity.
Lisp syntax also has a way to break any expression, no matter how small, into multiple lines with indentation. Any two Lisp programmers will do it the same way:
(+ (* x
x)
(/ y
z))
If you can't understand some one-line chunk of code, you can get it into a canonical indented form, and this can be automated.
As for why it's not used more widely, same reasons Lisp like languages aren't used more often in industry: inertia, fear, worse-is-better syndrome.
Make more sense to you?
Maybe you would like OO style?
(-> caret-location (reset! nil))
This is something that you could learn in a single minute.
It's faster to learn than all the languages you know.
> (reset! caret-location nil))))
The C version is reset(caret_location, nil)
Or to be more precise, reset(caret_location, nil))))
Maybe null or NIL instead of nil, maybe not.
It's barely different. And the exclamation point is just part of the function's name. I'm not sure what's so confusing.
(Apparently it's a ClojureScript convention to put an exclamation point on impure functions.)
Swift allows unicode in symbols, so you can name functions with emoji. Thankfully that hasn’t caught on.
J has a similar idea–built into the language syntax vs using characters in function names–where a period can be used to inflect a primitive.
It's a Lisp. Takes 5 minutes to learn the syntax - but only if you have an open mind.
(My daily work is in a C-derived language, but I have zero problems parsing Python, Lisp, or even APL if I need to. )
If you don't have any interest in perspectives outside of your own then I can't imagine learning anything can be easy at all.
Since I come from a school where scheme was taught as a first language, I find clojurescript a hell of a lot easier to read than javascript. Half the time I feel like javascript just does things out in the aether with side-effects and I find the code really hard to follow when it does. Clojurescript has a much easier to follow flow for me.
That doesn't mean javascript is ugly and hard to read for someone else.
If a friend recommends you try a beer, and you can't read the label, I guess that makes the beer more attractive? okay.
Zero people dropped out in HS. In college I'm pretty sure you're going to have people dropping out of the intro course for programming no matter what language you choose when it's taught in 60-100 student lectures with professors and TAs that have been steeped in CS so long they no longer remember what being a beginner is like.
Beauty is in the eye of the beholder, as they say. But, like I mentioned in another comment here, it seems odd to me to criticise on the merit of choice of language on a programmers forum.
I also do not write my blog for children to read. In fact, I don't even have a target audience - it's all "I had a problem and this is how I solved it", and perhap some Clojurian finds my posts on Google and finds it interesting. I certainly know there are Lisp-likers here on HN, as well.
What does "nice to read" mean? It means that I don't spend another 2 hours falling over myself trying to convince 7 year olds why being decisively pedantic is better than more expressive, semantic code.
You're still caught up in the idea that coding and programming is for an elite group of people, and that perspective is boring and old.
You can label me elitist, you can label me however you like, but as a teacher you have a funny way to suppress people's ability to share knowledge on the basis that you or your children don't understand it. Shouldn't you as a teacher be happy that people are sharing knowledge on a wide variety of things? And yet you choose to call languages ugly, hard to read, and shame people for sharing knowledge because it isn't in your beloved programming language. And you call me elitist?
It's funny you brought up math - because children learn math at very early ages, and they progressively grow to understand more complicated math as they are able. The entire time the child is learning math, though. Math is the most basic instruction set that is used to count sides of a shape - all the way up to complicated thought experiments involving quantum mechanics. It is a semantic language that not only doesn't require a manual, it doesn't even require a theological conversation to apprehend it. So much so that when we attempt to communicate with life outside of our solar system, we use math to communicate with them. Why do scientists chose math over latin, or Russian? Because chosing a nationalist language would be dumb. Why would I chose to teach a language that obfuscates readability? Seems dumb.
I'm not sure why you hate lisp-like languages so much and can't accept that it's actually more comfortable for some people. I'm sorry if you were hit with one too many "lisp is for a more civilized age" people.
Coding is for everyone, no?