fix code preview height change not working

bikeshaving · Feb 29, 2024 · cbec13b · cbec13b
1 parent ad2f083
commit cbec13b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/website/src/components/code-editor.ts b/website/src/components/code-editor.ts
@@ -168,7 +168,6 @@ export function* CodeEditor(
 
 		value = ev.target.value;
 		renderSource = "refresh";
-		currentEdit = ev.detail.edit;
 		this.refresh();
 	});
 
@@ -182,7 +181,6 @@ export function* CodeEditor(
 				selectionRange = selectionRangeFromEdit(edit);
 				keyer.transform(edit);
 				renderSource = "history";
-				currentEdit = edit;
 				this.refresh();
 				return true;
 			}
@@ -197,7 +195,6 @@ export function* CodeEditor(
 				selectionRange = selectionRangeFromEdit(edit);
 				keyer.transform(edit);
 				renderSource = "history";
-				currentEdit = edit;
 				this.refresh();
 				return true;
 			}

diff --git a/website/src/components/code-preview.ts b/website/src/components/code-preview.ts
@@ -20,6 +20,7 @@ function generateIFrameHTML(
 			/>
 		</head>
 		<body>
+		  <!-- TODO: extract these scripts to a separate file or something -->
 			<script>
 				const colorScheme = sessionStorage.getItem("color-scheme") ||
 					(
@@ -35,7 +36,6 @@ function generateIFrameHTML(
 				}
 			</script>
 			<script>
-			{
 				window.addEventListener("load", (ev) => {
 					window.parent.postMessage(
 						JSON.stringify({type: "executed", id: ${id}}),
@@ -66,9 +66,11 @@ function generateIFrameHTML(
 				});
 
 				const obs = new ResizeObserver((entries) => {
-					const height = entries[0].contentRect.height;
-					// has vertical scrollbar
-					if (window.innerWidth > document.documentElement.clientWidth) {
+					const height = Math.max(entries[0].contentRect.height, 100);
+					if (
+						document.documentElement.clientHeight <
+						document.documentElement.scrollHeight
+					) {
 						window.parent.postMessage(
 							JSON.stringify({
 								type: "resize",
@@ -80,10 +82,7 @@ function generateIFrameHTML(
 					}
 				})
 
-				setTimeout(() => {
-					obs.observe(document.documentElement);
-				}, 0);
-			}
+				obs.observe(document.documentElement);
 			</script>
 			<script type="module">${code}</script>
 		</body>

diff --git a/website/src/components/inline-code-block.ts b/website/src/components/inline-code-block.ts
@@ -65,6 +65,7 @@ export function* InlineCodeBlock(
 						width: 100%;
 						border: 1px solid var(--text-color);
 						margin-top: -1px;
+						margin-right: -1px;
 						${editable
 							? `@media (min-width: ${breakpoint}) {
 							max-width: 61.8%;