storyloco 2.9.0 → 2.10.0

package/README.md

@@ -17,6 +17,7 @@ A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, a
 - **⏰ Time** - Simple time input field with step control
 - **💷 Currency** - Amount input with a currency selector; configure allowed codes via the `currencies` and `default_currency` options
 - **📅 Dates** - List of dates, each with an optional time, end date and end time, plus a timezone picker; configure via the `min`, `max` and `auto_sort` options
+- **⛪ ChurchSuite Categories** - Multi-select of ChurchSuite calendar categories, read from your site's endpoint via the `endpoint` option
 
 ### Vite Plugins
 
@@ -270,6 +271,109 @@ await client.get('cdn/datasource_entries', { version })
 
 Errors go through `client.handle_error`, so a missing story is a 404 and anything else a 500, shaped by the client's `error` option.
 
+### Edit on the Site
+
+Anyone with a role in the space can edit the real site in place, signed in with their own
+Storyblok account, so their permissions apply and every change is credited to them. Changes
+save as drafts; Publish in the corner badge lists what will go live, block by block, first.
+
+It needs the **Site Editor** app installed in the space (Storyblok › Apps), with the site's
+origin allowed on the app's page. `localhost` always is, and a pattern like
+`https://*-team.vercel.app` covers every preview. Then three lines:
+
+```typescript
+// hooks.server.ts
+import { editor } from 'storyloco/editor/server'
+
+export const handle = sequence(editor, version /* , ...the rest */)
+```
+
+```svelte
+<!-- +layout.svelte -->
+<script lang="ts">
+	import { EditBar } from 'storyloco/editor'
+</script>
+
+<EditBar />
+```
+
+```typescript
+// app.d.ts
+interface Locals {
+	editor?: import('storyloco/editor/server').Editor
+}
+```
+
+A site with a Content Security Policy needs `wss://moxy.uilo.co` in its `connect-src`, for the
+multiplayer socket, and `'self'` in its `frame-ancestors`, for the phone and tablet preview.
+
+A site that picks its own content version rather than using `version` asks `editor_version(event)`
+first: draft for editors and guests, published for the live view. A site that caches pages at
+its CDN (`s-maxage`) needs editors, and guests (`sl_guest…`), on a cache key of their own, or
+whoever signs in on the live site is handed the cached visitor page, with no edit bar. The CDN
+answers before the hook runs and won't vary on cookies, so it takes Routing Middleware: when a
+request carries an `sl_editor…` cookie, rewrite it onto a `?_storyloco=1` URL, and never cache
+responses there.
+
+No secrets: sign-in runs through moxy, and the space comes from `STORYBLOK_SPACE_ID` or the
+site's public token. Blocks that spread `attrs(blok)` are editable as they are; nothing marks
+fields up. With edit mode on (the badge's switch, or **E**):
+
+- **Text** edits where it is, matched to its field by what it shows. Body copy edits in place
+  as rich text, with the site's own styles.
+- **Images** offer Replace: the space's library or an upload, with alt text and a focus point.
+- **Blocks** get a toolbar on hover to move, duplicate, add after or delete (with Undo), and a
+  click opens every field of the block from its schema, nested blocks included. Drag a block
+  by its name in the toolbar to put it anywhere in its list.
+- **AI** suggests an image's alt text in the image picker, and rewrites a selection or
+  paragraph of rich text shorter, friendlier, clearer, or with its spelling fixed.
+- **Other stories** shown on the page, like cards listing the latest articles, edit as those
+  stories: their text and images where they show, and a click opens them.
+- **Video** uploads to Mux when the space has the Mux app connected.
+- **Undo** takes back any change made from the page, and Redo makes it again: **⌘Z** and
+  **⇧⌘Z** (Ctrl+Z and Ctrl+Y) outside a field, or the badge's arrows.
+- **Someone else** saving the page in Storyblok while it's open shows a note with Refresh.
+- **⌘K** (Ctrl+K), or the badge's ⌘ button, finds a page, a block on this one, or something
+  to do: make a new page, ask someone to review this one, or preview it at phone or tablet size.
+- **History** goes back through the page's saves on a timeline, the page showing itself as it
+  was at each one, and restores any of them as the draft (with Undo). Pages that `connect()`
+  their story show it in place; others list what restoring would change.
+- **Compare with live** (⌘K, or from Publish) flips the page between the draft and what
+  visitors see now, scrolled to the same place (**L**), with the blocks that aren't live yet
+  marked on the draft.
+- **Share** the draft, like a Google Doc, with people who don't edit in Storyblok: invite them
+  by email (they sign in from the link, once), or let anyone with the link look. Guests see the
+  draft and, if they can comment, comment; someone from the link confirms their email with a
+  code first, so no comment is anonymous. Guests never edit, resolve, or get a Storyblok token,
+  and their pages aren't cached or indexed.
+
+Everyone editing a site at once sees each other. Each person has a colour: their pointer and
+name move over the page, what they've selected is outlined, and their avatars sit by the
+badge. Text and rich text type together, letters merging as they're typed with everyone's
+caret showing, and saves to the same story take turns, so no one's change is lost.
+
+- **Follow** someone by clicking their avatar: the page goes where they go and scrolls with
+  them. Scroll yourself, or press Escape, to stop.
+- **Say something** by your pointer with **/**; the others see it as it's typed.
+- **Comment** with **C**, or the badge's speech bubble, then click where it goes. Threads take
+  replies, @mentions and Resolve. Anyone in one, or mentioned, finds it under the badge's bell,
+  its unread count on the badge, and gets a browser notification too once they've chosen
+  Notify me. A review request lands there too, and anything left unread for 15 minutes is
+  emailed, guests' included.
+
+Visitors never see any of it. On the live site, press **⌘⇧E** (Ctrl+Shift+E) or add `?edit` to
+any address to sign in; once signed in, the badge shows on every page, and ⌘⇧E or **E** turns
+edit mode on and off. In development the badge is always there.
+
+Links inside content don't navigate in edit mode; hold ⌘ or Ctrl to follow one. Match the
+editor to a site with `--storyloco-bar-bg`, `-ink`, `-muted`, `-line`, `-font` and
+`--storyloco-accent`, or build a bar of your own from `editor`, `set_editing`, `publish`,
+`signin` and `signout`.
+
+`bun run smoke <site url>…` (in `packages/vite`) checks each site loads and, signed in, that a
+click on a block opens its settings. Sign in once per site with `--signin`, which opens a
+window; later runs reuse it without one.
+
 ### Use Shared Components
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "storyloco",
-	"version": "2.9.0",
+	"version": "2.10.0",
 	"description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
 	"keywords": [
 		"storyblok",
@@ -36,7 +36,8 @@
 		"packages/seo/types.ts",
 		"packages/hubspot_form/types.ts",
 		"packages/currency/types.ts",
-		"packages/dates/types.ts"
+		"packages/dates/types.ts",
+		"packages/churchsuite_categories/types.ts"
 	],
 	"exports": {
 		".": {
@@ -83,6 +84,15 @@
 			"types": "./packages/vite/dist/server.d.ts",
 			"import": "./packages/vite/dist/server.js"
 		},
+		"./editor": {
+			"types": "./packages/vite/dist/editor/index.d.ts",
+			"svelte": "./packages/vite/dist/editor/index.js",
+			"import": "./packages/vite/dist/editor/index.js"
+		},
+		"./editor/server": {
+			"types": "./packages/vite/dist/editor/server.d.ts",
+			"import": "./packages/vite/dist/editor/server.js"
+		},
 		"./time": {
 			"types": "./packages/time/types.ts",
 			"svelte": "./packages/time/src/app.svelte.ts"
@@ -105,6 +115,9 @@
 		"./dates": {
 			"types": "./packages/dates/types.ts",
 			"svelte": "./packages/dates/src/app.svelte.ts"
+		},
+		"./churchsuite_categories": {
+			"types": "./packages/churchsuite_categories/types.ts"
 		}
 	},
 	"devDependencies": {
@@ -134,7 +147,34 @@
 		"packages/*"
 	],
 	"dependencies": {
+		"@tiptap/core": "^3.32.0",
+		"@tiptap/extension-blockquote": "^3.32.0",
+		"@tiptap/extension-bold": "^3.32.0",
+		"@tiptap/extension-code": "^3.32.0",
+		"@tiptap/extension-code-block": "^3.32.0",
+		"@tiptap/extension-collaboration": "^3.32.0",
+		"@tiptap/extension-collaboration-caret": "^3.32.0",
+		"@tiptap/extension-document": "^3.32.0",
+		"@tiptap/extension-hard-break": "^3.32.0",
+		"@tiptap/extension-heading": "^3.32.0",
+		"@tiptap/extension-highlight": "^3.32.0",
+		"@tiptap/extension-horizontal-rule": "^3.32.0",
+		"@tiptap/extension-image": "^3.32.0",
+		"@tiptap/extension-italic": "^3.32.0",
+		"@tiptap/extension-link": "^3.32.0",
+		"@tiptap/extension-list": "^3.32.0",
+		"@tiptap/extension-paragraph": "^3.32.0",
+		"@tiptap/extension-strike": "^3.32.0",
+		"@tiptap/extension-subscript": "^3.32.0",
+		"@tiptap/extension-superscript": "^3.32.0",
+		"@tiptap/extension-table": "^3.32.0",
+		"@tiptap/extension-text": "^3.32.0",
+		"@tiptap/extension-underline": "^3.32.0",
+		"@tiptap/pm": "^3.32.0",
+		"@tiptap/y-tiptap": "^3.0.10",
 		"ora": "9.4.1",
-		"path-to-regexp": "8.4.2"
+		"path-to-regexp": "8.4.2",
+		"y-protocols": "^1.0.7",
+		"yjs": "^13.6.33"
 	}
 }

package/packages/churchsuite_categories/types.ts

@@ -0,0 +1,9 @@
+export interface ChurchsuiteCategory {
+	id: number
+	name: string
+	colour?: string
+}
+
+// the chosen ChurchSuite calendar category ids; the same shape the legacy
+// churchsuite-event-categories plugin saved, so old values load as they are
+export type ChurchsuiteCategories = Array<number>

package/packages/vite/dist/editor/anchor.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Where a comment's pin sits inside its block, finer than a fraction of the block: the element it's on, by
+ * its place under the block, and the character when it's on text. A block reflows at another width, its
+ * text rewrapping, and the pin follows the word it was put on.
+ */
+export type Anchor = {
+    /** Child indexes from the block down to the element */
+    path: Array<number>;
+    tag: string;
+    /** Where on the element, or on the character, as a fraction of its box */
+    fx: number;
+    fy: number;
+    /** The character, as an offset into the element's text, and the text from there to find it again by */
+    at?: number;
+    near?: string;
+};
+/** The anchor for a point on an element inside a block; null when it isn't inside */
+export declare function anchor_at(block: Element, under: Element, x: number, y: number): Anchor | null;
+/** Where an anchor is on screen now; null when the block's changed so it isn't there any more */
+export declare function anchored(block: Element, anchor: Anchor): {
+    x: number;
+    y: number;
+} | null;

package/packages/vite/dist/editor/anchor.js

@@ -0,0 +1,92 @@
+const NEAR = 16;
+const within = (box, x, y) => x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
+/** The character under a point among an element's text, as its text node and offset */
+function character_at(el, x, y) {
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    const range = document.createRange();
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        range.selectNodeContents(node);
+        if (![...range.getClientRects()].some((box) => within(box, x, y)))
+            continue;
+        for (let i = 0; i < node.length; i++) {
+            range.setStart(node, i);
+            range.setEnd(node, i + 1);
+            const box = [...range.getClientRects()].find((b) => within(b, x, y));
+            if (box)
+                return { node, i, box };
+        }
+    }
+    return null;
+}
+/** The anchor for a point on an element inside a block; null when it isn't inside */
+export function anchor_at(block, under, x, y) {
+    if (!block.contains(under))
+        return null;
+    const hit = character_at(under, x, y);
+    const el = hit?.node.parentElement ?? under;
+    const path = [];
+    for (let at = el; at !== block; at = at.parentElement)
+        path.unshift([...at.parentElement.children].indexOf(at));
+    let on = null;
+    if (hit) {
+        const before = document.createRange();
+        before.setStart(el, 0);
+        before.setEnd(hit.node, hit.i);
+        const at = before.toString().length;
+        const near = (el.textContent ?? "").slice(at, at + NEAR);
+        // all space is nothing to find it by
+        if (near.trim())
+            on = { at, near };
+    }
+    const box = on ? hit.box : el.getBoundingClientRect();
+    return {
+        path,
+        tag: el.localName,
+        fx: box.width ? (x - box.left) / box.width : 0,
+        fy: box.height ? (y - box.top) / box.height : 0,
+        ...on,
+    };
+}
+/** Where an anchor is on screen now; null when the block's changed so it isn't there any more */
+export function anchored(block, anchor) {
+    let el = block;
+    for (const i of anchor.path)
+        el = el?.children[i];
+    if (!el || el.localName !== anchor.tag)
+        return null;
+    if (anchor.at === undefined || !anchor.near) {
+        const box = el.getBoundingClientRect();
+        if (!box.width && !box.height)
+            return null;
+        return { x: box.left + anchor.fx * box.width, y: box.top + anchor.fy * box.height };
+    }
+    // the same words, where they were or as near there as they've moved to with an edit
+    const text = el.textContent ?? "";
+    const after = text.indexOf(anchor.near, anchor.at);
+    const before = text.lastIndexOf(anchor.near, anchor.at);
+    const at = after < 0
+        ? before
+        : before < 0
+            ? after
+            : after - anchor.at < anchor.at - before
+                ? after
+                : before;
+    if (at < 0)
+        return null;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let left = at;
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        if (left >= node.length) {
+            left -= node.length;
+            continue;
+        }
+        const range = document.createRange();
+        range.setStart(node, left);
+        range.setEnd(node, left + 1);
+        const box = range.getClientRects()[0];
+        if (!box)
+            return null;
+        return { x: box.left + anchor.fx * box.width, y: box.top + anchor.fy * box.height };
+    }
+    return null;
+}