9 ms·

A contentEditable, pasted garbage and caret placement walk into a pub

82 points by askonomm 5y ago

akersten 5y ago
So when stuff is pasted in from Word or whatever other weird Rich Text Enterprise application - what's actually doing the heavy lifting of translating all that \\rtf\\section\\block\\blockend\\secondend garbage into HTML? Is it the `sanitize-html` library here? Is it the browser? My first intuition would be "pasting a bunch of formatted stuff from Wordpad into an HTML document surely doesn't result in anything reasonable, right?" But then seeing the direct jump from "alright, stuff was pasted in, now we only want to allow these HTML tags" makes me think somewhere in here some magic happened to convert it. 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?
- iudqnolq 5y ago
  When you copy to the clipboard (or sometimes lazily at time of paste) the content is represented in multiple forms. One of them is pseudo-html.
- ljm 5y ago
  A native app will copy a selection into the clipboard in several ways, basically accounting for a selection of common MIME-types. 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.
  - iudqnolq 5y ago
    I believe at least on windows this bit isn't always true > 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.
    - TazeTSchnitzel 5y ago
      Based on behaviour I've observed on Linux before, I think X11 might only use delayed rendering (at least for non-text stuff), and so pasting from a closed application just hangs the recipient.
  - dmitryminkovsky 5y ago
    > If you copy text from MS Word and paste it into a content editable field in a website, you might expect some consistency Hard-fought consistency... https://github.com/ProseMirror/prosemirror-schema-basic/blob/b5ae707ab1be98a1d8735dfdc7d1845bcd126f18/src/schema-basic.js#L135 https://github.com/ProseMirror/prosemirror-schema-basic/blob...
  - tW4r 5y ago
    Is there any way to force which gets chosen? I love being able to copy and image and just paste it to WhatsApp/Messenger/Whichever other client, but if I do copy an image from the internet it’s very hit or miss if it shows up as an image when I paste, or a link. If I download the image, and then copy the downloaded one, it always shows up as an image
    - TazeTSchnitzel 5y ago
      I ended up working around this by copying into GIMP and copying from there, but of course that's a suboptimal workaround. There's surely some small utility application for this.
      - reportgunner 5y ago
        The snipping tool.
- ectopod 5y ago
  Rich Text Format is the default representation for formatted text on the Windows clipboard. Any application that can paste rich text should accept it. When you paste directly into a content-editable the browser should convert the rtf into html. 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.
- askonomm 5y ago
  When pasting from Word, the contentEditable will gladly accept any formatting that came with the paste (e.g whatever strongs, bolds, italics, links, headings, tables, what-not you may have in your clipboard), and so the sanitize-html NPM library essentially strips out the elements I do not want for UX consistency. Since I'm building this contentEditable just for a singular paragraph as part of a larger block-based editor, I only want it to contain what a regular paragraph would (e.g bold, italic, link), but nothing else. 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://...).
shaneprrlt 5y ago
Totally off-topic, I don't know why, but I really like the design of your website!
- thomasfromcdnjs 5y ago
  I also love it.
holler 5y ago
Nice. I recently wrote a custom contenteditable component/parser used for chat and elsewhere in https://sqwok.im https://sqwok.im and ran into a bunch of the same issues. 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?
- busymom0 5y ago
  > <contenteditable=false> within a <contenteditable=true> wouldn't work yep, ran into the same bug few months ago myself.
- askonomm 5y ago
  Honestly, I haven't even gotten into the cross-browser testing parts of this endeavour yet and what you write about frightens me hehe. But, since the project I am working on that has this is entirely open source, I figure if someone really wants rigid support for X browser, perhaps they can contribute. I usually build my OSS projects for myself, and share it only because why-not and perhaps someone can learn something from my projects. 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.
