+
@@ -210,24 +218,32 @@ export function MarkdownEditor({
size="small"
variant="invisible"
onClick={() => setViewMode("preview")}
- sx={{
- fontWeight: viewMode === "preview" ? "semibold" : "normal",
- color: viewMode === "preview" ? "fg.default" : "fg.muted",
- bg: viewMode === "preview" ? "actionListItem.default.hoverBg" : "transparent",
- borderRadius: 2,
- "&:hover": {
- color: "fg.default",
- },
+ style={{
+ fontWeight: viewMode === "preview" ? 500 : 400,
+ backgroundColor:
+ viewMode === "preview"
+ ? "var(--control-transparent-bgColor-hover)"
+ : "transparent",
+ borderRadius: 6,
}}
+ className={styles.editorTab}
+ data-active={viewMode === "preview"}
>
Preview
-
+
{/* Toolbar - uses GitHub's official markdown-toolbar-element */}
{viewMode === "write" && (
-
+
-
@@ -302,10 +319,10 @@ export function MarkdownEditor({
variant="invisible"
/>
-
+
)}
-
+
{/* Content area */}
{viewMode === "write" ? (
@@ -333,115 +350,51 @@ export function MarkdownEditor({
}}
/>
) : (
-