@seamlet/astro 0.6.0 → 0.8.0

package/README.md

@@ -78,22 +78,23 @@ The site's pages take their published content with `site.loadPublishedContent()`
 
 ## Fields
 
-| Builder                                   | Holds                                                                   | Empty            |
-| ----------------------------------------- | ----------------------------------------------------------------------- | ---------------- |
-| `text({ label, multiline?, maxLength? })` | a string                                                                | `""`             |
-| `number({ label, min?, max? })`           | a number                                                                | `null`           |
-| `date({ label })`                         | `YYYY-MM-DD`                                                            | `null`           |
-| `time({ label })`                         | `HH:MM`, 00:00 to 23:59                                                 | `null`           |
-| `image({ label })`                        | `{ src, alt }`                                                          | `null`           |
-| `link({ label })`                         | `{ text, href }`: a page of the site, another site, a phone or an email | `null`           |
-| `url({ label })`                          | a web address without a text: a booking widget, a map                   | `null`           |
-| `toggle({ label })`                       | `true` or `false`                                                       | `false`          |
-| `choice({ label, options })`              | the `value` of one option                                               | `null`           |
-| `choices({ label, options })`             | the `value`s of any number of options                                   | `[]`             |
-| `reference({ label, collection })`        | the `id` of a record of a collection of the schema                      | `null`           |
-| `references({ label, collection })`       | the `id`s of any number of such records                                 | `[]`             |
-| `group({ label, fields })`                | named fields shown together                                             | each field empty |
-| `collection({ label, item, itemTitle? })` | a list of records of the same fields                                    | `[]`             |
+| Builder                                    | Holds                                                                   | Empty            |
+| ------------------------------------------ | ----------------------------------------------------------------------- | ---------------- |
+| `text({ label, multiline?, maxLength? })`  | a string                                                                | `""`             |
+| `richText({ label, inline?, maxLength? })` | paragraphs and lists of pieces, bold, italic or links (below)           | `[]`             |
+| `number({ label, min?, max? })`            | a number                                                                | `null`           |
+| `date({ label })`                          | `YYYY-MM-DD`                                                            | `null`           |
+| `time({ label })`                          | `HH:MM`, 00:00 to 23:59                                                 | `null`           |
+| `image({ label })`                         | `{ src, alt }`                                                          | `null`           |
+| `link({ label })`                          | `{ text, href }`: a page of the site, another site, a phone or an email | `null`           |
+| `url({ label })`                           | a web address without a text: a booking widget, a map                   | `null`           |
+| `toggle({ label })`                        | `true` or `false`                                                       | `false`          |
+| `choice({ label, options })`               | the `value` of one option                                               | `null`           |
+| `choices({ label, options })`              | the `value`s of any number of options                                   | `[]`             |
+| `reference({ label, collection })`         | the `id` of a record of a collection of the schema                      | `null`           |
+| `references({ label, collection })`        | the `id`s of any number of such records                                 | `[]`             |
+| `group({ label, fields })`                 | named fields shown together                                             | each field empty |
+| `collection({ label, item, itemTitle? })`  | a list of records of the same fields                                    | `[]`             |
 
 Options are `{ value, label }`: the site reads `value`, the editor shows `label`, so a label can change without touching the site. The content has their exact type:
 
@@ -141,6 +142,30 @@ export default defineSeamletSite({
 });
 ```
 
+A text with a link in a sentence, bold words or a list is one `richText` field, not a text cut around the link. Its value is data, never HTML: paragraphs (`{ kind: "paragraph", spans }`) and lists (`{ kind: "list", items }`) of pieces `{ text, bold?, italic?, href? }`, where `href` leads where a `link` may. `inline` keeps it one paragraph without lists, for a text inside an element that holds one line. A saved plain string is read as paragraphs, so a `text` field turned into `richText` keeps its words. Render it with the component of the package, which puts out paragraphs and lists (or, with `inline`, the words alone) and never raw HTML; style its elements from around it:
+
+```astro
+---
+import RichText from "@seamlet/astro/components/RichText.astro";
+---
+
+<div class="about" {...edit("about")}>
+  <RichText value={content.about} />
+</div>
+<p {...edit("note")}>
+  <RichText value={content.note} inline />
+</p>
+<style>
+  .about :global(a) {
+    color: inherit;
+  }
+</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
 
 Sets of fields almost every site has, edited the same way everywhere; they are plain groups and collections, rendered as the site likes:
