@seamlet/astro 0.7.0 → 0.8.0

package/README.md

@@ -162,6 +162,8 @@ import RichText from "@seamlet/astro/components/RichText.astro";
 </style>
 ```
 
+When the marked element holds the component alone, the editor types the text right on the page: a person clicks a paragraph and types, marks the selected words bold or italic (⌘B, ⌘I or the toolbar beside the selection) and puts a link on them. The element is then rendered with the same elements the component puts out, so style them from around it, never by classes of your own on them.
+
 `plainTextOf` gives its words without marks, for a page title or a description.
 
 ## Presets
@@ -216,7 +218,7 @@ What was opened stays open while the page is rendered anew after every edit.
 ## What the integration adds
 
 - `/preview` and `/preview/<page>`: the preview the CMS's editor frames. `GET` shows the published content; `POST` with the content as JSON shows that content without saving it, which is how the editor shows every edit at once. Only the CMS may frame it (`Content-Security-Policy: frame-ancestors`), and it is never indexed or cached.
-- The bridge on the preview: it tells the editor where the marked elements are and what a person does on the page, and types texts in place.
+- The bridge on the preview: it tells the editor where the marked elements are and what a person does on the page, and types texts in place, formatted ones too.
 - `/seamlet-photos/<address>`: the site's own photo at an address its content gives it, found by `photos` of `defineSeamletSite`, for the CMS's editor.
 - `/media/<site>/<file>`: the photos uploaded in the CMS, taken from it on request; a static build copies every uploaded photo its built pages refer to next to them, so a static host serves them too.
 

package/dist/bridge.d.ts

@@ -1,6 +1,6 @@
-import { F as Fields } from './content-DeBXwSmg.js';
-import { P as PageMessage, E as EditorMessage } from './messages-ClePO8N_.js';
-import './parse-content-DqToE6I6.js';
+import { F as Fields } from './content-6k-E7NWf.js';
+import { P as PageMessage, E as EditorMessage } from './messages-Dx0jNy3N.js';
+import './parse-content-C9ldnmvj.js';
 
 interface BridgeOptions {
     /** The origin of the CMS whose editor may frame the page, such as `https://cms.example.com`. */

package/dist/bridge.js

@@ -2,15 +2,30 @@ import {
   PROTOCOL_VERSION,
   carriesFiles,
   closestMarkedPath,
+  formatsAt,
   imageFieldAt,
+  insertPlainText,
+  isCollapsed,
+  linkSelectionAt,
+  rangeOf,
   readEditorMessage,
-  shortcutOf
-} from "./chunk-4YLS3VPT.js";
+  readRichTextFrom,
+  readSelectionFrom,
+  renderInlineRichText,
+  renderRichText,
+  selectIn,
+  setLink,
+  shortcutOf,
+  toggleList,
+  toggleMark
+} from "./chunk-27XIZEVS.js";
 import {
   FIELD_PATH_ATTRIBUTE,
   REVEALED_ATTRIBUTE,
   REVEAL_ATTRIBUTE,
-  REVEAL_EVENT
+  REVEAL_EVENT,
+  asOneParagraph,
+  readRichText
 } from "./chunk-ZUJEM3P7.js";
 
 // src/bridge/page-markers.ts
@@ -28,6 +43,10 @@ function linkAround(target) {
   const isLink = isHtmlElement(element) && typeof href === "string";
   return isLink ? { element, href } : void 0;
 }
