cryptee / web-client

Cryptee's web client source code for all platforms.
https://crypt.ee
Other
445 stars 22 forks source link

[Change & Feature] Highlighting related improvements & split screen mode layout #179

Closed ghost closed 1 year ago

ghost commented 1 year ago

Hello, I've been using crypt.ee documents as pwa both on my phone and windows 10 laptop for like 2 months, sometimes for general note-taking, other times studying. I love it overall, and it is the note-taking app I settled with after trying many. I will just describe some issues I've had, and what can be improved in my opinion.

Highlighting


Others

S7venLights commented 1 year ago

I agree with above

johnozbay commented 1 year ago

Hi there @gdnzz! ๐Ÿ‘‹๐Ÿป

First off โ€”ย Thanks a lot for filing this and for your kind words! Deeply appreciate it! ๐Ÿ™๐Ÿป

For future reference, we would really appreciate it if you could follow our github issue templates, as it helps us prioritize / address issues quicker, especially when it comes to features or issues that may be browser-specific.

I'll try to address these one by one, and link to other relevant issues and hopefully it will give you some insight as to what lead you to these color choices etc. Some of these these are big issues we've been trying to address for a long time now. Here are some related threads to your requests : #20, #82, #58, #148. And PDF itself is a whole different beast. I briefly talk about this here and #50.

There's no easy way to summarize all these threads, so I'm afraid I'll have to link and write a brief summary here to save you and everyone else time, and I hope you'll forgive me for cheating to save time a bit.

My first issue is highlighting colors being too opaque. Especially on dark mode, you can barely see the text when it is highlighted; it should be lighter / more transparent in my opinion.

TLDR; โ€”ย What should happen if you picked a light yellow text color in dark mode, then flipped to light mode. When you print should it have impossible to read light yellow or should it be auto-converted to an easier to read dark yellow? Same but in reverse with highlighting. This is an issue because Cryptee is a rich document editor, and in general rich documents editors that also target print or PDF (like Apple Pages, Google Docs etc) tend to keep the page itself in light-mode, which we also did for a very long time, but eventually added for feature parity with Google Docs mobile where they have full dark mode. See my comment here in #20 for a long breakdown of this issue.

I would also like to see highlight hotkey and highlight option on mobile.

This is actually a shortcoming of how mobile operating systems and their text selection works in general. In short, when you select a text, then tap away, the selection is gone. For some block level changes (like heading / font sizes etc) we ended up building a custom font panel that combats this, but for colors, it's a bit more tricky, since it would need to be a larger list, it would require a scrollable dropdown, which causes mobile devices to lose text-selection / focus entirely. We're working on a better color-picker feature in general though, and hope to address some of these once that feature is ready.

Last thing is, on exported pdf, text are highlighted word by word, instead of also filling the spaces. This makes it ugly and hard to read.

Let's just say there's a reason why we still call this feature beta hahaha for a little bit of background โ€”ย you can read this comment back from 2019. Since then, we've actually shipped our own PDF engine to address some of browsers' built-in pdf rendering issues. But the downside of this is that we now have to calculate the layout ourselves. (i.e. check letter by letter to see on which page they should be once printed etc) and this means, for printing mode, we do some fancy character-page-fitting math first. THEN there's the issue with the PDF as a format itself. PDF doesn't actually have a 'colored-highlight' feature. Instead PDF editors draw rectangles behind the texts, which is VERY difficult to calculate as it turns out since you can do all sorts of fun things like highlight half the line yellow, add a bit of pink, then make it blue etc. infinite combinations. So to fight this, at the moment we highlight behind each word and a space after it. Looks like there's a bug with how the space is detected in your browser. Which means I'll need all the browser / os info I can get from you to be able to address this one. (so please shoot all your browser / os / vendor / extension / version etc info here and we'll address it right away.

While using docs windowed, or side by side with another app, many editing options are missing on toolbar, although there is space. Idk if that is a windows or crypt.ee issue though

We're working on improving this layout, and will add more editor buttons there. The issue is that our editor buttons are in groups, and at the moment we can either add them in whole group-chunks or not. So normally, the toolbar should take up two lines, and attempt to show you as much as it can. Looks like Cryptee thinks your screen's width/height is only ideal to show the minimum amount of tools basically. To address this I'll need specific info from you like screen resolution, browser info etc again.

I can't create continue a numbered list by typing 2. 3. etc. because the app always converts them to 1. It is very annoying. We should be able to do numbered list with other numbers too.

This is because Cryptee uses CSS counters. I wrote about this here and they're related.


Since there are multiple threads about all these features, for now I'll close this in the interest of keeping things clean (or if you'd like to open separate issues for some of these, please feel welcome to do so) โ€”ย and when we start pushing out updates to improve these I'll stop by here and drop updates.

