Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown preview action #6958

Merged

Conversation

kierangilliam
Copy link
Contributor

@kierangilliam kierangilliam commented Jan 29, 2024

This PR adds markdown rendering to Zed.

crates/markdown_preview exposes a new "markdown: open preview" action. This allows users to preview a rendered version of whichever markdown file they are currently viewing.

zed.-.md.preview.3.mov

This PR extends the work done in crates/rich_text to render markdown to also support:

  • Variable heading sizes
  • Markdown tables
  • Code blocks
  • Block quotes

Release Notes

  • Added Markdown: Open preview action to partially close (#6789).

Known issues that will not be included in this PR

  • Images.
  • Nested block quotes.
  • Footnote Reference.
  • Inline code highlighting (this will need to be implemented in rich_text)
  • Checkboxes (- [ ] and - [x])
  • Syntax highlighting in code blocks.
  • Markdown table text alignment.

Original PR: #6883

@cla-bot cla-bot bot added the cla-signed The user has signed the Contributor License Agreement label Jan 29, 2024
@kierangilliam kierangilliam mentioned this pull request Jan 29, 2024
4 tasks
Copy link
Contributor

@SomeoneToIgnore SomeoneToIgnore left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coming back from #6886 (reply in thread) with all the answers, but did not browse through the entire PR yet (anybody else is welcome to do so, I plan to do it tomorrow only).

Quick question: this PR looks better than #6883 so I wonder if we could close the old one? Or is there anything of value there still?

@kierangilliam kierangilliam changed the title Markdown preview action + Custom Markdown renderer Markdown preview action Jan 30, 2024
@kierangilliam kierangilliam marked this pull request as ready for review January 30, 2024 03:29
@maxdeviant
Copy link
Member

@kierangilliam This is looking good! I left a few comments, but I think we're getting close to being able to merge this.

@mikayla-maki
Copy link
Member

This is looking really good! I was poking around to see if we could cache the markdown parsing or keep from serializing the buffer on every keystroke but it seems like both would be a whole project unto themselves. I think this can ship without either getting in the way too much :)

Copy link
Contributor

@SomeoneToIgnore SomeoneToIgnore left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a few things that bother me still:

  • minor: regular text font size seems to be even bigger in the render, bloating it a bit

  • minor: markdown headers in the code have the color, but the rendered version does not

  • major: single line code blocks do not seem to rendered at all (but multiline are fine)

image
  • major: inner markdown links do not work, erroring (HTTP URLs work just fine)
image
  • major: there's no scrolling happening (presumably, also related to the previous bullet).
    If you open the syntax tree view, you can notice both the editor and the view are scrolled when you click in either of the view/editor.
    I think we need to have something even more advanced, presumably scrolling always, so both the editor and the render never show different areas.

On the one hand, it's been quite a while we kept this PR unmerged and it got a good progress (for the first try, especially).
On the other hand, it's clearly not finished and needs more work and if we just merge the PR without fixing those, we'll get more tech debt right away.

So, I would try and fix the code blocks highlighting and disable the inner link clicking for now as a minimum before merging this — all other things seem good to have, but maybe later.

@mikayla-maki
Copy link
Member

mikayla-maki commented Jan 30, 2024

Did a bit of following up on the inline code highlighting issue, as I'd love to have this feature, and it seems there's a completely separate kind of markdown parsing that Zed also uses, in crates/language/src/markdown.rs. This one also seems to do language highlighting, so that Rust code looks correct. I think it would be good to refactor this solution to use that code path, so that we can get great code highlighting in the markdown preview.

Thanks for biting off such a chunk of complexity @kierangilliam, if you ever want to talk about this PR or pair on it feel free to drop by a fireside hack (and we can set one up) or jump into our discord :)

@kierangilliam kierangilliam marked this pull request as draft January 30, 2024 23:35
@kierangilliam
Copy link
Contributor Author

I have more work to do so I'm moving this back to draft. The feedback is very appreciated <3

To address @SomeoneToIgnore comments:

major: single line code blocks do not seem to rendered at all (but multiline are fine)

Inline code blocks are not supported by rich_text which is why they don't render. I addressed this in the PR description but I'll clarify my reasoning here. I'm using rich_text to render anything in a paragraph tag. I wanted to make use of existing code where possible to reduce the surface area of this feature. My first PR was simply a wrapper around rich_text. I moved more work to markdown_preview so that I could support tables and variable heading sizes.

