Add Markdown Preview Toggle (#15215)

Add a "Preview Markdown" button to the quick action bar when in a
markdown editor.

While it isn't my favorite, I went with the basic eye icon to be a bit
more generic so we can extend this control to allow opening other
previews such as SVGs like @jansol mentioned.

![CleanShot 2024-07-26 at 11 02
16@2x](https://github.com/user-attachments/assets/415963ce-d19e-432d-b8c2-37e7c6e52683)


https://github.com/user-attachments/assets/5980272c-eab9-4f69-86b6-0c593c25b525

---

Release Notes:

- Added a button to preview Markdown files in the toolbar.
`Option|Alt+Click` will open the preview to the side.

crates/quick_action_bar/Cargo.toml

@@ -16,12 +16,13 @@ doctest = false
 assistant.workspace = true
 editor.workspace = true
 gpui.workspace = true
+markdown_preview.workspace = true
+repl.workspace = true
 search.workspace = true
 settings.workspace = true
 ui.workspace = true
 util.workspace = true
 workspace.workspace = true
-repl.workspace = true
 zed_actions.workspace = true
 
 [dev-dependencies]

crates/quick_action_bar/src/quick_action_bar.rs

@@ -21,16 +21,18 @@ use workspace::{
 };
 
 mod repl_menu;
+mod toggle_markdown_preview;
 
 pub struct QuickActionBar {
-    buffer_search_bar: View<BufferSearchBar>,
-    repl_menu: Option<View<ContextMenu>>,
-    toggle_settings_menu: Option<View<ContextMenu>>,
-    toggle_selections_menu: Option<View<ContextMenu>>,
-    active_item: Option<Box<dyn ItemHandle>>,
     _inlay_hints_enabled_subscription: Option<Subscription>,
-    workspace: WeakView<Workspace>,
+    active_item: Option<Box<dyn ItemHandle>>,
+    buffer_search_bar: View<BufferSearchBar>,
+    platform_style: PlatformStyle,
+    repl_menu: Option<View<ContextMenu>>,
     show: bool,
+    toggle_selections_menu: Option<View<ContextMenu>>,
+    toggle_settings_menu: Option<View<ContextMenu>>,
+    workspace: WeakView<Workspace>,
 }
 
 impl QuickActionBar {
@@ -40,14 +42,15 @@ impl QuickActionBar {
         cx: &mut ViewContext<Self>,
     ) -> Self {
         let mut this = Self {
-            buffer_search_bar,
-            toggle_settings_menu: None,
-            toggle_selections_menu: None,
-            repl_menu: None,
-            active_item: None,
             _inlay_hints_enabled_subscription: None,
-            workspace: workspace.weak_handle(),
+            active_item: None,
+            buffer_search_bar,
+            platform_style: PlatformStyle::platform(),
+            repl_menu: None,
             show: true,
+            toggle_selections_menu: None,
+            toggle_settings_menu: None,
+            workspace: workspace.weak_handle(),
         };
         this.apply_settings(cx);
         cx.observe_global::<SettingsStore>(|this, cx| this.apply_settings(cx))
@@ -300,22 +303,19 @@ impl Render for QuickActionBar {
 
         h_flex()
             .id("quick action bar")
-            .gap(Spacing::Large.rems(cx))
+            .gap(Spacing::XXLarge.rems(cx))
             .child(
                 h_flex()
                     .gap(Spacing::Medium.rems(cx))
                     .children(self.render_repl_menu(cx))
+                    .children(self.render_toggle_markdown_preview(self.workspace.clone(), cx))
+                    .children(search_button)
                     .when(
                         AssistantSettings::get_global(cx).enabled
                             && AssistantSettings::get_global(cx).button,
                         |bar| bar.child(assistant_button),
                     ),
             )
-            .child(
-                h_flex()
-                    .gap(Spacing::Medium.rems(cx))
-                    .children(search_button),
-            )
             .child(
                 h_flex()
                     .gap(Spacing::Medium.rems(cx))

crates/quick_action_bar/src/toggle_markdown_preview.rs

@@ -0,0 +1,61 @@
+use gpui::{AnyElement, WeakView};
+use markdown_preview::{
+    markdown_preview_view::MarkdownPreviewView, OpenPreview, OpenPreviewToTheSide,
+};
+use ui::{prelude::*, IconButtonShape, Tooltip};
+use workspace::Workspace;
+
+use crate::QuickActionBar;
+
+impl QuickActionBar {
+    pub fn render_toggle_markdown_preview(
+        &self,
+        workspace: WeakView<Workspace>,
+        cx: &mut ViewContext<Self>,
+    ) -> Option<AnyElement> {
+        let mut active_editor_is_markdown = false;
+
+        if let Some(workspace) = self.workspace.upgrade() {
+            workspace.update(cx, |workspace, cx| {
+                active_editor_is_markdown =
+                    MarkdownPreviewView::resolve_active_item_as_markdown_editor(workspace, cx)
+                        .is_some();
+            });
+        }
+
+        if !active_editor_is_markdown {
+            return None;
+        }
+
+        let tooltip_meta = match self.platform_style {
+            PlatformStyle::Mac => "Option+Click to open in a split",
+            _ => "Alt+Click to open in a split",
+        };
+
+        let button = IconButton::new("toggle-markdown-preview", IconName::Eye)
+            .shape(IconButtonShape::Square)
+            .icon_size(IconSize::Small)
+            .style(ButtonStyle::Subtle)
+            .tooltip(move |cx| {
+                Tooltip::with_meta(
+                    "Preview Markdown",
+                    Some(&markdown_preview::OpenPreview),
+                    tooltip_meta,
+                    cx,
+                )
+            })
+            .on_click(move |_, cx| {
+                if let Some(workspace) = workspace.upgrade() {
+                    workspace.update(cx, |_, cx| {
+                        if cx.modifiers().alt {
+                            cx.dispatch_action(Box::new(OpenPreviewToTheSide));
+                        } else {
+                            cx.dispatch_action(Box::new(OpenPreview));
+                        }
+                    });
+                }
+            });
+
+        Some(button.into_any_element())
+    }
+}