@@ -193,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/components/RichLine.astro

@@ -0,0 +1,37 @@
+---
+// The pieces of one line of formatted text with their marks.
+import { linkTargetOf, type RichLine } from "@seamlet/astro/schema";
+
+interface Props {
+  readonly spans: RichLine;
+}
+
+const LINE_BREAK = "\n";
+
+const { spans } = Astro.props;
+const pieces = spans.map((span) => ({
+  ...span,
+  lines: span.text.split(LINE_BREAK),
+  // Content is checked when it is saved; a site never renders an address a link may not have.
+  safeHref:
+    span.href !== undefined && linkTargetOf(span.href) !== undefined
+      ? span.href
+      : undefined,
+}));
+---
+
+{pieces.map((piece) => {
+  const words = piece.lines.map((line, index) => (
+    <>
+      {index > 0 && <br />}
+      {line}
+    </>
+  ));
+  const italic = piece.italic === true ? <em>{words}</em> : words;
+  const bold = piece.bold === true ? <strong>{italic}</strong> : italic;
+  return piece.safeHref === undefined ? (
+    bold
+  ) : (
+    <a href={piece.safeHref}>{bold}</a>
+  );
+})}

package/components/RichText.astro

@@ -0,0 +1,42 @@
+---
+// Formatted text of the CMS as the site's own elements: paragraphs and lists, or, with `inline`,
+// the words alone for an element that holds one line (`<p>`, `<h2>`). Nothing is rendered as raw
+// HTML, and a link leads only where linkTargetOf allows. The site styles the elements from
+// around it: `.about :global(a)`.
+import type { RichText } from "@seamlet/astro/schema";
+import RichLine from "./RichLine.astro";
+
+interface Props {
+  readonly value: RichText;
+  /** Only the words, without paragraphs and lists; its lines are joined with line breaks. */
+  readonly inline?: boolean;
+}
+
+const { value, inline = false } = Astro.props;
+const lines = value.flatMap((block) =>
+  block.kind === "paragraph" ? [block.spans] : block.items,
+);
+---
+
+{inline
+  ? lines.map((line, index) => (
+      <>
+        {index > 0 && <br />}
+        <RichLine spans={line} />
+      </>
+    ))
+  : value.map((block) =>
+      block.kind === "paragraph" ? (
+        <p>
+          <RichLine spans={block.spans} />
+        </p>
+      ) : (
+        <ul>
+          {block.items.map((item) => (
+            <li>
+              <RichLine spans={item} />
+            </li>
+          ))}
+        </ul>
+      ),
+    )}

package/dist/bridge.d.ts

@@ -1,6 +1,6 @@
-import { F as Fields } from './content-C_WpiWBm.js';
-import { P as PageMessage, E as EditorMessage } from './messages-CBf5diaN.js';
-import './parse-content-9RIWhb6z.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,16 +2,31 @@ import {
   PROTOCOL_VERSION,
   carriesFiles,
   closestMarkedPath,
+  formatsAt,
   imageFieldAt,
+  insertPlainText,
+  isCollapsed,
+  linkSelectionAt,
+  rangeOf,
   readEditorMessage,
-  shortcutOf
-} from "./chunk-XCBYYKWR.js";
+  readRichTextFrom,
+  readSelectionFrom,
+  renderInlineRichText,
+  renderRichText,
+  selectIn,
+  setLink,
+  shortcutOf,
+  toggleList,
+  toggleMark
+} from "./chunk-27XIZEVS.js";
 import {
   FIELD_PATH_ATTRIBUTE,
   REVEALED_ATTRIBUTE,
   REVEAL_ATTRIBUTE,
-  REVEAL_EVENT
-} from "./chunk-GLXC5OLC.js";
+  REVEAL_EVENT,
+  asOneParagraph,
+  readRichText
+} from "./chunk-ZUJEM3P7.js";
 
 // src/bridge/page-markers.ts
 var MARKER_SELECTOR = `[${FIELD_PATH_ATTRIBUTE}]`;
@@ -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;