Adds a formatted tab including an apply button.

src/editor/cm6-setup.ts

@@ -338,6 +338,27 @@ export function createReadOnlyEditor(
     themeCompartment.of(theme === "dark" ? oneDark : []),
     EditorState.readOnly.of(true),
     EditorViewCore.editable.of(false),
+
+    EditorView.theme({
+      "&": {
+        fontSize: "14px",
+        fontFamily:
+          "'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace",
+      },
+      ".cm-content": {
+        padding: "16px",
+      },
+      ".cm-editor": {
+        borderRadius: "4px",
+        border: "1px solid var(--border-color, #e1e5e9)",
+      },
+      ".cm-scroller": {
+        borderRadius: "4px",
+      },
+      ".cm-line": {
+        lineHeight: "1.4",
+      },
+    }),
   ];
 
   const state = EditorState.create({

src/index.html

@@ -118,6 +118,16 @@
                         >
                             TYPES
                         </button>
+                        <button
+                            class="stage-button"
+                            role="tab"
+                            aria-selected="false"
+                            aria-controls="formatted-panel"
+                            id="formattedBtn"
+                            tabindex="-1"
+                        >
+                            FORMATTED
+                        </button>
                     </div>
                 </div>
                 <div class="output-content" role="tabpanel" id="outputContent" aria-labelledby="diagnosticsBtn">