The more we talk about this feature, the more I'm convinced that I should break away from using rich_text!

major: inner markdown links do not work, erroring (HTTP URLs work just fine)

Yikes. I should've caught that. I'll probably have to move off of using rich_text so that I can better control things like this.

minor: markdown headers in the code have the color, but the rendered version does not

I don't have an opinion on what the color should be so I'm open to making this change! Is there a public style guide that I can refer to in the future?

major: there's no scrolling happening... If you open the syntax tree view, you can notice both the editor and the view are scrolled when you click in either of the view/editor.

I don't think I'll have time to address this one in this PR but I'll keep it in mind for a future contribution!

@kierangilliam
Copy link
Contributor Author

it seems there's a completely separate kind of markdown parsing that Zed also uses, in crates/language/src/markdown.rs

@mikayla-maki thanks for pointing this out. This seems to be roughly equivalent to rich_text. I'll make myself more familiar with this module. From first glance, it looks like it's purpose is inline documentation. I could extend that to support tables, block quotes, etc, but I'm not sure if that's the right approach. Thoughts / preference?

@SomeoneToIgnore
Copy link
Contributor

@kierangilliam roger about the highlights, no worries about them now then.
Please do fix the local document link clicking (or at least disallow those in the beginning?) and we're good to merge.

@zhwei820
Copy link

Why dont we support features like this in some kind of plugin system? Or can we do all things user need in a single app build? Only curious.

@SomeoneToIgnore
Copy link
Contributor

Because there's no plugin system to start with, and people seem to want features nonetheless.
The roots of the plugin system that's emerging in #7096 are focused on the language integration, and markdown rendering might need more than just the LSP & syntax highlighting support — the editor plugin API which is a big task on its own.

Hence, for now we try to keep the balance between rejecting everything and keeping the good bits in.
A rule of thumb so far is: if there's anything in the Zed repo related to the feature, and the feature looks good per se, we might want to merge it in for now.

@kierangilliam kierangilliam marked this pull request as ready for review February 1, 2024 02:44
@kierangilliam
Copy link
Contributor Author

Please do fix the local document link clicking (or at least disallow those in the beginning?) and we're good to merge.

Done. I'll follow up in another PR with more markdown support while trying to hit some of the other issues you all raised @SomeoneToIgnore.

Copy link
Contributor

@SomeoneToIgnore SomeoneToIgnore left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thank you for planting the roots!

And thank you for the will to follow-up: I think, we do not fix all those things at once, just start with one and make it good.
So far, seems that tuning/replacing the md renderer seems like the most beneficial one?

@SomeoneToIgnore SomeoneToIgnore merged commit 8bafc61 into zed-industries:main Feb 1, 2024
5 checks passed
SomeoneToIgnore pushed a commit that referenced this pull request Feb 1, 2024
Just a small improvement as a follow up to @kierangilliam great work on
#6958

Rendering a table specified like this:
```markdown
| Left columns  | Center columns | Right columns |
| ------------- |:--------------:| -------------:|
| left foo      | center foo     | right foo     |
| left bar      | center bar     | right bar     |
| left baz      | center baz     | right baz     |
```
Does now look like this (notice the cell alignments):

