Refine Mermaid layout settings and default alignment

Author: Fy1ng

assets/settings/default.json

@@ -129,8 +129,8 @@
     "max_width": 800,
     // Whether to constrain top-level Mermaid blocks to `mermaid_max_width`.
     // When disabled, no Mermaid-specific maximum width is applied.
-    // Zed's default layout is preserved when both Mermaid width options
-    // are disabled and mermaid_alignment is "left".
+    // To restore Zed's native layout, disable both Mermaid width options
+    // and set mermaid_alignment to "left".
     "limit_mermaid_width": false,
     // The maximum width, in pixels, of top-level Mermaid blocks when
     // `limit_mermaid_width` is enabled and `mermaid_width_follows_diagram`
@@ -145,7 +145,7 @@
     // "center", or "right". In the default or limited-width layout this
     // aligns the diagram within the Mermaid block; when
     // `mermaid_width_follows_diagram` is enabled, it aligns the block itself.
-    "mermaid_alignment": "left",
+    "mermaid_alignment": "center",
   },
   // Determines the modifier to be used to add multiple cursors with the mouse. The open hover link mouse gestures will adapt such that it do not conflict with the multicursor modifier.
   //

crates/markdown/src/markdown.rs

@@ -1731,9 +1731,9 @@ pub enum MermaidAlignment {
 
 /// Layout overrides for top-level Mermaid diagrams.
 ///
-/// Default values preserve Zed's native Mermaid layout. Diagrams nested in
-/// lists, block quotes, or other constrained parents continue to use their
-/// parent layout.
+/// These defaults describe Zed's native renderer, independently of the
+/// Markdown Preview preference defaults. Nested diagrams use this baseline
+/// to retain their parent layout.
 #[derive(Clone, Copy, Debug, Default, PartialEq)]
 pub struct MermaidLayout {
     /// Optional Mermaid-specific maximum width for the block.

crates/markdown_preview/src/markdown_preview_settings.rs

@@ -3,7 +3,7 @@ use markdown::{MermaidAlignment, MermaidLayout};
 use settings::{IntoGpui, RegisterSetting, Settings};
 
 /// The settings for the markdown preview.
-#[derive(Clone, Copy, Debug, Default, RegisterSetting)]
+#[derive(Clone, Copy, Debug, RegisterSetting)]
 pub struct MarkdownPreviewSettings {
     /// Whether to automatically open Markdown files in the preview.
     pub open_markdown_files_in_preview: bool,
@@ -14,6 +14,12 @@ pub struct MarkdownPreviewSettings {
     pub mermaid_layout: MermaidLayout,
 }
 
+impl Default for MarkdownPreviewSettings {
+    fn default() -> Self {
+        Self::from_settings(&settings::SettingsContent::default())
+    }
+}
+
 impl Settings for MarkdownPreviewSettings {
     fn from_settings(content: &settings::SettingsContent) -> Self {
         let content = content.markdown_preview.clone().unwrap_or_default();
@@ -64,11 +70,51 @@ mod tests {
                 .expect("valid preview settings");
                 let settings = MarkdownPreviewSettings::from_settings(&content);
                 assert_eq!(settings.max_width, limit_content_width.then_some(px(900.)));
-                assert_eq!(settings.mermaid_layout, MermaidLayout::default());
+                assert_eq!(
+                    settings.mermaid_layout,
+                    MermaidLayout {
+                        alignment: MermaidAlignment::Center,
+                        ..MermaidLayout::default()
+                    }
+                );
+                assert!(!settings.mermaid_layout.has_width_override());
             }
         }
     }
 
+    #[test]
+    fn test_mermaid_alignment_defaults_to_center_and_preserves_explicit_choices() {
+        assert_eq!(
+            MarkdownPreviewSettings::default().mermaid_layout.alignment,
+            MermaidAlignment::Center
+        );
+        for (content, expected) in [
+            (json!({}), MermaidAlignment::Center),
+            (json!({"markdown_preview": {}}), MermaidAlignment::Center),
+            (
+                json!({"markdown_preview": {"mermaid_alignment": null}}),
+                MermaidAlignment::Center,
+            ),
+            (
+                json!({"markdown_preview": {"mermaid_alignment": "left"}}),
+                MermaidAlignment::Left,
+            ),
+            (
+                json!({"markdown_preview": {"mermaid_alignment": "center"}}),
+                MermaidAlignment::Center,
+            ),
+            (
+                json!({"markdown_preview": {"mermaid_alignment": "right"}}),
+                MermaidAlignment::Right,
+            ),
+        ] {
+            let content = serde_json::from_value(content).expect("valid preview settings");
+            let settings = MarkdownPreviewSettings::from_settings(&content);
+            assert_eq!(settings.mermaid_layout.alignment, expected);
+            assert!(!settings.mermaid_layout.has_width_override());
+        }
+    }
+
     #[test]
     fn test_mermaid_settings_keep_width_flags_and_alignment_independent() {
         for limit_mermaid_width in [false, true] {

crates/settings_content/src/settings_content.rs

@@ -1304,9 +1304,9 @@ pub enum LineIndicatorFormat {
 #[serde(rename_all = "snake_case")]
 pub enum MermaidAlignment {
     /// Align the diagram to the left.
-    #[default]
     Left,
     /// Center the diagram.
+    #[default]
     Center,
     /// Align the diagram to the right.
     Right,
@@ -1345,8 +1345,8 @@ pub struct MarkdownPreviewSettingsContent {
     pub max_width: Option<PixelSetting>,
     /// Whether to constrain top-level Mermaid blocks to `mermaid_max_width`.
     /// When disabled, no Mermaid-specific maximum width is applied.
-    /// Zed's default layout is preserved when both Mermaid width options
-    /// are disabled and `mermaid_alignment` is `left`.
+    /// To restore Zed's native layout, disable both Mermaid width options
+    /// and set `mermaid_alignment` to `left`.
     ///
     /// Default: false
     pub limit_mermaid_width: Option<bool>,
@@ -1362,7 +1362,7 @@ pub struct MarkdownPreviewSettingsContent {
     /// the Mermaid block. When `mermaid_width_follows_diagram` is enabled,
     /// it aligns the block itself.
     ///
-    /// Default: left
+    /// Default: center
     pub mermaid_alignment: Option<MermaidAlignment>,
     /// Whether top-level Mermaid blocks follow the rendered diagram's 100%
     /// natural width, with enough space for controls, instead of using Zed's

crates/settings_ui/src/components/number_field.rs

@@ -277,6 +277,7 @@ pub struct NumberField<T: NumberFieldType = usize> {
     tab_index: Option<isize>,
     aria_label: Option<SharedString>,
     aria_description: Option<SharedString>,
+    disabled: bool,
 }
 
 impl<T: NumberFieldType> NumberField<T> {
@@ -319,6 +320,7 @@ impl<T: NumberFieldType> NumberField<T> {
             tab_index: None,
             aria_label: None,
             aria_description: None,
+            disabled: false,
         }
     }
 
@@ -342,6 +344,11 @@ impl<T: NumberFieldType> NumberField<T> {
         self
     }
 
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
     pub fn on_change(mut self, on_change: impl Fn(&T, &mut Window, &mut App) + 'static) -> Self {
         self.on_change = Rc::new(on_change);
         self
@@ -390,6 +397,66 @@ fn a11y_value_to_field_value<T: NumberFieldType>(value: f64) -> Option<T> {
 
 impl<T: NumberFieldType> RenderOnce for NumberField<T> {
     fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        if self.disabled {
+            // Invalidate the retained editor's blur callback before removing it
+            // from the element tree, so disabling cannot commit an old draft.
+            self.on_change_state.write(cx, None);
+            if let Some(editor) = self
+                .edit_editor
+                .read(cx)
+                .as_ref()
+                .and_then(|editor| editor.upgrade())
+            {
+                editor.update(cx, |editor, cx| {
+                    editor.set_read_only(true);
+                    editor.set_text(format!("{}", self.value), window, cx);
+                });
+            }
+            self.last_synced_value.write(cx, Some(self.value));
+
+            let border_color = cx.theme().colors().border_variant;
+            let background = cx.theme().colors().surface_background;
+            let button = |icon| {
+                h_flex()
+                    .p_1p5()
+                    .border_1()
+                    .border_color(border_color)
+                    .bg(background)
+                    .child(Icon::new(icon).size(IconSize::Small).color(Color::Disabled))
+            };
+            return h_flex()
+                .id(self.id.clone())
+                .items_stretch()
+                .role(Role::SpinButton)
+                .when_some(self.aria_label, |this, label| this.aria_label(label))
+                .when_some(self.aria_description, |this, description| {
+                    this.aria_description(description)
+                })
+                .when_some(a11y_numeric_value(&self.value), |this, value| {
+                    this.aria_numeric_value(value)
+                })
+                .child(button(IconName::Dash).rounded_tl_sm().rounded_bl_sm())
+                .child(
+                    h_flex()
+                        .min_w_16()
+                        .px_1()
+                        .border_y_1()
+                        .border_color(border_color)
+                        .bg(background)
+                        .justify_center()
+                        .child(Label::new((self.format)(&self.value)).color(Color::Disabled)),
+                )
+                .child(button(IconName::Plus).rounded_tr_sm().rounded_br_sm())
+                .into_any_element();
+        }
+        if let Some(editor) = self
+            .edit_editor
+            .read(cx)
+            .as_ref()
+            .and_then(|editor| editor.upgrade())
+        {
+            editor.update(cx, |editor, _| editor.set_read_only(false));
+        }
         // Sync the on_change callback to Entity state so focus_out handlers can access it
         self.sync_on_change_state(cx);
 
@@ -834,6 +901,7 @@ impl<T: NumberFieldType> RenderOnce for NumberField<T> {
                         )
                     })
             })
+            .into_any_element()
     }
 }
 
@@ -884,3 +952,110 @@ impl Component for NumberField<usize> {
             .into_any_element()
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    struct NumberFieldTestView {
+        value: usize,
+        disabled: bool,
+        changes: usize,
+        editor_state: Option<Entity<Option<WeakEntity<Editor>>>>,
+        callback_state: Option<Entity<Option<OnChangeCallback<usize>>>>,
+    }
+
+    impl Render for NumberFieldTestView {
+        fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+            let field = NumberField::new("number-field", self.value, window, cx)
+                .mode(NumberFieldMode::Edit, cx)
+                .disabled(self.disabled)
+                .on_change(cx.listener(|this, value, _, cx| {
+                    this.value = *value;
+                    this.changes += 1;
+                    cx.notify();
+                }));
+            self.editor_state = Some(field.edit_editor.clone());
+            self.callback_state = Some(field.on_change_state.clone());
+            div().child(field)
+        }
+    }
+
+    #[gpui::test]
+    fn disabled_number_field_discards_pending_edit_and_reenables(cx: &mut gpui::TestAppContext) {
+        cx.update(crate::test::register_settings);
+        let (view, cx) = cx.add_window_view(|_, _| NumberFieldTestView {
+            value: 1200,
+            disabled: false,
+            changes: 0,
+            editor_state: None,
+            callback_state: None,
+        });
+        cx.run_until_parked();
+
+        let editor = view.read_with(cx, |view, cx| {
+            view.editor_state
+                .as_ref()
+                .expect("editor state")
+                .read(cx)
+                .as_ref()
+                .and_then(|editor| editor.upgrade())
+                .expect("number editor")
+        });
+        cx.update(|window, cx| {
+            editor.update(cx, |editor, cx| {
+                window.focus(&editor.focus_handle(cx), cx);
+                editor.set_text("9999", window, cx);
+            });
+        });
+        view.update(cx, |view, cx| {
+            view.disabled = true;
+            cx.notify();
+        });
+        cx.run_until_parked();
+        assert!(editor.read_with(cx, |editor, cx| editor.read_only(cx)));
+        assert_eq!(editor.read_with(cx, |editor, cx| editor.text(cx)), "1200");
+        assert!(view.read_with(cx, |view, cx| {
+            view.callback_state
+                .as_ref()
+                .expect("callback state")
+                .read(cx)
+                .is_none()
+        }));
+        cx.update(|window, cx| window.blur(cx));
+        cx.run_until_parked();
+        assert_eq!(
+            view.read_with(cx, |view, _| (view.value, view.changes)),
+            (1200, 0)
+        );
+
+        view.update(cx, |view, cx| {
+            view.disabled = false;
+            cx.notify();
+        });
+        cx.run_until_parked();
+        let (editor, on_change) = view.read_with(cx, |view, cx| {
+            (
+                view.editor_state
+                    .as_ref()
+                    .expect("editor state")
+                    .read(cx)
+                    .as_ref()
+                    .and_then(|editor| editor.upgrade())
+                    .expect("number editor"),
+                view.callback_state
+                    .as_ref()
+                    .expect("callback state")
+                    .read(cx)
+                    .clone()
+                    .expect("enabled callback"),
+            )
+        });
+        assert!(!editor.read_with(cx, |editor, cx| editor.read_only(cx)));
+        cx.update(|window, cx| on_change(&1300, window, cx));
+        assert_eq!(
+            view.read_with(cx, |view, _| (view.value, view.changes)),
+            (1300, 1)
+        );
+    }
+}