tomlin 5y ago
I'll take the downvotes, and no disrespect to the project itself - but only to the falling-over-self comments about ClojureScript. 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.
- zests 5y ago
  (? ((have you written) lisp before))
  - remontoire 5y ago
    This argument doesn't hold anymore now that there are threading macros. (-> ((have you written) lisp before) ?)
  - dhosek 5y ago
    My comment got prohibited while the parent was flagged, but the example code seemed pretty understandable to me and I've never written a line of lisp code in my life (the closest I've come is cutting and pasting lines into an emacs config file). While Lisp has claimed ownership of all the parentheses that Python has eschewed, it's a more than reasonably readable language and predictable in its syntax.
  - boondaburrah 5y ago
    (has? (previous-experience 'lisp))
- wffurr 5y ago
  Your comment implies that you’re only familiar with C-style curly brace languages. 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 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/ 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/ https://cs.brown.edu/courses/cs173/.
underwater 5y ago
Odd choice to use ClojureScript in a tutorial. The point of a tutorial is to convey information effectively. This is like a physics professor deciding to lecture in French because they think it sounds better.
- tasogare 5y ago
  Physics lessons are taught in French in France+... It's not because a programming language is not very popular that it shouldn't be used for a tutorial; on the contrary it can help building the network effort most of them rely on. + 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.
  - underwater 5y ago
    The implication to "French because they think it sounds better" is that they aren't speaking French for more obvious reasons.
  - Zababa 5y ago
    I'm French and I don't find the statement insensitive at all. English is the de-facto language of the web, trying to deviate from that is making it harder for people that read your content. This is not a value judgement, there are lots of language with a beautiful history and culture, English included. But what's used the most and thus the most useful is a simplified version of English.
    - adrusi 5y ago
      Ok but you're mixing metaphors. No one's talking about writing web tutorials in French or teaching physics in Clojurescript.
      - Zababa 5y ago
therealmarv 5y ago
Word of advice: Everybody (I know) who developed a contentEditable editor moved at the end away from it or came to the conclusion that a event based editor is the technical better choice. ContentEditable looks only good at the beginning and has many nasty little and bigger flaws. 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 ;)
- franga2000 5y ago
  > when you go deep into the rabbit whole 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 :)
  - robbedpeter 5y ago
    Thumper, oh no!
  - weird-eye-issue 5y ago
    I'm curious - how are the implications of rabbit whole worse than rabbit hole?
    - el_oni 5y ago
      "Going down the rabbit hole" brings to mind entering the rabbits warren. "Going down the rabit whole" brings to mind entering the rabbit.
  - therealmarv 5y ago
    Oh it was a typo. But I like it now. Haha
- busymom0 5y ago
  That was exactly my experience few months ago when I was building a wysiwyg resume builder. The first problem I faced was that if I was entering some text and switched from the browser to another app and then back to browser, I would lose focus. So I had to built custom logic for that using a whole bunch of workarounds. But this was an even bigger pain because if the user's cursor was in the middle of a sentence and not at the very end, then placing the cursor at a specific position was quite complex in content editable. Similar problems if the user had selected/highlighted some text. 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. https://resumetopdf.com/ https://resumetopdf.com/
leipert 5y ago
I would highly recommend using DOMPurify over sanitize-html. It is a lot smaller in bundle size, it is also well maintained: https://github.com/cure53/DOMPurify https://github.com/cure53/DOMPurify 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.
- askonomm 5y ago
  Thank you for the suggestion! I'll make sure to look into it. And yes, you're right that I should stand on the shoulders of giants. My only problem is that I want my project to eventually be used by a variety of build tools for ClojureScript, and afaik there's only one that supports NPM packages (Shadow-CLJS), so I try to get by without and also lessen my dependency on NPM packages.
richardfey 5y ago
I closed the tab at "wink wink"

82 points by askonomm 5y ago

So when stuff is pasted in from Word or whatever other weird Rich Text Enterprise application - what's actually doing the heavy lifting of translating all that \\rtf\\section\\block\\blockend\\secondend garbage into HTML? Is it the `sanitize-html` library here? Is it the browser? My first intuition would be "pasting a bunch of formatted stuff from Wordpad into an HTML document surely doesn't result in anything reasonable, right?" But then seeing the direct jump from "alright, stuff was pasted in, now we only want to allow these HTML tags" makes me think somewhere in here some magic happened to convert it. 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?

iudqnolq 5y ago
When you copy to the clipboard (or sometimes lazily at time of paste) the content is represented in multiple forms. One of them is pseudo-html.
ljm 5y ago
A native app will copy a selection into the clipboard in several ways, basically accounting for a selection of common MIME-types. 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.
- iudqnolq 5y ago
  I believe at least on windows this bit isn't always true > 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.
  - TazeTSchnitzel 5y ago
    Based on behaviour I've observed on Linux before, I think X11 might only use delayed rendering (at least for non-text stuff), and so pasting from a closed application just hangs the recipient.
- dmitryminkovsky 5y ago
  > If you copy text from MS Word and paste it into a content editable field in a website, you might expect some consistency Hard-fought consistency... https://github.com/ProseMirror/prosemirror-schema-basic/blob/b5ae707ab1be98a1d8735dfdc7d1845bcd126f18/src/schema-basic.js#L135 https://github.com/ProseMirror/prosemirror-schema-basic/blob...
- tW4r 5y ago
  Is there any way to force which gets chosen? I love being able to copy and image and just paste it to WhatsApp/Messenger/Whichever other client, but if I do copy an image from the internet it’s very hit or miss if it shows up as an image when I paste, or a link. If I download the image, and then copy the downloaded one, it always shows up as an image
  - TazeTSchnitzel 5y ago
    I ended up working around this by copying into GIMP and copying from there, but of course that's a suboptimal workaround. There's surely some small utility application for this.
    - reportgunner 5y ago
      The snipping tool.