![image](https://github.com/zed-industries/zed/assets/53836821/0f5b6a1e-a3c2-4fe9-bdcb-8654dbae7980)

Release Notes:
- N/A
SomeoneToIgnore pushed a commit that referenced this pull request Feb 8, 2024
This PR improves support for rendering markdown documents.

## After the updates


https://github.com/zed-industries/zed/assets/18583882/48315901-563d-44c6-8265-8390e8eed942

## Before the updates


https://github.com/zed-industries/zed/assets/18583882/6d7ddb55-41f7-492e-af12-6ab54559f612

## New features

- @SomeoneToIgnore's [scrolling feature
request](#6958 (review)).
- Checkboxes (`- [ ]` and `- [x]`)
- Inline code blocks.
- Ordered and unordered lists at an arbitrary depth.
- Block quotes that render nested content, like code blocks.
- Lists that render nested content, like code blocks.
- Block quotes that support variable heading sizes and the other
markdown features added
[here](#6958).
- Users can see and click internal links (`[See the docs](./docs.md)`).

## Notable changes

- Removed dependency on `rich_text`.
- Added a new method for parsing markdown into renderable structs. This
method uses recursive descent so it can easily support more complex
markdown documents.
- Parsing does not happen for every call to
`MarkdownPreviewView::render` anymore.

## TODO

- [ ] Typing should move the markdown preview cursor.

## Future work under consideration

- If a title exists for a link, show it on hover.
- Images. 
- Since this PR brings the most support for markdown, we can consolidate
`languages/markdown` and `rich_text` to use this new renderer. Note that
the updated inline text rendering method in this PR originated from
`langauges/markdown`.
- Syntax highlighting in code blocks.
- Footnote references.
- Inline HTML.
- Strikethrough support.
- Scrolling improvements:
- Handle automatic preview scrolling when multiple cursors are used in
the editor.
- > great to see that the render now respects editor's scrolls, but can
we also support the vice-versa (as syntax tree does it in Zed) — when
scrolling the render, it would be good to scroll the editor too
- > sometimes it's hard to understand where the "caret" on the render
is, so I wonder if we could go even further with its placement and place
it inside the text, as a regular caret? Maybe even support the
selections?
- > switching to another markdown tab does not change the rendered
contents and when I call the render command again, the screen gets
another split — I would rather prefer to have Zed's syntax tree
behavior: there's always a single panel that renders things for whatever
tab is active now. At least we should not split if there's already a
split, rather adding the new rendered tab there.
- > plaintext URLs could get a highlight and the click action

## Release Notes

- Improved support for markdown rendering.
h3mosphere pushed a commit to h3mosphere/zed that referenced this pull request Feb 8, 2024
…#7345)

This PR improves support for rendering markdown documents.

## After the updates


https://github.com/zed-industries/zed/assets/18583882/48315901-563d-44c6-8265-8390e8eed942

## Before the updates


https://github.com/zed-industries/zed/assets/18583882/6d7ddb55-41f7-492e-af12-6ab54559f612

## New features

- @SomeoneToIgnore's [scrolling feature
request](zed-industries#6958 (review)).
- Checkboxes (`- [ ]` and `- [x]`)
- Inline code blocks.
- Ordered and unordered lists at an arbitrary depth.
- Block quotes that render nested content, like code blocks.
- Lists that render nested content, like code blocks.
- Block quotes that support variable heading sizes and the other
markdown features added
[here](zed-industries#6958).
- Users can see and click internal links (`[See the docs](./docs.md)`).

## Notable changes

- Removed dependency on `rich_text`.
- Added a new method for parsing markdown into renderable structs. This
method uses recursive descent so it can easily support more complex
markdown documents.
- Parsing does not happen for every call to
`MarkdownPreviewView::render` anymore.

## TODO

- [ ] Typing should move the markdown preview cursor.

## Future work under consideration

- If a title exists for a link, show it on hover.
- Images. 
- Since this PR brings the most support for markdown, we can consolidate
`languages/markdown` and `rich_text` to use this new renderer. Note that
the updated inline text rendering method in this PR originated from
`langauges/markdown`.
- Syntax highlighting in code blocks.
- Footnote references.
- Inline HTML.
- Strikethrough support.
- Scrolling improvements:
- Handle automatic preview scrolling when multiple cursors are used in
the editor.
- > great to see that the render now respects editor's scrolls, but can
we also support the vice-versa (as syntax tree does it in Zed) — when
scrolling the render, it would be good to scroll the editor too
- > sometimes it's hard to understand where the "caret" on the render
is, so I wonder if we could go even further with its placement and place
it inside the text, as a regular caret? Maybe even support the
selections?
- > switching to another markdown tab does not change the rendered
contents and when I call the render command again, the screen gets
another split — I would rather prefer to have Zed's syntax tree
behavior: there's always a single panel that renders things for whatever
tab is active now. At least we should not split if there's already a
split, rather adding the new rendered tab there.
- > plaintext URLs could get a highlight and the click action

## Release Notes

- Improved support for markdown rendering.
@burakssen
Copy link

I am a recent user of zed and I have encountered a problem with markdown preview feature. It basically doesn't render the images. There is only a blank space.

SCR-20240615-jqkd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla-signed The user has signed the Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants