cryptee / web-client

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

Feature request: Support for Markdown tables #9

Closed TobiasDev closed 3 years ago

TobiasDev commented 5 years ago

I would love to see support for Markdown tables that can be used inside notes. If you have a look at the markdown app "Caret" (caret.io), you can see a really nice way of how they could be implemented. Personally I love how it changes size of all rows and all that fancy extra stuff, but just being able to use tables would be awesome. :)

I tend to use them quite often in my notes.

johnozbay commented 5 years ago

Hey @TobiasDev! πŸ‘‹πŸ» Thanks for stopping by!

I'm actually re-tooling most of the Docs editor in preparation for a big update! This will have support for tables as well. It's one of the most requested features.

That being said, it will be a bit more different than Caret's implementation. Caret is a markdown-based editor, where you type markdown, and it's visible in its raw form. With Cryptee you type markdown, and it's instantly parsed & rendered into rich-text/html.

While the support for tables will be there, I'm not entirely sure how it would integrate with the markdown-parser / hotkeys yet. I think it will likely be similar to Apple Notes / Evernote / Word etc. where you can select the number of columns / rows and insert a table.

I'll leave this open for posterity, so that future table-fans can read this and +1 while the feature is in development. And of course I'll stop by and keep this thread updated as we move forward. ✌🏻

Have a fantastic week, and grab a drink @ Kazzwoo in the Quadrate for me when you can! 🍷 Cheers!

TobiasDev commented 5 years ago

This sounds awesome! I most admit I love that the app supports Markdown but renders it directly instead of showing it's raw form. So I'm all for a different tables solution! :) Looking forward to the update.

Sajo8 commented 5 years ago

I love the button insert idea; I hate making tables in markdown (I always forget how) and making one in its raw form by scratch on mobile wouldn't definitely help!

Sajo8 commented 5 years ago

That being said, it will be a bit more different than Caret's implementation. Caret is a markdown-based editor, where you type markdown, and it's visible in its raw form. With Cryptee you type markdown, and it's instantly parsed & rendered into rich-text/html.

Will there be an option to view raw markdown maybe? I used a WYSIWYG markdown editor for a few months but later switched to vs code and saw the world of difference. I do like seeing the preview as I type(ideally raw and preview side by side, as in vs code), but I'd be fine just being able to access the raw markdown once in a while if I ever want to, while it otherwise being WYSIWYG

johnozbay commented 5 years ago

Hey @Sajo8 πŸ‘‹πŸ»

I don't think this would be possible. Part of the reason is because Cryptee has lots of non-markdown elements. Like linked cryptee-documents/files, or tags, or KaTeX math etc. (and once collaboration suite in Cryptee Teams is ready, there will be task delegation with @ username or ability to add inline dates for scheduling reminders etc. So over time, these non-standard features would make Cryptee's markdown implementation increasingly more and more complicated to maintain, hence the reason why I'm trying to avoid this route if at all possible.

In addition, while I think viewing / editing raw markdown is nice, I'm not entirely sure if Cryptee Docs is the right product for this. (Think Google Docs or Evernote etc. You wouldn't expect to have the ability to view raw markdown in them) – The reason why I have markdown support is to make Cryptee a bit better / inclusive and different than the alternatives.

Hoping this makes sense ✌🏻

Sajo8 commented 5 years ago

Ah I see, it'd be hard to mix a markdown base and the rich text editor suite. I wonder if it would be possible separate markdown-only docs, which wouldn't have any rich text support, and as such the rich text preview would be rendered for the client, while they would also be able to view the raw md, which is the only thing that would be backed up to the server?

johnozbay commented 5 years ago

@Sajo8 it'd be very difficult. A few reasons why.

Currently the editor doesn't keep the text as "text" per-se. Text isn't a well structured way to store things. Because you also need to store, undo/redo events for not just typing but styling, paragraphs to add page breaks, and delta-updates to make the editor multi-user-editable & highlightable. (coming soon) You can read more about the challenges of designing an editor structure/format here. πŸ€“

And I don't want to add markdown-only docs, it'll only make the editor more forked and complicated. For docs that have links, tags, math etc. you can't use markdown, and you wouldn't expect to launch Apple Pages, Google Docs or MSFT Word and have two different editors / storage-formats with different features each. You'd expect it to just work quickly. So adding this selection will only introduce more friction to usability, almost to do the degree of having two separate apps at some point, and more issues for cross-platform maintenance.

