@seamlet/astro 0.11.1 → 0.11.3

package/dist/bridge.js

@@ -372,11 +372,57 @@ function createLayoutReports(document2, report) {
   };
 }
 
+// src/bridge/page-presses.ts
+function followPresses(document2, onRelease) {
+  const view = document2.defaultView;
+  let isPressed = false;
+  let releaseTimer;
+  const press = () => {
+    clearTimeout(releaseTimer);
+    isPressed = true;
+  };
+  const release = () => {
+    if (!isPressed) return;
+    isPressed = false;
+    releaseTimer = setTimeout(onRelease, 0);
+  };
+  const releaseOnMove = (event) => {
+    if (event.buttons === 0) release();
+  };
+  const listeners = [
+    ["pointerdown", press],
+    ["pointerup", release],
+    ["pointercancel", release],
+    ["pointermove", releaseOnMove]
+  ];
+  for (const [type, listener] of listeners) {
+    document2.addEventListener(type, listener, true);
+  }
+  view?.addEventListener("blur", release);
+  return {
+    isPressed: () => isPressed,
+    stop: () => {
+      clearTimeout(releaseTimer);
+      for (const [type, listener] of listeners) {
+        document2.removeEventListener(type, listener, true);
+      }
+      view?.removeEventListener("blur", release);
+    }
+  };
+}
+
 // src/bridge/page-rendering.ts
 function createPageRenderer(options) {
   let request;
+  let heldPage;
+  const show = (html) => {
+    if (!options.canReplacePage()) return;
+    replacePageBody(options.document, html);
+    options.onRendered();
+  };
   const render2 = (content) => {
     request?.abort();
+    heldPage = void 0;
     const currentRequest = new AbortController();
     request = currentRequest;
     fetchRenderedPage(
@@ -384,18 +430,27 @@ function createPageRenderer(options) {
       content,
       currentRequest.signal
     ).then((html) => {
-      if (!options.canReplacePage()) return;
-      replacePageBody(options.document, html);
-      options.onRendered();
+      if (options.isPagePressed()) {
+        heldPage = html;
+        return;
+      }
+      show(html);
     }).catch((error) => {
       if (currentRequest.signal.aborted) return;
       options.onFailed(error);
     });
   };
+  const showHeldPage = () => {
+    const html = heldPage;
+    heldPage = void 0;
+    if (html !== void 0) show(html);
+  };
   return {
     render: render2,
+    showHeldPage,
     stop: () => {
       request?.abort();
+      heldPage = void 0;
     }
   };
 }
@@ -426,6 +481,38 @@ function replacePageBody(document2, html) {
   restoreRevealedParts(document2, revealed);
 }
 
+// src/bridge/editable-elements.ts
+var OUTLINE = "outline";
+var NO_OUTLINE = "none";
+var IMPORTANT = "important";
+var keptOutlines = /* @__PURE__ */ new WeakMap();
+function makeEditable(element, editable) {
+  element.setAttribute("contenteditable", editable);
+  if (keptOutlines.has(element)) return;
+  const { style } = element;
+  keptOutlines.set(element, {
+    value: style.getPropertyValue(OUTLINE),
+    priority: style.getPropertyPriority(OUTLINE)
+  });
+  style.setProperty(OUTLINE, NO_OUTLINE, IMPORTANT);
+}
+function makeUneditable(element) {
+  element.removeAttribute("contenteditable");
+  const kept = keptOutlines.get(element);
+  if (kept === void 0) return;
+  keptOutlines.delete(element);
+  restoreOutline(element, kept);
+}
+function restoreOutline(element, kept) {
+  const { style } = element;
+  if (kept.value === "") {
+    style.removeProperty(OUTLINE);
+  } else {
+    style.setProperty(OUTLINE, kept.value, kept.priority);
+  }
+  if (style.length === 0) element.removeAttribute("style");
+}
+
 // src/bridge/element-text.ts
 var LINE_BREAK = "\n";
 var NO_BREAK_SPACE = /\u00a0/gu;
@@ -505,7 +592,7 @@ function startInlineTextEditing(element, options) {
     element.removeEventListener("input", reportInput);
     element.removeEventListener("keydown", endOnKey);
     element.removeEventListener("blur", endOnBlur);
-    element.removeAttribute("contenteditable");
+    makeUneditable(element);
   };
   let hasEnded = false;
   const end = (outcome) => {
@@ -514,7 +601,7 @@ function startInlineTextEditing(element, options) {
     stop();
     options.onEnd(outcome);
   };
-  element.setAttribute("contenteditable", EDITABLE_AS_PLAIN_TEXT);
+  makeEditable(element, EDITABLE_AS_PLAIN_TEXT);
   element.addEventListener("input", reportInput);
   element.addEventListener("keydown", endOnKey);
   element.addEventListener("blur", endOnBlur);
@@ -653,7 +740,7 @@ function startRichTextEditing(element, options) {
     document2.removeEventListener("selectionchange", followSelection);
     document2.removeEventListener("scroll", scheduleReport, true);
     view?.removeEventListener("resize", scheduleReport);
-    element.removeAttribute("contenteditable");
+    makeUneditable(element);
   };
   let hasEnded = false;
   const end = (outcome) => {
@@ -663,7 +750,7 @@ function startRichTextEditing(element, options) {
     options.onSelect(void 0);
     options.onEnd(outcome);
   };
-  element.setAttribute("contenteditable", EDITABLE_AS_RICH_TEXT);
+  makeEditable(element, EDITABLE_AS_RICH_TEXT);
   element.addEventListener("input", reportInput);
   element.addEventListener("keydown", pressKey);
   element.addEventListener("paste", pastePlainText);
@@ -749,7 +836,7 @@ function createPageTyping(options) {
     clearTimeout(prepared.timer);
     if (!isTyped && stopEditing === void 0) {
       prepared.element.blur();
-      prepared.element.removeAttribute("contenteditable");
+      makeUneditable(prepared.element);
     }
     prepared = void 0;
   };
@@ -757,7 +844,7 @@ function createPageTyping(options) {
     const isTypedAlready = element.hasAttribute("contenteditable");
     if (isTypedAlready) return;
     takePrepared(false);
-    element.setAttribute("contenteditable", EDITABLE_VALUES[kind]);
+    makeEditable(element, EDITABLE_VALUES[kind]);
     element.focus({ preventScroll: true });
     const timer = setTimeout(() => {
       takePrepared(false);
@@ -823,7 +910,7 @@ function createPageTyping(options) {
   };
   return {
     prepare,
-    isTyping: () => stopEditing !== void 0,
+    isTyping: () => stopEditing !== void 0 || prepared !== void 0,
     start,
     startRich,
     format: (format) => richEditing?.format(format),
@@ -864,10 +951,14 @@ function connectPage(document2, schema, send) {
     send({ type: "layout", layout: measured });
   });
   const typing = createPageTyping({ document: document2, send, onInput: layout.schedule });
+  const presses = followPresses(document2, () => {
+    renderer.showHeldPage();
+  });
   const renderer = createPageRenderer({
     document: document2,
     // Replacing the page under a text being typed would throw the typing away.
     canReplacePage: () => !typing.isTyping(),
+    isPagePressed: presses.isPressed,
     onRendered: () => {
       layout.reportNow();
       send({ type: "rendered" });
@@ -949,6 +1040,7 @@ function connectPage(document2, schema, send) {
     stop: () => {
       typing.stop();
       renderer.stop();
+      presses.stop();
       layout.stop();
       stopListening();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlet/astro",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "Connects an Astro site to the Seamlet CMS: the schema of its content, the preview the editor frames, and its published content.",
   "license": "MIT",
   "type": "module",