Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

markdown_preview: Improved markdown rendering support (#7345)

Browse source 
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](https://github.com/zed-industries/zed/pull/6958#pullrequestreview-1850458632).
- 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](https://github.com/zed-industries/zed/pull/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.
This commit is contained in:
Kieran Gill 2024-02-08 04:19:31 -05:00 • committed by GitHub
parent cbe7a12e65
commit 61b8d3639f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 1784 additions and 370 deletions
Download patch file Download diff file Expand all files Collapse all files

184
crates/markdown_preview/src/markdown_preview_view.rs
View file

@ -1,35 +1,41 @@
use std::{ops::Range, path::PathBuf};
use editor::{Editor, EditorEvent};
use gpui::{
canvas, AnyElement, AppContext, AvailableSpace, EventEmitter, FocusHandle, FocusableView,
InteractiveElement, IntoElement, ParentElement, Render, Styled, View, ViewContext,
list, AnyElement, AppContext, EventEmitter, FocusHandle, FocusableView, InteractiveElement,
IntoElement, ListState, ParentElement, Render, Styled, View, ViewContext, WeakView,
};
use language::LanguageRegistry;
use std::sync::Arc;
use ui::prelude::*;
use workspace::item::Item;
use workspace::Workspace;
use crate::{markdown_renderer::render_markdown, OpenPreview};
use crate::{
markdown_elements::ParsedMarkdown,
markdown_parser::parse_markdown,
markdown_renderer::{render_markdown_block, RenderContext},
OpenPreview,
};
pub struct MarkdownPreviewView {
workspace: WeakView<Workspace>,
focus_handle: FocusHandle,
languages: Arc<LanguageRegistry>,
contents: String,
contents: ParsedMarkdown,
selected_block: usize,
list_state: ListState,
}
impl MarkdownPreviewView {
pub fn register(workspace: &mut Workspace, _cx: &mut ViewContext<Workspace>) {
let languages = workspace.app_state().languages.clone();
workspace.register_action(move |workspace, _: &OpenPreview, cx| {
if workspace.has_active_modal(cx) {
cx.propagate();
return;
}
let languages = languages.clone();
if let Some(editor) = workspace.active_item_as::<Editor>(cx) {
let workspace_handle = workspace.weak_handle();
let view: View<MarkdownPreviewView> =
cx.new_view(|cx| MarkdownPreviewView::new(editor, languages, cx));
MarkdownPreviewView::new(editor, workspace_handle, cx);
workspace.split_item(workspace::SplitDirection::Right, Box::new(view.clone()), cx);
cx.notify();
}
@ -38,30 +44,121 @@ impl MarkdownPreviewView {
pub fn new(
active_editor: View<Editor>,
languages: Arc<LanguageRegistry>,
cx: &mut ViewContext<Self>,
) -> Self {
let focus_handle = cx.focus_handle();
workspace: WeakView<Workspace>,
cx: &mut ViewContext<Workspace>,
) -> View<Self> {
cx.new_view(|cx: &mut ViewContext<Self>| {
let view = cx.view().downgrade();
let editor = active_editor.read(cx);
cx.subscribe(&active_editor, |this, editor, event: &EditorEvent, cx| {
if *event == EditorEvent::Edited {
let editor = editor.read(cx);
let contents = editor.buffer().read(cx).snapshot(cx).text();
this.contents = contents;
cx.notify();
let file_location = MarkdownPreviewView::get_folder_for_active_editor(editor, cx);
let contents = editor.buffer().read(cx).snapshot(cx).text();
let contents = parse_markdown(&contents, file_location);
cx.subscribe(&active_editor, |this, editor, event: &EditorEvent, cx| {
match event {
EditorEvent::Edited => {
let editor = editor.read(cx);
let contents = editor.buffer().read(cx).snapshot(cx).text();
let file_location =
MarkdownPreviewView::get_folder_for_active_editor(editor, cx);
this.contents = parse_markdown(&contents, file_location);
this.list_state.reset(this.contents.children.len());
cx.notify();
// TODO: This does not work as expected.
// The scroll request appears to be dropped
// after `.reset` is called.
this.list_state.scroll_to_reveal_item(this.selected_block);
cx.notify();
}
EditorEvent::SelectionsChanged { .. } => {
let editor = editor.read(cx);
let selection_range = editor.selections.last::<usize>(cx).range();
this.selected_block = this.get_block_index_under_cursor(selection_range);
this.list_state.scroll_to_reveal_item(this.selected_block);
cx.notify();
}
_ => {}
};
})
.detach();
let list_state = ListState::new(
contents.children.len(),
gpui::ListAlignment::Top,
px(1000.),
move |ix, cx| {
if let Some(view) = view.upgrade() {
view.update(cx, |view, cx| {
let mut render_cx =
RenderContext::new(Some(view.workspace.clone()), cx);
let block = view.contents.children.get(ix).unwrap();
let block = render_markdown_block(block, &mut render_cx);
let block = div().child(block).pl_4().pb_3();
if ix == view.selected_block {
let indicator = div()
.h_full()
.w(px(4.0))
.bg(cx.theme().colors().border)
.rounded_sm();
return div()
.relative()
.child(block)
.child(indicator.absolute().left_0().top_0())
.into_any();
}
block.into_any()
})
} else {
div().into_any()
}
},
);
Self {
selected_block: 0,
focus_handle: cx.focus_handle(),
workspace,
contents,
list_state,
}
})
.detach();
}
let editor = active_editor.read(cx);
let contents = editor.buffer().read(cx).snapshot(cx).text();
Self {
focus_handle,
languages,
contents,
/// The absolute path of the file that is currently being previewed.
fn get_folder_for_active_editor(
editor: &Editor,
cx: &ViewContext<MarkdownPreviewView>,
) -> Option<PathBuf> {
if let Some(file) = editor.file_at(0, cx) {
if let Some(file) = file.as_local() {
file.abs_path(cx).parent().map(|p| p.to_path_buf())
} else {
None
}
} else {
None
}
}
fn get_block_index_under_cursor(&self, selection_range: Range<usize>) -> usize {
let mut block_index = 0;
let cursor = selection_range.start;
for (i, block) in self.contents.children.iter().enumerate() {
let Range { start, end } = block.source_range();
if start <= cursor && end >= cursor {
block_index = i;
break;
}
}
return block_index;
}
}
impl FocusableView for MarkdownPreviewView {
@ -108,30 +205,17 @@ impl Item for MarkdownPreviewView {
impl Render for MarkdownPreviewView {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let rendered_markdown = v_flex()
.items_start()
.justify_start()
v_flex()
.id("MarkdownPreview")
.key_context("MarkdownPreview")
.track_focus(&self.focus_handle)
.id("MarkdownPreview")
.overflow_y_scroll()
.overflow_x_hidden()
.size_full()
.full()
.bg(cx.theme().colors().editor_background)
.p_4()
.children(render_markdown(&self.contents, &self.languages, cx));
div().flex_1().child(
// FIXME: This shouldn't be necessary
// but the overflow_scroll above doesn't seem to work without it
canvas(move |bounds, cx| {
rendered_markdown.into_any().draw(
bounds.origin,
bounds.size.map(AvailableSpace::Definite),
cx,
)
})
.size_full(),
)
.child(
div()
.flex_grow()
.map(|this| this.child(list(self.list_state.clone()).full())),
)
}
}