Add preview to the markdown files being created (#4293)

quiltdata · Jan 24, 2025 · 5984fab · 5984fab
1 parent f4c30ee
commit 5984fab
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 27 deletions.
diff --git a/catalog/CHANGELOG.md b/catalog/CHANGELOG.md
@@ -18,6 +18,7 @@ where verb is one of
 
 ## Changes
 
+- [Fixed] Add Markdown preview when creating the Markdown file ([#4293](https://github.com/quiltdata/quilt/pull/4293))
 - [Added] Visual editor for the Bucket UI config (`.quilt/catalog/config.yaml`) ([#4261](https://github.com/quiltdata/quilt/pull/4261))
 - [Added] Button to add a `quilt_summarize.json` to a package ([#4273](https://github.com/quiltdata/quilt/pull/4273))
 - [Added] Admin: Link to bucket UI config from the bucket settings screen ([#4273](https://github.com/quiltdata/quilt/pull/4273))

diff --git a/catalog/app/containers/Bucket/File/File.js b/catalog/app/containers/Bucket/File/File.js
@@ -210,6 +210,42 @@ function CenteredProgress() {
   )
 }
 
+const useFileEditorSectionStyles = M.makeStyles(() => ({
+  title: {
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
+  },
+  button: {
+    margin: '0 0 0 auto',
+    textTransform: 'none',
+  },
+}))
+
+function FileEditorSection({ preview, onPreview, children }) {
+  const classes = useFileEditorSectionStyles()
+  return (
+    <Section
+      icon="text_fields"
+      heading={
+        <div className={classes.title}>
+          Edit content
+          {onPreview && (
+            <FileEditor.PreviewButton
+              className={classes.button}
+              preview={preview}
+              onPreview={onPreview}
+            />
+          )}
+        </div>
+      }
+      expandable={false}
+    >
+      {children}
+    </Section>
+  )
+}
+
 const useStyles = M.makeStyles((t) => ({
   actions: {
     alignItems: 'center',
@@ -251,15 +287,6 @@ const useStyles = M.makeStyles((t) => ({
     marginBottom: t.spacing(2),
     flexWrap: 'wrap',
   },
-  editTitle: {
-    alignItems: 'center',
-    display: 'flex',
-    flexGrow: 1,
-  },
-  editButton: {
-    margin: '0 0 0 auto',
-    textTransform: 'none',
-  },
   preview: {
     width: '100%',
   },
@@ -490,27 +517,16 @@ export default function File() {
                 prefs,
               )}
               {editorState.editing ? (
-                <Section
-                  icon="text_fields"
-                  heading={
-                    <div className={classes.editTitle}>
-                      Edit content
-                      {editorState.onPreview && (
-                        <FileEditor.PreviewButton
-                          className={classes.editButton}
-                          {...editorState}
-                        />
-                      )}
-                    </div>
-                  }
-                  expandable={false}
+                <FileEditorSection
+                  onPreview={editorState.onPreview}
+                  preview={editorState.preview}
                 >
                   <FileEditor.Editor
                     {...editorState}
                     className={classes.editor}
                     handle={handle}
                   />
-                </Section>
+                </FileEditorSection>
               ) : (
                 <Section icon="remove_red_eye" heading="Preview" defaultExpanded>
                   <div className={classes.preview}>
@@ -528,9 +544,17 @@ export default function File() {
           ),
           _: () =>
             editorState.editing ? (
-              <Section icon="text_fields" heading="Edit content" defaultExpanded>
-                <FileEditor.Editor {...editorState} empty handle={handle} />
-              </Section>
+              <FileEditorSection
+                onPreview={editorState.onPreview}
+                preview={editorState.preview}
+              >
+                <FileEditor.Editor
+                  {...editorState}
+                  className={classes.editor}
+                  empty
+                  handle={handle}
+                />
+              </FileEditorSection>
             ) : (
               <>
                 <Message headline="No Such Object">