fix: use calculated total 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

@@ -186,7 +186,7 @@ export class Editor
   }
 
   /** @inheritDoc */
-  get naturalHeight(): number {
+  get naturalHeight(): string {
     return this.view.naturalHeight;
   }
 

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

@@ -265,8 +265,14 @@ export class TextEditorView {
   }
 
   /** @inheritDoc */
-  get naturalHeight(): number {
-    return this.contentEditableSurface.scrollHeight;
+  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})`;
   }
 
   /**

src/kullna_editor.ts

@@ -104,8 +104,13 @@ export interface KullnaEditor {
   get dir(): string;
   set dir(dir: string);
 
-  /** Gets the total height of the editor's content. */
-  get naturalHeight(): number;
+  /**
+   * 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.