+function isInTypedText(target) {
+  const editable = asElement(target)?.closest("[contenteditable]");
+  return editable !== null && editable !== void 0;
+}
 function findMarkedElement(document2, path) {
   const element = document2.querySelector(
     `[${FIELD_PATH_ATTRIBUTE}="${CSS.escape(path)}"]`
@@ -170,7 +189,7 @@ var DRAG_GONE_AFTER_MS = 150;
 function listenToPage(document2, listeners) {
   const view = document2.defaultView;
   const hover = (event) => {
-    const link = nearerLink(event.target);
+    const link = linkToFollow(event.target);
     listeners.onHover(
       link === void 0 ? markedElementAround(event.target)?.path : void 0
     );
@@ -182,7 +201,7 @@ function listenToPage(document2, listeners) {
   };
   const click = (event) => {
     event.preventDefault();
-    const link = nearerLink(event.target);
+    const link = linkToFollow(event.target);
     if (link !== void 0) {
       listeners.onLinkClick(link);
       return;
@@ -256,6 +275,9 @@ function listenToPage(document2, listeners) {
     view?.removeEventListener("resize", listeners.onLayoutChange);
   };
 }
+function linkToFollow(target) {
+  return isInTypedText(target) ? void 0 : nearerLink(target);
+}
 function nearerLink(target) {
   const link = linkAround(target);
   const marked = markedElementAround(target);
@@ -326,7 +348,7 @@ function createLayoutReports(document2, report) {
 // src/bridge/page-rendering.ts
 function createPageRenderer(options) {
   let request;
-  const render = (content) => {
+  const render2 = (content) => {
     request?.abort();
     const currentRequest = new AbortController();
     request = currentRequest;
@@ -344,7 +366,7 @@ function createPageRenderer(options) {
     });
   };
   return {
-    render,
+    render: render2,
     stop: () => {
       request?.abort();
     }
@@ -501,12 +523,202 @@ function caretRangeAt(document2, point) {
   return lookup.caretRangeFromPoint?.(point.x, point.y) ?? void 0;
 }
 
+// src/bridge/rich-text-editing.ts
+var EDITABLE = "true";
+var PASTED_LINE_BREAKS = /\s*\n\s*/gu;
+var SPACE = " ";
+function canEditRichTextInPlace(element, value, isInline) {
+  if (hasMarkedDescendants(element)) return false;
+  const normalized = readRichText(value) ?? [];
+  const expected = isInline ? asOneParagraph(normalized) : normalized;
+  const shown = readTextOf(element, isInline);
+  return JSON.stringify(shown) === JSON.stringify(expected);
+}
+function startRichTextEditing(element, options) {
+  const document2 = element.ownerDocument;
+  const view = document2.defaultView;
+  let lastSelection;
+  let reportFrame;
+  let blurTimer;
+  const readText = () => readTextOf(element, options.isInline);
+  const liveSelection = () => isSelectionIn(element) ? readSelectionFrom(element) : void 0;
+  const reportSelection = () => {
+    reportFrame = void 0;
+    options.onSelect(measureSelection(element, readText(), lastSelection));
+  };
+  const scheduleReport = () => {
+    if (reportFrame !== void 0) return;
+    reportFrame = view?.requestAnimationFrame(reportSelection);
+  };
+  const followSelection = () => {
+    const selection = document2.hasFocus() ? liveSelection() : void 0;
+    if (selection === void 0) return;
+    lastSelection = selection;
+    scheduleReport();
+  };
+  const reportInput = () => {
+    options.onInput(readText());
+    followSelection();
+  };
+  const change = (changed, selection) => {
+    render(element, changed, options.isInline);
+    lastSelection = selection;
+    if (document2.hasFocus()) selectIn(element, selection);
+    options.onInput(changed);
+    scheduleReport();
+  };
+  const format = (requested) => {
+    const selection = liveSelection() ?? lastSelection;
+    const isListInLine = requested === "list" && options.isInline;
+    if (selection === void 0 || isListInLine) return;
+    const current = readText();
+    const changed = requested === "list" ? toggleList(current, selection) : toggleMark(current, selection, requested);
+    change(changed, selection);
+  };
+  const linkTo = (href) => {
+    const selection = lastSelection;
+    if (selection === void 0) return;
+    const current = readText();
+    const target = isCollapsed(selection) ? linkSelectionAt(current, selection.start) : selection;
+    if (target === void 0) return;
+    change(setLink(current, target, href), selection);
+  };
+  const pressKey = (event) => {
+    const isEnd = event.key === "Enter" && options.isInline && !event.shiftKey;
+    const shortcut = formatShortcutOf(event);
+    if (event.key === "Escape") {
+      event.preventDefault();
+      end("reverted");
+    } else if (isEnd) {
+      event.preventDefault();
+      end("kept");
+    } else if (shortcut !== void 0) {
+      event.preventDefault();
+      if (shortcut !== "none") format(shortcut);
+    }
+  };
+  const pastePlainText = (event) => {
+    event.preventDefault();
+    const pasted = event.clipboardData?.getData("text/plain") ?? "";
+    const words = options.isInline ? pasted.replace(PASTED_LINE_BREAKS, SPACE) : pasted;
+    insertPlainText(element, words);
+    reportInput();
+  };
+  const refuseDrop = (event) => {
+    event.preventDefault();
+  };
+  const endOnBlur = () => {
+    clearTimeout(blurTimer);
+    blurTimer = setTimeout(() => {
+      const isFocusOnPage = document2.hasFocus();
+      const isFocusInText = document2.activeElement === element;
+      if (isFocusOnPage && !isFocusInText) end("kept");
+    });
+  };
+  const stopListening = () => {
+    clearTimeout(blurTimer);
+    if (reportFrame !== void 0) view?.cancelAnimationFrame(reportFrame);
+    element.removeEventListener("input", reportInput);
+    element.removeEventListener("keydown", pressKey);
+    element.removeEventListener("paste", pastePlainText);
+    element.removeEventListener("drop", refuseDrop);
+    element.removeEventListener("blur", endOnBlur);
+    document2.removeEventListener("selectionchange", followSelection);
+    document2.removeEventListener("scroll", scheduleReport, true);
+    view?.removeEventListener("resize", scheduleReport);
+    element.removeAttribute("contenteditable");
+  };
+  let hasEnded = false;
+  const end = (outcome) => {
+    if (hasEnded) return;
+    hasEnded = true;
+    stopListening();
+    options.onSelect(void 0);
+    options.onEnd(outcome);
+  };
+  element.setAttribute("contenteditable", EDITABLE);
+  element.addEventListener("input", reportInput);
+  element.addEventListener("keydown", pressKey);
+  element.addEventListener("paste", pastePlainText);
+  element.addEventListener("drop", refuseDrop);
+  element.addEventListener("blur", endOnBlur);
+  document2.addEventListener("selectionchange", followSelection);
+  document2.addEventListener("scroll", scheduleReport, true);
+  view?.addEventListener("resize", scheduleReport);
+  element.focus();
+  return {
+    format,
+    setLink: linkTo,
+    stop: () => {
+      end("kept");
+    }
+  };
+}
+function readTextOf(element, isInline) {
+  const read = readRichTextFrom(element);
+  return isInline ? asOneParagraph(read) : read;
+}
+function render(element, text, isInline) {
+  if (isInline) renderInlineRichText(element, text);
+  else renderRichText(element, text);
+}
+function measureSelection(element, text, selection) {
+  if (selection === void 0) return void 0;
+  const range = isSelectionIn(element) ? element.ownerDocument.getSelection()?.getRangeAt(0) : rangeOf(element, selection);
+  const box = (range === void 0 ? void 0 : boxOfRange(range)) ?? boxOf(element);
+  if (box === void 0) return void 0;
+  return {
+    box,
+    isCollapsed: isCollapsed(selection),
+    formats: formatsAt(text, selection)
+  };
+}
+function boxOfRange(range) {
+  const whole = range.getBoundingClientRect();
+  const rectangle = whole.width > 0 || whole.height > 0 ? whole : range.getClientRects()[0];
+  if (rectangle === void 0) return void 0;
+  const isShown = rectangle.width > 0 || rectangle.height > 0;
+  if (!isShown) return void 0;
+  return {
+    top: rectangle.top,
+    left: rectangle.left,
+    width: rectangle.width,
+    height: rectangle.height
+  };
+}
+function isSelectionIn(element) {
+  const selection = element.ownerDocument.getSelection();
+  const anchor = selection?.anchorNode ?? null;
+  const hasRange = (selection?.rangeCount ?? 0) > 0;
+  return hasRange && anchor !== null && element.contains(anchor);
+}
+function formatShortcutOf(event) {
+  const hasCommandKey = event.metaKey || event.ctrlKey;
+  if (!hasCommandKey || event.altKey || event.shiftKey) return void 0;
+  switch (event.code) {
+    case "KeyB":
+      return "bold";
+    case "KeyI":
+      return "italic";
+    case "KeyU":
+      return "none";
+    default:
+      return void 0;
+  }
+}
+
 // src/bridge/page-typing.ts
 function createPageTyping(options) {
   let stopEditing;
+  let richEditing;
   const stop = () => {
     stopEditing?.();
   };
+  const ended = (path) => (outcome) => {
+    stopEditing = void 0;
+    richEditing = void 0;
+    options.send({ type: "typing-ended", path, outcome });
+  };
   const start = (request) => {
     stop();
     const { path } = request;
@@ -523,14 +735,43 @@ function createPageTyping(options) {
         options.send({ type: "typed", path, text });
         options.onInput();
       },
-      onEnd: (outcome) => {
-        stopEditing = void 0;
-        options.send({ type: "typing-ended", path, outcome });
-      }
+      onEnd: ended(path)
     });
     placeCaretAt(element, request.point);
   };
-  return { isTyping: () => stopEditing !== void 0, start, stop };
+  const startRich = (request) => {
+    stop();
+    const { path, isInline } = request;
+    const element = findMarkedElement(options.document, path);
+    const canType = element !== void 0 && canEditRichTextInPlace(element, request.text, isInline);
+    if (!canType) {
+      options.send({ type: "typing-refused", path });
+      return;
+    }
+    options.send({ type: "typing-started", path });
+    const editing = startRichTextEditing(element, {
+      isInline,
+      onInput: (text) => {
+        options.send({ type: "rich-typed", path, text });
+        options.onInput();
+      },
+      onSelect: (selection) => {
+        options.send({ type: "typed-selection", path, selection });
+      },
+      onEnd: ended(path)
+    });
+    richEditing = editing;
+    stopEditing = editing.stop;
+    placeCaretAt(element, request.point);
+  };
+  return {
+    isTyping: () => stopEditing !== void 0,
+    start,
+    startRich,
+    format: (format) => richEditing?.format(format),
+    setLink: (href) => richEditing?.setLink(href),
+    stop
+  };
 }
 
 // src/bridge/connect-to-editor.ts
@@ -624,6 +865,15 @@ function connectPage(document2, schema, send) {
       case "start-typing":
         typing.start(message);
         break;
+      case "start-rich-typing":
+        typing.startRich(message);
+        break;
+      case "format-typed":
+        typing.format(message.format);
+        break;
+      case "link-typed":
+        typing.setLink(message.href);
+        break;
       case "stop-typing":
         typing.stop();
         break;