The only way to do this would be to add a feature to export (or download) markdown / md files just like PDF export, and show a mini popup that says your cryptee-specific-stuff will be lost if you export to markdown. (so all the cross-doc-links, tags and math would be stripped) Alternatively it can export and show you the raw markdown text in a popup, from which you can copy what you want. (But this wouldn't be a markdown editor only a static exporter.) Would this work for your use case? Because I think I can add this fairly quickly. πŸ€”

Markdown is great for many things, but not for complex text editing. First of all, there's no universally agreed upon specs. Commonmark is the best resource for now.

There's TONS of editor features missing from markdown. Check this out. Things as simple as font sizes are not supported by Markdown. So you can do header 1 - 2 - 3, but not "38pt" fonts without custom html. πŸ˜”

You can read more about some of markdown's shortcomings here

Overall, most of these shortcomings, and reasons why I don't want to focus heavily on Markdown boils down to one thing. Making Cryptee usable by my non-tecy-savvy mom, and folks like my mom. Average internet users don't know, don't want to, and shouldn't have to deal with all these complexities and edge cases and details. Us programmers can & love dealing with these. πŸ’» But we are a tiny tiny fraction of the internet users. While yes, all these are possible to achieve and add, they also add complexity for the non-tech-savvy users of the internet. And it's incredibly important that folks like my mom with no tech knowledge can have easy and usable access to security and privacy on the internet.

I hope these make sense, and I hope I'm not being boring with specs and details. hahaha

Sajo8 commented 5 years ago

Dang it's super in-depth but does make sense when all put together. Evidently markdown isn't a tool to be used in more feature-rich text editors, and I guess you'd have to use other tools for that purpose.

First of all, there's no universally agreed upon specs. Commonmark is the best resource for now.

Interesting, I use markdown frequently and this is the first time I've heard of it, lol. I would probably say GFM is the most commonly used, personally.

Alternatively it can export and show you the raw markdown text in a popup, from which you can copy what you want. (But this wouldn't be a markdown editor only a static exporter.) Would this work for your use case? Because I think I can add this fairly quickly

It would be great if you could add this! I generally only write in markdown so this'd be great for working on something across many platforms.

Thanks for your time and all the work you've put into this! You've definitely thought this through! :smile:

johnozbay commented 5 years ago

Evidently markdown isn't a tool to be used in more feature-rich text editors, and I guess you'd have to use other tools for that purpose.

Sadly, and unfortunately, yes it isn't 😞

I would probably say GFM is the most commonly used, personally.

This was exactly my thought until I started building markdown features. Then I clicked on GFM's specs and saw this :

Screen Shot 2019-07-18 at 12 07 04

😢 Hahaha

I really want to add all the markdown-related features I can. Hopefully once I figure out all the edge case scenarios, and make sure nothing is half-baked, I will bring more markdown related features. but first – tables. There is great progress in that area.

Thanks for your time and all the work you've put into this! You've definitely thought this through! πŸ˜„

[and thank you! This is a fantastic and incredibly helpful thread to find out what's needed! I appreciate taking the extra bit of time for chatting about these πŸ™πŸ»]

johnozbay commented 4 years ago

Hey everyone, just a quick update on this – 

Still working on this full speed, and things are coming along nicely. (especially in the editor front, there's some major improvements in the underlying code to make this happen soon) Just wanted to stop by to say don't worry, didn't forget about this.

@Sajo8 – I know it's been a while, and I completely forgot to ping you on this, but you can now export Cryptee Documents as markdown files. Here's the blogpost link in case if you've missed it. (as well as Word Docx – link to blog.)

export

Once the editor is ready for tables, I will spice it all up with markdown as well.

Hoping all is going well, and you're all having an awesome Monday so far β˜•οΈ

Cheers ✌🏻

Sajo8 commented 4 years ago

Awesome!! Read the blog post as well, great update. Missed the markdown part when using Cryptee, lol. This is great, thank you so much for all your work on this project! @johnozbay

johnozbay commented 4 years ago

Hey there folks! πŸ‘‹πŸ»

I'm delighted to let you know that tables are almost ready! So I figured I'll post some screenshots, explain what took so long, and get some feedback.

First things first, turns out building a rich-text editor that has tables is complicated. Like REALLY complicated. I had to re-code and prepare each and every text editor feature from scratch to make this happen. So think every combination and permutation of every single formatting feature you can think of, I had the unique, caffeine-high pleasure of trying it all out one by one. πŸ˜­β˜•οΈ

Scenarios like :

Turns out the answer to all these questions is coffee. Lots and lots of it. β˜•οΈ

Due to all this complexity, at first, you'll only be able to add/create tables using the user-interface, and eventually, once I'm confident that everything works as expected, I'll add markdown support as well.

A couple bits and pieces of info : ⌨️ All keyboard-based navigation is based mostly off of Google Docs. So if you press an up-arrow, it'll take you to the table-cell above / similarly, down-arrow takes you to the cell below, or pressing tab will select the next cell, and highlight its contents just like all other rich text editors etc etc.

πŸ–± Currently due to the way the documents are structured, and due to the complexity involved, you can select the text-content of a singular table cell, but you cannot select text contents of multiple table cells. So a simple example is that: you can't select the text-contents of all cells in a row, and a complex example is : selecting a half of the cells in 3 rows, copying it and pasting it to a single row etc. To prevent these edge-case nightmares, I had to limit the scope a little bit. [for now at least.. I just need more coffee]

Similar to Google Docs and most other editors, you'll be able to select how many columns & rows you'd like when creating a new table.

Screen Shot 2020-05-10 at 17 37 44

Once you've created your table, you'll be able to add more columns / rows.

Screen Shot 2020-05-10 at 17 17 05

You'll see green hints highlighting where the new columns/rows will be added as you hover your mouse.

And red hints, highlighting which column/row you'll be deleting, as you hover your mouse.

Screen Shot 2020-05-10 at 17 16 48

One thing you may have noticed, is that, when the cursor is in the table, all block-level text editor features will be disabled, since it's not possible to have multiple-block lines in table-cells. [for now at least.. I just need more coffee]

So this means, no code-blocks in table cells, or no checklists in table cells, or no math functions or embedded video players, or horizontal dividers etc in table cells. At first it won't be possible to add, heading H1 / H2 / H3 etc either, because the "table of contents" on the right-side of the page interprets Headings as block-elements so that it's possible to scroll to them. So at first, it won't be possible to add headings in tables, but eventually I'll add these as well. (and of course in the meantime you can make fonts larger etc)

Needless to say, for features that are disabled, their markdown triggers won't work either. Normally if you use "- " and start typing, it'll create a bullet list. But since we're in tables, and people use these things for doing business budget calculations, it's very common for a table cell to have a value like "- $1000", so markdown shortcuts for these features won't work in table cells.

Bold / Italic etc will work, and so will their markdown shortcuts You can see in the screenshots which features will work, and which won't.

For now, there isn't a way to set cell background color, but eventually there will be. 🎨

Finally, if you copy & paste tables from another application into Cryptee Docs, like Excel, Google Docs, or even a table on a website, it won't work. Turns out everyone uses different structures. I will gradually build adapters for the most popular applications, but needless to say, Excel will be the worst, (since its table cells don't just have text, but all sorts of things like dynamic-spreadsheet-math for example)


About Beta Testing

Now.. This one's a tough one. Tables improve / build upon / change Cryptee's document structure. It introduces new document building blocks like "table", "row", "column", "cell" etc. which only the beta versions would be able to interpret, display & edit.

Due to this, if you ever create a document in beta, then try to open it using a non-beta version, Cryptee will freak out, panic, rush to the nearest supermarket and buy lots of toilet paper. 🧻

And there are tons and tons of public beta users. Even if I show a giant warning sign, I know some of these users would try to use both versions, and will have either terrible bugs, crashes, or worse, downright data-loss due to incompatibility between document-structures.

Because of this, I've decided that it's best not to roll this out to beta, test it as thoroughly as possible with team Cryptee internally, and skip public beta testing altogether.

Which means, the more questions you ask, the more feedback you write, and the more use-cases you mention here, the quicker I can release this.

If possible, let me know what you think and give as much feedback as possible. I'll be looking forward to hearing from you all!


Anyhow, thanks for reading through all this patiently! Thought I'll shoot these screenshots to keep you updated on the progress, and let you know what's taking so long.

Hoping you and your loved ones are all staying safe! 😷 All the best, J β˜•οΈ

johnozbay commented 3 years ago

Hello there!

I'm delighted to let you know that 01edfe4 (Cryptee V3.0) is out today! It supports: Tables in imported / converted markdown files, and converts them to Cryptee Tables, and tables in exported markdown files = converts a Cryptee document with tables to markdown files with tables (using GFM).

I'm not entirely sure whether if we can add realtime-markdown-input for tables yet, so I'll leave this open for the time being, but just wanted to stop by to say hey hi, hoping all is going well, and to let you know that we're still looking into this!

Please play around and let me know if you run into any bugs with the tables imports / exports!

Thanks all!

johnozbay commented 3 years ago

Hi there folks,

We're 99% sure we'll have to butcher the entire editor to be able to add support for realtime-markdown-input for tables, and seems like this is going to create tons of edge cases. A good example is :

Interpreting the differences between things like --- vs |---| requires not just watching for individual keystrokes, but also watching for the entire line's contents as a whole, whereas something like :

|   |   |   |   |   |
|---|---|---|---|---|
|   |   |   |   |   |

requires watching for the contents of multiple lines.

Meaning that we would have to configure the markdown shortcut detector to watch for multiple lines' textual content, which would slow down the editor immensely (since Cryptee's editor is a rich text editor that has markdown 'shortcuts', and not a pure markdown editor that runs 100% on markdown [hoping this makes sense] )

So due to this, in the interest of keeping things more maintainable in the long term and keeping things as simple as possible, I'm afraid we won't be able to add realtime markdown input shortcuts to create tables in Cryptee, and the support for this will be limited to importing/exporting tables to/from markdown files – the way our editor currently works right now.

Hoping these make sense! ✌🏻 Thanks a lot for your understanding and patience with this!

All the best, John