feat: better previews and consistent previews

src/renderer/components/Editor/Editor.css

@@ -193,10 +193,31 @@
 }
 
 .editor-toolbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.editor-toolbar-left {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
+  justify-content: flex-start;
+}
+
+.editor-toolbar-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.editor-toolbar-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  min-width: 0;
 }
 
 .editor-mode-toggle {
@@ -233,7 +254,6 @@
   border: none;
   cursor: pointer;
   transition: background-color 0.15s;
-  margin-left: auto;
 }
 
 .gallery-button:hover {
@@ -261,107 +281,26 @@
   flex: 1;
   background-color: var(--vscode-input-background);
   border-radius: 4px;
-  padding: 16px;
-  overflow-y: auto;
-  font-size: 14px;
-  line-height: 1.6;
+  overflow: hidden;
   position: relative;
 }
 
-/* Hydration loading overlay */
-.preview-hydrating-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(30, 30, 30, 0.85);
+.editor-preview-frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: var(--vscode-editor-background);
+}
+
+.editor-preview-loading {
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10;
-  border-radius: 4px;
-}
-
-.preview-hydrating-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  color: var(--vscode-foreground);
-  font-size: 14px;
-}
-
-.preview-hydrating-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--vscode-panel-border);
-  border-top-color: var(--vscode-focusBorder);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.editor-preview .preview-content {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.editor-preview h1,
-.editor-preview h2,
-.editor-preview h3 {
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  color: var(--vscode-foreground);
-}
-
-.editor-preview h1 { font-size: 2em; }
-.editor-preview h2 { font-size: 1.5em; }
-.editor-preview h3 { font-size: 1.25em; }
-
-.editor-preview code {
-  background-color: var(--vscode-textCodeBlock-background);
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-family: var(--vscode-editor-font-family);
-}
-
-.editor-preview pre {
-  background-color: var(--vscode-textCodeBlock-background);
-  padding: 12px;
-  border-radius: 6px;
-  overflow-x: auto;
-}
-
-.editor-preview pre code {
-  background: none;
-  padding: 0;
-}
-
-.editor-preview blockquote {
-  border-left: 3px solid var(--vscode-textBlockQuote-border);
-  padding-left: 16px;
-  margin-left: 0;
   color: var(--vscode-descriptionForeground);
 }
 
-.editor-preview a {
-  color: var(--vscode-textLink-foreground);
-}
-
-.editor-preview a:hover {
-  color: var(--vscode-textLink-activeForeground);
-}
-
-.editor-preview img {
-  max-width: 100%;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
 .editor-field-row {
   display: flex;
   gap: 12px;