@blankdotpage/cake 0.1.3 → 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;
@@ -88,6 +89,8 @@ export declare class CakeEngine {
     private selectionDragState;
     private pointerDownPosition;
     private hasMovedSincePointerDown;
+    private lastTouchTime;
+    private isTouchDevice;
     constructor(options: EngineOptions);
     destroy(): void;
     setReadOnly(readOnly: boolean): void;
@@ -125,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;
@@ -7662,6 +7663,7 @@ class CakeEngine {
     this.selectionDragState = null;
     this.pointerDownPosition = null;
     this.hasMovedSincePointerDown = false;
+    this.lastTouchTime = 0;
     this.container = options.container;
     this.extensions = options.extensions ?? bundledExtensions;
     this.runtime = createRuntime(this.extensions);
@@ -7695,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();
@@ -7889,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);
@@ -7920,6 +7932,7 @@ class CakeEngine {
     this.contentRoot.removeEventListener("dragend", this.handleDragEndBound);
   }
   detachListeners() {
+    var _a;
     this.container.removeEventListener(
       "beforeinput",
       this.handleBeforeInputBound
@@ -7939,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);
@@ -8047,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();
@@ -8117,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) {
@@ -8126,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) {
@@ -10074,6 +10095,19 @@ 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 (this.isTouchDevice() || isRecentTouch) {
+      this.contentRoot.classList.add("cake-touch-mode");
+      this.updateCaret(null);
+      this.syncSelectionRects([]);
+      return;
+    }
+    this.contentRoot.classList.remove("cake-touch-mode");
     const lines = getDocLines(this.state.doc);
     const geometry = getSelectionGeometry({
       root: this.contentRoot,
@@ -10309,9 +10343,7 @@ class CakeEngine {
       return;
     }
     if (event.pointerType === "touch") {
-      this.ignoreTouchNativeSelectionUntil = performance.now() + 750;
-      this.suppressSelectionChangeForTick();
-      event.preventDefault();
+      this.lastTouchTime = Date.now();
       return;
     }
     const selection = this.state.selection;

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;
@@ -7660,6 +7661,7 @@ class CakeEngine {
     this.selectionDragState = null;
     this.pointerDownPosition = null;
     this.hasMovedSincePointerDown = false;
+    this.lastTouchTime = 0;
     this.container = options.container;
     this.extensions = options.extensions ?? bundledExtensions;
     this.runtime = createRuntime(this.extensions);
@@ -7693,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();
@@ -7887,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);
@@ -7918,6 +7930,7 @@ class CakeEngine {
     this.contentRoot.removeEventListener("dragend", this.handleDragEndBound);
   }
   detachListeners() {
+    var _a;
     this.container.removeEventListener(
       "beforeinput",
       this.handleBeforeInputBound
@@ -7937,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);
@@ -8045,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();
@@ -8115,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) {
@@ -8124,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) {
@@ -10072,6 +10093,19 @@ 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 (this.isTouchDevice() || isRecentTouch) {
+      this.contentRoot.classList.add("cake-touch-mode");
+      this.updateCaret(null);
+      this.syncSelectionRects([]);
+      return;
+    }
+    this.contentRoot.classList.remove("cake-touch-mode");
     const lines = getDocLines(this.state.doc);
     const geometry = getSelectionGeometry({
       root: this.contentRoot,
@@ -10307,9 +10341,7 @@ class CakeEngine {
       return;
     }
     if (event.pointerType === "touch") {
-      this.ignoreTouchNativeSelectionUntil = performance.now() + 750;
-      this.suppressSelectionChangeForTick();
-      event.preventDefault();
+      this.lastTouchTime = Date.now();
       return;
     }
     const selection = this.state.selection;

package/package.json

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