feat: expose the scroll height

demo.html

@@ -194,8 +194,14 @@ <h3 align="center">A small but feature-rich code editor for the web</h3>
         parent.appendChild(element);
 
         const editor = KullnaEditor.createEditor(element, options);
+
+        const highlight = editor.createHighlight();
+        highlight.lineNumber = 0;
+        highlight.cssClass = 'code-gutter-highlight';
+        highlight.visible = true;
+
         editor.onSelectionFocusChanged(document => {
-          editor.highlightedLine = document.currentLineNumber;
+          highlight.lineNumber = document.currentLineNumber;
         });
         editor.code = defaultValue;
 
@@ -210,7 +216,7 @@ <h3 align="center">A small but feature-rich code editor for the web</h3>
         const standard = demoWithOptions(
           '#demos',
           'standard',
-          'Standard Configuration',
+          'Standard Configuration (Auto-Sizing)',
           {
             language: 'html',
             highlightElement: e => {
@@ -252,6 +258,10 @@ <h3 align="center">A small but feature-rich code editor for the web</h3>
         standardHighlight.lineNumber = 4;
         standardHighlight.visible = true;
         standardHighlight.cssClass = 'breakpoint-highlight';
+        standard.onUpdate(code => {
+          const element = document.getElementById('editor-standard');
+          element.style.height = standard.naturalHeight;
+        });
 
         demoWithOptions(
           '#demos',

src/internals/editor.ts

@@ -185,6 +185,11 @@ export class Editor
     }
   }
 
+  /** @inheritDoc */
+  get naturalHeight(): string {
+    return this.view.naturalHeight;
+  }
+
   /** @inheritDoc */
   scrollToLine(line: number): void {
     this.view.scrollToLine(line);
@@ -361,6 +366,9 @@ export class Editor
       if (this.options.onUpdate) {
         this.options.onUpdate(this.code);
       }
+      if (this.options.onSelectionFocusChanged) {
+        this.options.onSelectionFocusChanged(this.view.document);
+      }
     }
   }
 

src/internals/text_editor/dom/dom_bridge.ts

@@ -68,8 +68,8 @@ export class DomBridge {
     if (document.perceptuallyEquals(oldDocument)) {
       this._onDocumentSelectionChangedCallbacks.forEach(callback => callback(document));
     } else {
-      this._onDocumentContentAndSelectionChangedCallbacks.forEach(callback => callback(document));
       this.recalculateLineMetrics();
+      this._onDocumentContentAndSelectionChangedCallbacks.forEach(callback => callback(document));
     }
   }
 

src/internals/text_editor/text_editor_view.ts

@@ -264,6 +264,17 @@ export class TextEditorView {
     this._bridge.pushToDOM(document);
   }
 
+  /** @inheritDoc */
+  get naturalHeight(): string {
+    const lastLine = this.lineMetrics[this.lineMetrics.length - 1];
+    const bottomContent = lastLine.top + lastLine.height;
+    let bottomPadding = getComputedStyle(this.contentEditableSurface).paddingBottom;
+    if (!bottomPadding || bottomPadding.length === 0) {
+      bottomPadding = '0px';
+    }
+    return `calc(${bottomContent}px + ${bottomPadding})`;
+  }
+
   /**
    * Template pattern for adding an event listener to the DOM and our list.
    *

src/kullna_editor.ts

@@ -104,6 +104,14 @@ export interface KullnaEditor {
   get dir(): string;
   set dir(dir: string);
 
+  /**
+   * Gets the total height of the editor's content as a CSS value such as `123px` or `min(x, y)`.
+   *
+   * @remarks
+   *   Intended to be queried as part of an `onUpdate` implementation.
+   */
+  get naturalHeight(): string;
+
   /**
    * Ensures a specific line number is within view.
    *