@blankdotpage/cake 0.1.4 → 0.1.5

package/dist/cake/engine/cake-engine.d.ts

@@ -56,6 +56,7 @@ export declare class CakeEngine {
     private spellCheckEnabled;
     private extensionsRoot;
     private placeholderRoot;
+    private resizeObserver;
     private lastFocusRect;
     private verticalNavGoalX;
     private lastRenderPerf;
@@ -89,6 +90,7 @@ export declare class CakeEngine {
     private pointerDownPosition;
     private hasMovedSincePointerDown;
     private lastTouchTime;
+    private isTouchDevice;
     constructor(options: EngineOptions);
     destroy(): void;
     setReadOnly(readOnly: boolean): void;
@@ -126,7 +128,7 @@ export declare class CakeEngine {
     private render;
     private isEmptyParagraphDoc;
     private updatePlaceholder;
-    private syncPlaceholderPadding;
+    private syncPlaceholderPosition;
     private updateContentRootAttributes;
     private applySelection;
     private handleSelectionChange;

package/dist/index.cjs

@@ -7627,6 +7627,7 @@ class CakeEngine {
     this.lastSelectionRects = null;
     this.extensionsRoot = null;
     this.placeholderRoot = null;
+    this.resizeObserver = null;
     this.lastFocusRect = null;
     this.verticalNavGoalX = null;
     this.lastRenderPerf = null;
@@ -7696,6 +7697,11 @@ class CakeEngine {
     }
     return target instanceof Node && (target === this.contentRoot || this.contentRoot.contains(target));
   }
+  // Detect if this is a touch-primary device (mobile/tablet)
+  // We check for touch support AND coarse pointer to exclude laptops with touchscreens
+  isTouchDevice() {
+    return "ontouchstart" in window && window.matchMedia("(pointer: coarse)").matches;
+  }
   destroy() {
     this.detachListeners();
     this.uninstallCaretRangeFromPointShim();
@@ -7890,6 +7896,11 @@ class CakeEngine {
     );
     this.container.addEventListener("scroll", this.handleScrollBound);
     window.addEventListener("resize", this.handleResizeBound);
+    this.resizeObserver = new ResizeObserver(() => {
+      this.syncPlaceholderPosition();
+      this.scheduleOverlayUpdate();
+    });
+    this.resizeObserver.observe(this.container);
     this.container.addEventListener("click", this.handleClickBound);
     this.container.addEventListener("keydown", this.handleKeyDownBound);
     this.container.addEventListener("paste", this.handlePasteBound);
@@ -7921,6 +7932,7 @@ class CakeEngine {
     this.contentRoot.removeEventListener("dragend", this.handleDragEndBound);
   }
   detachListeners() {
+    var _a;
     this.container.removeEventListener(
       "beforeinput",
       this.handleBeforeInputBound
@@ -7940,6 +7952,8 @@ class CakeEngine {
     );
     this.container.removeEventListener("scroll", this.handleScrollBound);
     window.removeEventListener("resize", this.handleResizeBound);
+    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+    this.resizeObserver = null;
     this.container.removeEventListener("click", this.handleClickBound);
     this.container.removeEventListener("keydown", this.handleKeyDownBound);
     this.container.removeEventListener("paste", this.handlePasteBound);
@@ -8048,6 +8062,9 @@ class CakeEngine {
       }
       this.contentRoot = document.createElement("div");
       this.contentRoot.className = "cake-content";
+      if (this.isTouchDevice()) {
+        this.contentRoot.classList.add("cake-touch-mode");
+      }
       this.updateContentRootAttributes();
       const overlay = this.ensureOverlayRoot();
       const extensionsRoot = this.ensureExtensionsRoot();
@@ -8118,6 +8135,8 @@ class CakeEngine {
     if (!this.placeholderRoot) {
       this.placeholderRoot = document.createElement("div");
       this.placeholderRoot.className = "cake-placeholder";
+      this.placeholderRoot.style.position = "absolute";
+      this.placeholderRoot.style.pointerEvents = "none";
     }
     if (!shouldShow) {
       if (this.placeholderRoot.isConnected) {
@@ -8127,20 +8146,21 @@ class CakeEngine {
       return;
     }
     this.placeholderRoot.textContent = placeholderText ?? "";
-    this.syncPlaceholderPadding();
     if (!this.placeholderRoot.isConnected) {
       this.container.prepend(this.placeholderRoot);
     }
+    this.syncPlaceholderPosition();
   }
-  syncPlaceholderPadding() {
-    if (!this.placeholderRoot) {
+  syncPlaceholderPosition() {
+    if (!this.placeholderRoot || !this.contentRoot) {
       return;
     }
-    const style = window.getComputedStyle(this.container);
-    this.placeholderRoot.style.paddingTop = style.paddingTop;
-    this.placeholderRoot.style.paddingRight = style.paddingRight;
-    this.placeholderRoot.style.paddingBottom = style.paddingBottom;
-    this.placeholderRoot.style.paddingLeft = style.paddingLeft;
+    const containerRect = this.container.getBoundingClientRect();
+    const contentRect = this.contentRoot.getBoundingClientRect();
+    this.placeholderRoot.style.top = `${contentRect.top - containerRect.top}px`;
+    this.placeholderRoot.style.left = `${contentRect.left - containerRect.left}px`;
+    this.placeholderRoot.style.width = `${contentRect.width}px`;
+    this.placeholderRoot.style.height = `${contentRect.height}px`;
   }
   updateContentRootAttributes() {
     if (!this.contentRoot) {
@@ -10075,8 +10095,13 @@ class CakeEngine {
     if (!this.overlayRoot || !this.contentRoot) {
       return;
     }
+    if (!this.hasFocus()) {
+      this.updateCaret(null);
+      this.syncSelectionRects([]);
+      return;
+    }
     const isRecentTouch = Date.now() - this.lastTouchTime < 2e3;
-    if (isRecentTouch) {
+    if (this.isTouchDevice() || isRecentTouch) {
       this.contentRoot.classList.add("cake-touch-mode");
       this.updateCaret(null);
       this.syncSelectionRects([]);

package/dist/index.js

@@ -7625,6 +7625,7 @@ class CakeEngine {
     this.lastSelectionRects = null;
     this.extensionsRoot = null;
     this.placeholderRoot = null;
+    this.resizeObserver = null;
     this.lastFocusRect = null;
     this.verticalNavGoalX = null;
     this.lastRenderPerf = null;
@@ -7694,6 +7695,11 @@ class CakeEngine {
     }
     return target instanceof Node && (target === this.contentRoot || this.contentRoot.contains(target));
   }
+  // Detect if this is a touch-primary device (mobile/tablet)
+  // We check for touch support AND coarse pointer to exclude laptops with touchscreens
+  isTouchDevice() {
+    return "ontouchstart" in window && window.matchMedia("(pointer: coarse)").matches;
+  }
   destroy() {
     this.detachListeners();
     this.uninstallCaretRangeFromPointShim();
@@ -7888,6 +7894,11 @@ class CakeEngine {
     );
     this.container.addEventListener("scroll", this.handleScrollBound);
     window.addEventListener("resize", this.handleResizeBound);
+    this.resizeObserver = new ResizeObserver(() => {
+      this.syncPlaceholderPosition();
+      this.scheduleOverlayUpdate();
+    });
+    this.resizeObserver.observe(this.container);
     this.container.addEventListener("click", this.handleClickBound);
     this.container.addEventListener("keydown", this.handleKeyDownBound);
     this.container.addEventListener("paste", this.handlePasteBound);
@@ -7919,6 +7930,7 @@ class CakeEngine {
     this.contentRoot.removeEventListener("dragend", this.handleDragEndBound);
   }
   detachListeners() {
+    var _a;
     this.container.removeEventListener(
       "beforeinput",
       this.handleBeforeInputBound
@@ -7938,6 +7950,8 @@ class CakeEngine {
     );
     this.container.removeEventListener("scroll", this.handleScrollBound);
     window.removeEventListener("resize", this.handleResizeBound);
+    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+    this.resizeObserver = null;
     this.container.removeEventListener("click", this.handleClickBound);
     this.container.removeEventListener("keydown", this.handleKeyDownBound);
     this.container.removeEventListener("paste", this.handlePasteBound);
@@ -8046,6 +8060,9 @@ class CakeEngine {
       }
       this.contentRoot = document.createElement("div");
       this.contentRoot.className = "cake-content";
+      if (this.isTouchDevice()) {
+        this.contentRoot.classList.add("cake-touch-mode");
+      }
       this.updateContentRootAttributes();
       const overlay = this.ensureOverlayRoot();
       const extensionsRoot = this.ensureExtensionsRoot();
@@ -8116,6 +8133,8 @@ class CakeEngine {
     if (!this.placeholderRoot) {
       this.placeholderRoot = document.createElement("div");
       this.placeholderRoot.className = "cake-placeholder";
+      this.placeholderRoot.style.position = "absolute";
+      this.placeholderRoot.style.pointerEvents = "none";
     }
     if (!shouldShow) {
       if (this.placeholderRoot.isConnected) {
@@ -8125,20 +8144,21 @@ class CakeEngine {
       return;
     }
     this.placeholderRoot.textContent = placeholderText ?? "";
-    this.syncPlaceholderPadding();
     if (!this.placeholderRoot.isConnected) {
       this.container.prepend(this.placeholderRoot);
     }
+    this.syncPlaceholderPosition();
   }
-  syncPlaceholderPadding() {
-    if (!this.placeholderRoot) {
+  syncPlaceholderPosition() {
+    if (!this.placeholderRoot || !this.contentRoot) {
       return;
     }
-    const style = window.getComputedStyle(this.container);
-    this.placeholderRoot.style.paddingTop = style.paddingTop;
-    this.placeholderRoot.style.paddingRight = style.paddingRight;
-    this.placeholderRoot.style.paddingBottom = style.paddingBottom;
-    this.placeholderRoot.style.paddingLeft = style.paddingLeft;
+    const containerRect = this.container.getBoundingClientRect();
+    const contentRect = this.contentRoot.getBoundingClientRect();
+    this.placeholderRoot.style.top = `${contentRect.top - containerRect.top}px`;
+    this.placeholderRoot.style.left = `${contentRect.left - containerRect.left}px`;
+    this.placeholderRoot.style.width = `${contentRect.width}px`;
+    this.placeholderRoot.style.height = `${contentRect.height}px`;
   }
   updateContentRootAttributes() {
     if (!this.contentRoot) {
@@ -10073,8 +10093,13 @@ class CakeEngine {
     if (!this.overlayRoot || !this.contentRoot) {
       return;
     }
+    if (!this.hasFocus()) {
+      this.updateCaret(null);
+      this.syncSelectionRects([]);
+      return;
+    }
     const isRecentTouch = Date.now() - this.lastTouchTime < 2e3;
-    if (isRecentTouch) {
+    if (this.isTouchDevice() || isRecentTouch) {
       this.contentRoot.classList.add("cake-touch-mode");
       this.updateCaret(null);
       this.syncSelectionRects([]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blankdotpage/cake",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",