ectopod 5y ago
Rich Text Format is the default representation for formatted text on the Windows clipboard. Any application that can paste rich text should accept it. When you paste directly into a content-editable the browser should convert the rtf into html. 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.
askonomm 5y ago
When pasting from Word, the contentEditable will gladly accept any formatting that came with the paste (e.g whatever strongs, bolds, italics, links, headings, tables, what-not you may have in your clipboard), and so the sanitize-html NPM library essentially strips out the elements I do not want for UX consistency. Since I'm building this contentEditable just for a singular paragraph as part of a larger block-based editor, I only want it to contain what a regular paragraph would (e.g bold, italic, link), but nothing else. 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://...).

shaneprrlt 5y ago

Totally off-topic, I don't know why, but I really like the design of your website!

thomasfromcdnjs 5y ago
I also love it.

holler 5y ago

Nice. I recently wrote a custom contenteditable component/parser used for chat and elsewhere in https://sqwok.im https://sqwok.im and ran into a bunch of the same issues. 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?

busymom0 5y ago
> <contenteditable=false> within a <contenteditable=true> wouldn't work yep, ran into the same bug few months ago myself.
askonomm 5y ago
Honestly, I haven't even gotten into the cross-browser testing parts of this endeavour yet and what you write about frightens me hehe. But, since the project I am working on that has this is entirely open source, I figure if someone really wants rigid support for X browser, perhaps they can contribute. I usually build my OSS projects for myself, and share it only because why-not and perhaps someone can learn something from my projects. 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.

tomlin 5y ago

I'll take the downvotes, and no disrespect to the project itself - but only to the falling-over-self comments about ClojureScript. 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.

zests 5y ago
(? ((have you written) lisp before))
- remontoire 5y ago
  This argument doesn't hold anymore now that there are threading macros. (-> ((have you written) lisp before) ?)
- dhosek 5y ago
  My comment got prohibited while the parent was flagged, but the example code seemed pretty understandable to me and I've never written a line of lisp code in my life (the closest I've come is cutting and pasting lines into an emacs config file). While Lisp has claimed ownership of all the parentheses that Python has eschewed, it's a more than reasonably readable language and predictable in its syntax.
- boondaburrah 5y ago
  (has? (previous-experience 'lisp))
wffurr 5y ago
Your comment implies that you’re only familiar with C-style curly brace languages. 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 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/ 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/ https://cs.brown.edu/courses/cs173/.

underwater 5y ago

Odd choice to use ClojureScript in a tutorial. The point of a tutorial is to convey information effectively. This is like a physics professor deciding to lecture in French because they think it sounds better.

tasogare 5y ago
Physics lessons are taught in French in France+... It's not because a programming language is not very popular that it shouldn't be used for a tutorial; on the contrary it can help building the network effort most of them rely on. + 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.
- underwater 5y ago
  The implication to "French because they think it sounds better" is that they aren't speaking French for more obvious reasons.
- Zababa 5y ago
  I'm French and I don't find the statement insensitive at all. English is the de-facto language of the web, trying to deviate from that is making it harder for people that read your content. This is not a value judgement, there are lots of language with a beautiful history and culture, English included. But what's used the most and thus the most useful is a simplified version of English.
  - adrusi 5y ago
    Ok but you're mixing metaphors. No one's talking about writing web tutorials in French or teaching physics in Clojurescript.
    - Zababa 5y ago

therealmarv 5y ago

Word of advice: Everybody (I know) who developed a contentEditable editor moved at the end away from it or came to the conclusion that a event based editor is the technical better choice. ContentEditable looks only good at the beginning and has many nasty little and bigger flaws. 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 ;)

franga2000 5y ago
> when you go deep into the rabbit whole 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 :)
- robbedpeter 5y ago
  Thumper, oh no!
- weird-eye-issue 5y ago
  I'm curious - how are the implications of rabbit whole worse than rabbit hole?
  - el_oni 5y ago
    "Going down the rabbit hole" brings to mind entering the rabbits warren. "Going down the rabit whole" brings to mind entering the rabbit.
- therealmarv 5y ago
  Oh it was a typo. But I like it now. Haha
busymom0 5y ago
That was exactly my experience few months ago when I was building a wysiwyg resume builder. The first problem I faced was that if I was entering some text and switched from the browser to another app and then back to browser, I would lose focus. So I had to built custom logic for that using a whole bunch of workarounds. But this was an even bigger pain because if the user's cursor was in the middle of a sentence and not at the very end, then placing the cursor at a specific position was quite complex in content editable. Similar problems if the user had selected/highlighted some text. 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. https://resumetopdf.com/ https://resumetopdf.com/

leipert 5y ago

I would highly recommend using DOMPurify over sanitize-html. It is a lot smaller in bundle size, it is also well maintained: https://github.com/cure53/DOMPurify https://github.com/cure53/DOMPurify 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.

askonomm 5y ago
Thank you for the suggestion! I'll make sure to look into it. And yes, you're right that I should stand on the shoulders of giants. My only problem is that I want my project to eventually be used by a variety of build tools for ClojureScript, and afaik there's only one that supports NPM packages (Shadow-CLJS), so I try to get by without and also lessen my dependency on NPM packages.

richardfey 5y ago

I closed the tab at "wink wink"