Hoping these make sense and help! โœŒ๐Ÿป

All the very best,

J

ghost commented 1 year ago

Hi there @gdnzz! ๐Ÿ‘‹๐Ÿป

First off โ€”ย Thanks a lot for filing this and for your kind words! Deeply appreciate it! ๐Ÿ™๐Ÿป

For future reference, we would really appreciate it if you could follow our github issue templates, as it helps us prioritize / address issues quicker, especially when it comes to features or issues that may be browser-specific.

I'll try to address these one by one, and link to other relevant issues and hopefully it will give you some insight as to what lead you to these color choices etc. Some of these these are big issues we've been trying to address for a long time now. Here are some related threads to your requests : #20, #82, #58, #148. And PDF itself is a whole different beast. I briefly talk about this here and #50.

There's no easy way to summarize all these threads, so I'm afraid I'll have to link and write a brief summary here to save you and everyone else time, and I hope you'll forgive me for cheating to save time a bit.

My first issue is highlighting colors being too opaque. Especially on dark mode, you can barely see the text when it is highlighted; it should be lighter / more transparent in my opinion.

TLDR; โ€”ย What should happen if you picked a light yellow text color in dark mode, then flipped to light mode. When you print should it have impossible to read light yellow or should it be auto-converted to an easier to read dark yellow? Same but in reverse with highlighting. This is an issue because Cryptee is a rich document editor, and in general rich documents editors that also target print or PDF (like Apple Pages, Google Docs etc) tend to keep the page itself in light-mode, which we also did for a very long time, but eventually added for feature parity with Google Docs mobile where they have full dark mode. See my comment here in #20 for a long breakdown of this issue.

I would also like to see highlight hotkey and highlight option on mobile.

This is actually a shortcoming of how mobile operating systems and their text selection works in general. In short, when you select a text, then tap away, the selection is gone. For some block level changes (like heading / font sizes etc) we ended up building a custom font panel that combats this, but for colors, it's a bit more tricky, since it would need to be a larger list, it would require a scrollable dropdown, which causes mobile devices to lose text-selection / focus entirely. We're working on a better color-picker feature in general though, and hope to address some of these once that feature is ready.

Last thing is, on exported pdf, text are highlighted word by word, instead of also filling the spaces. This makes it ugly and hard to read.

