search

reedsy / quill-cursors

A multi cursor module for Quill text editor.
MIT License
248 stars 54 forks source link

Newlines in html template in minified js? #84

Closed IvanVolons closed 2 years ago

IvanVolons commented 2 years ago

Downloading 3.1.2 from NPM (and other versions as far as I can tell) seems to contain newlines in the html template used for displaying the cursor flag. These newlines render and make it appear as though there is a lot of padding around the name.

I narrowed it down to this minified code: o='\n <span class="'.concat(i.default.SELECTION_CLASS,'"></span>\n <span class="').concat(i.default.CARET_CONTAINER_CLASS,'">\n <span class="').concat(i.default.CARET_CLASS,'"></span>\n </span>\n <div class="').concat(i.default.FLAG_CLASS,'">\n <small class="').concat(i.default.NAME_CLASS,'"></small>\n </div>\n');

When I remove the newlines from that minified code, everything renders quite well. Seems like this is unintentional.

Attached image of how it looks (with text selected highlighting the newline). Let me know if I'm just missing something! image

alecgibson commented 2 years ago

@fyvfyv have you got time to look into this?

fyvfyv commented 2 years ago

@alecgibson I can take it after the previous 2 issues. It won't be soon

IvanVolons commented 2 years ago

Thanks for the quick reply! I believe the issue might be with webpack (I saw this issue that seemed similar) and I noticed there were some recent changes related to webpack, so maybe this broke at that time?

Regardless, I think the simplest way to fix this would be to follow this solution https://stackoverflow.com/a/37321145 and add "line continuation" characters at the end of each line in https://github.com/reedsy/quill-cursors/blob/main/src/quill-cursors/template.ts

I can make a PR for that if you like although I don't know how to build/test the module with that change in place

alecgibson commented 2 years ago

@IvanVolons I'm not sure I understand the issue. Whitespace should be collapsed by the browser, so newlines in the source code shouldn't matter, unless you've set something like white-space: pre;?

Can you please check the white-space value of that DOM node, and report back? It should be set (by this library) to nowrap. If that looks normal, let us know which browser you're using, and please provide an MWE.

IvanVolons commented 2 years ago

Omg @alecgibson you nailed it! The container I had this in had white-space: pre-wrap; and when I removed that, the cursor was displaying as desired. Thanks for pointing this out; I hadn't realized the implications of that css property (and I think I accidentally left it there after some experimentation on an unrelated issue). I think we can close this issue - thank you!!