@blankdotpage/cake 0.1.37 → 0.1.39

package/dist/cake/react/index.js

@@ -13,7 +13,9 @@ function toEngineSelection(selection) {
     };
 }
 export const CakeEditor = forwardRef(function CakeEditor(props, outerRef) {
+    const rootRef = useRef(null);
     const containerRef = useRef(null);
+    const extensionsRootRef = useRef(null);
     const engineRef = useRef(null);
     const onChangeRef = useRef(props.onChange);
     const onSelectionChangeRef = useRef(props.onSelectionChange);
@@ -33,8 +35,49 @@ export const CakeEditor = forwardRef(function CakeEditor(props, outerRef) {
         if (!container) {
             return;
         }
+        const extensionsRoot = document.createElement("div");
+        extensionsRoot.className = "cake-extension-overlay";
+        extensionsRoot.contentEditable = "false";
+        document.body.appendChild(extensionsRoot);
+        extensionsRootRef.current = extensionsRoot;
+        let rafId = null;
+        const syncOverlayPosition = () => {
+            rafId = null;
+            if (!extensionsRootRef.current) {
+                return;
+            }
+            const rect = container.getBoundingClientRect();
+            const overlay = extensionsRootRef.current;
+            overlay.style.position = "fixed";
+            overlay.style.top = `${rect.top}px`;
+            overlay.style.left = `${rect.left}px`;
+            overlay.style.width = `${rect.width}px`;
+            overlay.style.height = `${rect.height}px`;
+            overlay.style.pointerEvents = "none";
+            // Important: allow popovers (e.g. mentions) to overflow editor bounds without being clipped.
+            overlay.style.overflow = "visible";
+        };
+        const scheduleSync = () => {
+            if (rafId !== null) {
+                return;
+            }
+            rafId = window.requestAnimationFrame(syncOverlayPosition);
+        };
+        // Initial positioning before engine mounts overlays.
+        syncOverlayPosition();
+        document.addEventListener("scroll", scheduleSync, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", scheduleSync, { passive: true });
+        let resizeObserver = null;
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(scheduleSync);
+            resizeObserver.observe(container);
+        }
         const engine = new CakeEditorEngine({
             container,
+            extensionsRoot,
             value: props.value,
             selection: props.selection ?? undefined,
             extensions: extensionsRef.current,
@@ -54,9 +97,17 @@ export const CakeEditor = forwardRef(function CakeEditor(props, outerRef) {
         engineRef.current = engine;
         setUiComponents(engine.getUIComponents());
         return () => {
+            document.removeEventListener("scroll", scheduleSync, { capture: true });
+            window.removeEventListener("resize", scheduleSync);
+            if (rafId !== null) {
+                window.cancelAnimationFrame(rafId);
+            }
+            resizeObserver?.disconnect();
             engine.destroy();
             engineRef.current = null;
             setUiComponents([]);
+            extensionsRootRef.current = null;
+            extensionsRoot.remove();
         };
     }, []);
     useEffect(() => {
@@ -179,16 +230,25 @@ export const CakeEditor = forwardRef(function CakeEditor(props, outerRef) {
             getActiveMarks: () => engineRef.current?.getActiveMarks() ?? [],
         };
     }, [props.value]);
-    const containerStyle = props.style
-        ? { ...props.style }
-        : {};
-    if (!containerStyle.position) {
-        containerStyle.position = "relative";
-    }
-    const containerClassName = props.className
-        ? `cake ${props.className}`
-        : "cake";
-    return (_jsxs("div", { style: { position: "relative", height: "100%" }, children: [_jsx("div", { ref: containerRef, className: containerClassName, style: containerStyle, "data-placeholder": props.placeholder, onBlur: (event) => {
+    const rootStyle = props.style
+        ? { ...props.style, position: props.style.position ?? "relative" }
+        : { position: "relative" };
+    const rootClassName = props.className
+        ? `cake-root ${props.className}`
+        : "cake-root";
+    const scrollerClassName = props.scrollerClassName
+        ? `cake-scroller ${props.scrollerClassName}`
+        : "cake-scroller";
+    const scrollerBaselineStyle = {
+        height: "100%",
+        width: "100%",
+        overflowY: "auto",
+        overflowX: "hidden",
+    };
+    const scrollerStyle = props.scrollerStyle
+        ? { ...scrollerBaselineStyle, ...props.scrollerStyle }
+        : scrollerBaselineStyle;
+    return (_jsxs("div", { ref: rootRef, className: rootClassName, style: rootStyle, children: [_jsx("div", { ref: containerRef, className: scrollerClassName, "data-placeholder": props.placeholder, style: scrollerStyle, onBlur: (event) => {
                     props.onBlur?.(event.nativeEvent);
                 } }), engineRef.current && uiComponents.length > 0
                 ? createPortal(uiComponents.map((Component, index) => (_jsx(Component, { editor: engineRef.current }, index))), engineRef.current.getOverlayRoot())

package/dist/cake/test/harness.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"harness.d.ts","sourceRoot":"","sources":["../../../src/cake/test/harness.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"harness.d.ts","sourceRoot":"","sources":["../../../src/cake/test/harness.ts"],"names":[],"mappings":"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"}

package/dist/cake/test/harness.js

@@ -9,7 +9,8 @@ export function createTestHarness(valueOrOptions) {
         ? { value: valueOrOptions }
         : valueOrOptions;
     const container = document.createElement("div");
-    container.className = "cake";
+    // Keep `cake` for backwards-compat in tests, but the production scroller class is `cake-scroller`.
+    container.className = "cake cake-scroller";
     container.style.width = "400px";
     container.style.height = "200px";
     container.style.position = "absolute";
@@ -225,6 +226,9 @@ export function createTestHarness(valueOrOptions) {
         if (!caret) {
             return null;
         }
+        if (caret.style.display === "none") {
+            return null;
+        }
         return {
             top: parseFloat(caret.style.top),
             left: parseFloat(caret.style.left),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blankdotpage/cake",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,6 +28,7 @@
     "test": "vitest run",
     "test:browser": "vitest run --project browser",
     "test:browser:ios": "vitest run --project browser-ios",
+    "test:e2e": "playwright test",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "eslint .",
     "format": "prettier --write .",