Let's just say there's a reason why we still call this feature beta hahaha for a little bit of background โ€”ย you can read this comment back from 2019. Since then, we've actually shipped our own PDF engine to address some of browsers' built-in pdf rendering issues. But the downside of this is that we now have to calculate the layout ourselves. (i.e. check letter by letter to see on which page they should be once printed etc) and this means, for printing mode, we do some fancy character-page-fitting math first. THEN there's the issue with the PDF as a format itself. PDF doesn't actually have a 'colored-highlight' feature. Instead PDF editors draw rectangles behind the texts, which is VERY difficult to calculate as it turns out since you can do all sorts of fun things like highlight half the line yellow, add a bit of pink, then make it blue etc. infinite combinations. So to fight this, at the moment we highlight behind each word and a space after it. Looks like there's a bug with how the space is detected in your browser. Which means I'll need all the browser / os info I can get from you to be able to address this one. (so please shoot all your browser / os / vendor / extension / version etc info here and we'll address it right away.

While using docs windowed, or side by side with another app, many editing options are missing on toolbar, although there is space. Idk if that is a windows or crypt.ee issue though

We're working on improving this layout, and will add more editor buttons there. The issue is that our editor buttons are in groups, and at the moment we can either add them in whole group-chunks or not. So normally, the toolbar should take up two lines, and attempt to show you as much as it can. Looks like Cryptee thinks your screen's width/height is only ideal to show the minimum amount of tools basically. To address this I'll need specific info from you like screen resolution, browser info etc again.

I can't create continue a numbered list by typing 2. 3. etc. because the app always converts them to 1. It is very annoying. We should be able to do numbered list with other numbers too.

This is because Cryptee uses CSS counters. I wrote about this here and they're related.

Since there are multiple threads about all these features, for now I'll close this in the interest of keeping things clean (or if you'd like to open separate issues for some of these, please feel welcome to do so) โ€”ย and when we start pushing out updates to improve these I'll stop by here and drop updates.

Hoping these make sense and help! โœŒ๐Ÿป

All the very best,

J

Thanks for your kind and detailed response. I wanted this to be overall feedback rather than reporting issue, that's why I avoided using the template. Also, it was a bit long so yeah. Sorry if it made things harder, and I will look into to other issues you linked. Have a nice day

johnozbay commented 1 year ago

Hi there!

No need to apologize at all! I deeply appreciate your kind help and that you took the time to file these in the first place. We wouldn't be able to make Cryptee what it is today without the helps of users like yourself and @S7venLights! Appreciate you both and your kind bug reports and messages very much ๐Ÿ™๐Ÿป

I can probably record a 2 hour video about this thread alone, and still wouldn't be enough ๐Ÿ˜… So many different topics to cover and everything is somewhat interconnected. Anything from on-device encryption making it impossible to render PDFs on the server like Google Docs can โ€”ย all the way to color theory and how difficult it is to convert colors while keeping accessibility and legibility in mind etc. p.s.ย we suck at accessibility as a consequence right now. ๐Ÿ˜ž

Hoping some the threads I've linked help. A lot has changed since 2019/2020 since I wrote some of those comments, but it should still give you a good background and starting point to show the depth and complexity of the issue at hand.

Hoping that team and I can find some solutions to these soon though! Deeply appreciate your feedback!

Best,

J

ghost commented 1 year ago

I also loved the new performance improvements and UI. Now it takes like 2 seconds to open the app. It was much longer before <3. It would be great to even make it less so we could cryptee as a quick note taking app. Like I open it and directly start taking notes. Anyways I will shut up now aha ha. It seems like you and team already have much work to do, best of luck

johnozbay commented 1 year ago

So happy to hear our performance update made a noticeable change! ๐Ÿ™๐Ÿป We've actually identified what else is slowing the app down, and working on it as we speak. TLDR; fonts are heavy, and browsers want to load it all before they can load the editor. We've been lazy loading them after the app opens to address the issues, but still they're contributing to the weight of the app.

And the other 50% is our API speed. We've been doing some crazy engineering work on our backend and we'll soon bring down our API speeds dramatically! So saving document speeds will be 2 - 3x, and things like authentication, checking you are indeed you etc will take 100 - 200ms instead of 500ms etc... We're trying to make it so that your own network conditions are the bottleneck vs our server's connection and processing speeds etc. But doing these changes with zero-downtime at our now ever-growing massive scale across multiple data-centers is proving to be increasingly more difficult! Which is what's taking us time! In our 5-6 years of existence, we never ever had a downtime, not even for a few minutes, and trying to live up to that reputation while doing these updates as well! hahaha Coming very soon though! Hang in there! ๐Ÿ‘๐Ÿป