Size editor to content and force pan-y for touch events (#271)

Author: georgestagg

ggsql-wasm/demo/src/quarto/editor.ts

@@ -176,15 +176,8 @@ export interface EditorInstance {
   editor: monaco.editor.IStandaloneCodeEditor;
 }
 
-const LINE_HEIGHT = 20;
 const PADDING_TOP = 8;
 const PADDING_BOTTOM = 8;
-const MAX_EDITOR_HEIGHT = 400;
-
-function editorHeight(lineCount: number): number {
-  const contentHeight = lineCount * LINE_HEIGHT + PADDING_TOP + PADDING_BOTTOM;
-  return Math.min(contentHeight, MAX_EDITOR_HEIGHT);
-}
 
 export async function createEditor(
   container: HTMLElement,
@@ -193,9 +186,6 @@ export async function createEditor(
 ): Promise<EditorInstance> {
   await ensureLanguageRegistered(siteRoot);
 
-  const lineCount = initialValue.split("\n").length;
-  container.style.height = editorHeight(lineCount) + "px";
-
   const editor = monaco.editor.create(container, {
     value: initialValue,
     language: "ggsql",
@@ -224,8 +214,8 @@ export async function createEditor(
 
   // Auto-resize editor height to content
   editor.onDidContentSizeChange(() => {
-    const newLineCount = editor.getModel()?.getLineCount() || lineCount;
-    container.style.height = editorHeight(newLineCount) + "px";
+    const contentHeight = editor.getContentHeight();
+    container.style.height = contentHeight + "px";
     editor.layout();
   });
 

ggsql-wasm/demo/src/quarto/styles.css

@@ -29,6 +29,10 @@
   display: none;
 }
 
+.ggsql-editor-wrapper .monaco-editor .overflow-guard {
+  touch-action: pan-y !important;
+}
+
 .ggsql-error-display.visible {
   display: block;
 }